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 --- .../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 - 193 files changed, 25931 insertions(+), 26026 deletions(-) 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 (limited to 'files/es/learn') 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.

-- cgit v1.2.3-54-g00ecf From 8a5554c6fae83e92b10c8dbe5b82108cb44fad6c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:51 +0100 Subject: unslug es: modify --- files/es/_redirects.txt | 3122 ++- files/es/_wikihistory.json | 27746 +++++++++---------- files/es/conflicting/glossary/doctype/index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../learn/css/building_blocks/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../building_blocks/values_and_units/index.html | 3 +- .../es/conflicting/learn/css/css_layout/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- .../index.html | 6 +- .../index.html | 4 +- .../conflicting/learn/css/first_steps/index.html | 5 +- .../learn/css/styling_text/fundamentals/index.html | 3 +- files/es/conflicting/learn/forms/index.html | 3 +- .../getting_started/index.html | 3 +- .../video_and_audio_content/index.html | 3 +- files/es/conflicting/learn/index.html | 3 +- .../learn/javascript/objects/index.html | 3 +- .../mdn/contribute/getting_started/index.html | 3 +- files/es/conflicting/mdn/tools/index.html | 3 +- files/es/conflicting/mdn/yari/index.html | 3 +- .../index.html | 3 +- files/es/conflicting/mozilla/add-ons/index.html | 3 +- .../tools/about_colon_debugging/index.html | 5 +- files/es/conflicting/tools/performance/index.html | 3 +- .../web/api/canvas_api/tutorial/index.html | 3 +- .../web/api/crypto/getrandomvalues/index.html | 3 +- .../web/api/document_object_model/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- .../es/conflicting/web/api/geolocation/index.html | 3 +- .../web/api/html_drag_and_drop_api/index.html | 3 +- files/es/conflicting/web/api/index.html | 3 +- .../conflicting/web/api/indexeddb_api/index.html | 3 +- files/es/conflicting/web/api/node/index.html | 3 +- files/es/conflicting/web/api/push_api/index.html | 3 +- files/es/conflicting/web/api/url/index.html | 3 +- .../conflicting/web/api/web_storage_api/index.html | 3 +- files/es/conflicting/web/api/webrtc_api/index.html | 3 +- .../conflicting/web/api/websockets_api/index.html | 3 +- .../web/api/window/localstorage/index.html | 3 +- .../web/api/windoworworkerglobalscope/index.html | 3 +- .../index.html | 3 +- .../index.html | 3 +- files/es/conflicting/web/css/@viewport/index.html | 3 +- .../index.html | 3 +- .../web/css/_colon_placeholder-shown/index.html | 7 +- .../index.html | 7 +- .../web/css/_doublecolon_placeholder/index.html | 7 +- .../index.html | 7 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../typical_use_cases_of_flexbox/index.html | 3 +- files/es/conflicting/web/css/cursor/index.html | 3 +- .../es/conflicting/web/css/font-variant/index.html | 3 +- files/es/conflicting/web/css/width/index.html | 5 +- files/es/conflicting/web/guide/index.html | 3 +- files/es/conflicting/web/guide/mobile/index.html | 3 +- files/es/conflicting/web/html/element/index.html | 3 +- .../web/html/global_attributes/index.html | 3 +- .../html/global_attributes/spellcheck/index.html | 3 +- .../web/http/basics_of_http/mime_types/index.html | 3 +- files/es/conflicting/web/http/csp/index.html | 3 +- .../index.html | 3 +- .../headers/content-security-policy/index.html | 3 +- .../global_objects/arraybuffer/index.html | 3 +- .../reference/global_objects/date/index.html | 3 +- .../reference/global_objects/error/index.html | 3 +- .../reference/global_objects/function/index.html | 3 +- .../reference/global_objects/map/index.html | 3 +- .../reference/global_objects/number/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/promise/index.html | 3 +- .../reference/global_objects/rangeerror/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../global_objects/syntaxerror/index.html | 3 +- .../reference/global_objects/weakmap/index.html | 3 +- .../reference/lexical_grammar/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../reference/operators/spread_syntax/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../reference/statements/switch/index.html | 3 +- files/es/conflicting/web/media/formats/index.html | 3 +- files/es/conflicting/web/opensearch/index.html | 3 +- .../web/progressive_web_apps/index.html | 3 +- .../progressive_web_apps/introduction/index.html | 3 +- .../using_custom_elements/index.html | 3 +- files/es/games/introduction/index.html | 3 +- .../index.html | 3 +- .../publishing_games/game_monetization/index.html | 3 +- files/es/games/tools/asm.js/index.html | 3 +- files/es/games/tools/index.html | 3 +- .../bounce_off_the_walls/index.html | 3 +- .../2d_breakout_game_phaser/buttons/index.html | 3 +- .../bounce_off_the_walls/index.html | 3 +- .../build_the_brick_field/index.html | 3 +- .../collision_detection/index.html | 3 +- .../create_the_canvas_and_draw_on_it/index.html | 4 +- .../finishing_up/index.html | 3 +- .../game_over/index.html | 3 +- .../2d_breakout_game_pure_javascript/index.html | 3 +- .../mouse_controls/index.html | 3 +- .../move_the_ball/index.html | 3 +- .../paddle_and_keyboard_controls/index.html | 3 +- .../track_the_score_and_win/index.html | 3 +- .../index.html | 3 +- files/es/games/tutorials/index.html | 3 +- files/es/glossary/algorithm/index.html | 3 +- files/es/glossary/argument/index.html | 3 +- files/es/glossary/array/index.html | 3 +- files/es/glossary/asynchronous/index.html | 3 +- files/es/glossary/attribute/index.html | 3 +- files/es/glossary/base64/index.html | 3 +- files/es/glossary/breadcrumb/index.html | 3 +- files/es/glossary/cache/index.html | 3 +- files/es/glossary/call_stack/index.html | 3 +- files/es/glossary/card_sorting/index.html | 3 +- files/es/glossary/character/index.html | 3 +- files/es/glossary/character_set/index.html | 3 +- files/es/glossary/cia/index.html | 3 +- files/es/glossary/cipher/index.html | 3 +- files/es/glossary/ciphertext/index.html | 3 +- files/es/glossary/closure/index.html | 3 +- files/es/glossary/cms/index.html | 3 +- files/es/glossary/constant/index.html | 3 +- files/es/glossary/cryptanalysis/index.html | 3 +- files/es/glossary/cryptography/index.html | 3 +- files/es/glossary/css_preprocessor/index.html | 3 +- files/es/glossary/data_structure/index.html | 3 +- files/es/glossary/decryption/index.html | 3 +- files/es/glossary/dhtml/index.html | 3 +- files/es/glossary/domain_name/index.html | 3 +- files/es/glossary/dynamic_typing/index.html | 3 +- files/es/glossary/encryption/index.html | 3 +- files/es/glossary/entity/index.html | 3 +- files/es/glossary/first-class_function/index.html | 3 +- files/es/glossary/forbidden_header_name/index.html | 3 +- files/es/glossary/function/index.html | 3 +- files/es/glossary/general_header/index.html | 3 +- files/es/glossary/identifier/index.html | 3 +- files/es/glossary/immutable/index.html | 3 +- .../glossary/information_architecture/index.html | 3 +- files/es/glossary/key/index.html | 3 +- files/es/glossary/localization/index.html | 3 +- files/es/glossary/main_thread/index.html | 3 +- files/es/glossary/metadata/index.html | 3 +- files/es/glossary/method/index.html | 3 +- files/es/glossary/number/index.html | 3 +- files/es/glossary/object/index.html | 3 +- files/es/glossary/operand/index.html | 3 +- files/es/glossary/operator/index.html | 3 +- files/es/glossary/plaintext/index.html | 3 +- files/es/glossary/preflight_request/index.html | 3 +- files/es/glossary/primitive/index.html | 3 +- files/es/glossary/property/index.html | 3 +- files/es/glossary/pseudo-class/index.html | 3 +- files/es/glossary/pseudocode/index.html | 3 +- files/es/glossary/recursion/index.html | 3 +- files/es/glossary/safe/index.html | 3 +- files/es/glossary/scm/index.html | 3 +- files/es/glossary/speculative_parsing/index.html | 3 +- files/es/glossary/statement/index.html | 3 +- files/es/glossary/static_typing/index.html | 3 +- files/es/glossary/synchronous/index.html | 3 +- files/es/glossary/type_coercion/index.html | 3 +- files/es/glossary/ui/index.html | 3 +- files/es/glossary/validator/index.html | 3 +- files/es/glossary/value/index.html | 3 +- files/es/glossary/whitespace/index.html | 3 +- files/es/glossary/xforms/index.html | 3 +- files/es/glossary/xhtml/index.html | 3 +- .../accessibility/what_is_accessibility/index.html | 3 +- .../common_questions/common_web_layouts/index.html | 3 +- .../how_much_does_it_cost/index.html | 3 +- .../common_questions/using_github_pages/index.html | 3 +- .../common_questions/what_is_a_url/index.html | 3 +- .../what_is_a_web_server/index.html | 3 +- .../what_software_do_i_need/index.html | 3 +- .../backgrounds_and_borders/index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../css/building_blocks/debugging_css/index.html | 3 +- .../fundamental_css_comprehension/index.html | 3 +- .../handling_different_text_directions/index.html | 3 +- .../images_media_form_elements/index.html | 5 +- .../building_blocks/overflowing_content/index.html | 3 +- .../selectors/attribute_selectors/index.html | 3 +- .../selectors/combinators/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../pseudo-classes_and_pseudo-elements/index.html | 3 +- .../type_class_and_id_selectors/index.html | 5 +- .../building_blocks/sizing_items_in_css/index.html | 3 +- .../css/building_blocks/the_box_model/index.html | 3 +- .../building_blocks/values_and_units/index.html | 3 +- .../learn/css/css_layout/introduction/index.html | 3 +- .../es/learn/css/css_layout/normal_flow/index.html | 3 +- .../css/css_layout/responsive_design/index.html | 3 +- .../supporting_older_browsers/index.html | 3 +- .../css/first_steps/getting_started/index.html | 3 +- .../first_steps/how_css_is_structured/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- .../using_your_new_knowledge/index.html | 3 +- .../learn/css/first_steps/what_is_css/index.html | 3 +- files/es/learn/css/howto/css_faq/index.html | 3 +- .../learn/css/howto/generated_content/index.html | 3 +- files/es/learn/css/howto/index.html | 3 +- .../es/learn/css/styling_text/web_fonts/index.html | 3 +- .../forms/basic_native_form_controls/index.html | 3 +- files/es/learn/forms/form_validation/index.html | 3 +- .../how_to_build_custom_form_controls/index.html | 3 +- .../forms/how_to_structure_a_web_form/index.html | 3 +- files/es/learn/forms/html5_input_types/index.html | 3 +- files/es/learn/forms/index.html | 3 +- .../index.html | 3 +- .../sending_and_retrieving_form_data/index.html | 3 +- files/es/learn/forms/styling_web_forms/index.html | 3 +- .../index.html | 5 +- .../index.html | 5 +- files/es/learn/forms/your_first_form/index.html | 3 +- files/es/learn/front-end_web_developer/index.html | 3 +- .../dealing_with_files/index.html | 5 +- .../how_the_web_works/index.html | 3 +- .../installing_basic_software/index.html | 5 +- .../the_web_and_web_standards/index.html | 3 +- .../author_fast-loading_html_pages/index.html | 3 +- files/es/learn/html/howto/index.html | 3 +- .../html/howto/use_data_attributes/index.html | 3 +- .../advanced_text_formatting/index.html | 3 +- .../creating_hyperlinks/index.html | 3 +- .../introduction_to_html/debugging_html/index.html | 3 +- .../document_and_website_structure/index.html | 3 +- .../getting_started/index.html | 3 +- .../html_text_fundamentals/index.html | 3 +- .../es/learn/html/introduction_to_html/index.html | 3 +- .../marking_up_a_letter/index.html | 3 +- .../structuring_a_page_of_content/index.html | 3 +- .../index.html | 5 +- .../index.html | 5 +- .../test_your_skills_colon__links/index.html | 5 +- .../the_head_metadata_in_html/index.html | 3 +- files/es/learn/html/tables/advanced/index.html | 3 +- files/es/learn/html/tables/basics/index.html | 3 +- files/es/learn/html/tables/index.html | 3 +- .../html/tables/structuring_planet_data/index.html | 3 +- .../build_your_own_function/index.html | 3 +- .../javascript/building_blocks/events/index.html | 3 +- .../building_blocks/image_gallery/index.html | 3 +- .../building_blocks/looping_code/index.html | 3 +- .../client-side_web_apis/introduction/index.html | 3 +- .../learn/javascript/first_steps/math/index.html | 5 +- .../first_steps/silly_story_generator/index.html | 3 +- .../test_your_skills_colon__strings/index.html | 5 +- .../first_steps/what_is_javascript/index.html | 3 +- .../objects/object_building_practice/index.html | 3 +- .../es/learn/learning_and_getting_help/index.html | 3 +- .../configuring_server_mime_types/index.html | 3 +- .../server-side/django/introduction/index.html | 3 +- .../first_steps/client-server_overview/index.html | 3 +- files/es/learn/server-side/first_steps/index.html | 3 +- .../first_steps/introduction/index.html | 3 +- .../first_steps/web_frameworks/index.html | 3 +- .../first_steps/website_security/index.html | 3 +- .../client-side_javascript_frameworks/index.html | 3 +- .../react_getting_started/index.html | 4 +- .../vue_getting_started/index.html | 5 +- .../cross_browser_testing/index.html | 3 +- files/es/learn/tools_and_testing/github/index.html | 3 +- files/es/learn/tools_and_testing/index.html | 3 +- .../understanding_client-side_tools/index.html | 3 +- files/es/mdn/at_ten/index.html | 3 +- files/es/mdn/contribute/processes/index.html | 3 +- .../guidelines/conventions_definitions/index.html | 3 +- files/es/mdn/guidelines/css_style_guide/index.html | 3 +- .../mdn/guidelines/writing_style_guide/index.html | 3 +- .../mdn/structures/compatibility_tables/index.html | 3 +- files/es/mdn/structures/live_samples/index.html | 3 +- files/es/mdn/structures/macros/other/index.html | 3 +- files/es/mdn/tools/kumascript/index.html | 3 +- files/es/mdn/yari/index.html | 3 +- .../anatomy_of_a_webextension/index.html | 3 +- .../add-ons/webextensions/prerequisites/index.html | 3 +- .../user_interface/browser_action/index.html | 3 +- .../what_are_webextensions/index.html | 3 +- .../your_first_webextension/index.html | 3 +- .../your_second_webextension/index.html | 3 +- .../developer_guide/build_instructions/index.html | 3 +- .../developer_guide/mozilla_build_faq/index.html | 3 +- .../developer_guide/source_code/cvs/index.html | 3 +- files/es/mozilla/firefox/releases/1.5/index.html | 3 +- files/es/mozilla/firefox/releases/19/index.html | 3 +- .../2/adding_feed_readers_to_firefox/index.html | 3 +- files/es/mozilla/firefox/releases/2/index.html | 3 +- .../firefox/releases/2/security_changes/index.html | 3 +- files/es/mozilla/firefox/releases/3.5/index.html | 3 +- .../firefox/releases/3/dom_improvements/index.html | 3 +- .../firefox/releases/3/full_page_zoom/index.html | 3 +- files/es/mozilla/firefox/releases/3/index.html | 3 +- .../releases/3/notable_bugs_fixed/index.html | 3 +- .../firefox/releases/3/svg_improvements/index.html | 3 +- .../firefox/releases/3/templates/index.html | 3 +- .../releases/3/updating_extensions/index.html | 3 +- .../3/updating_web_applications/index.html | 3 +- .../3/xul_improvements_in_firefox_3/index.html | 3 +- .../index.html | 4 +- .../index.html" | 4 +- files/es/orphaned/code_snippets/index.html | 3 +- .../pesta\303\261as_del_navegador/index.html" | 3 +- .../interior_del_componente/index.html" | 3 +- .../prefacio/index.html" | 3 +- .../creando_una_extensi\303\263n/index.html" | 3 +- .../index.html" | 4 +- "files/es/orphaned/css_din\303\241mico/index.html" | 3 +- files/es/orphaned/desarrollando_mozilla/index.html | 3 +- .../index.html" | 3 +- .../index.html | 3 +- .../index.html" | 3 +- .../index.html" | 3 +- .../etiquetas_audio_y_video_en_firefox/index.html | 3 +- .../index.html" | 3 +- .../es/orphaned/faq_incrustando_mozilla/index.html | 3 +- .../introduction_to_extensions/index.html | 3 +- .../index.html | 4 +- .../index.html | 3 +- .../fragmentos_de_c\303\263digo/index.html" | 3 +- files/es/orphaned/funciones/index.html | 3 +- .../generaci\303\263n_de_guids/index.html" | 3 +- files/es/orphaned/glossary/elemento/index.html | 3 +- .../index.html" | 3 +- .../index.html" | 2 + .../index.html" | 3 +- files/es/orphaned/herramientas/index.html | 3 +- .../es/orphaned/html/elemento/datalist/index.html | 3 +- files/es/orphaned/html/elemento/form/index.html | 3 +- files/es/orphaned/html/elemento/section/index.html | 3 +- .../incrustando_mozilla/comunidad/index.html | 3 +- .../index.html" | 3 +- .../es/orphaned/learn/how_to_contribute/index.html | 5 +- .../learn/html/forms/html5_updates/index.html | 3 +- files/es/orphaned/localizar_con_narro/index.html | 5 +- files/es/orphaned/mdn/community/index.html | 3 +- .../mdn/community/working_in_community/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../property_template/index.html | 3 +- .../howto/remove_experimental_macros/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../howto/tag_javascript_pages/index.html | 3 +- .../howto/use_navigation_sidebars/index.html | 3 +- .../index.html | 3 +- .../mdn/tools/page_regeneration/index.html | 3 +- .../orphaned/mdn/tools/template_editing/index.html | 3 +- .../index.html | 3 +- .../modo_casi_est\303\241ndar_de_gecko/index.html" | 3 +- .../add-ons/webextensions/debugging/index.html | 3 +- .../package_your_extension_/index.html | 3 +- .../porting_a_google_chrome_extension/index.html | 3 +- .../temporary_installation_in_firefox/index.html | 3 +- .../orphaned/m\303\263dulos_javascript/index.html" | 3 +- files/es/orphaned/nsdirectoryservice/index.html | 3 +- .../participar_en_el_proyecto_mozilla/index.html | 3 +- .../index.html" | 3 +- .../index.html" | 4 +- .../index.html" | 3 +- .../index.html | 3 +- files/es/orphaned/referencia_de_xul/index.html | 3 +- .../index.html" | 3 +- files/es/orphaned/storage/index.html | 3 +- .../tools/add-ons/dom_inspector/index.html | 17 +- files/es/orphaned/tools/add-ons/index.html | 5 +- .../index.html | 3 +- .../traducir_una_extensi\303\263n/index.html" | 3 +- .../index.html | 3 +- .../index.html" | 3 +- files/es/orphaned/usar_web_workers/index.html | 3 +- .../index.html | 3 +- .../index.html" | 3 +- files/es/orphaned/vigilar_plugins/index.html | 3 +- .../checking_authenticity_with_password/index.html | 3 +- .../web/css/comenzando_(tutorial_css)/index.html | 3 +- files/es/orphaned/web/css/como_iniciar/index.html | 3 +- .../es/orphaned/web/css/primeros_pasos/index.html | 3 +- files/es/orphaned/web/css/rtl/index.html | 3 +- .../html/introduction_alhtml_clone/index.html | 3 +- .../orphaned/web/html/element/command/index.html | 3 +- .../orphaned/web/html/element/element/index.html | 3 +- .../etiqueta_personalizada_html5/index.html | 3 +- .../html/elemento/tipos_de_elementos/index.html | 5 +- .../web/html/global_attributes/dropzone/index.html | 3 +- .../global_objects/array/prototype/index.html | 3 +- .../orphaned/web/svg/svg_en_firefox_1.5/index.html | 3 +- .../es/orphaned/xpinstall_api_reference/index.html | 3 +- .../debugger/how_to/use_a_source_map/index.html | 3 +- files/es/tools/keyboard_shortcuts/index.html | 5 +- files/es/tools/network_monitor/index.html | 3 +- .../es/tools/page_inspector/3-pane_mode/index.html | 3 +- .../how_to/examine_and_edit_html/index.html | 3 +- .../examine_and_edit_the_box_model/index.html | 3 +- .../how_to/inspect_and_select_colors/index.html | 3 +- .../how_to/open_the_inspector/index.html | 3 +- .../reposition_elements_in_the_page/index.html | 3 +- files/es/tools/performance/index.html | 3 +- files/es/tools/performance/ui_tour/index.html | 3 +- .../firefox_for_android/index.html | 3 +- files/es/tools/responsive_design_mode/index.html | 3 +- files/es/tools/style_editor/index.html | 3 +- files/es/tools/taking_screenshots/index.html | 3 +- files/es/tools/web_audio_editor/index.html | 3 +- .../the_command_line_interpreter/index.html | 3 +- files/es/tools/web_console/ui_tour/index.html | 3 +- .../using_the_alertdialog_role/index.html | 3 +- .../using_the_aria-required_attribute/index.html | 3 +- .../web/accessibility/aria/forms/alerts/index.html | 3 +- .../aria/forms/basic_form_hints/index.html | 3 +- .../aria/forms/multipart_labels/index.html | 3 +- files/es/web/accessibility/community/index.html | 3 +- files/es/web/accessibility/index.html | 3 +- .../accessibility/understanding_wcag/index.html | 3 +- .../understanding_wcag/keyboard/index.html | 3 +- .../perceivable/color_contrast/index.html | 3 +- .../understanding_wcag/perceivable/index.html | 3 +- .../text_labels_and_names/index.html | 3 +- files/es/web/api/animation/animation/index.html | 3 +- files/es/web/api/animation/currenttime/index.html | 3 +- files/es/web/api/animation/finished/index.html | 3 +- files/es/web/api/battery_status_api/index.html | 3 +- .../api/canvas_api/a_basic_ray-caster/index.html | 3 +- files/es/web/api/canvas_api/index.html | 3 +- .../manipulating_video_using_canvas/index.html | 3 +- .../tutorial/advanced_animations/index.html | 3 +- .../tutorial/applying_styles_and_colors/index.html | 3 +- .../tutorial/basic_animations/index.html | 3 +- .../api/canvas_api/tutorial/basic_usage/index.html | 3 +- .../tutorial/compositing/example/index.html | 3 +- .../canvas_api/tutorial/drawing_shapes/index.html | 3 +- .../canvas_api/tutorial/drawing_text/index.html | 5 +- .../hit_regions_and_accessibility/index.html | 3 +- files/es/web/api/canvas_api/tutorial/index.html | 3 +- .../tutorial/optimizing_canvas/index.html | 3 +- .../pixel_manipulation_with_canvas/index.html | 3 +- files/es/web/api/clipboard_api/index.html | 3 +- files/es/web/api/console/table/index.html | 3 +- files/es/web/api/crypto/getrandomvalues/index.html | 3 +- files/es/web/api/document/cookie/index.html | 3 +- .../es/web/api/document/createattribute/index.html | 3 +- files/es/web/api/document/createevent/index.html | 3 +- files/es/web/api/document/open/index.html | 3 +- .../document/pointerlockchange_event/index.html | 3 +- .../api/document_object_model/events/index.html | 3 +- .../api/document_object_model/examples/index.html | 3 +- .../how_to_create_a_dom_tree/index.html | 3 +- files/es/web/api/document_object_model/index.html | 3 +- .../document_object_model/introduction/index.html | 3 +- .../index.html | 3 +- .../index.html | 4 +- .../using_the_w3c_dom_level_1_core/index.html | 3 +- .../document_object_model/whitespace/index.html | 5 +- .../documentorshadowroot/getselection/index.html | 3 +- .../pointerlockelement/index.html | 3 +- .../documentorshadowroot/stylesheets/index.html | 3 +- files/es/web/api/domstring/binary/index.html | 3 +- files/es/web/api/element/blur_event/index.html | 3 +- .../web/api/elementcssinlinestyle/style/index.html | 3 +- .../es/web/api/fetch_api/basic_concepts/index.html | 3 +- files/es/web/api/fetch_api/using_fetch/index.html | 3 +- files/es/web/api/formdata/index.html | 3 +- .../api/formdata/using_formdata_objects/index.html | 3 +- files/es/web/api/geolocation_api/index.html | 3 +- .../ongotpointercapture/index.html | 3 +- .../onlostpointercapture/index.html | 3 +- .../web/api/globaleventhandlers/onwheel/index.html | 3 +- files/es/web/api/history_api/example/index.html | 3 +- files/es/web/api/history_api/index.html | 3 +- .../file_drag_and_drop/index.html | 3 +- files/es/web/api/html_drag_and_drop_api/index.html | 3 +- .../recommended_drag_types/index.html | 3 +- files/es/web/api/htmlelement/accesskey/index.html | 3 +- .../api/htmlelement/animationend_event/index.html | 3 +- .../htmlelement/transitioncancel_event/index.html | 3 +- .../api/htmlelement/transitionend_event/index.html | 3 +- .../api/htmlmediaelement/abort_event/index.html | 3 +- .../api/htmlorforeignelement/dataset/index.html | 3 +- .../web/api/htmlorforeignelement/focus/index.html | 3 +- files/es/web/api/htmlvideoelement/index.html | 3 +- .../basic_concepts_behind_indexeddb/index.html | 3 +- .../api/indexeddb_api/using_indexeddb/index.html | 3 +- files/es/web/api/media_streams_api/index.html | 3 +- files/es/web/api/navigator/geolocation/index.html | 3 +- .../online_and_offline_events/index.html | 3 +- files/es/web/api/node/insertbefore/index.html | 3 +- files/es/web/api/node/parentelement/index.html | 3 +- .../using_the_notifications_api/index.html | 3 +- files/es/web/api/pointer_lock_api/index.html | 3 +- files/es/web/api/server-sent_events/index.html | 3 +- .../using_server-sent_events/index.html | 3 +- files/es/web/api/touch_events/index.html | 3 +- files/es/web/api/vibration_api/index.html | 3 +- files/es/web/api/web_audio_api/index.html | 3 +- .../using_the_web_speech_api/index.html | 3 +- files/es/web/api/web_storage_api/index.html | 3 +- .../using_the_web_storage_api/index.html | 3 +- .../web_workers_api/using_web_workers/index.html | 3 +- .../creating_3d_objects_using_webgl/index.html | 3 +- .../tutorial/using_textures_in_webgl/index.html | 3 +- .../web/api/webrtc_api/session_lifetime/index.html | 3 +- .../api/webrtc_api/taking_still_photos/index.html | 3 +- .../writing_websocket_server/index.html | 3 +- .../writing_websocket_servers/index.html | 3 +- .../web/api/window/beforeunload_event/index.html | 3 +- .../api/window/domcontentloaded_event/index.html | 3 +- files/es/web/api/window/load_event/index.html | 3 +- .../api/windoweventhandlers/onunload/index.html | 3 +- .../api/windoworworkerglobalscope/atob/index.html | 3 +- .../clearinterval/index.html | 3 +- .../cleartimeout/index.html | 3 +- .../setinterval/index.html | 3 +- .../settimeout/index.html | 3 +- files/es/web/api/xmldocument/async/index.html | 3 +- .../api/xmlhttprequest/loadend_event/index.html | 3 +- files/es/web/css/@media/height/index.html | 3 +- files/es/web/css/@media/resolution/index.html | 3 +- files/es/web/css/_colon_autofill/index.html | 5 +- files/es/web/css/_colon_is/index.html | 7 +- files/es/web/css/_colon_not/index.html | 5 +- files/es/web/css/_colon_user-invalid/index.html | 5 +- .../_doublecolon_file-selector-button/index.html | 5 +- .../web/css/adjacent_sibling_combinator/index.html | 3 +- files/es/web/css/attribute_selectors/index.html | 3 +- files/es/web/css/box-flex/index.html | 3 +- files/es/web/css/box-ordinal-group/index.html | 3 +- files/es/web/css/box-pack/index.html | 3 +- files/es/web/css/column-gap/index.html | 3 +- files/es/web/css/comments/index.html | 3 +- files/es/web/css/computed_value/index.html | 3 +- .../detecting_css_animation_support/index.html | 3 +- .../css_animations/using_css_animations/index.html | 3 +- .../border-image_generator/index.html | 3 +- .../web/css/css_backgrounds_and_borders/index.html | 3 +- .../using_multiple_backgrounds/index.html | 3 +- .../index.html | 3 +- files/es/web/css/css_box_model/index.html | 3 +- .../introduction_to_the_css_box_model/index.html | 3 +- .../mastering_margin_collapsing/index.html | 3 +- files/es/web/css/css_color/index.html | 3 +- .../css/css_colors/color_picker_tool/index.html | 3 +- files/es/web/css/css_columns/index.html | 3 +- .../using_multi-column_layouts/index.html | 3 +- files/es/web/css/css_conditional_rules/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../typical_use_cases_of_flexbox/index.html | 3 +- .../basic_concepts_of_grid_layout/index.html | 3 +- .../relationship_of_grid_layout/index.html | 3 +- .../css/css_images/using_css_gradients/index.html | 3 +- .../css/css_logical_properties/sizing/index.html | 3 +- .../adding_z-index/index.html | 3 +- .../understanding_z_index/index.html | 3 +- .../stacking_and_float/index.html | 3 +- .../stacking_context_example_1/index.html | 5 +- .../stacking_context_example_2/index.html | 5 +- .../stacking_context_example_3/index.html | 5 +- .../stacking_without_z-index/index.html | 3 +- .../the_stacking_context/index.html | 3 +- files/es/web/css/css_selectors/index.html | 3 +- .../index.html | 7 +- files/es/web/css/css_text/index.html | 3 +- .../using_css_transitions/index.html | 3 +- files/es/web/css/font-language-override/index.html | 3 +- files/es/web/css/gap/index.html | 3 +- .../web/css/general_sibling_combinator/index.html | 3 +- files/es/web/css/gradient/index.html | 3 +- files/es/web/css/initial_value/index.html | 5 +- files/es/web/css/mask-clip/index.html | 3 +- files/es/web/css/mask-image/index.html | 3 +- files/es/web/css/mask-origin/index.html | 3 +- files/es/web/css/mask-position/index.html | 3 +- files/es/web/css/mask-repeat/index.html | 3 +- files/es/web/css/mask/index.html | 3 +- .../media_queries/testing_media_queries/index.html | 3 +- .../media_queries/using_media_queries/index.html | 3 +- files/es/web/css/mix-blend-mode/index.html | 3 +- files/es/web/css/percentage/index.html | 3 +- files/es/web/css/pseudo-elements/index.html | 3 +- files/es/web/css/reference/index.html | 3 +- files/es/web/css/replaced_element/index.html | 3 +- files/es/web/css/resolution/index.html | 3 +- files/es/web/css/specificity/index.html | 3 +- .../css/tools/cubic_bezier_generator/index.html | 3 +- files/es/web/css/tools/index.html | 3 +- files/es/web/css/url()/index.html | 3 +- files/es/web/css/user-modify/index.html | 3 +- .../es/web/css/value_definition_syntax/index.html | 3 +- files/es/web/guide/ajax/community/index.html | 3 +- files/es/web/guide/ajax/getting_started/index.html | 3 +- .../index.html | 3 +- .../creating_and_triggering_events/index.html | 3 +- .../es/web/guide/events/event_handlers/index.html | 3 +- files/es/web/guide/events/index.html | 3 +- .../index.html | 5 +- .../web/guide/html/content_categories/index.html | 3 +- .../html/html5/constraint_validation/index.html | 3 +- .../web/guide/html/html5/html5_parser/index.html | 3 +- files/es/web/guide/html/html5/index.html | 3 +- .../html/html5/introduction_to_html5/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- files/es/web/guide/mobile/index.html | 3 +- files/es/web/html/attributes/accept/index.html | 3 +- .../es/web/html/attributes/autocomplete/index.html | 3 +- .../es/web/html/attributes/crossorigin/index.html | 3 +- files/es/web/html/attributes/index.html | 3 +- files/es/web/html/attributes/min/index.html | 3 +- files/es/web/html/attributes/minlength/index.html | 3 +- files/es/web/html/attributes/multiple/index.html | 3 +- files/es/web/html/cors_enabled_image/index.html | 3 +- files/es/web/html/element/a/index.html | 3 +- files/es/web/html/element/abbr/index.html | 5 +- files/es/web/html/element/acronym/index.html | 5 +- files/es/web/html/element/address/index.html | 5 +- files/es/web/html/element/applet/index.html | 5 +- files/es/web/html/element/area/index.html | 5 +- files/es/web/html/element/article/index.html | 3 +- files/es/web/html/element/aside/index.html | 7 +- files/es/web/html/element/audio/index.html | 3 +- files/es/web/html/element/b/index.html | 5 +- files/es/web/html/element/base/index.html | 5 +- files/es/web/html/element/basefont/index.html | 5 +- files/es/web/html/element/bdi/index.html | 3 +- files/es/web/html/element/bdo/index.html | 5 +- files/es/web/html/element/bgsound/index.html | 3 +- files/es/web/html/element/big/index.html | 5 +- files/es/web/html/element/blink/index.html | 3 +- files/es/web/html/element/blockquote/index.html | 5 +- files/es/web/html/element/body/index.html | 3 +- files/es/web/html/element/br/index.html | 5 +- files/es/web/html/element/button/index.html | 5 +- files/es/web/html/element/canvas/index.html | 5 +- files/es/web/html/element/caption/index.html | 5 +- files/es/web/html/element/center/index.html | 5 +- files/es/web/html/element/cite/index.html | 5 +- files/es/web/html/element/code/index.html | 5 +- files/es/web/html/element/col/index.html | 5 +- files/es/web/html/element/colgroup/index.html | 5 +- files/es/web/html/element/content/index.html | 3 +- files/es/web/html/element/data/index.html | 3 +- files/es/web/html/element/datalist/index.html | 3 +- files/es/web/html/element/dd/index.html | 3 +- files/es/web/html/element/del/index.html | 5 +- files/es/web/html/element/details/index.html | 3 +- files/es/web/html/element/dfn/index.html | 5 +- files/es/web/html/element/dialog/index.html | 3 +- files/es/web/html/element/dir/index.html | 5 +- files/es/web/html/element/div/index.html | 5 +- files/es/web/html/element/dl/index.html | 3 +- files/es/web/html/element/dt/index.html | 3 +- files/es/web/html/element/em/index.html | 5 +- files/es/web/html/element/embed/index.html | 5 +- files/es/web/html/element/fieldset/index.html | 5 +- files/es/web/html/element/figcaption/index.html | 3 +- files/es/web/html/element/figure/index.html | 5 +- files/es/web/html/element/font/index.html | 5 +- files/es/web/html/element/footer/index.html | 3 +- files/es/web/html/element/form/index.html | 3 +- files/es/web/html/element/frame/index.html | 5 +- files/es/web/html/element/frameset/index.html | 5 +- files/es/web/html/element/head/index.html | 5 +- files/es/web/html/element/header/index.html | 3 +- .../web/html/element/heading_elements/index.html | 5 +- files/es/web/html/element/hgroup/index.html | 3 +- files/es/web/html/element/hr/index.html | 5 +- files/es/web/html/element/html/index.html | 5 +- files/es/web/html/element/i/index.html | 5 +- files/es/web/html/element/iframe/index.html | 3 +- files/es/web/html/element/image/index.html | 3 +- files/es/web/html/element/img/index.html | 3 +- files/es/web/html/element/index.html | 3 +- files/es/web/html/element/input/button/index.html | 3 +- .../es/web/html/element/input/checkbox/index.html | 3 +- files/es/web/html/element/input/color/index.html | 3 +- files/es/web/html/element/input/date/index.html | 3 +- .../es/web/html/element/input/datetime/index.html | 3 +- files/es/web/html/element/input/email/index.html | 3 +- files/es/web/html/element/input/hidden/index.html | 3 +- files/es/web/html/element/input/index.html | 3 +- files/es/web/html/element/input/number/index.html | 3 +- .../es/web/html/element/input/password/index.html | 3 +- files/es/web/html/element/input/range/index.html | 3 +- files/es/web/html/element/input/text/index.html | 3 +- files/es/web/html/element/ins/index.html | 5 +- files/es/web/html/element/isindex/index.html | 3 +- files/es/web/html/element/kbd/index.html | 5 +- files/es/web/html/element/keygen/index.html | 3 +- files/es/web/html/element/label/index.html | 3 +- files/es/web/html/element/legend/index.html | 5 +- files/es/web/html/element/li/index.html | 5 +- files/es/web/html/element/link/index.html | 5 +- files/es/web/html/element/main/index.html | 3 +- files/es/web/html/element/map/index.html | 5 +- files/es/web/html/element/mark/index.html | 5 +- files/es/web/html/element/marquee/index.html | 3 +- files/es/web/html/element/menu/index.html | 5 +- files/es/web/html/element/meta/index.html | 5 +- files/es/web/html/element/multicol/index.html | 3 +- files/es/web/html/element/nav/index.html | 3 +- files/es/web/html/element/nobr/index.html | 3 +- files/es/web/html/element/noframes/index.html | 5 +- files/es/web/html/element/noscript/index.html | 5 +- files/es/web/html/element/object/index.html | 3 +- files/es/web/html/element/ol/index.html | 5 +- files/es/web/html/element/option/index.html | 3 +- files/es/web/html/element/p/index.html | 5 +- files/es/web/html/element/param/index.html | 5 +- files/es/web/html/element/picture/index.html | 3 +- files/es/web/html/element/pre/index.html | 3 +- files/es/web/html/element/progress/index.html | 3 +- files/es/web/html/element/q/index.html | 3 +- files/es/web/html/element/s/index.html | 5 +- files/es/web/html/element/samp/index.html | 3 +- files/es/web/html/element/section/index.html | 3 +- files/es/web/html/element/select/index.html | 3 +- files/es/web/html/element/shadow/index.html | 3 +- files/es/web/html/element/slot/index.html | 3 +- files/es/web/html/element/small/index.html | 5 +- files/es/web/html/element/source/index.html | 3 +- files/es/web/html/element/span/index.html | 5 +- files/es/web/html/element/strike/index.html | 5 +- files/es/web/html/element/strong/index.html | 5 +- files/es/web/html/element/style/index.html | 5 +- files/es/web/html/element/sub/index.html | 5 +- files/es/web/html/element/sup/index.html | 5 +- files/es/web/html/element/table/index.html | 3 +- files/es/web/html/element/td/index.html | 3 +- files/es/web/html/element/template/index.html | 3 +- files/es/web/html/element/textarea/index.html | 3 +- files/es/web/html/element/th/index.html | 3 +- files/es/web/html/element/time/index.html | 3 +- files/es/web/html/element/title/index.html | 5 +- files/es/web/html/element/tr/index.html | 3 +- files/es/web/html/element/track/index.html | 3 +- files/es/web/html/element/tt/index.html | 5 +- files/es/web/html/element/u/index.html | 5 +- files/es/web/html/element/ul/index.html | 5 +- files/es/web/html/element/var/index.html | 5 +- files/es/web/html/element/video/index.html | 3 +- files/es/web/html/element/wbr/index.html | 3 +- files/es/web/html/element/xmp/index.html | 3 +- .../html/global_attributes/accesskey/index.html | 3 +- .../global_attributes/autocapitalize/index.html | 3 +- .../es/web/html/global_attributes/class/index.html | 3 +- .../global_attributes/contenteditable/index.html | 3 +- .../html/global_attributes/contextmenu/index.html | 3 +- .../html/global_attributes/data-_star_/index.html | 3 +- files/es/web/html/global_attributes/dir/index.html | 3 +- .../html/global_attributes/draggable/index.html | 3 +- .../web/html/global_attributes/hidden/index.html | 3 +- files/es/web/html/global_attributes/id/index.html | 3 +- files/es/web/html/global_attributes/index.html | 3 +- files/es/web/html/global_attributes/is/index.html | 3 +- .../web/html/global_attributes/itemid/index.html | 3 +- .../web/html/global_attributes/itemprop/index.html | 3 +- .../web/html/global_attributes/itemref/index.html | 3 +- .../html/global_attributes/itemscope/index.html | 3 +- .../es/web/html/global_attributes/lang/index.html | 3 +- .../es/web/html/global_attributes/slot/index.html | 3 +- .../html/global_attributes/spellcheck/index.html | 3 +- .../es/web/html/global_attributes/style/index.html | 3 +- .../web/html/global_attributes/tabindex/index.html | 3 +- .../es/web/html/global_attributes/title/index.html | 3 +- .../html/global_attributes/translate/index.html | 3 +- .../x-ms-acceleratorkey/index.html | 3 +- files/es/web/html/index/index.html | 3 +- files/es/web/html/inline_elements/index.html | 3 +- files/es/web/html/link_types/index.html | 3 +- files/es/web/html/microdata/index.html | 3 +- files/es/web/html/microformats/index.html | 3 +- files/es/web/html/reference/index.html | 3 +- .../html/using_the_application_cache/index.html | 3 +- .../web/http/basics_of_http/data_uris/index.html | 3 +- .../identifying_resources_on_the_web/index.html | 3 +- files/es/web/http/conditional_requests/index.html | 3 +- .../connection_management_in_http_1.x/index.html | 3 +- files/es/web/http/cors/index.html | 3 +- files/es/web/http/headers/digest/index.html | 3 +- .../web/http/headers/user-agent/firefox/index.html | 3 +- .../web/http/protocol_upgrade_mechanism/index.html | 3 +- .../http/resources_and_specifications/index.html | 3 +- files/es/web/http/session/index.html | 3 +- files/es/web/http/status/413/index.html | 3 +- .../a_re-introduction_to_javascript/index.html | 3 +- .../es/web/javascript/about_javascript/index.html | 3 +- .../index.html | 3 +- .../control_flow_and_error_handling/index.html | 5 +- files/es/web/javascript/guide/functions/index.html | 5 +- .../guide/indexed_collections/index.html | 5 +- .../web/javascript/guide/introduction/index.html | 5 +- .../guide/loops_and_iteration/index.html | 3 +- files/es/web/javascript/guide/modules/index.html | 3 +- .../regular_expressions/assertions/index.html | 3 +- .../character_classes/index.html | 3 +- .../regular_expressions/cheatsheet/index.html | 3 +- .../groups_and_ranges/index.html | 3 +- .../regular_expressions/quantifiers/index.html | 3 +- .../unicode_property_escapes/index.html | 3 +- .../web/javascript/guide/using_promises/index.html | 3 +- .../guide/working_with_objects/index.html | 3 +- .../inheritance_and_the_prototype_chain/index.html | 3 +- .../javascript_technologies_overview/index.html | 3 +- .../es/web/javascript/memory_management/index.html | 3 +- files/es/web/javascript/reference/about/index.html | 3 +- .../reference/classes/constructor/index.html | 3 +- .../reference/classes/extends/index.html | 3 +- .../es/web/javascript/reference/classes/index.html | 3 +- .../classes/private_class_fields/index.html | 3 +- .../classes/public_class_fields/index.html | 3 +- .../javascript/reference/classes/static/index.html | 3 +- .../deprecated_and_obsolete_features/index.html | 3 +- .../the_legacy_iterator_protocol/index.html | 4 +- .../reference/errors/bad_regexp_flag/index.html | 3 +- .../reference/errors/illegal_character/index.html | 3 +- .../missing_semicolon_before_statement/index.html | 3 +- .../errors/strict_non_simple_params/index.html | 3 +- .../functions/arguments/callee/index.html | 3 +- .../reference/functions/arguments/index.html | 3 +- .../functions/arguments/length/index.html | 3 +- .../reference/functions/arrow_functions/index.html | 3 +- .../functions/default_parameters/index.html | 3 +- .../javascript/reference/functions/get/index.html | 3 +- .../web/javascript/reference/functions/index.html | 3 +- .../functions/method_definitions/index.html | 3 +- .../reference/functions/rest_parameters/index.html | 3 +- .../javascript/reference/functions/set/index.html | 3 +- .../global_objects/aggregateerror/index.html | 3 +- .../global_objects/array/@@iterator/index.html | 5 +- .../global_objects/array/@@species/index.html | 5 +- .../global_objects/array/@@unscopables/index.html | 5 +- .../global_objects/array/concat/index.html | 3 +- .../global_objects/array/copywithin/index.html | 3 +- .../global_objects/array/entries/index.html | 3 +- .../global_objects/array/every/index.html | 3 +- .../reference/global_objects/array/fill/index.html | 3 +- .../global_objects/array/filter/index.html | 3 +- .../reference/global_objects/array/find/index.html | 3 +- .../global_objects/array/findindex/index.html | 3 +- .../reference/global_objects/array/flat/index.html | 3 +- .../global_objects/array/flatmap/index.html | 3 +- .../global_objects/array/foreach/index.html | 3 +- .../reference/global_objects/array/from/index.html | 3 +- .../global_objects/array/includes/index.html | 3 +- .../reference/global_objects/array/index.html | 3 +- .../global_objects/array/indexof/index.html | 3 +- .../global_objects/array/isarray/index.html | 3 +- .../reference/global_objects/array/join/index.html | 3 +- .../reference/global_objects/array/keys/index.html | 3 +- .../global_objects/array/lastindexof/index.html | 3 +- .../global_objects/array/length/index.html | 3 +- .../reference/global_objects/array/map/index.html | 3 +- .../reference/global_objects/array/of/index.html | 3 +- .../reference/global_objects/array/pop/index.html | 3 +- .../reference/global_objects/array/push/index.html | 3 +- .../global_objects/array/reduce/index.html | 3 +- .../global_objects/array/reduceright/index.html | 3 +- .../global_objects/array/reverse/index.html | 3 +- .../global_objects/array/shift/index.html | 3 +- .../global_objects/array/slice/index.html | 3 +- .../reference/global_objects/array/some/index.html | 3 +- .../reference/global_objects/array/sort/index.html | 3 +- .../global_objects/array/splice/index.html | 3 +- .../global_objects/array/tolocalestring/index.html | 3 +- .../global_objects/array/tosource/index.html | 3 +- .../global_objects/array/tostring/index.html | 3 +- .../global_objects/array/unshift/index.html | 3 +- .../global_objects/array/values/index.html | 3 +- .../arraybuffer/@@species/index.html | 5 +- .../arraybuffer/bytelength/index.html | 3 +- .../global_objects/arraybuffer/index.html | 3 +- .../global_objects/asyncfunction/index.html | 3 +- .../global_objects/boolean/boolean/index.html | 3 +- .../reference/global_objects/boolean/index.html | 3 +- .../global_objects/boolean/tosource/index.html | 3 +- .../global_objects/date/getdate/index.html | 3 +- .../global_objects/date/getday/index.html | 3 +- .../global_objects/date/getfullyear/index.html | 3 +- .../global_objects/date/gethours/index.html | 3 +- .../global_objects/date/getmilliseconds/index.html | 3 +- .../global_objects/date/getminutes/index.html | 3 +- .../global_objects/date/getmonth/index.html | 3 +- .../global_objects/date/getseconds/index.html | 3 +- .../global_objects/date/gettime/index.html | 3 +- .../global_objects/date/getutcfullyear/index.html | 3 +- .../global_objects/date/getutchours/index.html | 3 +- .../reference/global_objects/date/index.html | 3 +- .../reference/global_objects/date/now/index.html | 3 +- .../reference/global_objects/date/parse/index.html | 3 +- .../global_objects/date/setfullyear/index.html | 3 +- .../global_objects/date/setmonth/index.html | 3 +- .../global_objects/date/todatestring/index.html | 3 +- .../global_objects/date/toisostring/index.html | 3 +- .../global_objects/date/tojson/index.html | 3 +- .../date/tolocaledatestring/index.html | 3 +- .../global_objects/date/tolocalestring/index.html | 3 +- .../date/tolocaletimestring/index.html | 3 +- .../global_objects/date/toutcstring/index.html | 3 +- .../reference/global_objects/date/utc/index.html | 3 +- .../reference/global_objects/decodeuri/index.html | 3 +- .../global_objects/decodeuricomponent/index.html | 3 +- .../reference/global_objects/encodeuri/index.html | 3 +- .../global_objects/encodeuricomponent/index.html | 3 +- .../global_objects/error/error/index.html | 3 +- .../global_objects/error/filename/index.html | 3 +- .../reference/global_objects/error/index.html | 3 +- .../global_objects/error/linenumber/index.html | 3 +- .../global_objects/error/message/index.html | 3 +- .../reference/global_objects/error/name/index.html | 3 +- .../global_objects/error/tosource/index.html | 3 +- .../global_objects/error/tostring/index.html | 3 +- .../reference/global_objects/escape/index.html | 3 +- .../reference/global_objects/eval/index.html | 3 +- .../reference/global_objects/evalerror/index.html | 3 +- .../global_objects/function/apply/index.html | 3 +- .../global_objects/function/arguments/index.html | 3 +- .../global_objects/function/bind/index.html | 3 +- .../global_objects/function/call/index.html | 3 +- .../global_objects/function/caller/index.html | 3 +- .../global_objects/function/displayname/index.html | 3 +- .../global_objects/function/function/index.html | 3 +- .../reference/global_objects/function/index.html | 3 +- .../global_objects/function/length/index.html | 3 +- .../global_objects/function/name/index.html | 3 +- .../global_objects/function/tosource/index.html | 3 +- .../global_objects/function/tostring/index.html | 3 +- .../reference/global_objects/generator/index.html | 3 +- .../global_objects/generator/next/index.html | 3 +- .../global_objects/generator/return/index.html | 3 +- .../global_objects/generator/throw/index.html | 3 +- .../javascript/reference/global_objects/index.html | 3 +- .../reference/global_objects/infinity/index.html | 3 +- .../global_objects/internalerror/index.html | 3 +- .../internalerror/internalerror/index.html | 5 +- .../reference/global_objects/intl/index.html | 3 +- .../intl/numberformat/format/index.html | 3 +- .../global_objects/intl/numberformat/index.html | 3 +- .../intl/relativetimeformat/index.html | 3 +- .../reference/global_objects/isfinite/index.html | 3 +- .../reference/global_objects/isnan/index.html | 3 +- .../reference/global_objects/json/index.html | 3 +- .../reference/global_objects/json/parse/index.html | 3 +- .../global_objects/json/stringify/index.html | 3 +- .../reference/global_objects/map/clear/index.html | 3 +- .../reference/global_objects/map/delete/index.html | 3 +- .../global_objects/map/entries/index.html | 3 +- .../global_objects/map/foreach/index.html | 3 +- .../reference/global_objects/map/get/index.html | 3 +- .../reference/global_objects/map/has/index.html | 3 +- .../reference/global_objects/map/index.html | 3 +- .../reference/global_objects/map/keys/index.html | 3 +- .../reference/global_objects/map/set/index.html | 3 +- .../reference/global_objects/map/size/index.html | 3 +- .../reference/global_objects/map/values/index.html | 3 +- .../reference/global_objects/math/abs/index.html | 3 +- .../reference/global_objects/math/acos/index.html | 3 +- .../reference/global_objects/math/acosh/index.html | 3 +- .../reference/global_objects/math/asin/index.html | 3 +- .../reference/global_objects/math/asinh/index.html | 3 +- .../reference/global_objects/math/atan/index.html | 3 +- .../reference/global_objects/math/atan2/index.html | 3 +- .../reference/global_objects/math/atanh/index.html | 3 +- .../reference/global_objects/math/cbrt/index.html | 3 +- .../reference/global_objects/math/ceil/index.html | 3 +- .../reference/global_objects/math/cos/index.html | 3 +- .../reference/global_objects/math/e/index.html | 3 +- .../reference/global_objects/math/exp/index.html | 3 +- .../reference/global_objects/math/expm1/index.html | 3 +- .../reference/global_objects/math/floor/index.html | 3 +- .../global_objects/math/fround/index.html | 3 +- .../reference/global_objects/math/hypot/index.html | 3 +- .../reference/global_objects/math/index.html | 3 +- .../reference/global_objects/math/ln10/index.html | 3 +- .../reference/global_objects/math/ln2/index.html | 3 +- .../reference/global_objects/math/log/index.html | 3 +- .../reference/global_objects/math/log10/index.html | 3 +- .../global_objects/math/log10e/index.html | 3 +- .../reference/global_objects/math/log2/index.html | 3 +- .../reference/global_objects/math/log2e/index.html | 3 +- .../reference/global_objects/math/max/index.html | 3 +- .../reference/global_objects/math/min/index.html | 3 +- .../reference/global_objects/math/pi/index.html | 3 +- .../reference/global_objects/math/pow/index.html | 3 +- .../global_objects/math/random/index.html | 3 +- .../reference/global_objects/math/round/index.html | 3 +- .../reference/global_objects/math/sign/index.html | 3 +- .../reference/global_objects/math/sin/index.html | 3 +- .../reference/global_objects/math/sqrt/index.html | 3 +- .../global_objects/math/sqrt1_2/index.html | 3 +- .../reference/global_objects/math/sqrt2/index.html | 3 +- .../reference/global_objects/math/tan/index.html | 3 +- .../reference/global_objects/math/tanh/index.html | 3 +- .../reference/global_objects/math/trunc/index.html | 3 +- .../reference/global_objects/nan/index.html | 3 +- .../reference/global_objects/null/index.html | 3 +- .../reference/global_objects/number/index.html | 3 +- .../global_objects/number/isfinite/index.html | 3 +- .../global_objects/number/isinteger/index.html | 3 +- .../global_objects/number/isnan/index.html | 3 +- .../global_objects/number/issafeinteger/index.html | 3 +- .../number/max_safe_integer/index.html | 3 +- .../global_objects/number/max_value/index.html | 3 +- .../global_objects/number/min_value/index.html | 3 +- .../reference/global_objects/number/nan/index.html | 3 +- .../number/negative_infinity/index.html | 3 +- .../global_objects/number/parsefloat/index.html | 3 +- .../global_objects/number/parseint/index.html | 3 +- .../number/positive_infinity/index.html | 3 +- .../global_objects/number/tofixed/index.html | 3 +- .../number/tolocalestring/index.html | 3 +- .../global_objects/number/toprecision/index.html | 3 +- .../global_objects/number/tostring/index.html | 3 +- .../global_objects/number/valueof/index.html | 3 +- .../object/__definegetter__/index.html | 3 +- .../object/__lookupgetter__/index.html | 3 +- .../global_objects/object/assign/index.html | 3 +- .../global_objects/object/constructor/index.html | 3 +- .../global_objects/object/create/index.html | 3 +- .../object/defineproperties/index.html | 3 +- .../object/defineproperty/index.html | 3 +- .../global_objects/object/entries/index.html | 3 +- .../global_objects/object/freeze/index.html | 3 +- .../global_objects/object/fromentries/index.html | 3 +- .../object/getownpropertydescriptor/index.html | 3 +- .../object/getownpropertydescriptors/index.html | 3 +- .../object/getownpropertynames/index.html | 3 +- .../object/getownpropertysymbols/index.html | 3 +- .../object/getprototypeof/index.html | 3 +- .../object/hasownproperty/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/object/is/index.html | 3 +- .../global_objects/object/isextensible/index.html | 3 +- .../global_objects/object/isfrozen/index.html | 3 +- .../global_objects/object/isprototypeof/index.html | 3 +- .../global_objects/object/issealed/index.html | 3 +- .../global_objects/object/keys/index.html | 3 +- .../object/preventextensions/index.html | 3 +- .../object/propertyisenumerable/index.html | 3 +- .../global_objects/object/proto/index.html | 3 +- .../global_objects/object/seal/index.html | 3 +- .../object/setprototypeof/index.html | 3 +- .../object/tolocalestring/index.html | 3 +- .../global_objects/object/tosource/index.html | 3 +- .../global_objects/object/tostring/index.html | 3 +- .../global_objects/object/valueof/index.html | 3 +- .../global_objects/object/values/index.html | 3 +- .../reference/global_objects/parsefloat/index.html | 3 +- .../reference/global_objects/parseint/index.html | 3 +- .../global_objects/promise/all/index.html | 3 +- .../global_objects/promise/catch/index.html | 3 +- .../global_objects/promise/finally/index.html | 3 +- .../reference/global_objects/promise/index.html | 3 +- .../global_objects/promise/race/index.html | 3 +- .../global_objects/promise/reject/index.html | 3 +- .../global_objects/promise/resolve/index.html | 3 +- .../global_objects/promise/then/index.html | 3 +- .../reference/global_objects/proxy/index.html | 3 +- .../proxy/getownpropertydescriptor/index.html | 3 +- .../global_objects/proxy/proxy/index.html | 3 +- .../global_objects/proxy/proxy/set/index.html | 3 +- .../global_objects/referenceerror/index.html | 3 +- .../global_objects/regexp/compile/index.html | 3 +- .../global_objects/regexp/exec/index.html | 3 +- .../global_objects/regexp/ignorecase/index.html | 3 +- .../reference/global_objects/regexp/index.html | 3 +- .../global_objects/regexp/regexp/index.html | 3 +- .../global_objects/regexp/rightcontext/index.html | 3 +- .../global_objects/regexp/test/index.html | 3 +- .../global_objects/regexp/tostring/index.html | 3 +- .../global_objects/set/@@iterator/index.html | 5 +- .../reference/global_objects/set/add/index.html | 3 +- .../reference/global_objects/set/clear/index.html | 3 +- .../reference/global_objects/set/delete/index.html | 3 +- .../global_objects/set/entries/index.html | 3 +- .../reference/global_objects/set/has/index.html | 3 +- .../reference/global_objects/set/index.html | 3 +- .../reference/global_objects/set/size/index.html | 3 +- .../reference/global_objects/set/values/index.html | 3 +- .../global_objects/string/anchor/index.html | 3 +- .../reference/global_objects/string/big/index.html | 3 +- .../global_objects/string/blink/index.html | 3 +- .../global_objects/string/bold/index.html | 3 +- .../global_objects/string/charat/index.html | 3 +- .../global_objects/string/charcodeat/index.html | 3 +- .../global_objects/string/codepointat/index.html | 3 +- .../global_objects/string/concat/index.html | 3 +- .../global_objects/string/endswith/index.html | 3 +- .../global_objects/string/fixed/index.html | 3 +- .../global_objects/string/fontcolor/index.html | 3 +- .../global_objects/string/fontsize/index.html | 3 +- .../global_objects/string/fromcharcode/index.html | 3 +- .../global_objects/string/fromcodepoint/index.html | 3 +- .../global_objects/string/includes/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../global_objects/string/indexof/index.html | 3 +- .../global_objects/string/italics/index.html | 3 +- .../global_objects/string/lastindexof/index.html | 3 +- .../global_objects/string/length/index.html | 3 +- .../global_objects/string/link/index.html | 3 +- .../global_objects/string/localecompare/index.html | 3 +- .../global_objects/string/match/index.html | 3 +- .../global_objects/string/matchall/index.html | 3 +- .../global_objects/string/normalize/index.html | 3 +- .../global_objects/string/padstart/index.html | 3 +- .../reference/global_objects/string/raw/index.html | 3 +- .../global_objects/string/repeat/index.html | 3 +- .../global_objects/string/replace/index.html | 3 +- .../global_objects/string/search/index.html | 3 +- .../global_objects/string/slice/index.html | 3 +- .../global_objects/string/small/index.html | 3 +- .../global_objects/string/split/index.html | 3 +- .../global_objects/string/startswith/index.html | 3 +- .../global_objects/string/strike/index.html | 3 +- .../reference/global_objects/string/sub/index.html | 3 +- .../global_objects/string/substr/index.html | 3 +- .../global_objects/string/substring/index.html | 3 +- .../reference/global_objects/string/sup/index.html | 3 +- .../string/tolocalelowercase/index.html | 3 +- .../string/tolocaleuppercase/index.html | 3 +- .../global_objects/string/tolowercase/index.html | 3 +- .../global_objects/string/tosource/index.html | 3 +- .../global_objects/string/tostring/index.html | 3 +- .../global_objects/string/touppercase/index.html | 3 +- .../global_objects/string/trim/index.html | 3 +- .../global_objects/string/trimend/index.html | 3 +- .../global_objects/string/valueof/index.html | 3 +- .../reference/global_objects/symbol/for/index.html | 3 +- .../global_objects/symbol/hasinstance/index.html | 3 +- .../reference/global_objects/symbol/index.html | 3 +- .../global_objects/symbol/iterator/index.html | 3 +- .../global_objects/syntaxerror/index.html | 3 +- .../global_objects/typedarray/buffer/index.html | 3 +- .../reference/global_objects/typedarray/index.html | 3 +- .../reference/global_objects/uint8array/index.html | 3 +- .../reference/global_objects/undefined/index.html | 3 +- .../reference/global_objects/unescape/index.html | 3 +- .../reference/global_objects/urierror/index.html | 3 +- .../global_objects/weakmap/clear/index.html | 3 +- .../global_objects/weakmap/delete/index.html | 3 +- .../global_objects/weakmap/get/index.html | 3 +- .../global_objects/weakmap/has/index.html | 3 +- .../reference/global_objects/weakmap/index.html | 3 +- .../global_objects/weakmap/set/index.html | 3 +- .../reference/global_objects/weakset/index.html | 3 +- .../global_objects/webassembly/index.html | 3 +- files/es/web/javascript/reference/index.html | 3 +- .../reference/iteration_protocols/index.html | 3 +- .../reference/lexical_grammar/index.html | 3 +- .../reference/operators/addition/index.html | 3 +- .../reference/operators/assignment/index.html | 3 +- .../reference/operators/async_function/index.html | 3 +- .../reference/operators/await/index.html | 3 +- .../reference/operators/class/index.html | 3 +- .../reference/operators/comma_operator/index.html | 3 +- .../operators/conditional_operator/index.html | 3 +- .../reference/operators/decrement/index.html | 3 +- .../reference/operators/delete/index.html | 3 +- .../operators/destructuring_assignment/index.html | 3 +- .../reference/operators/division/index.html | 3 +- .../reference/operators/equality/index.html | 3 +- .../reference/operators/function/index.html | 3 +- .../reference/operators/function_star_/index.html | 3 +- .../reference/operators/grouping/index.html | 3 +- .../javascript/reference/operators/in/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../reference/operators/instanceof/index.html | 3 +- .../reference/operators/new.target/index.html | 3 +- .../javascript/reference/operators/new/index.html | 3 +- .../operators/operator_precedence/index.html | 3 +- .../operators/optional_chaining/index.html | 3 +- .../operators/pipeline_operator/index.html | 3 +- .../operators/property_accessors/index.html | 3 +- .../reference/operators/remainder/index.html | 3 +- .../reference/operators/spread_syntax/index.html | 3 +- .../reference/operators/strict_equality/index.html | 3 +- .../reference/operators/subtraction/index.html | 3 +- .../reference/operators/super/index.html | 3 +- .../javascript/reference/operators/this/index.html | 3 +- .../reference/operators/typeof/index.html | 3 +- .../javascript/reference/operators/void/index.html | 3 +- .../reference/operators/yield/index.html | 3 +- .../reference/operators/yield_star_/index.html | 3 +- .../reference/statements/async_function/index.html | 3 +- .../reference/statements/block/index.html | 3 +- .../reference/statements/break/index.html | 3 +- .../reference/statements/class/index.html | 3 +- .../reference/statements/const/index.html | 3 +- .../reference/statements/continue/index.html | 3 +- .../reference/statements/debugger/index.html | 3 +- .../reference/statements/do...while/index.html | 3 +- .../reference/statements/empty/index.html | 3 +- .../reference/statements/export/index.html | 3 +- .../reference/statements/for-await...of/index.html | 3 +- .../reference/statements/for...in/index.html | 3 +- .../reference/statements/for...of/index.html | 3 +- .../javascript/reference/statements/for/index.html | 3 +- .../reference/statements/function/index.html | 3 +- .../reference/statements/function_star_/index.html | 3 +- .../reference/statements/if...else/index.html | 3 +- .../reference/statements/import.meta/index.html | 3 +- .../reference/statements/import/index.html | 3 +- .../web/javascript/reference/statements/index.html | 3 +- .../reference/statements/label/index.html | 3 +- .../javascript/reference/statements/let/index.html | 3 +- .../reference/statements/return/index.html | 3 +- .../reference/statements/switch/index.html | 3 +- .../reference/statements/throw/index.html | 3 +- .../reference/statements/try...catch/index.html | 3 +- .../javascript/reference/statements/var/index.html | 3 +- .../reference/statements/while/index.html | 3 +- .../reference/statements/with/index.html | 3 +- .../javascript/reference/strict_mode/index.html | 3 +- .../reference/template_literals/index.html | 3 +- files/es/web/javascript/typed_arrays/index.html | 3 +- files/es/web/mathml/element/index.html | 3 +- files/es/web/mathml/element/math/index.html | 3 +- .../index.html | 3 +- files/es/web/opensearch/index.html | 3 +- .../optimizing_startup_performance/index.html | 3 +- .../developer_guide/installing/index.html | 3 +- .../responsive/media_types/index.html | 3 +- .../es/web/security/same-origin_policy/index.html | 3 +- .../turning_off_form_autocompletion/index.html | 3 +- .../index.html | 3 +- files/es/web/svg/element/glyph/index.html | 3 +- files/es/web/svg/element/script/index.html | 3 +- .../web/svg/svg_1.1_support_in_firefox/index.html | 3 +- files/es/web/svg/tutorial/introduction/index.html | 3 +- files/es/web/tutorials/index.html | 3 +- files/es/web/xml/xml_introduction/index.html | 3 +- .../es/web/xpath/axes/ancestor-or-self/index.html | 3 +- files/es/web/xpath/axes/ancestor/index.html | 3 +- files/es/web/xpath/axes/attribute/index.html | 3 +- files/es/web/xpath/axes/child/index.html | 3 +- .../web/xpath/axes/descendant-or-self/index.html | 3 +- files/es/web/xpath/axes/descendant/index.html | 3 +- .../es/web/xpath/axes/following-sibling/index.html | 3 +- files/es/web/xpath/axes/following/index.html | 3 +- files/es/web/xpath/axes/index.html | 3 +- files/es/web/xpath/axes/namespace/index.html | 3 +- files/es/web/xpath/axes/parent/index.html | 3 +- .../es/web/xpath/axes/preceding-sibling/index.html | 3 +- files/es/web/xpath/axes/preceding/index.html | 3 +- files/es/web/xpath/functions/contains/index.html | 3 +- files/es/web/xpath/functions/index.html | 3 +- files/es/web/xpath/functions/substring/index.html | 3 +- files/es/web/xpath/functions/true/index.html | 3 +- .../index.html | 3 +- files/es/web/xslt/element/apply-imports/index.html | 3 +- .../es/web/xslt/element/apply-templates/index.html | 3 +- files/es/web/xslt/element/attribute-set/index.html | 3 +- files/es/web/xslt/element/attribute/index.html | 3 +- files/es/web/xslt/element/call-template/index.html | 3 +- files/es/web/xslt/element/choose/index.html | 3 +- files/es/web/xslt/element/comment/index.html | 3 +- files/es/web/xslt/element/copy-of/index.html | 3 +- files/es/web/xslt/element/copy/index.html | 3 +- .../es/web/xslt/element/decimal-format/index.html | 3 +- files/es/web/xslt/element/fallback/index.html | 3 +- files/es/web/xslt/element/for-each/index.html | 3 +- files/es/web/xslt/element/if/index.html | 3 +- files/es/web/xslt/element/import/index.html | 3 +- files/es/web/xslt/element/include/index.html | 3 +- files/es/web/xslt/element/key/index.html | 3 +- files/es/web/xslt/element/message/index.html | 3 +- .../es/web/xslt/element/namespace-alias/index.html | 3 +- files/es/web/xslt/element/number/index.html | 3 +- files/es/web/xslt/element/otherwise/index.html | 3 +- files/es/web/xslt/element/when/index.html | 3 +- files/es/web/xslt/element/with-param/index.html | 3 +- .../web/xslt/transforming_xml_with_xslt/index.html | 3 +- 1275 files changed, 18753 insertions(+), 16200 deletions(-) (limited to 'files/es/learn') diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 5a3341f7de..4d20053064 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1,15 +1,25 @@ # FROM-URL TO-URL /es/docs/AJAX /es/docs/Web/Guide/AJAX -/es/docs/AJAX/Comunidad /es/docs/Web/Guide/AJAX/Comunidad -/es/docs/AJAX/Primeros_Pasos /es/docs/Web/Guide/AJAX/Primeros_Pasos -/es/docs/AJAX:Comunidad /es/docs/Web/Guide/AJAX/Comunidad -/es/docs/AJAX:Primeros_Pasos /es/docs/Web/Guide/AJAX/Primeros_Pasos -/es/docs/Accesibilidad /es/docs/Web/Accesibilidad -/es/docs/Accesibilidad/Comunidad /es/docs/Web/Accesibilidad/Comunidad -/es/docs/Accesibilidad:Comunidad /es/docs/Web/Accesibilidad/Comunidad -/es/docs/Accessibility /es/docs/Web/Accesibilidad +/es/docs/AJAX/Comunidad /es/docs/Web/Guide/AJAX/Community +/es/docs/AJAX/Primeros_Pasos /es/docs/Web/Guide/AJAX/Getting_Started +/es/docs/AJAX:Comunidad /es/docs/Web/Guide/AJAX/Community +/es/docs/AJAX:Primeros_Pasos /es/docs/Web/Guide/AJAX/Getting_Started +/es/docs/Accesibilidad /es/docs/Web/Accessibility +/es/docs/Accesibilidad/Comunidad /es/docs/Web/Accessibility/Community +/es/docs/Accesibilidad:Comunidad /es/docs/Web/Accessibility/Community +/es/docs/Accessibility /es/docs/Web/Accessibility +/es/docs/Acerca_del_Modelo_de_Objetos_del_Documento /es/docs/conflicting/Web/API/Document_Object_Model +/es/docs/Actualizar_aplicaciones_web_para_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Updating_web_applications +/es/docs/Actualizar_extensiones_para_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/es/docs/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 /es/docs/orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 +/es/docs/Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla /es/docs/orphaned/Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla +/es/docs/Applying_SVG_effects_to_HTML_content /es/docs/Web/SVG/Applying_SVG_effects_to_HTML_content /es/docs/ArrastrarSoltar /en-US/docs/Web/API/HTML_Drag_and_Drop_API -/es/docs/ArrastrarSoltar/Arrastrar_y_soltar /es/docs/DragDrop/Drag_and_Drop +/es/docs/ArrastrarSoltar/Arrastrar_y_soltar /es/docs/Web/API/HTML_Drag_and_Drop_API +/es/docs/Añadir_lectores_de_canales_a_Firefox /es/docs/Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox +/es/docs/Añadir_motores_de_búsqueda_desde_páginas_web /es/docs/conflicting/Web/OpenSearch +/es/docs/Bugs_importantes_solucionados_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed +/es/docs/Building_an_Extension /es/docs/conflicting/Mozilla/Add-ons /es/docs/CSS /es/docs/Web/CSS /es/docs/CSS/-moz-force-broken-image-icon /es/docs/Web/CSS/-moz-force-broken-image-icon /es/docs/CSS/::selection /es/docs/Web/CSS/::selection @@ -26,30 +36,32 @@ /es/docs/CSS/@import /es/docs/Web/CSS/@import /es/docs/CSS/@keyframes /es/docs/Web/CSS/@keyframes /es/docs/CSS/@media /es/docs/Web/CSS/@media -/es/docs/CSS/Comenzando_(tutorial_CSS) /es/docs/Web/CSS/Comenzando_(tutorial_CSS) -/es/docs/CSS/Como_iniciar /es/docs/Web/CSS/Como_iniciar -/es/docs/CSS/Como_iniciar/Por_que_usar_CSS /es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS -/es/docs/CSS/Como_iniciar/Porqué_usar_CSS /es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS -/es/docs/CSS/Como_iniciar/Que_es_CSS /es/docs/Web/CSS/Como_iniciar/Que_es_CSS -/es/docs/CSS/Consultas_multimedia /es/docs/CSS/Media_queries -/es/docs/CSS/Getting_Started /es/docs/Web/CSS/Comenzando_(tutorial_CSS) -/es/docs/CSS/Introducción /es/docs/Web/CSS/Introducción -/es/docs/CSS/Primeros_pasos /es/docs/Web/CSS/Primeros_pasos -/es/docs/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudoelementos -/es/docs/CSS/Selectores_atributo /es/docs/Web/CSS/Selectores_atributo -/es/docs/CSS/Transiciones_de_CSS /es/docs/Web/CSS/Transiciones_de_CSS -/es/docs/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS -/es/docs/CSS/Usando_gradientes_con_CSS /es/docs/CSS/Using_CSS_gradients +/es/docs/CSS/Comenzando_(tutorial_CSS) /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/CSS/Como_iniciar /es/docs/orphaned/Web/CSS/Como_iniciar +/es/docs/CSS/Como_iniciar/Por_que_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/es/docs/CSS/Como_iniciar/Porqué_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/es/docs/CSS/Como_iniciar/Que_es_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 +/es/docs/CSS/Consultas_multimedia /es/docs/Web/CSS/Media_Queries/Using_media_queries +/es/docs/CSS/Getting_Started /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/CSS/Introducción /es/docs/conflicting/Learn/CSS/First_steps +/es/docs/CSS/Media_queries /es/docs/Web/CSS/Media_Queries/Using_media_queries +/es/docs/CSS/Primeros_pasos /es/docs/orphaned/Web/CSS/Primeros_pasos +/es/docs/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudo-elements +/es/docs/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors +/es/docs/CSS/Transiciones_de_CSS /es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/es/docs/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/es/docs/CSS/Usando_gradientes_con_CSS /es/docs/Web/CSS/CSS_Images/Using_CSS_gradients +/es/docs/CSS/Using_CSS_gradients /es/docs/Web/CSS/CSS_Images/Using_CSS_gradients /es/docs/CSS/Using_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /es/docs/CSS/Uso_de_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -/es/docs/CSS/Valor_calculado /es/docs/Web/CSS/Valor_calculado -/es/docs/CSS/Valor_inicial /es/docs/Web/CSS/Valor_inicial +/es/docs/CSS/Valor_calculado /es/docs/Web/CSS/computed_value +/es/docs/CSS/Valor_inicial /es/docs/Web/CSS/initial_value /es/docs/CSS/after /es/docs/Web/CSS/::after /es/docs/CSS/animation /es/docs/Web/CSS/animation /es/docs/CSS/animation-delay /es/docs/Web/CSS/animation-delay /es/docs/CSS/animation-direction /es/docs/Web/CSS/animation-direction /es/docs/CSS/animation-duration /es/docs/Web/CSS/animation-duration -/es/docs/CSS/auto /es/docs/Web/CSS/auto +/es/docs/CSS/auto /es/docs/conflicting/Web/CSS/width /es/docs/CSS/azimuth /es/docs/Web/CSS/azimuth /es/docs/CSS/background /es/docs/Web/CSS/background /es/docs/CSS/background-attachment /es/docs/Web/CSS/background-attachment @@ -80,7 +92,7 @@ /es/docs/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS /es/docs/CSS/clip /es/docs/Web/CSS/clip /es/docs/CSS/color /es/docs/Web/CSS/color -/es/docs/CSS/computed_value /es/docs/Web/CSS/Valor_calculado +/es/docs/CSS/computed_value /es/docs/Web/CSS/computed_value /es/docs/CSS/content /es/docs/Web/CSS/content /es/docs/CSS/cursor /es/docs/Web/CSS/cursor /es/docs/CSS/direction /es/docs/Web/CSS/direction @@ -112,15 +124,15 @@ /es/docs/CSS/min-height /es/docs/Web/CSS/min-height /es/docs/CSS/min-width /es/docs/Web/CSS/min-width /es/docs/CSS/none /es/docs/Web/CSS/float -/es/docs/CSS/normal /es/docs/Web/CSS/normal +/es/docs/CSS/normal /es/docs/conflicting/Web/CSS/font-variant /es/docs/CSS/number /es/docs/Web/CSS/number /es/docs/CSS/opacity /es/docs/Web/CSS/opacity /es/docs/CSS/overflow /es/docs/Web/CSS/overflow /es/docs/CSS/perspective /es/docs/Web/CSS/perspective -/es/docs/CSS/porcentaje /es/docs/Web/CSS/porcentaje +/es/docs/CSS/porcentaje /es/docs/Web/CSS/percentage /es/docs/CSS/position /es/docs/Web/CSS/position /es/docs/CSS/right /es/docs/Web/CSS/right -/es/docs/CSS/rtl /es/docs/Web/CSS/rtl +/es/docs/CSS/rtl /es/docs/orphaned/Web/CSS/rtl /es/docs/CSS/top /es/docs/Web/CSS/top /es/docs/CSS/transform /es/docs/Web/CSS/transform /es/docs/CSS/transform-origin /es/docs/Web/CSS/transform-origin @@ -131,10 +143,10 @@ /es/docs/CSS/width /es/docs/Web/CSS/width /es/docs/CSS/z-index /es/docs/Web/CSS/z-index /es/docs/CSS::default /es/docs/Web/CSS/:default -/es/docs/CSS:Valor_calculado /es/docs/Web/CSS/Valor_calculado -/es/docs/CSS:Valor_inicial /es/docs/Web/CSS/Valor_inicial +/es/docs/CSS:Valor_calculado /es/docs/Web/CSS/computed_value +/es/docs/CSS:Valor_inicial /es/docs/Web/CSS/initial_value /es/docs/CSS:after /es/docs/Web/CSS/::after -/es/docs/CSS:auto /es/docs/Web/CSS/auto +/es/docs/CSS:auto /es/docs/conflicting/Web/CSS/width /es/docs/CSS:azimuth /es/docs/Web/CSS/azimuth /es/docs/CSS:background /es/docs/Web/CSS/background /es/docs/CSS:background-attachment /es/docs/Web/CSS/background-attachment @@ -157,7 +169,7 @@ /es/docs/CSS:border-width /es/docs/Web/CSS/border-width /es/docs/CSS:bottom /es/docs/Web/CSS/bottom /es/docs/CSS:color /es/docs/Web/CSS/color -/es/docs/CSS:computed_value /es/docs/Web/CSS/Valor_calculado +/es/docs/CSS:computed_value /es/docs/Web/CSS/computed_value /es/docs/CSS:content /es/docs/Web/CSS/content /es/docs/CSS:cursor /es/docs/Web/CSS/cursor /es/docs/CSS:direction /es/docs/Web/CSS/direction @@ -189,42 +201,59 @@ /es/docs/CSS:min-height /es/docs/Web/CSS/min-height /es/docs/CSS:min-width /es/docs/Web/CSS/min-width /es/docs/CSS:none /es/docs/Web/CSS/float -/es/docs/CSS:normal /es/docs/Web/CSS/normal +/es/docs/CSS:normal /es/docs/conflicting/Web/CSS/font-variant /es/docs/CSS:number /es/docs/Web/CSS/number /es/docs/CSS:position /es/docs/Web/CSS/position /es/docs/CSS:right /es/docs/Web/CSS/right -/es/docs/CSS:rtl /es/docs/Web/CSS/rtl +/es/docs/CSS:rtl /es/docs/orphaned/Web/CSS/rtl /es/docs/CSS:top /es/docs/Web/CSS/top /es/docs/CSS:vacío /es/docs/Web/CSS/:empty /es/docs/CSS:visibility /es/docs/Web/CSS/visibility /es/docs/CSS:width /es/docs/Web/CSS/width -/es/docs/Complementos_de_Firefox._Guia_del_desarrollador /es/docs/Guía_para_el_desarrollador_de_agregados_para_Firefox +/es/docs/CSS_dinámico /es/docs/orphaned/CSS_dinámico +/es/docs/Cadenas_del_User_Agent_de_Gecko /es/docs/Web/HTTP/Headers/User-Agent/Firefox +/es/docs/Code_snippets /es/docs/orphaned/Code_snippets +/es/docs/Code_snippets/Pestañas_del_navegador /es/docs/orphaned/Code_snippets/Pestañas_del_navegador +/es/docs/Columnas_con_CSS-3 /es/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/es/docs/Compilar_e_instalar /es/docs/Mozilla/Developer_guide/Build_Instructions +/es/docs/Complementos_de_Firefox._Guia_del_desarrollador /es/docs/orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox +/es/docs/Configurar_correctamente_los_tipos_MIME_del_servidor /es/docs/Learn/Server-side/Configuring_server_MIME_types +/es/docs/Control_de_la_corrección_ortográfica_en_formularios_HTML /es/docs/conflicting/Web/HTML/Global_attributes/spellcheck /es/docs/Core_JavaScript_1.5_Guide /es/docs/Web/JavaScript/Guide /es/docs/Core_JavaScript_1.5_Guide/Calling_Functions /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones -/es/docs/Core_JavaScript_1.5_Guide/Defining_Functions /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/Core_JavaScript_1.5_Guide/Operators /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /es/docs/Web/JavaScript/Referencia -/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Core_JavaScript_1.5_Guide/Defining_Functions /es/docs/Web/JavaScript/Guide/Functions +/es/docs/Core_JavaScript_1.5_Guide/Operators /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /es/docs/Web/JavaScript/Reference +/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Objeto_Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array /es/docs/Core_JavaScript_1.5_Guide:Calling_Functions /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones -/es/docs/Core_JavaScript_1.5_Guide:Defining_Functions /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/Core_JavaScript_1.5_Reference /es/docs/Web/JavaScript/Referencia -/es/docs/Core_JavaScript_1.5_Reference/Objects /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Core_JavaScript_1.5_Reference/Objects/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Core_JavaScript_1.5_Reference/Objects/String/small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small -/es/docs/Core_JavaScript_1.5_Reference:Objects:String:small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small -/es/docs/Creación_de_Componentes_XPCOM:Interior_del_Componente /es/docs/Creación_de_Componentes_XPCOM/Interior_del_Componente -/es/docs/Creación_de_Componentes_XPCOM:Prefacio /es/docs/Creación_de_Componentes_XPCOM/Prefacio +/es/docs/Core_JavaScript_1.5_Guide:Defining_Functions /es/docs/Web/JavaScript/Guide/Functions +/es/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Objeto_Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Core_JavaScript_1.5_Reference /es/docs/Web/JavaScript/Reference +/es/docs/Core_JavaScript_1.5_Reference/Objects /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Core_JavaScript_1.5_Reference/Objects/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Core_JavaScript_1.5_Reference/Objects/String/small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small +/es/docs/Core_JavaScript_1.5_Reference:Objects:String:small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small +/es/docs/Creacion_de_plugins_OpenSearch_para_Firefox /es/docs/Web/OpenSearch +/es/docs/Creación_de_Componentes_XPCOM/Interior_del_Componente /es/docs/orphaned/Creación_de_Componentes_XPCOM/Interior_del_Componente +/es/docs/Creación_de_Componentes_XPCOM/Prefacio /es/docs/orphaned/Creación_de_Componentes_XPCOM/Prefacio +/es/docs/Creación_de_Componentes_XPCOM:Interior_del_Componente /es/docs/orphaned/Creación_de_Componentes_XPCOM/Interior_del_Componente +/es/docs/Creación_de_Componentes_XPCOM:Prefacio /es/docs/orphaned/Creación_de_Componentes_XPCOM/Prefacio /es/docs/Creación_de_Componentes_XPCOM:Un_vistazo_de_XPCOM /es/docs/Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM /es/docs/Creación_de_Componentes_XPCOM:Uso_de_Componentes_XPCOM /es/docs/Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM /es/docs/Creando_Componentes_XPCOM /es/docs/Creación_de_Componentes_XPCOM /es/docs/Creando_un_skin_para_Firefox /es/docs/Creando_un_tema_para_Firefox /es/docs/Creando_un_skin_para_Firefox:UUID /es/docs/Creando_un_skin_para_Firefox/UUID /es/docs/Creando_un_skin_para_Firefox:_Como_empezar /es/docs/Creando_un_skin_para_Firefox/Como_empezar +/es/docs/Creando_una_extensión /es/docs/orphaned/Creando_una_extensión /es/docs/Crear_una_barra_lateral_en_Firefox /es/docs/Crear_un_panel_lateral_en_Firefox -/es/docs/Código_fuente_de_Mozilla_(CVS) /es/docs/Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) +/es/docs/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System /es/docs/orphaned/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System +/es/docs/Código_fuente_de_Mozilla_(CVS) /es/docs/Mozilla/Developer_guide/Source_Code/CVS +/es/docs/DHTML /es/docs/Glossary/DHTML +/es/docs/DHTML_Demostraciones_del_uso_de_DOM_Style /es/docs/orphaned/DHTML_Demostraciones_del_uso_de_DOM_Style +/es/docs/DOM /es/docs/conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d +/es/docs/DOM/Almacenamiento /es/docs/conflicting/Web/API/Web_Storage_API /es/docs/DOM/CSS /es/docs/Web/CSS /es/docs/DOM/CameraCapabilities /es/docs/Web/API/CameraCapabilities /es/docs/DOM/CameraCapabilities.effects /es/docs/Web/API/CameraCapabilities/effects @@ -234,12 +263,14 @@ /es/docs/DOM/CssRule.cssText /es/docs/Web/API/CSSRule/cssText /es/docs/DOM/CssRule.parentStyleSheet /es/docs/Web/API/CSSRule/parentStyleSheet /es/docs/DOM/CssRule.selectorText /es/docs/Web/API/CSSStyleRule/selectorText -/es/docs/DOM/Document.styleSheets /es/docs/Web/API/Document/styleSheets +/es/docs/DOM/Document.styleSheets /es/docs/Web/API/DocumentOrShadowRoot/styleSheets /es/docs/DOM/Element.setAttribute /es/docs/Web/API/Element/setAttribute -/es/docs/DOM/Element.style /es/docs/Web/API/HTMLElement/style +/es/docs/DOM/Element.style /es/docs/Web/API/ElementCSSInlineStyle/style /es/docs/DOM/HTMLAudioElement /es/docs/Web/API/HTMLAudioElement /es/docs/DOM/HTMLTableElement /es/docs/Web/API/HTMLTableElement -/es/docs/DOM/Manipulating_the_browser_history /es/docs/DOM/Manipulando_el_historial_del_navegador +/es/docs/DOM/Manipulando_el_historial_del_navegador /es/docs/Web/API/History_API +/es/docs/DOM/Manipulando_el_historial_del_navegador/Ejemplo /es/docs/Web/API/History_API/Example +/es/docs/DOM/Manipulating_the_browser_history /es/docs/Web/API/History_API /es/docs/DOM/MozSocial.closePanel /es/docs/Web/API/MozSocial/closePanel /es/docs/DOM/MozSocial.getAttention /es/docs/Web/API/MozSocial/getAttention /es/docs/DOM/MozSocial.getWorker /es/docs/Web/API/MozSocial/getWorker @@ -282,6 +313,7 @@ /es/docs/DOM/Stylesheet.title /es/docs/Web/API/StyleSheet/title /es/docs/DOM/Stylesheet.type /es/docs/Web/API/StyleSheet/type /es/docs/DOM/Stylesheet_object /es/docs/Web/API/CSSStyleSheet +/es/docs/DOM/Touch_events /es/docs/Web/API/Touch_events /es/docs/DOM/Window.getComputedStyle /es/docs/Web/API/Window/getComputedStyle /es/docs/DOM/document /es/docs/Web/API/Document /es/docs/DOM/document.URL /es/docs/Web/API/Document/URL @@ -291,6 +323,7 @@ /es/docs/DOM/document.bgColor /es/docs/Web/API/Document/bgColor /es/docs/DOM/document.body /es/docs/Web/API/Document/body /es/docs/DOM/document.characterSet /es/docs/Web/API/Document/characterSet +/es/docs/DOM/document.cookie /es/docs/Web/API/Document/cookie /es/docs/DOM/document.createRange /es/docs/Web/API/Document/createRange /es/docs/DOM/document.documentElement /es/docs/Web/API/Document/documentElement /es/docs/DOM/document.documentURIObject /es/docs/Web/API/Document/documentURIObject @@ -332,13 +365,13 @@ /es/docs/DOM/window.applicationCache /es/docs/Web/API/Window/applicationCache /es/docs/DOM/window.fullScreen /es/docs/Web/API/Window/fullScreen /es/docs/DOM/window.getSelection /es/docs/Web/API/Window/getSelection -/es/docs/DOM/window.navigator.geolocation /es/docs/Web/API/NavigatorGeolocation/geolocation +/es/docs/DOM/window.navigator.geolocation /es/docs/Web/API/Navigator/geolocation /es/docs/DOM/window.navigator.registerProtocolHandler /es/docs/Web/API/Navigator/registerProtocolHandler /es/docs/DOM/window.navigator.vibrate /es/docs/Web/API/Navigator/vibrate /es/docs/DOM/window.onload /es/docs/Web/API/GlobalEventHandlers/onload -/es/docs/DOM/window.onunload /es/docs/Web/API/GlobalEventHandlers/onunload +/es/docs/DOM/window.onunload /es/docs/Web/API/WindowEventHandlers/onunload /es/docs/DOM/window.requestAnimationFrame /es/docs/Web/API/Window/requestAnimationFrame -/es/docs/DOM:Almacenamiento /es/docs/DOM/Almacenamiento +/es/docs/DOM:Almacenamiento /es/docs/conflicting/Web/API/Web_Storage_API /es/docs/DOM:Selection:addRange /es/docs/Web/API/Selection/addRange /es/docs/DOM:Selection:anchorNode /es/docs/Web/API/Selection/anchorNode /es/docs/DOM:Selection:anchorOffset /es/docs/Web/API/Selection/anchorOffset @@ -365,7 +398,7 @@ /es/docs/DOM:document.bgColor /es/docs/Web/API/Document/bgColor /es/docs/DOM:document.body /es/docs/Web/API/Document/body /es/docs/DOM:document.characterSet /es/docs/Web/API/Document/characterSet -/es/docs/DOM:document.cookie /es/docs/DOM/document.cookie +/es/docs/DOM:document.cookie /es/docs/Web/API/Document/cookie /es/docs/DOM:document.createRange /es/docs/Web/API/Document/createRange /es/docs/DOM:document.documentElement /es/docs/Web/API/Document/documentElement /es/docs/DOM:document.documentURIObject /es/docs/Web/API/Document/documentURIObject @@ -403,10 +436,20 @@ /es/docs/DOM:window.fullScreen /es/docs/Web/API/Window/fullScreen /es/docs/DOM:window.getSelection /es/docs/Web/API/Window/getSelection /es/docs/DOM:window.navigator.registerProtocolHandler /es/docs/Web/API/Navigator/registerProtocolHandler +/es/docs/DOM_Inspector /es/docs/orphaned/Tools/Add-ons/DOM_Inspector +/es/docs/Desarrollando_Mozilla /es/docs/orphaned/Desarrollando_Mozilla +/es/docs/Desarrollo_Web /es/docs/conflicting/Web/Guide /es/docs/Detección_del_navegador_y_soporte_entre_ellos /es/docs/Detección_del_navegador_y_cobertura_a_múltiples_navegadores +/es/docs/Detectar_la_orientación_del_dispositivo /es/docs/orphaned/Detectar_la_orientación_del_dispositivo /es/docs/Developer_Guide /es/docs/Mozilla/Developer_guide /es/docs/Developer_Guide/Source_Code /es/docs/Mozilla/Developer_guide/Source_Code -/es/docs/Drawing_text_using_a_canvas /es/docs/Dibujar_texto_usando_canvas +/es/docs/Dibujando_Gráficos_con_Canvas /es/docs/orphaned/Dibujando_Gráficos_con_Canvas +/es/docs/Dibujar_texto_usando_canvas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_text +/es/docs/DragDrop /es/docs/conflicting/Web/API/HTML_Drag_and_Drop_API +/es/docs/DragDrop/Drag_and_Drop /es/docs/Web/API/HTML_Drag_and_Drop_API +/es/docs/DragDrop/Drag_and_Drop/drag_and_drop_archivo /es/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +/es/docs/DragDrop/Recommended_Drag_Types /es/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types +/es/docs/Drawing_text_using_a_canvas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_text /es/docs/EXSLT /es/docs/Web/EXSLT /es/docs/EXSLT/exsl /es/docs/Web/EXSLT/exsl /es/docs/EXSLT/exsl/node-set /es/docs/Web/EXSLT/exsl/node-set @@ -449,9 +492,13 @@ /es/docs/EXSLT:str:concat /es/docs/Web/EXSLT/str/concat /es/docs/EXSLT:str:split /es/docs/Web/EXSLT/str/split /es/docs/EXSLT:str:tokenize /es/docs/Web/EXSLT/str/tokenize -/es/docs/Errores_notables_corregidos_en_Firefox_3 /es/docs/Bugs_importantes_solucionados_en_Firefox_3 -/es/docs/Eventos_online_y_offline /es/docs/Web/API/NavigatorOnLine/Eventos_online_y_offline +/es/docs/Errores_notables_corregidos_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed +/es/docs/Estructura_de_directorios_de_código_fuente_de_Mozilla /es/docs/orphaned/Estructura_de_directorios_de_código_fuente_de_Mozilla +/es/docs/Etiquetas_audio_y_video_en_Firefox /es/docs/orphaned/Etiquetas_audio_y_video_en_Firefox +/es/docs/Eventos_online_y_offline /es/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/es/docs/Extensiones/Actualización_de_extensiones_para_Firefox_4 /es/docs/orphaned/Extensiones/Actualización_de_extensiones_para_Firefox_4 /es/docs/Extensión_Firebug_(externo) https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox +/es/docs/FAQ_Incrustando_Mozilla /es/docs/orphaned/FAQ_Incrustando_Mozilla /es/docs/FUEL:Annotations /es/docs/FUEL/Annotations /es/docs/FUEL:Application /es/docs/FUEL/Application /es/docs/FUEL:Bookmark /es/docs/FUEL/Bookmark @@ -467,21 +514,114 @@ /es/docs/FUEL:PreferenceBranch /es/docs/FUEL/PreferenceBranch /es/docs/FUEL:SessionStorage /es/docs/FUEL/SessionStorage /es/docs/FUEL:Window /es/docs/FUEL/Window -/es/docs/Firefox_1.5 /es/docs/Firefox_1.5_para_Desarrolladores -/es/docs/Firefox_2 /es/docs/Firefox_2_para_desarrolladores -/es/docs/Firefox_3.1_para_desarrolladores /es/docs/Firefox_3.5_para_desarrolladores -/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.1_para_desarrolladores /es/docs/Firefox_3.5_para_desarrolladores -/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.5_para_desarrolladores /es/docs/Firefox_3.5_para_desarrolladores -/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions-redirect-1 /es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions +/es/docs/Firefox_1.5 /es/docs/Mozilla/Firefox/Releases/1.5 +/es/docs/Firefox_1.5_para_Desarrolladores /es/docs/Mozilla/Firefox/Releases/1.5 +/es/docs/Firefox_19_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/19 +/es/docs/Firefox_2 /es/docs/Mozilla/Firefox/Releases/2 +/es/docs/Firefox_2_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/2 +/es/docs/Firefox_3.1_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 +/es/docs/Firefox_3.5_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 +/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.1_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 +/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.5_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 +/es/docs/Firefox_3_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3 +/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions /es/docs/orphaned/Firefox_addons_developer_guide/Introduction_to_Extensions +/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions-redirect-1 /es/docs/orphaned/Firefox_addons_developer_guide/Introduction_to_Extensions +/es/docs/Firefox_addons_developer_guide/Technologies_used_in_developing_extensions /es/docs/orphaned/Firefox_addons_developer_guide/Technologies_used_in_developing_extensions /es/docs/Firefox_en_Android /es/docs/Mozilla/Firefox_para_Android +/es/docs/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio /es/docs/orphaned/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio +/es/docs/Fragmentos_de_código /es/docs/orphaned/Fragmentos_de_código +/es/docs/Funciones /es/docs/orphaned/Funciones +/es/docs/Games/Herramients /es/docs/Games/Tools +/es/docs/Games/Herramients/asm.js /es/docs/Games/Tools/asm.js +/es/docs/Games/Introduccion /es/docs/Games/Introduction +/es/docs/Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) /es/docs/Games/Introduction_to_HTML5_Game_Development +/es/docs/Games/Publishing_games/Monetización_de_los_juegos /es/docs/Games/Publishing_games/Game_monetization +/es/docs/Games/Tutorials/2D_breakout_game_Phaser/Botones /es/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons +/es/docs/Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes /es/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls +/es/docs/Games/Workflows /es/docs/Games/Tutorials +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +/es/docs/Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win /es/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +/es/docs/Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation /es/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation /es/docs/Garantía_de_Calidad /es/docs/QA +/es/docs/Generación_de_GUIDs /es/docs/orphaned/Generación_de_GUIDs /es/docs/Gestión_del_foco_en_HTML /es/docs/Web/API/Document/hasFocus /es/docs/Glossary/AOM /es/docs/Glossary/Accessibility_tree +/es/docs/Glossary/Algoritmo /es/docs/Glossary/Algorithm +/es/docs/Glossary/Argumento /es/docs/Glossary/Argument +/es/docs/Glossary/Arquitectura_de_la_información /es/docs/Glossary/Information_architecture +/es/docs/Glossary/Arreglos /es/docs/Glossary/array +/es/docs/Glossary/Asíncrono /es/docs/Glossary/Asynchronous +/es/docs/Glossary/Atributo /es/docs/Glossary/Attribute +/es/docs/Glossary/Atributo_global /es/docs/conflicting/Web/HTML/Global_attributes +/es/docs/Glossary/CID /es/docs/Glossary/CIA +/es/docs/Glossary/Cabecera_general /es/docs/Glossary/General_header +/es/docs/Glossary/Caché /es/docs/Glossary/Cache +/es/docs/Glossary/Caracter /es/docs/Glossary/Character +/es/docs/Glossary/Cifrado /es/docs/Glossary/Cipher +/es/docs/Glossary/Clasificación_por_tarjetas_(card_sorting) /es/docs/Glossary/Card_sorting +/es/docs/Glossary/Clausura /es/docs/Glossary/Closure +/es/docs/Glossary/Clave /es/docs/Glossary/Key +/es/docs/Glossary/Constante /es/docs/Glossary/Constant +/es/docs/Glossary/Criptoanálisis /es/docs/Glossary/Cryptanalysis +/es/docs/Glossary/Criptografía /es/docs/Glossary/Cryptography +/es/docs/Glossary/DTD /es/docs/conflicting/Glossary/Doctype +/es/docs/Glossary/Descifrado /es/docs/Glossary/Decryption +/es/docs/Glossary/Encriptación /es/docs/Glossary/Encryption +/es/docs/Glossary/Entidad /es/docs/Glossary/Entity +/es/docs/Glossary/Espacio_en_blanco /es/docs/Glossary/Whitespace +/es/docs/Glossary/Estructura_de_datos /es/docs/Glossary/Data_structure +/es/docs/Glossary/Funcion_de_primera_clase /es/docs/Glossary/First-class_Function +/es/docs/Glossary/Función /es/docs/Glossary/Function +/es/docs/Glossary/Hilo_principal /es/docs/Glossary/Main_thread +/es/docs/Glossary/IU /es/docs/Glossary/UI +/es/docs/Glossary/Identificador /es/docs/Glossary/Identifier +/es/docs/Glossary/Inmutable /es/docs/Glossary/Immutable +/es/docs/Glossary/Metadato /es/docs/Glossary/Metadata +/es/docs/Glossary/Método /es/docs/Glossary/Method +/es/docs/Glossary/Nombre_de_dominio /es/docs/Glossary/Domain_name +/es/docs/Glossary/Nombre_de_encabezado_prohibido /es/docs/Glossary/Forbidden_header_name +/es/docs/Glossary/Numero /es/docs/Glossary/Number +/es/docs/Glossary/Objecto /es/docs/Glossary/Object +/es/docs/Glossary/Operador /es/docs/Glossary/Operator +/es/docs/Glossary/Operando /es/docs/Glossary/Operand +/es/docs/Glossary/Pila_llamadas /es/docs/Glossary/Call_stack +/es/docs/Glossary/Preflight_peticion /es/docs/Glossary/Preflight_request +/es/docs/Glossary/Preprocesador_CSS /es/docs/Glossary/CSS_preprocessor +/es/docs/Glossary/Primitivo /es/docs/Glossary/Primitive +/es/docs/Glossary/Pseudo-clase /es/docs/Glossary/Pseudo-class +/es/docs/Glossary/Pseudocódigo /es/docs/Glossary/Pseudocode +/es/docs/Glossary/Recursión /es/docs/Glossary/Recursion +/es/docs/Glossary/SCV /es/docs/Glossary/SCM +/es/docs/Glossary/Sentencias /es/docs/Glossary/Statement +/es/docs/Glossary/Sincronico /es/docs/Glossary/Synchronous +/es/docs/Glossary/Sistema_gestion_contenidos /es/docs/Glossary/CMS +/es/docs/Glossary/TextoCifrado /es/docs/Glossary/Ciphertext +/es/docs/Glossary/TextoSimple /es/docs/Glossary/Plaintext +/es/docs/Glossary/Tipado_dinámico /es/docs/Glossary/Dynamic_typing +/es/docs/Glossary/Tipificación_estática /es/docs/Glossary/Static_typing +/es/docs/Glossary/Validador /es/docs/Glossary/Validator +/es/docs/Glossary/Valor /es/docs/Glossary/Value +/es/docs/Glossary/XForm /es/docs/Glossary/XForms +/es/docs/Glossary/coercion /es/docs/Glossary/Type_coercion +/es/docs/Glossary/conjunto_de_caracteres /es/docs/Glossary/character_set +/es/docs/Glossary/elemento /es/docs/orphaned/Glossary/elemento +/es/docs/Glossary/miga-de-pan /es/docs/Glossary/Breadcrumb +/es/docs/Glossary/propiedad /es/docs/Glossary/property +/es/docs/Glossary/seguro /es/docs/Glossary/safe /es/docs/Glossary/undefined_es /es/docs/Glossary/undefined /es/docs/Guía_JavaScript_1.5 /es/docs/Web/JavaScript/Guide -/es/docs/Guía_JavaScript_1.5/Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/Guía_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/Guía_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Guía_JavaScript_1.5/Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Guía_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Guía_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Reference/Statements/const /es/docs/Guía_JavaScript_1.5/Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos /es/docs/Guía_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades /es/docs/Guía_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters @@ -493,7 +633,7 @@ /es/docs/Guía_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/Guía_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/Guía_JavaScript_1.5/Crear_una_expresión_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions -/es/docs/Guía_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Guía_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Functions /es/docs/Guía_JavaScript_1.5/El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/Guía_JavaScript_1.5/El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/Guía_JavaScript_1.5/El_ejemplo_Employee/Constructores_más_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles @@ -520,15 +660,15 @@ /es/docs/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Herencia_no_múltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple /es/docs/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Información_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores /es/docs/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Reference +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Reference/Global_Objects/String /es/docs/Guía_JavaScript_1.5/Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades /es/docs/Guía_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores /es/docs/Guía_JavaScript_1.5/Operadores/Operadores_aritméticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos @@ -538,10 +678,10 @@ /es/docs/Guía_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators /es/docs/Guía_JavaScript_1.5/Operadores/Operadores_lógicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos /es/docs/Guía_JavaScript_1.5/Operadores/Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit -/es/docs/Guía_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Guía_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Guía_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Guía_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/Guía_JavaScript_1.5/Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales -/es/docs/Guía_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Guía_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Reference/Statements/block /es/docs/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects /es/docs/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement /es/docs/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement @@ -552,13 +692,13 @@ /es/docs/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/Guía_JavaScript_1.5/Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar -/es/docs/Guía_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/Guía_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Guía_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Functions +/es/docs/Guía_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Functions /es/docs/Guía_JavaScript_1.5/Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Guía_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types -/es/docs/Guía_JavaScript_1.5:Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/Guía_JavaScript_1.5:Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/Guía_JavaScript_1.5:Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Guía_JavaScript_1.5:Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Guía_JavaScript_1.5:Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Guía_JavaScript_1.5:Constantes /es/docs/Web/JavaScript/Reference/Statements/const /es/docs/Guía_JavaScript_1.5:Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos /es/docs/Guía_JavaScript_1.5:Crear_nuevos_objetos:Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades /es/docs/Guía_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_las_funciones_get_y_set /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters @@ -570,7 +710,7 @@ /es/docs/Guía_JavaScript_1.5:Crear_nuevos_objetos:Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/Guía_JavaScript_1.5:Crear_nuevos_objetos:Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/Guía_JavaScript_1.5:Crear_una_expresión_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions -/es/docs/Guía_JavaScript_1.5:Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Guía_JavaScript_1.5:Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Functions /es/docs/Guía_JavaScript_1.5:El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/Guía_JavaScript_1.5:El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/Guía_JavaScript_1.5:El_ejemplo_Employee:Constructores_más_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles @@ -597,15 +737,15 @@ /es/docs/Guía_JavaScript_1.5:Más_sobre_la_herencia_de_propiedades:Herencia_no_múltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple /es/docs/Guía_JavaScript_1.5:Más_sobre_la_herencia_de_propiedades:Información_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores /es/docs/Guía_JavaScript_1.5:Más_sobre_la_herencia_de_propiedades:Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos /es/docs/Web/JavaScript/Reference +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/Guía_JavaScript_1.5:Objetos_base_predefinidos:Objeto_String /es/docs/Web/JavaScript/Reference/Global_Objects/String /es/docs/Guía_JavaScript_1.5:Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades /es/docs/Guía_JavaScript_1.5:Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores /es/docs/Guía_JavaScript_1.5:Operadores:Operadores_aritméticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos @@ -615,9 +755,9 @@ /es/docs/Guía_JavaScript_1.5:Operadores:Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators /es/docs/Guía_JavaScript_1.5:Operadores:Operadores_lógicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos /es/docs/Guía_JavaScript_1.5:Operadores:Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit -/es/docs/Guía_JavaScript_1.5:Predefined_Functions:eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Guía_JavaScript_1.5:Predefined_Functions:eval_Function /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/Guía_JavaScript_1.5:Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales -/es/docs/Guía_JavaScript_1.5:Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Guía_JavaScript_1.5:Sentencia_de_bloque /es/docs/Web/JavaScript/Reference/Statements/block /es/docs/Guía_JavaScript_1.5:Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects /es/docs/Guía_JavaScript_1.5:Sentencias_de_manejo_de_excepciones:throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement /es/docs/Guía_JavaScript_1.5:Sentencias_de_manejo_de_excepciones:try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement @@ -628,227 +768,245 @@ /es/docs/Guía_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/Guía_JavaScript_1.5:Trabajar_con_expresiones_regulares:Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/Guía_JavaScript_1.5:Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar -/es/docs/Guía_JavaScript_1.5:Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/Guía_JavaScript_1.5:Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Guía_JavaScript_1.5:Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Functions +/es/docs/Guía_JavaScript_1.5:Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Functions /es/docs/Guía_JavaScript_1.5:Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Guía_JavaScript_1.5:Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types -/es/docs/Guía_de_referencia_de_CSS /es/docs/Web/CSS/Referencia_CSS +/es/docs/Guía_de_referencia_de_CSS /es/docs/Web/CSS/Reference +/es/docs/Guía_para_el_desarrollador_de_agregados_para_Firefox /es/docs/orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox +/es/docs/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones /es/docs/orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones +/es/docs/Guía_para_la_migración_a_catálogo /es/docs/orphaned/Guía_para_la_migración_a_catálogo /es/docs/HTML /es/docs/Web/HTML /es/docs/HTML/Block-level_elements /es/docs/Web/HTML/Block-level_elements -/es/docs/HTML/Canvas /es/docs/Web/HTML/Canvas -/es/docs/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas -/es/docs/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida -/es/docs/HTML/Element /es/docs/Web/HTML/Elemento -/es/docs/HTML/Element/a /es/docs/Web/HTML/Elemento/a -/es/docs/HTML/Element/form /es/docs/Web/HTML/Elemento/form -/es/docs/HTML/Element/hgroup /es/docs/Web/HTML/Elemento/hgroup -/es/docs/HTML/Element/iframe /es/docs/Web/HTML/Elemento/iframe -/es/docs/HTML/Element/section /es/docs/Web/HTML/Elemento/section -/es/docs/HTML/Element/tabla /es/docs/Web/HTML/Elemento/table -/es/docs/HTML/Element/table /es/docs/Web/HTML/Elemento/table -/es/docs/HTML/Element/video /es/docs/Web/HTML/Elemento/video -/es/docs/HTML/Elemento /es/docs/Web/HTML/Elemento +/es/docs/HTML/Canvas /es/docs/Web/API/Canvas_API +/es/docs/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/conflicting/Web/API/Canvas_API/Tutorial +/es/docs/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/es/docs/HTML/Element /es/docs/Web/HTML/Element +/es/docs/HTML/Element/a /es/docs/Web/HTML/Element/a +/es/docs/HTML/Element/form /es/docs/Web/HTML/Element/form +/es/docs/HTML/Element/hgroup /es/docs/Web/HTML/Element/hgroup +/es/docs/HTML/Element/iframe /es/docs/Web/HTML/Element/iframe +/es/docs/HTML/Element/section /es/docs/Web/HTML/Element/section +/es/docs/HTML/Element/tabla /es/docs/Web/HTML/Element/table +/es/docs/HTML/Element/table /es/docs/Web/HTML/Element/table +/es/docs/HTML/Element/video /es/docs/Web/HTML/Element/video +/es/docs/HTML/Elemento /es/docs/Web/HTML/Element /es/docs/HTML/Elemento/ /es/docs/Web/HTML/Elemento/ -/es/docs/HTML/Elemento/Audio /es/docs/Web/HTML/Elemento/audio -/es/docs/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/Progreso /es/docs/Web/HTML/Elemento/progress -/es/docs/HTML/Elemento/Tipos_de_elementos /es/docs/Web/HTML/Elemento/Tipos_de_elementos -/es/docs/HTML/Elemento/a /es/docs/Web/HTML/Elemento/a -/es/docs/HTML/Elemento/abbr /es/docs/Web/HTML/Elemento/abbr -/es/docs/HTML/Elemento/acronym /es/docs/Web/HTML/Elemento/acronym -/es/docs/HTML/Elemento/address /es/docs/Web/HTML/Elemento/address -/es/docs/HTML/Elemento/applet /es/docs/Web/HTML/Elemento/applet -/es/docs/HTML/Elemento/area /es/docs/Web/HTML/Elemento/area -/es/docs/HTML/Elemento/article /es/docs/Web/HTML/Elemento/article -/es/docs/HTML/Elemento/aside /es/docs/Web/HTML/Elemento/aside -/es/docs/HTML/Elemento/b /es/docs/Web/HTML/Elemento/b -/es/docs/HTML/Elemento/base /es/docs/Web/HTML/Elemento/base -/es/docs/HTML/Elemento/basefont /es/docs/Web/HTML/Elemento/basefont -/es/docs/HTML/Elemento/bdo /es/docs/Web/HTML/Elemento/bdo -/es/docs/HTML/Elemento/big /es/docs/Web/HTML/Elemento/big -/es/docs/HTML/Elemento/blockquote /es/docs/Web/HTML/Elemento/blockquote -/es/docs/HTML/Elemento/body /es/docs/Web/HTML/Elemento/body -/es/docs/HTML/Elemento/br /es/docs/Web/HTML/Elemento/br -/es/docs/HTML/Elemento/button /es/docs/Web/HTML/Elemento/button -/es/docs/HTML/Elemento/canvas /es/docs/Web/HTML/Elemento/canvas -/es/docs/HTML/Elemento/caption /es/docs/Web/HTML/Elemento/caption -/es/docs/HTML/Elemento/center /es/docs/Web/HTML/Elemento/center -/es/docs/HTML/Elemento/cite /es/docs/Web/HTML/Elemento/cite -/es/docs/HTML/Elemento/code /es/docs/Web/HTML/Elemento/code -/es/docs/HTML/Elemento/col /es/docs/Web/HTML/Elemento/col -/es/docs/HTML/Elemento/colgroup /es/docs/Web/HTML/Elemento/colgroup -/es/docs/HTML/Elemento/dd /es/docs/Web/HTML/Elemento/dd -/es/docs/HTML/Elemento/del /es/docs/Web/HTML/Elemento/del -/es/docs/HTML/Elemento/dfn /es/docs/Web/HTML/Elemento/dfn -/es/docs/HTML/Elemento/dir /es/docs/Web/HTML/Elemento/dir -/es/docs/HTML/Elemento/div /es/docs/Web/HTML/Elemento/div -/es/docs/HTML/Elemento/dl /es/docs/Web/HTML/Elemento/dl -/es/docs/HTML/Elemento/dt /es/docs/Web/HTML/Elemento/dt -/es/docs/HTML/Elemento/em /es/docs/Web/HTML/Elemento/em -/es/docs/HTML/Elemento/embed /es/docs/Web/HTML/Elemento/embed -/es/docs/HTML/Elemento/etiqueta /es/docs/Web/HTML/Elemento/label -/es/docs/HTML/Elemento/fieldset /es/docs/Web/HTML/Elemento/fieldset -/es/docs/HTML/Elemento/figure /es/docs/Web/HTML/Elemento/figure -/es/docs/HTML/Elemento/font /es/docs/Web/HTML/Elemento/font -/es/docs/HTML/Elemento/footer /es/docs/Web/HTML/Elemento/footer -/es/docs/HTML/Elemento/frame /es/docs/Web/HTML/Elemento/frame -/es/docs/HTML/Elemento/frameset /es/docs/Web/HTML/Elemento/frameset -/es/docs/HTML/Elemento/h1 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/h2 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/h3 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/h4 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/h5 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/h6 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML/Elemento/head /es/docs/Web/HTML/Elemento/head -/es/docs/HTML/Elemento/header /es/docs/Web/HTML/Elemento/header -/es/docs/HTML/Elemento/hr /es/docs/Web/HTML/Elemento/hr -/es/docs/HTML/Elemento/html /es/docs/Web/HTML/Elemento/html -/es/docs/HTML/Elemento/i /es/docs/Web/HTML/Elemento/i -/es/docs/HTML/Elemento/img /es/docs/Web/HTML/Elemento/img -/es/docs/HTML/Elemento/input /es/docs/Web/HTML/Elemento/input -/es/docs/HTML/Elemento/ins /es/docs/Web/HTML/Elemento/ins -/es/docs/HTML/Elemento/kbd /es/docs/Web/HTML/Elemento/kbd -/es/docs/HTML/Elemento/keygen /es/docs/Web/HTML/Elemento/keygen -/es/docs/HTML/Elemento/label /es/docs/Web/HTML/Elemento/label -/es/docs/HTML/Elemento/legend /es/docs/Web/HTML/Elemento/legend -/es/docs/HTML/Elemento/li /es/docs/Web/HTML/Elemento/li -/es/docs/HTML/Elemento/link /es/docs/Web/HTML/Elemento/link -/es/docs/HTML/Elemento/main /es/docs/Web/HTML/Elemento/main -/es/docs/HTML/Elemento/map /es/docs/Web/HTML/Elemento/map -/es/docs/HTML/Elemento/mark /es/docs/Web/HTML/Elemento/mark -/es/docs/HTML/Elemento/menu /es/docs/Web/HTML/Elemento/menu -/es/docs/HTML/Elemento/meta /es/docs/Web/HTML/Elemento/meta -/es/docs/HTML/Elemento/nav /es/docs/Web/HTML/Elemento/nav -/es/docs/HTML/Elemento/noframes /es/docs/Web/HTML/Elemento/noframes -/es/docs/HTML/Elemento/noscript /es/docs/Web/HTML/Elemento/noscript -/es/docs/HTML/Elemento/ol /es/docs/Web/HTML/Elemento/ol -/es/docs/HTML/Elemento/p /es/docs/Web/HTML/Elemento/p -/es/docs/HTML/Elemento/param /es/docs/Web/HTML/Elemento/param -/es/docs/HTML/Elemento/pre /es/docs/Web/HTML/Elemento/pre -/es/docs/HTML/Elemento/preformato /es/docs/Web/HTML/Elemento/pre -/es/docs/HTML/Elemento/q /es/docs/Web/HTML/Elemento/q -/es/docs/HTML/Elemento/s /es/docs/Web/HTML/Elemento/s -/es/docs/HTML/Elemento/samp /es/docs/Web/HTML/Elemento/samp -/es/docs/HTML/Elemento/small /es/docs/Web/HTML/Elemento/small -/es/docs/HTML/Elemento/source /es/docs/Web/HTML/Elemento/source -/es/docs/HTML/Elemento/span /es/docs/Web/HTML/Elemento/span -/es/docs/HTML/Elemento/strike /es/docs/Web/HTML/Elemento/strike -/es/docs/HTML/Elemento/strong /es/docs/Web/HTML/Elemento/strong -/es/docs/HTML/Elemento/style /es/docs/Web/HTML/Elemento/style -/es/docs/HTML/Elemento/sub /es/docs/Web/HTML/Elemento/sub -/es/docs/HTML/Elemento/sup /es/docs/Web/HTML/Elemento/sup -/es/docs/HTML/Elemento/time /es/docs/Web/HTML/Elemento/time -/es/docs/HTML/Elemento/title /es/docs/Web/HTML/Elemento/title -/es/docs/HTML/Elemento/tt /es/docs/Web/HTML/Elemento/tt -/es/docs/HTML/Elemento/u /es/docs/Web/HTML/Elemento/u -/es/docs/HTML/Elemento/ul /es/docs/Web/HTML/Elemento/ul -/es/docs/HTML/Elemento/var /es/docs/Web/HTML/Elemento/var -/es/docs/HTML/Elemento/video /es/docs/Web/HTML/Elemento/video -/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 -/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/HTML/HTML5/Introducción_a_HTML5 -/es/docs/HTML/La_importancia_de_comentar_correctamente /es/docs/Web/HTML/La_importancia_de_comentar_correctamente -/es/docs/HTML:Canvas /es/docs/Web/HTML/Canvas -/es/docs/HTML:Element /es/docs/Web/HTML/Elemento -/es/docs/HTML:Element:a /es/docs/Web/HTML/Elemento/a -/es/docs/HTML:Elemento /es/docs/Web/HTML/Elemento -/es/docs/HTML:Elemento:Tipos_de_elementos /es/docs/Web/HTML/Elemento/Tipos_de_elementos -/es/docs/HTML:Elemento:a /es/docs/Web/HTML/Elemento/a -/es/docs/HTML:Elemento:abbr /es/docs/Web/HTML/Elemento/abbr -/es/docs/HTML:Elemento:acronym /es/docs/Web/HTML/Elemento/acronym -/es/docs/HTML:Elemento:address /es/docs/Web/HTML/Elemento/address -/es/docs/HTML:Elemento:applet /es/docs/Web/HTML/Elemento/applet -/es/docs/HTML:Elemento:area /es/docs/Web/HTML/Elemento/area -/es/docs/HTML:Elemento:b /es/docs/Web/HTML/Elemento/b -/es/docs/HTML:Elemento:base /es/docs/Web/HTML/Elemento/base -/es/docs/HTML:Elemento:basefont /es/docs/Web/HTML/Elemento/basefont -/es/docs/HTML:Elemento:bdo /es/docs/Web/HTML/Elemento/bdo -/es/docs/HTML:Elemento:big /es/docs/Web/HTML/Elemento/big -/es/docs/HTML:Elemento:blockquote /es/docs/Web/HTML/Elemento/blockquote -/es/docs/HTML:Elemento:body /es/docs/Web/HTML/Elemento/body -/es/docs/HTML:Elemento:br /es/docs/Web/HTML/Elemento/br -/es/docs/HTML:Elemento:button /es/docs/Web/HTML/Elemento/button -/es/docs/HTML:Elemento:caption /es/docs/Web/HTML/Elemento/caption -/es/docs/HTML:Elemento:center /es/docs/Web/HTML/Elemento/center -/es/docs/HTML:Elemento:cite /es/docs/Web/HTML/Elemento/cite -/es/docs/HTML:Elemento:code /es/docs/Web/HTML/Elemento/code -/es/docs/HTML:Elemento:col /es/docs/Web/HTML/Elemento/col -/es/docs/HTML:Elemento:colgroup /es/docs/Web/HTML/Elemento/colgroup -/es/docs/HTML:Elemento:dd /es/docs/Web/HTML/Elemento/dd -/es/docs/HTML:Elemento:del /es/docs/Web/HTML/Elemento/del -/es/docs/HTML:Elemento:dfn /es/docs/Web/HTML/Elemento/dfn -/es/docs/HTML:Elemento:dir /es/docs/Web/HTML/Elemento/dir -/es/docs/HTML:Elemento:div /es/docs/Web/HTML/Elemento/div -/es/docs/HTML:Elemento:dl /es/docs/Web/HTML/Elemento/dl -/es/docs/HTML:Elemento:dt /es/docs/Web/HTML/Elemento/dt -/es/docs/HTML:Elemento:em /es/docs/Web/HTML/Elemento/em -/es/docs/HTML:Elemento:fieldset /es/docs/Web/HTML/Elemento/fieldset -/es/docs/HTML:Elemento:font /es/docs/Web/HTML/Elemento/font -/es/docs/HTML:Elemento:frame /es/docs/Web/HTML/Elemento/frame -/es/docs/HTML:Elemento:frameset /es/docs/Web/HTML/Elemento/frameset -/es/docs/HTML:Elemento:h1 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML:Elemento:h2 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML:Elemento:h3 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML:Elemento:h4 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML:Elemento:h5 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML:Elemento:h6 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/HTML:Elemento:head /es/docs/Web/HTML/Elemento/head -/es/docs/HTML:Elemento:hr /es/docs/Web/HTML/Elemento/hr -/es/docs/HTML:Elemento:html /es/docs/Web/HTML/Elemento/html -/es/docs/HTML:Elemento:i /es/docs/Web/HTML/Elemento/i -/es/docs/HTML:Elemento:ins /es/docs/Web/HTML/Elemento/ins -/es/docs/HTML:Elemento:kbd /es/docs/Web/HTML/Elemento/kbd -/es/docs/HTML:Elemento:label /es/docs/Web/HTML/Elemento/label -/es/docs/HTML:Elemento:legend /es/docs/Web/HTML/Elemento/legend -/es/docs/HTML:Elemento:li /es/docs/Web/HTML/Elemento/li -/es/docs/HTML:Elemento:link /es/docs/Web/HTML/Elemento/link -/es/docs/HTML:Elemento:map /es/docs/Web/HTML/Elemento/map -/es/docs/HTML:Elemento:menu /es/docs/Web/HTML/Elemento/menu -/es/docs/HTML:Elemento:meta /es/docs/Web/HTML/Elemento/meta -/es/docs/HTML:Elemento:noframes /es/docs/Web/HTML/Elemento/noframes -/es/docs/HTML:Elemento:noscript /es/docs/Web/HTML/Elemento/noscript -/es/docs/HTML:Elemento:ol /es/docs/Web/HTML/Elemento/ol -/es/docs/HTML:Elemento:p /es/docs/Web/HTML/Elemento/p -/es/docs/HTML:Elemento:param /es/docs/Web/HTML/Elemento/param -/es/docs/HTML:Elemento:pre /es/docs/Web/HTML/Elemento/pre -/es/docs/HTML:Elemento:q /es/docs/Web/HTML/Elemento/q -/es/docs/HTML:Elemento:s /es/docs/Web/HTML/Elemento/s -/es/docs/HTML:Elemento:samp /es/docs/Web/HTML/Elemento/samp -/es/docs/HTML:Elemento:small /es/docs/Web/HTML/Elemento/small -/es/docs/HTML:Elemento:span /es/docs/Web/HTML/Elemento/span -/es/docs/HTML:Elemento:strike /es/docs/Web/HTML/Elemento/strike -/es/docs/HTML:Elemento:strong /es/docs/Web/HTML/Elemento/strong -/es/docs/HTML:Elemento:style /es/docs/Web/HTML/Elemento/style -/es/docs/HTML:Elemento:sub /es/docs/Web/HTML/Elemento/sub -/es/docs/HTML:Elemento:sup /es/docs/Web/HTML/Elemento/sup -/es/docs/HTML:Elemento:title /es/docs/Web/HTML/Elemento/title -/es/docs/HTML:Elemento:tt /es/docs/Web/HTML/Elemento/tt -/es/docs/HTML:Elemento:u /es/docs/Web/HTML/Elemento/u -/es/docs/HTML:Elemento:ul /es/docs/Web/HTML/Elemento/ul -/es/docs/HTML:Elemento:var /es/docs/Web/HTML/Elemento/var -/es/docs/HTML:La_importancia_de_comentar_correctamente /es/docs/Web/HTML/La_importancia_de_comentar_correctamente +/es/docs/HTML/Elemento/Audio /es/docs/Web/HTML/Element/audio +/es/docs/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/Progreso /es/docs/Web/HTML/Element/progress +/es/docs/HTML/Elemento/Tipos_de_elementos /es/docs/orphaned/Web/HTML/Elemento/Tipos_de_elementos +/es/docs/HTML/Elemento/a /es/docs/Web/HTML/Element/a +/es/docs/HTML/Elemento/abbr /es/docs/Web/HTML/Element/abbr +/es/docs/HTML/Elemento/acronym /es/docs/Web/HTML/Element/acronym +/es/docs/HTML/Elemento/address /es/docs/Web/HTML/Element/address +/es/docs/HTML/Elemento/applet /es/docs/Web/HTML/Element/applet +/es/docs/HTML/Elemento/area /es/docs/Web/HTML/Element/area +/es/docs/HTML/Elemento/article /es/docs/Web/HTML/Element/article +/es/docs/HTML/Elemento/aside /es/docs/Web/HTML/Element/aside +/es/docs/HTML/Elemento/b /es/docs/Web/HTML/Element/b +/es/docs/HTML/Elemento/base /es/docs/Web/HTML/Element/base +/es/docs/HTML/Elemento/basefont /es/docs/Web/HTML/Element/basefont +/es/docs/HTML/Elemento/bdo /es/docs/Web/HTML/Element/bdo +/es/docs/HTML/Elemento/big /es/docs/Web/HTML/Element/big +/es/docs/HTML/Elemento/blockquote /es/docs/Web/HTML/Element/blockquote +/es/docs/HTML/Elemento/body /es/docs/Web/HTML/Element/body +/es/docs/HTML/Elemento/br /es/docs/Web/HTML/Element/br +/es/docs/HTML/Elemento/button /es/docs/Web/HTML/Element/button +/es/docs/HTML/Elemento/canvas /es/docs/Web/HTML/Element/canvas +/es/docs/HTML/Elemento/caption /es/docs/Web/HTML/Element/caption +/es/docs/HTML/Elemento/center /es/docs/Web/HTML/Element/center +/es/docs/HTML/Elemento/cite /es/docs/Web/HTML/Element/cite +/es/docs/HTML/Elemento/code /es/docs/Web/HTML/Element/code +/es/docs/HTML/Elemento/col /es/docs/Web/HTML/Element/col +/es/docs/HTML/Elemento/colgroup /es/docs/Web/HTML/Element/colgroup +/es/docs/HTML/Elemento/datalist /es/docs/orphaned/HTML/Elemento/datalist +/es/docs/HTML/Elemento/dd /es/docs/Web/HTML/Element/dd +/es/docs/HTML/Elemento/del /es/docs/Web/HTML/Element/del +/es/docs/HTML/Elemento/dfn /es/docs/Web/HTML/Element/dfn +/es/docs/HTML/Elemento/dir /es/docs/Web/HTML/Element/dir +/es/docs/HTML/Elemento/div /es/docs/Web/HTML/Element/div +/es/docs/HTML/Elemento/dl /es/docs/Web/HTML/Element/dl +/es/docs/HTML/Elemento/dt /es/docs/Web/HTML/Element/dt +/es/docs/HTML/Elemento/em /es/docs/Web/HTML/Element/em +/es/docs/HTML/Elemento/embed /es/docs/Web/HTML/Element/embed +/es/docs/HTML/Elemento/etiqueta /es/docs/Web/HTML/Element/label +/es/docs/HTML/Elemento/fieldset /es/docs/Web/HTML/Element/fieldset +/es/docs/HTML/Elemento/figure /es/docs/Web/HTML/Element/figure +/es/docs/HTML/Elemento/font /es/docs/Web/HTML/Element/font +/es/docs/HTML/Elemento/footer /es/docs/Web/HTML/Element/footer +/es/docs/HTML/Elemento/form /es/docs/orphaned/HTML/Elemento/form +/es/docs/HTML/Elemento/frame /es/docs/Web/HTML/Element/frame +/es/docs/HTML/Elemento/frameset /es/docs/Web/HTML/Element/frameset +/es/docs/HTML/Elemento/h1 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/h2 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/h3 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/h4 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/h5 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/h6 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML/Elemento/head /es/docs/Web/HTML/Element/head +/es/docs/HTML/Elemento/header /es/docs/Web/HTML/Element/header +/es/docs/HTML/Elemento/hr /es/docs/Web/HTML/Element/hr +/es/docs/HTML/Elemento/html /es/docs/Web/HTML/Element/html +/es/docs/HTML/Elemento/i /es/docs/Web/HTML/Element/i +/es/docs/HTML/Elemento/img /es/docs/Web/HTML/Element/img +/es/docs/HTML/Elemento/input /es/docs/Web/HTML/Element/input +/es/docs/HTML/Elemento/ins /es/docs/Web/HTML/Element/ins +/es/docs/HTML/Elemento/kbd /es/docs/Web/HTML/Element/kbd +/es/docs/HTML/Elemento/keygen /es/docs/Web/HTML/Element/keygen +/es/docs/HTML/Elemento/label /es/docs/Web/HTML/Element/label +/es/docs/HTML/Elemento/legend /es/docs/Web/HTML/Element/legend +/es/docs/HTML/Elemento/li /es/docs/Web/HTML/Element/li +/es/docs/HTML/Elemento/link /es/docs/Web/HTML/Element/link +/es/docs/HTML/Elemento/main /es/docs/Web/HTML/Element/main +/es/docs/HTML/Elemento/map /es/docs/Web/HTML/Element/map +/es/docs/HTML/Elemento/mark /es/docs/Web/HTML/Element/mark +/es/docs/HTML/Elemento/menu /es/docs/Web/HTML/Element/menu +/es/docs/HTML/Elemento/meta /es/docs/Web/HTML/Element/meta +/es/docs/HTML/Elemento/nav /es/docs/Web/HTML/Element/nav +/es/docs/HTML/Elemento/noframes /es/docs/Web/HTML/Element/noframes +/es/docs/HTML/Elemento/noscript /es/docs/Web/HTML/Element/noscript +/es/docs/HTML/Elemento/ol /es/docs/Web/HTML/Element/ol +/es/docs/HTML/Elemento/p /es/docs/Web/HTML/Element/p +/es/docs/HTML/Elemento/param /es/docs/Web/HTML/Element/param +/es/docs/HTML/Elemento/pre /es/docs/Web/HTML/Element/pre +/es/docs/HTML/Elemento/preformato /es/docs/Web/HTML/Element/pre +/es/docs/HTML/Elemento/q /es/docs/Web/HTML/Element/q +/es/docs/HTML/Elemento/s /es/docs/Web/HTML/Element/s +/es/docs/HTML/Elemento/samp /es/docs/Web/HTML/Element/samp +/es/docs/HTML/Elemento/section /es/docs/orphaned/HTML/Elemento/section +/es/docs/HTML/Elemento/small /es/docs/Web/HTML/Element/small +/es/docs/HTML/Elemento/source /es/docs/Web/HTML/Element/source +/es/docs/HTML/Elemento/span /es/docs/Web/HTML/Element/span +/es/docs/HTML/Elemento/strike /es/docs/Web/HTML/Element/strike +/es/docs/HTML/Elemento/strong /es/docs/Web/HTML/Element/strong +/es/docs/HTML/Elemento/style /es/docs/Web/HTML/Element/style +/es/docs/HTML/Elemento/sub /es/docs/Web/HTML/Element/sub +/es/docs/HTML/Elemento/sup /es/docs/Web/HTML/Element/sup +/es/docs/HTML/Elemento/time /es/docs/Web/HTML/Element/time +/es/docs/HTML/Elemento/title /es/docs/Web/HTML/Element/title +/es/docs/HTML/Elemento/tt /es/docs/Web/HTML/Element/tt +/es/docs/HTML/Elemento/u /es/docs/Web/HTML/Element/u +/es/docs/HTML/Elemento/ul /es/docs/Web/HTML/Element/ul +/es/docs/HTML/Elemento/var /es/docs/Web/HTML/Element/var +/es/docs/HTML/Elemento/video /es/docs/Web/HTML/Element/video +/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/conflicting/Web/Media/Formats +/es/docs/HTML/HTML5 /es/docs/Web/Guide/HTML/HTML5 +/es/docs/HTML/HTML5/Forms_in_HTML5 /es/docs/Learn/Forms +/es/docs/HTML/HTML5/Formularios_en_HTML5 /es/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/es/docs/HTML/HTML5/HTML5_Parser /es/docs/Web/Guide/HTML/HTML5/HTML5_Parser +/es/docs/HTML/HTML5/HTML5_lista_elementos /es/docs/conflicting/Web/HTML/Element +/es/docs/HTML/HTML5/Introducción_a_HTML5 /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 +/es/docs/HTML/HTML5/Validacion_de_restricciones /es/docs/Web/Guide/HTML/HTML5/Constraint_validation +/es/docs/HTML/La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started +/es/docs/HTML:Canvas /es/docs/Web/API/Canvas_API +/es/docs/HTML:Element /es/docs/Web/HTML/Element +/es/docs/HTML:Element:a /es/docs/Web/HTML/Element/a +/es/docs/HTML:Elemento /es/docs/Web/HTML/Element +/es/docs/HTML:Elemento:Tipos_de_elementos /es/docs/orphaned/Web/HTML/Elemento/Tipos_de_elementos +/es/docs/HTML:Elemento:a /es/docs/Web/HTML/Element/a +/es/docs/HTML:Elemento:abbr /es/docs/Web/HTML/Element/abbr +/es/docs/HTML:Elemento:acronym /es/docs/Web/HTML/Element/acronym +/es/docs/HTML:Elemento:address /es/docs/Web/HTML/Element/address +/es/docs/HTML:Elemento:applet /es/docs/Web/HTML/Element/applet +/es/docs/HTML:Elemento:area /es/docs/Web/HTML/Element/area +/es/docs/HTML:Elemento:b /es/docs/Web/HTML/Element/b +/es/docs/HTML:Elemento:base /es/docs/Web/HTML/Element/base +/es/docs/HTML:Elemento:basefont /es/docs/Web/HTML/Element/basefont +/es/docs/HTML:Elemento:bdo /es/docs/Web/HTML/Element/bdo +/es/docs/HTML:Elemento:big /es/docs/Web/HTML/Element/big +/es/docs/HTML:Elemento:blockquote /es/docs/Web/HTML/Element/blockquote +/es/docs/HTML:Elemento:body /es/docs/Web/HTML/Element/body +/es/docs/HTML:Elemento:br /es/docs/Web/HTML/Element/br +/es/docs/HTML:Elemento:button /es/docs/Web/HTML/Element/button +/es/docs/HTML:Elemento:caption /es/docs/Web/HTML/Element/caption +/es/docs/HTML:Elemento:center /es/docs/Web/HTML/Element/center +/es/docs/HTML:Elemento:cite /es/docs/Web/HTML/Element/cite +/es/docs/HTML:Elemento:code /es/docs/Web/HTML/Element/code +/es/docs/HTML:Elemento:col /es/docs/Web/HTML/Element/col +/es/docs/HTML:Elemento:colgroup /es/docs/Web/HTML/Element/colgroup +/es/docs/HTML:Elemento:dd /es/docs/Web/HTML/Element/dd +/es/docs/HTML:Elemento:del /es/docs/Web/HTML/Element/del +/es/docs/HTML:Elemento:dfn /es/docs/Web/HTML/Element/dfn +/es/docs/HTML:Elemento:dir /es/docs/Web/HTML/Element/dir +/es/docs/HTML:Elemento:div /es/docs/Web/HTML/Element/div +/es/docs/HTML:Elemento:dl /es/docs/Web/HTML/Element/dl +/es/docs/HTML:Elemento:dt /es/docs/Web/HTML/Element/dt +/es/docs/HTML:Elemento:em /es/docs/Web/HTML/Element/em +/es/docs/HTML:Elemento:fieldset /es/docs/Web/HTML/Element/fieldset +/es/docs/HTML:Elemento:font /es/docs/Web/HTML/Element/font +/es/docs/HTML:Elemento:frame /es/docs/Web/HTML/Element/frame +/es/docs/HTML:Elemento:frameset /es/docs/Web/HTML/Element/frameset +/es/docs/HTML:Elemento:h1 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML:Elemento:h2 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML:Elemento:h3 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML:Elemento:h4 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML:Elemento:h5 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML:Elemento:h6 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/HTML:Elemento:head /es/docs/Web/HTML/Element/head +/es/docs/HTML:Elemento:hr /es/docs/Web/HTML/Element/hr +/es/docs/HTML:Elemento:html /es/docs/Web/HTML/Element/html +/es/docs/HTML:Elemento:i /es/docs/Web/HTML/Element/i +/es/docs/HTML:Elemento:ins /es/docs/Web/HTML/Element/ins +/es/docs/HTML:Elemento:kbd /es/docs/Web/HTML/Element/kbd +/es/docs/HTML:Elemento:label /es/docs/Web/HTML/Element/label +/es/docs/HTML:Elemento:legend /es/docs/Web/HTML/Element/legend +/es/docs/HTML:Elemento:li /es/docs/Web/HTML/Element/li +/es/docs/HTML:Elemento:link /es/docs/Web/HTML/Element/link +/es/docs/HTML:Elemento:map /es/docs/Web/HTML/Element/map +/es/docs/HTML:Elemento:menu /es/docs/Web/HTML/Element/menu +/es/docs/HTML:Elemento:meta /es/docs/Web/HTML/Element/meta +/es/docs/HTML:Elemento:noframes /es/docs/Web/HTML/Element/noframes +/es/docs/HTML:Elemento:noscript /es/docs/Web/HTML/Element/noscript +/es/docs/HTML:Elemento:ol /es/docs/Web/HTML/Element/ol +/es/docs/HTML:Elemento:p /es/docs/Web/HTML/Element/p +/es/docs/HTML:Elemento:param /es/docs/Web/HTML/Element/param +/es/docs/HTML:Elemento:pre /es/docs/Web/HTML/Element/pre +/es/docs/HTML:Elemento:q /es/docs/Web/HTML/Element/q +/es/docs/HTML:Elemento:s /es/docs/Web/HTML/Element/s +/es/docs/HTML:Elemento:samp /es/docs/Web/HTML/Element/samp +/es/docs/HTML:Elemento:small /es/docs/Web/HTML/Element/small +/es/docs/HTML:Elemento:span /es/docs/Web/HTML/Element/span +/es/docs/HTML:Elemento:strike /es/docs/Web/HTML/Element/strike +/es/docs/HTML:Elemento:strong /es/docs/Web/HTML/Element/strong +/es/docs/HTML:Elemento:style /es/docs/Web/HTML/Element/style +/es/docs/HTML:Elemento:sub /es/docs/Web/HTML/Element/sub +/es/docs/HTML:Elemento:sup /es/docs/Web/HTML/Element/sup +/es/docs/HTML:Elemento:title /es/docs/Web/HTML/Element/title +/es/docs/HTML:Elemento:tt /es/docs/Web/HTML/Element/tt +/es/docs/HTML:Elemento:u /es/docs/Web/HTML/Element/u +/es/docs/HTML:Elemento:ul /es/docs/Web/HTML/Element/ul +/es/docs/HTML:Elemento:var /es/docs/Web/HTML/Element/var +/es/docs/HTML:La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started +/es/docs/Herramientas /es/docs/orphaned/Herramientas /es/docs/Herramientas_API /es/docs/API_del_Toolkit +/es/docs/How_to_create_a_DOM_tree /es/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree /es/docs/Html_Validator_(externo) https://addons.mozilla.org/firefox/249/ +/es/docs/Incrustando_Mozilla/Comunidad /es/docs/orphaned/Incrustando_Mozilla/Comunidad +/es/docs/IndexedDB /es/docs/conflicting/Web/API/IndexedDB_API /es/docs/IndexedDB-840092-dup /es/docs/Web/API/IndexedDB_API -/es/docs/IndexedDB-840092-dup/Conceptos_Basicos_Detras_De_IndexedDB /es/docs/Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB -/es/docs/IndexedDB-840092-dup/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Usando_IndexedDB +/es/docs/IndexedDB-840092-dup/Conceptos_Basicos_Detras_De_IndexedDB /es/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +/es/docs/IndexedDB-840092-dup/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Using_IndexedDB +/es/docs/Instalación_de_motores_de_búsqueda_desde_páginas_web /es/docs/orphaned/Instalación_de_motores_de_búsqueda_desde_páginas_web /es/docs/Instalar_el_manifest /es/docs/Manifiesto_de_instalación /es/docs/Install_Manifests /es/docs/Manifiesto_de_instalación -/es/docs/Introducción_a_JavaScript_orientado_a_objetos /es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos -/es/docs/Introducción_a_XML /es/docs/Web/XML/Introducción_a_XML -/es/docs/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +/es/docs/Introducción_a_JavaScript_orientado_a_objetos /es/docs/conflicting/Learn/JavaScript/Objects +/es/docs/Introducción_a_XML /es/docs/Web/XML/XML_introduction +/es/docs/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /es/docs/JavaScript /es/docs/Web/JavaScript -/es/docs/JavaScript/Acerca_de_JavaScript /es/docs/Web/JavaScript/Acerca_de_JavaScript +/es/docs/JavaScript/Acerca_de_JavaScript /es/docs/Web/JavaScript/About_JavaScript /es/docs/JavaScript/Guide /es/docs/Web/JavaScript/Guide -/es/docs/JavaScript/Guide/AcercaDe /es/docs/Web/JavaScript/Guide/Introducción +/es/docs/JavaScript/Guide/AcercaDe /es/docs/Web/JavaScript/Guide/Introduction /es/docs/JavaScript/Guide/Closures /es/docs/Web/JavaScript/Closures /es/docs/JavaScript/Guide/Details_of_the_Object_Model /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model -/es/docs/JavaScript/Guide/Funciones /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/JavaScript/Guide/JavaScript_Overview /es/docs/Web/JavaScript/Guide/Introducción +/es/docs/JavaScript/Guide/Funciones /es/docs/Web/JavaScript/Guide/Functions +/es/docs/JavaScript/Guide/JavaScript_Overview /es/docs/Web/JavaScript/Guide/Introduction /es/docs/JavaScript/Guide/Obsolete_Pages /es/docs/Web/JavaScript/Guide /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5 /es/docs/Web/JavaScript/Guide -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Reference/Statements/const /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Constructores_más_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades @@ -861,7 +1019,7 @@ /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_una_expresión_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Functions /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarquía /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia @@ -887,15 +1045,15 @@ /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Herencia_no_múltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Información_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Reference +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Reference/Global_Objects/String /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_aritméticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos @@ -905,10 +1063,10 @@ /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_lógicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Reference/Statements/block /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement @@ -919,13 +1077,13 @@ /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Functions +/es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Functions /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types -/es/docs/JavaScript/Guide/Trabajando_con_objectos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos +/es/docs/JavaScript/Guide/Trabajando_con_objectos /es/docs/Web/JavaScript/Guide/Working_with_Objects /es/docs/JavaScript/Guide/Valores,_variables_y_literales /es/docs/Web/JavaScript/Guide/Grammar_and_types -/es/docs/JavaScript/Introducción_a_JavaScript_orientado_a_objetos /es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos +/es/docs/JavaScript/Introducción_a_JavaScript_orientado_a_objetos /es/docs/conflicting/Learn/JavaScript/Objects /es/docs/JavaScript/Novedades_en_JavaScript /es/docs/Web/JavaScript/Novedades_en_JavaScript /es/docs/JavaScript/Novedades_en_JavaScript/1.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5 /es/docs/JavaScript/Novedades_en_JavaScript/1.6 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6 @@ -934,160 +1092,186 @@ /es/docs/JavaScript/Novedades_en_JavaScript/1.8.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8.5 /es/docs/JavaScript/Novedades_en_JavaScript/Novedades_en_JavaScript_1.8.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8.5 /es/docs/JavaScript/Primeros_Pasos /es/docs/Learn/Getting_started_with_the_web/JavaScript_basics -/es/docs/JavaScript/Reference/Global_Objects/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push -/es/docs/JavaScript/Reference/Global_Objects/RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/JavaScript/Reference/Operators/function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/JavaScript/Reference/Operators/get /es/docs/Web/JavaScript/Referencia/Funciones/get -/es/docs/JavaScript/Reference/Operators/in /es/docs/Web/JavaScript/Referencia/Operadores/in -/es/docs/JavaScript/Reference/Operators/this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/JavaScript/Referencia /es/docs/Web/JavaScript/Referencia -/es/docs/JavaScript/Referencia/Acerca_de /es/docs/Web/JavaScript/Referencia/Acerca_de -/es/docs/JavaScript/Referencia/Características_Desaprobadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/JavaScript/Referencia/Características_Despreciadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/JavaScript/Referencia/Funciones /es/docs/Web/JavaScript/Referencia/Funciones -/es/docs/JavaScript/Referencia/Funciones/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/JavaScript/Referencia/Funciones/arguments /es/docs/Web/JavaScript/Referencia/Funciones/arguments -/es/docs/JavaScript/Referencia/Funciones/arguments/callee /es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee -/es/docs/JavaScript/Referencia/Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/JavaScript/Referencia/Funciones_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/JavaScript/Referencia/Funciones_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/JavaScript/Referencia/Funciones_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/JavaScript/Referencia/Funciones_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI -/es/docs/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent -/es/docs/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI -/es/docs/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent -/es/docs/JavaScript/Referencia/Funciones_globales/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval -/es/docs/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite -/es/docs/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN -/es/docs/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt -/es/docs/JavaScript/Referencia/Objetos_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/JavaScript/Referencia/Objetos_globales/Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/JavaScript/Referencia/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach -/es/docs/JavaScript/Referencia/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf -/es/docs/JavaScript/Referencia/Objetos_globales/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push -/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce -/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight -/es/docs/JavaScript/Referencia/Objetos_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/JavaScript/Referencia/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource -/es/docs/JavaScript/Referencia/Objetos_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/JavaScript/Referencia/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC -/es/docs/JavaScript/Referencia/Objetos_globales/Date/now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now -/es/docs/JavaScript/Referencia/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse -/es/docs/JavaScript/Referencia/Objetos_globales/Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error -/es/docs/JavaScript/Referencia/Objetos_globales/Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/JavaScript/Referencia/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply -/es/docs/JavaScript/Referencia/Objetos_globales/Function/arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments -/es/docs/JavaScript/Referencia/Objetos_globales/Function/call /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call -/es/docs/JavaScript/Referencia/Objetos_globales/Function/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype -/es/docs/JavaScript/Referencia/Objetos_globales/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON -/es/docs/JavaScript/Referencia/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify -/es/docs/JavaScript/Referencia/Objetos_globales/Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/JavaScript/Referencia/Objetos_globales/Math/E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E -/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10 -/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2 -/es/docs/JavaScript/Referencia/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E -/es/docs/JavaScript/Referencia/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor -/es/docs/JavaScript/Referencia/Objetos_globales/Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY -/es/docs/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY -/es/docs/JavaScript/Referencia/Objetos_globales/Number/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype -/es/docs/JavaScript/Referencia/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString -/es/docs/JavaScript/Referencia/Objetos_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/JavaScript/Referencia/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor -/es/docs/JavaScript/Referencia/Objetos_globales/Object/create /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create -/es/docs/JavaScript/Referencia/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties -/es/docs/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty -/es/docs/JavaScript/Referencia/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString +/es/docs/JavaScript/Reference/Global_Objects/Array/push /es/docs/Web/JavaScript/Reference/Global_Objects/Array/push +/es/docs/JavaScript/Reference/Global_Objects/RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/JavaScript/Reference/Operators/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/JavaScript/Reference/Operators/get /es/docs/Web/JavaScript/Reference/Functions/get +/es/docs/JavaScript/Reference/Operators/in /es/docs/Web/JavaScript/Reference/Operators/in +/es/docs/JavaScript/Reference/Operators/this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/JavaScript/Referencia /es/docs/Web/JavaScript/Reference +/es/docs/JavaScript/Referencia/Acerca_de /es/docs/Web/JavaScript/Reference/About +/es/docs/JavaScript/Referencia/Características_Desaprobadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/JavaScript/Referencia/Características_Despreciadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/JavaScript/Referencia/Funciones /es/docs/Web/JavaScript/Reference/Functions +/es/docs/JavaScript/Referencia/Funciones/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/JavaScript/Referencia/Funciones/arguments /es/docs/Web/JavaScript/Reference/Functions/arguments +/es/docs/JavaScript/Referencia/Funciones/arguments/callee /es/docs/Web/JavaScript/Reference/Functions/arguments/callee +/es/docs/JavaScript/Referencia/Funciones_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/JavaScript/Referencia/Funciones_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/JavaScript/Referencia/Funciones_globales/Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/JavaScript/Referencia/Funciones_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/JavaScript/Referencia/Funciones_globales/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI +/es/docs/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent +/es/docs/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI +/es/docs/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent +/es/docs/JavaScript/Referencia/Funciones_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval +/es/docs/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite +/es/docs/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN +/es/docs/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/parseInt +/es/docs/JavaScript/Referencia/Objetos_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/JavaScript/Referencia/Objetos_globales/Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/JavaScript/Referencia/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach +/es/docs/JavaScript/Referencia/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf +/es/docs/JavaScript/Referencia/Objetos_globales/Array/push /es/docs/Web/JavaScript/Reference/Global_Objects/Array/push +/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce +/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +/es/docs/JavaScript/Referencia/Objetos_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/JavaScript/Referencia/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource +/es/docs/JavaScript/Referencia/Objetos_globales/Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/JavaScript/Referencia/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC +/es/docs/JavaScript/Referencia/Objetos_globales/Date/now /es/docs/Web/JavaScript/Reference/Global_Objects/Date/now +/es/docs/JavaScript/Referencia/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Reference/Global_Objects/Date/parse +/es/docs/JavaScript/Referencia/Objetos_globales/Error /es/docs/Web/JavaScript/Reference/Global_Objects/Error +/es/docs/JavaScript/Referencia/Objetos_globales/Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/JavaScript/Referencia/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Reference/Global_Objects/Function/apply +/es/docs/JavaScript/Referencia/Objetos_globales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments +/es/docs/JavaScript/Referencia/Objetos_globales/Function/call /es/docs/Web/JavaScript/Reference/Global_Objects/Function/call +/es/docs/JavaScript/Referencia/Objetos_globales/Function/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/JavaScript/Referencia/Objetos_globales/JSON /es/docs/Web/JavaScript/Reference/Global_Objects/JSON +/es/docs/JavaScript/Referencia/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify +/es/docs/JavaScript/Referencia/Objetos_globales/Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/JavaScript/Referencia/Objetos_globales/Math/E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/E +/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10 +/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN2 +/es/docs/JavaScript/Referencia/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG2E +/es/docs/JavaScript/Referencia/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor +/es/docs/JavaScript/Referencia/Objetos_globales/Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +/es/docs/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +/es/docs/JavaScript/Referencia/Objetos_globales/Number/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/JavaScript/Referencia/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString +/es/docs/JavaScript/Referencia/Objetos_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/JavaScript/Referencia/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor +/es/docs/JavaScript/Referencia/Objetos_globales/Object/create /es/docs/Web/JavaScript/Reference/Global_Objects/Object/create +/es/docs/JavaScript/Referencia/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties +/es/docs/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +/es/docs/JavaScript/Referencia/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toString /es/docs/JavaScript/Referencia/Objetos_globales/Object/unwatch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch /es/docs/JavaScript/Referencia/Objetos_globales/Object/watch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch -/es/docs/JavaScript/Referencia/Objetos_globales/RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/JavaScript/Referencia/Objetos_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/JavaScript/Referencia/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor -/es/docs/JavaScript/Referencia/Objetos_globales/String/big /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big -/es/docs/JavaScript/Referencia/Objetos_globales/String/blink /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink -/es/docs/JavaScript/Referencia/Objetos_globales/String/bold /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold -/es/docs/JavaScript/Referencia/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt -/es/docs/JavaScript/Referencia/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt -/es/docs/JavaScript/Referencia/Objetos_globales/String/concat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat -/es/docs/JavaScript/Referencia/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/JavaScript/Referencia/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed -/es/docs/JavaScript/Referencia/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode -/es/docs/JavaScript/Referencia/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf -/es/docs/JavaScript/Referencia/Objetos_globales/String/italics /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics -/es/docs/JavaScript/Referencia/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf -/es/docs/JavaScript/Referencia/Objetos_globales/String/length /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length -/es/docs/JavaScript/Referencia/Objetos_globales/String/link /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link -/es/docs/JavaScript/Referencia/Objetos_globales/String/match /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match -/es/docs/JavaScript/Referencia/Objetos_globales/String/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype -/es/docs/JavaScript/Referencia/Objetos_globales/String/replace /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace -/es/docs/JavaScript/Referencia/Objetos_globales/String/search /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search -/es/docs/JavaScript/Referencia/Objetos_globales/String/slice /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice -/es/docs/JavaScript/Referencia/Objetos_globales/String/small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small -/es/docs/JavaScript/Referencia/Objetos_globales/String/split /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split -/es/docs/JavaScript/Referencia/Objetos_globales/String/strike /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike -/es/docs/JavaScript/Referencia/Objetos_globales/String/sub /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub -/es/docs/JavaScript/Referencia/Objetos_globales/String/substr /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr -/es/docs/JavaScript/Referencia/Objetos_globales/String/substring /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring -/es/docs/JavaScript/Referencia/Objetos_globales/String/sup /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup -/es/docs/JavaScript/Referencia/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase -/es/docs/JavaScript/Referencia/Objetos_globales/String/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString -/es/docs/JavaScript/Referencia/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase -/es/docs/JavaScript/Referencia/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf -/es/docs/JavaScript/Referencia/Objetos_globales/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval -/es/docs/JavaScript/Referencia/Objetos_globales/parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat -/es/docs/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/JavaScript/Referencia/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments -/es/docs/JavaScript/Referencia/Operadores /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/JavaScript/Referencia/Operadores/Aritméticos /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/JavaScript/Referencia/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof -/es/docs/JavaScript/Referencia/Operadores/Especiales/typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof -/es/docs/JavaScript/Referencia/Operadores/Especiales/void /es/docs/Web/JavaScript/Referencia/Operadores/void -/es/docs/JavaScript/Referencia/Operadores/Miembros /es/docs/Web/JavaScript/Referencia/Operadores/Miembros -/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/JavaScript/Referencia/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence -/es/docs/JavaScript/Referencia/Operadores/String /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/JavaScript/Referencia/Operadores/function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Referencia/Funciones/get -/es/docs/JavaScript/Referencia/Operadores/in /es/docs/Web/JavaScript/Referencia/Operadores/in -/es/docs/JavaScript/Referencia/Operadores/instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof -/es/docs/JavaScript/Referencia/Operadores/new /es/docs/Web/JavaScript/Referencia/Operadores/new -/es/docs/JavaScript/Referencia/Operadores/this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/JavaScript/Referencia/Operadores/typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof -/es/docs/JavaScript/Referencia/Operadores/void /es/docs/Web/JavaScript/Referencia/Operadores/void -/es/docs/JavaScript/Referencia/Operadores/void_ /es/docs/Web/JavaScript/Referencia/Operadores/void -/es/docs/JavaScript/Referencia/Palabras_Reservadas /es/docs/Web/JavaScript/Referencia/Palabras_Reservadas -/es/docs/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity -/es/docs/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN -/es/docs/JavaScript/Referencia/Propiedades_globales/undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined -/es/docs/JavaScript/Referencia/Sentencias /es/docs/Web/JavaScript/Referencia/Sentencias -/es/docs/JavaScript/Referencia/Sentencias/block /es/docs/Web/JavaScript/Referencia/Sentencias/block -/es/docs/JavaScript/Referencia/Sentencias/break /es/docs/Web/JavaScript/Referencia/Sentencias/break -/es/docs/JavaScript/Referencia/Sentencias/const /es/docs/Web/JavaScript/Referencia/Sentencias/const -/es/docs/JavaScript/Referencia/Sentencias/continue /es/docs/Web/JavaScript/Referencia/Sentencias/continue -/es/docs/JavaScript/Referencia/Sentencias/do...while /es/docs/Web/JavaScript/Referencia/Sentencias/do...while -/es/docs/JavaScript/Referencia/Sentencias/export /es/docs/Web/JavaScript/Referencia/Sentencias/export -/es/docs/JavaScript/Referencia/Sentencias/for /es/docs/Web/JavaScript/Referencia/Sentencias/for -/es/docs/JavaScript/Referencia/Sentencias/for...in /es/docs/Web/JavaScript/Referencia/Sentencias/for...in +/es/docs/JavaScript/Referencia/Objetos_globales/RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/JavaScript/Referencia/Objetos_globales/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/JavaScript/Referencia/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Reference/Global_Objects/String/anchor +/es/docs/JavaScript/Referencia/Objetos_globales/String/big /es/docs/Web/JavaScript/Reference/Global_Objects/String/big +/es/docs/JavaScript/Referencia/Objetos_globales/String/blink /es/docs/Web/JavaScript/Reference/Global_Objects/String/blink +/es/docs/JavaScript/Referencia/Objetos_globales/String/bold /es/docs/Web/JavaScript/Reference/Global_Objects/String/bold +/es/docs/JavaScript/Referencia/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charAt +/es/docs/JavaScript/Referencia/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt +/es/docs/JavaScript/Referencia/Objetos_globales/String/concat /es/docs/Web/JavaScript/Reference/Global_Objects/String/concat +/es/docs/JavaScript/Referencia/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/JavaScript/Referencia/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Reference/Global_Objects/String/fixed +/es/docs/JavaScript/Referencia/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode +/es/docs/JavaScript/Referencia/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf +/es/docs/JavaScript/Referencia/Objetos_globales/String/italics /es/docs/Web/JavaScript/Reference/Global_Objects/String/italics +/es/docs/JavaScript/Referencia/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +/es/docs/JavaScript/Referencia/Objetos_globales/String/length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length +/es/docs/JavaScript/Referencia/Objetos_globales/String/link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link +/es/docs/JavaScript/Referencia/Objetos_globales/String/match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match +/es/docs/JavaScript/Referencia/Objetos_globales/String/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/es/docs/JavaScript/Referencia/Objetos_globales/String/replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace +/es/docs/JavaScript/Referencia/Objetos_globales/String/search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search +/es/docs/JavaScript/Referencia/Objetos_globales/String/slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice +/es/docs/JavaScript/Referencia/Objetos_globales/String/small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small +/es/docs/JavaScript/Referencia/Objetos_globales/String/split /es/docs/Web/JavaScript/Reference/Global_Objects/String/split +/es/docs/JavaScript/Referencia/Objetos_globales/String/strike /es/docs/Web/JavaScript/Reference/Global_Objects/String/strike +/es/docs/JavaScript/Referencia/Objetos_globales/String/sub /es/docs/Web/JavaScript/Reference/Global_Objects/String/sub +/es/docs/JavaScript/Referencia/Objetos_globales/String/substr /es/docs/Web/JavaScript/Reference/Global_Objects/String/substr +/es/docs/JavaScript/Referencia/Objetos_globales/String/substring /es/docs/Web/JavaScript/Reference/Global_Objects/String/substring +/es/docs/JavaScript/Referencia/Objetos_globales/String/sup /es/docs/Web/JavaScript/Reference/Global_Objects/String/sup +/es/docs/JavaScript/Referencia/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase +/es/docs/JavaScript/Referencia/Objetos_globales/String/toString /es/docs/Web/JavaScript/Reference/Global_Objects/String/toString +/es/docs/JavaScript/Referencia/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase +/es/docs/JavaScript/Referencia/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf +/es/docs/JavaScript/Referencia/Objetos_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval +/es/docs/JavaScript/Referencia/Objetos_globales/parseFloat /es/docs/Web/JavaScript/Reference/Global_Objects/parseFloat +/es/docs/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/JavaScript/Referencia/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments +/es/docs/JavaScript/Referencia/Operadores /es/docs/Web/JavaScript/Reference/Operators +/es/docs/JavaScript/Referencia/Operadores/Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Reference/Operators +/es/docs/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/JavaScript/Referencia/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof +/es/docs/JavaScript/Referencia/Operadores/Especiales/typeof /es/docs/Web/JavaScript/Reference/Operators/typeof +/es/docs/JavaScript/Referencia/Operadores/Especiales/void /es/docs/Web/JavaScript/Reference/Operators/void +/es/docs/JavaScript/Referencia/Operadores/Miembros /es/docs/Web/JavaScript/Reference/Operators/Property_Accessors +/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Reference/Operators +/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/JavaScript/Referencia/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence +/es/docs/JavaScript/Referencia/Operadores/String /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/JavaScript/Referencia/Operadores/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Reference/Functions/get +/es/docs/JavaScript/Referencia/Operadores/in /es/docs/Web/JavaScript/Reference/Operators/in +/es/docs/JavaScript/Referencia/Operadores/instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof +/es/docs/JavaScript/Referencia/Operadores/new /es/docs/Web/JavaScript/Reference/Operators/new +/es/docs/JavaScript/Referencia/Operadores/this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/JavaScript/Referencia/Operadores/typeof /es/docs/Web/JavaScript/Reference/Operators/typeof +/es/docs/JavaScript/Referencia/Operadores/void /es/docs/Web/JavaScript/Reference/Operators/void +/es/docs/JavaScript/Referencia/Operadores/void_ /es/docs/Web/JavaScript/Reference/Operators/void +/es/docs/JavaScript/Referencia/Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/es/docs/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity +/es/docs/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN +/es/docs/JavaScript/Referencia/Propiedades_globales/undefined /es/docs/Web/JavaScript/Reference/Global_Objects/undefined +/es/docs/JavaScript/Referencia/Sentencias /es/docs/Web/JavaScript/Reference/Statements +/es/docs/JavaScript/Referencia/Sentencias/block /es/docs/Web/JavaScript/Reference/Statements/block +/es/docs/JavaScript/Referencia/Sentencias/break /es/docs/Web/JavaScript/Reference/Statements/break +/es/docs/JavaScript/Referencia/Sentencias/const /es/docs/Web/JavaScript/Reference/Statements/const +/es/docs/JavaScript/Referencia/Sentencias/continue /es/docs/Web/JavaScript/Reference/Statements/continue +/es/docs/JavaScript/Referencia/Sentencias/do...while /es/docs/Web/JavaScript/Reference/Statements/do...while +/es/docs/JavaScript/Referencia/Sentencias/export /es/docs/Web/JavaScript/Reference/Statements/export +/es/docs/JavaScript/Referencia/Sentencias/for /es/docs/Web/JavaScript/Reference/Statements/for +/es/docs/JavaScript/Referencia/Sentencias/for...in /es/docs/Web/JavaScript/Reference/Statements/for...in /es/docs/JavaScript/Referencia/Sentencias/for_each...in /es/docs/Web/JavaScript/Referencia/Sentencias/for_each...in -/es/docs/JavaScript/Referencia/Sentencias/function /es/docs/Web/JavaScript/Referencia/Sentencias/function -/es/docs/JavaScript/Referencia/Sentencias/if...else /es/docs/Web/JavaScript/Referencia/Sentencias/if...else -/es/docs/JavaScript/Referencia/Sentencias/label /es/docs/Web/JavaScript/Referencia/Sentencias/label -/es/docs/JavaScript/Referencia/Sentencias/return /es/docs/Web/JavaScript/Referencia/Sentencias/return -/es/docs/JavaScript/Referencia/Sentencias/throw /es/docs/Web/JavaScript/Referencia/Sentencias/throw -/es/docs/JavaScript/Referencia/Sentencias/try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch -/es/docs/JavaScript/Referencia/Sentencias/var /es/docs/Web/JavaScript/Referencia/Sentencias/var -/es/docs/JavaScript/Referencia/Sentencias/while /es/docs/Web/JavaScript/Referencia/Sentencias/while -/es/docs/JavaScript/Una_nueva_introducción_a_JavaScript /es/docs/Web/JavaScript/Una_re-introducción_a_JavaScript +/es/docs/JavaScript/Referencia/Sentencias/function /es/docs/Web/JavaScript/Reference/Statements/function +/es/docs/JavaScript/Referencia/Sentencias/if...else /es/docs/Web/JavaScript/Reference/Statements/if...else +/es/docs/JavaScript/Referencia/Sentencias/label /es/docs/Web/JavaScript/Reference/Statements/label +/es/docs/JavaScript/Referencia/Sentencias/return /es/docs/Web/JavaScript/Reference/Statements/return +/es/docs/JavaScript/Referencia/Sentencias/throw /es/docs/Web/JavaScript/Reference/Statements/throw +/es/docs/JavaScript/Referencia/Sentencias/try...catch /es/docs/Web/JavaScript/Reference/Statements/try...catch +/es/docs/JavaScript/Referencia/Sentencias/var /es/docs/Web/JavaScript/Reference/Statements/var +/es/docs/JavaScript/Referencia/Sentencias/while /es/docs/Web/JavaScript/Reference/Statements/while +/es/docs/JavaScript/Una_nueva_introducción_a_JavaScript /es/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/es/docs/Learn/Accessibility/Qué_es_la_accesibilidad /es/docs/Learn/Accessibility/What_is_accessibility +/es/docs/Learn/Aprender_y_obtener_ayuda /es/docs/Learn/Learning_and_getting_help +/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia /es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/es/docs/Learn/CSS/Building_blocks/Contenido_desbordado /es/docs/Learn/CSS/Building_blocks/Overflowing_content +/es/docs/Learn/CSS/Building_blocks/Depurar_el_CSS /es/docs/Learn/CSS/Building_blocks/Debugging_CSS +/es/docs/Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS /es/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS +/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja /es/docs/Learn/CSS/Building_blocks/The_box_model +/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes /es/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders +/es/docs/Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario /es/docs/Learn/CSS/Building_blocks/Images_media_form_elements +/es/docs/Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto /es/docs/Learn/CSS/Building_blocks/Handling_different_text_directions +/es/docs/Learn/CSS/Building_blocks/Selectores_CSS /es/docs/Learn/CSS/Building_blocks/Selectors +/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores /es/docs/Learn/CSS/Building_blocks/Selectors/Combinators +/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos /es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos /es/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors +/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID /es/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS /es/docs/Learn/CSS/Building_blocks/Values_and_units +/es/docs/Learn/CSS/CSS_layout/Diseño_receptivo /es/docs/Learn/CSS/CSS_layout/Responsive_Design +/es/docs/Learn/CSS/CSS_layout/Flujo_normal /es/docs/Learn/CSS/CSS_layout/Normal_Flow +/es/docs/Learn/CSS/CSS_layout/Introducción /es/docs/Learn/CSS/CSS_layout/Introduction +/es/docs/Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos /es/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers +/es/docs/Learn/CSS/First_steps/Comenzando_CSS /es/docs/Learn/CSS/First_steps/Getting_started +/es/docs/Learn/CSS/First_steps/Como_funciona_CSS /es/docs/Learn/CSS/First_steps/How_CSS_works +/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS /es/docs/Learn/CSS/First_steps/How_CSS_is_structured +/es/docs/Learn/CSS/First_steps/Qué_es_CSS /es/docs/Learn/CSS/First_steps/What_is_CSS +/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento /es/docs/Learn/CSS/First_steps/Using_your_new_knowledge /es/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /es/docs/Learn/CSS/Introduction_to_CSS/Combinaciones_y_selectores_multiples /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators /es/docs/Learn/CSS/Introduction_to_CSS/Como_funciona_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /es/docs/Learn/CSS/Introduction_to_CSS/Depuración_CSS /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS +/es/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension /es/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension /es/docs/Learn/CSS/Introduction_to_CSS/Modelo_cajas /en-US/docs/Learn/CSS/Building_blocks/The_box_model /es/docs/Learn/CSS/Introduction_to_CSS/Pseudo-clases_y_pseudo-elementos /en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements /es/docs/Learn/CSS/Introduction_to_CSS/Selectores /en-US/docs/Learn/CSS/Building_blocks/Selectors @@ -1097,317 +1281,493 @@ /es/docs/Learn/CSS/Introduction_to_CSS/Valores_y_unidades /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /es/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks /es/docs/Learn/CSS/Styling_boxes/estilizando_tablas /es/docs/Learn/CSS/Building_blocks/Styling_tables -/es/docs/Learn/HTML/Forms/My_first_HTML_form /es/docs/Learn/HTML/Forms/Your_first_HTML_form +/es/docs/Learn/CSS/Styling_text/Fuentes_web /es/docs/Learn/CSS/Styling_text/Web_fonts +/es/docs/Learn/CSS/Sábercomo /es/docs/Learn/CSS/Howto +/es/docs/Learn/CSS/Sábercomo/Generated_content /es/docs/Learn/CSS/Howto/Generated_content +/es/docs/Learn/Common_questions/Cuanto_cuesta /es/docs/Learn/Common_questions/How_much_does_it_cost +/es/docs/Learn/Common_questions/Que_es_un_servidor_WEB /es/docs/Learn/Common_questions/What_is_a_web_server +/es/docs/Learn/Common_questions/Que_software_necesito /es/docs/Learn/Common_questions/What_software_do_I_need +/es/docs/Learn/Common_questions/Qué_es_una_URL /es/docs/Learn/Common_questions/What_is_a_URL +/es/docs/Learn/Common_questions/diseños_web_comunes /es/docs/Learn/Common_questions/Common_web_layouts +/es/docs/Learn/Como_Contribuir /es/docs/orphaned/Learn/How_to_contribute +/es/docs/Learn/Desarrollo_web_Front-end /es/docs/Learn/Front-end_web_developer +/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web /es/docs/Learn/Getting_started_with_the_web/How_the_Web_works +/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico /es/docs/Learn/Getting_started_with_the_web/Installing_basic_software +/es/docs/Learn/Getting_started_with_the_web/La_web_y_los_estandares_web /es/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards +/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos /es/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/es/docs/Learn/HTML/Forms /es/docs/conflicting/Learn/Forms +/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/Forms/How_to_structure_a_web_form +/es/docs/Learn/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form +/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_controls /es/docs/Learn/Forms/Property_compatibility_table_for_form_controls +/es/docs/Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles /es/docs/Learn/Forms/Test_your_skills:_Other_controls +/es/docs/Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5 /es/docs/Learn/Forms/Test_your_skills:_HTML5_controls +/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/Forms/Sending_and_retrieving_form_data +/es/docs/Learn/HTML/Forms/Styling_HTML_forms /es/docs/Learn/Forms/Styling_web_forms +/es/docs/Learn/HTML/Forms/The_native_form_widgets /es/docs/Learn/Forms/Basic_native_form_controls +/es/docs/Learn/HTML/Forms/Tipos_input_HTML5 /es/docs/Learn/Forms/HTML5_input_types +/es/docs/Learn/HTML/Forms/Validacion_formulario_datos /es/docs/Learn/Forms/Form_validation +/es/docs/Learn/HTML/Forms/Your_first_HTML_form /es/docs/Learn/Forms/Your_first_form +/es/docs/Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados /es/docs/Learn/Forms/How_to_build_custom_form_controls +/es/docs/Learn/HTML/Introduccion_a_HTML /es/docs/Learn/HTML/Introduction_to_HTML +/es/docs/Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting /es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks /es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +/es/docs/Learn/HTML/Introduccion_a_HTML/Debugging_HTML /es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/es/docs/Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido /es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +/es/docs/Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter /es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +/es/docs/Learn/HTML/Introduccion_a_HTML/Metados_en /es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces /es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links +/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML /es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics +/es/docs/Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text /es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text +/es/docs/Learn/HTML/Introduccion_a_HTML/estructura /es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure +/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar /es/docs/Learn/HTML/Introduction_to_HTML/Getting_started +/es/docs/Learn/HTML/Introduccion_a_HTML/texto /es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +/es/docs/Learn/HTML/Tablas /es/docs/Learn/HTML/Tables +/es/docs/Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML /es/docs/Learn/HTML/Tables/Basics +/es/docs/Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad /es/docs/Learn/HTML/Tables/Advanced +/es/docs/Learn/HTML/Tablas/Structuring_planet_data /es/docs/Learn/HTML/Tables/Structuring_planet_data +/es/docs/Learn/HTML/como /es/docs/Learn/HTML/Howto +/es/docs/Learn/HTML/como/Usando_atributos_de_datos /es/docs/Learn/HTML/Howto/Use_data_attributes +/es/docs/Learn/Herramientas_y_pruebas /es/docs/Learn/Tools_and_testing +/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing /es/docs/Learn/Tools_and_testing/Cross_browser_testing +/es/docs/Learn/Herramientas_y_pruebas/GitHub /es/docs/Learn/Tools_and_testing/GitHub +/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks /es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks +/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started /es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +/es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos /es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +/es/docs/Learn/Herramientas_y_pruebas/Understanding_client-side_tools /es/docs/Learn/Tools_and_testing/Understanding_client-side_tools +/es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo /es/docs/Learn/JavaScript/Building_blocks/Looping_code +/es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion /es/docs/Learn/JavaScript/Building_blocks/Build_your_own_function +/es/docs/Learn/JavaScript/Building_blocks/Eventos /es/docs/Learn/JavaScript/Building_blocks/Events +/es/docs/Learn/JavaScript/Building_blocks/Galeria_de_imagenes /es/docs/Learn/JavaScript/Building_blocks/Image_gallery +/es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción /es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction +/es/docs/Learn/JavaScript/First_steps/Generador_de_historias_absurdas /es/docs/Learn/JavaScript/First_steps/Silly_story_generator +/es/docs/Learn/JavaScript/First_steps/Matemáticas /es/docs/Learn/JavaScript/First_steps/Math +/es/docs/Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings /es/docs/Learn/JavaScript/First_steps/Test_your_skills:_Strings +/es/docs/Learn/JavaScript/First_steps/Qué_es_JavaScript /es/docs/Learn/JavaScript/First_steps/What_is_JavaScript +/es/docs/Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos /es/docs/Learn/JavaScript/Objects/Object_building_practice +/es/docs/Learn/Server-side/Django/Introducción /es/docs/Learn/Server-side/Django/Introduction +/es/docs/Learn/Server-side/Primeros_pasos /es/docs/Learn/Server-side/First_steps +/es/docs/Learn/Server-side/Primeros_pasos/Introducción /es/docs/Learn/Server-side/First_steps/Introduction +/es/docs/Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor /es/docs/Learn/Server-side/First_steps/Client-Server_overview +/es/docs/Learn/Server-side/Primeros_pasos/Web_frameworks /es/docs/Learn/Server-side/First_steps/Web_frameworks +/es/docs/Learn/Server-side/Primeros_pasos/seguridad_sitios_web /es/docs/Learn/Server-side/First_steps/Website_security +/es/docs/Learn/Using_Github_pages /es/docs/Learn/Common_questions/Using_Github_pages +/es/docs/Learn/codificacion-scripting /es/docs/conflicting/Learn +/es/docs/Localización /es/docs/Glossary/Localization +/es/docs/Localizar_con_Narro /es/docs/orphaned/Localizar_con_Narro /es/docs/Lugares:Guía_para_migración_con_lugares /es/docs/Lugares/Guía_para_migración_con_lugares /es/docs/MDN/Comenzando /es/docs/MDN/Contribute/Getting_started +/es/docs/MDN/Comunidad /es/docs/orphaned/MDN/Community +/es/docs/MDN/Contribute/Community /es/docs/orphaned/MDN/Community/Working_in_community /es/docs/MDN/Contribute/Content /es/docs/MDN/Guidelines -/es/docs/MDN/Contribute/Content/Content_blocks /es/docs/MDN/Guidelines/Content_blocks +/es/docs/MDN/Contribute/Content/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide /es/docs/MDN/Contribute/Guidelines /es/docs/MDN/Guidelines -/es/docs/MDN/Contribute/Guidelines/Content_blocks /es/docs/MDN/Guidelines/Content_blocks -/es/docs/MDN/Contribute/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Convenciones_y_definiciones -/es/docs/MDN/Contribute/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Project:Guía_de_estilo +/es/docs/MDN/Contribute/Guidelines/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide +/es/docs/MDN/Contribute/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Conventions_definitions +/es/docs/MDN/Contribute/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Writing_style_guide /es/docs/MDN/Contribute/Herramientas /es/docs/MDN/Tools -/es/docs/MDN/Contribute/Herramientas/Page_regeneration /es/docs/MDN/Tools/Page_regeneration -/es/docs/MDN/Contribute/Herramientas/Template_editing /es/docs/MDN/Tools/Template_editing +/es/docs/MDN/Contribute/Herramientas/Page_regeneration /es/docs/orphaned/MDN/Tools/Page_regeneration +/es/docs/MDN/Contribute/Herramientas/Template_editing /es/docs/orphaned/MDN/Tools/Template_editing +/es/docs/MDN/Contribute/Howto/Crear_cuenta_MDN /es/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/es/docs/MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad /es/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/es/docs/MDN/Contribute/Howto/Etiquetas_paginas_javascript /es/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages +/es/docs/MDN/Contribute/Howto/Remover_Macros_Experimentales /es/docs/orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros +/es/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /es/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page +/es/docs/MDN/Contribute/Howto/Usar_barras_laterales_de_navegación /es/docs/orphaned/MDN/Contribute/Howto/Use_navigation_sidebars +/es/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web /es/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +/es/docs/MDN/Contribute/Howto/revision_editorial /es/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/es/docs/MDN/Contribute/Howto/revision_tecnica /es/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/es/docs/MDN/Contribute/Procesos /es/docs/MDN/Contribute/Processes /es/docs/MDN/Contribute/Structures /es/docs/MDN/Structures -/es/docs/MDN/Contribute/Structures/Ejemplos_ejecutables /es/docs/MDN/Structures/Ejemplos_ejecutables +/es/docs/MDN/Contribute/Structures/Ejemplos_ejecutables /es/docs/MDN/Structures/Live_samples /es/docs/MDN/Contribute/Structures/Macros /es/docs/MDN/Structures/Macros /es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros /es/docs/MDN/Structures/Macros/Commonly-used_macros -/es/docs/MDN/Contribute/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Otras -/es/docs/MDN/Contribute/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Tablas_de_compatibilidad +/es/docs/MDN/Contribute/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Other +/es/docs/MDN/Contribute/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Compatibility_tables +/es/docs/MDN/Contribute/Tareas /es/docs/conflicting/MDN/Contribute/Getting_started /es/docs/MDN/Enviar_feedback_sobre_MDN /es/docs/MDN/Contribute/Feedback -/es/docs/MDN/Kuma/Introduction_to_KumaScript /es/docs/MDN/Tools/Introduction_to_KumaScript -/es/docs/Manipular_video_por_medio_de_canvas /es/docs/Web/HTML/anipular_video_por_medio_de_canvas +/es/docs/MDN/Guidelines/Content_blocks /es/docs/MDN/Guidelines/CSS_style_guide +/es/docs/MDN/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Conventions_definitions +/es/docs/MDN/Guidelines/Project:Guía_de_estilo /es/docs/MDN/Guidelines/Writing_style_guide +/es/docs/MDN/Kuma /es/docs/MDN/Yari +/es/docs/MDN/Kuma/Contributing /es/docs/conflicting/MDN/Yari_13d770b50d5ab9ce747962b2552e0eef +/es/docs/MDN/Kuma/Contributing/Getting_started /es/docs/conflicting/MDN/Yari +/es/docs/MDN/Kuma/Introduction_to_KumaScript /es/docs/MDN/Tools/KumaScript +/es/docs/MDN/Structures/Ejemplos_ejecutables /es/docs/MDN/Structures/Live_samples +/es/docs/MDN/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Other +/es/docs/MDN/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Compatibility_tables +/es/docs/MDN/Tools/Introduction_to_KumaScript /es/docs/MDN/Tools/KumaScript +/es/docs/MDN/Tools/Page_regeneration /es/docs/orphaned/MDN/Tools/Page_regeneration +/es/docs/MDN/Tools/Template_editing /es/docs/orphaned/MDN/Tools/Template_editing +/es/docs/MDN/User_guide /es/docs/conflicting/MDN/Tools +/es/docs/MDN_en_diez /es/docs/MDN/At_ten +/es/docs/Manipular_video_por_medio_de_canvas /es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas /es/docs/MathML /es/docs/Web/MathML -/es/docs/MathML/Elemento /es/docs/Web/MathML/Elemento +/es/docs/MathML/Elemento /es/docs/Web/MathML/Element +/es/docs/Mejoras_DOM_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/DOM_improvements +/es/docs/Mejoras_SVG_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/SVG_improvements +/es/docs/Mejoras_XUL_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 +/es/docs/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla /es/docs/orphaned/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla +/es/docs/Modo_casi_estándar_de_Gecko /es/docs/orphaned/Modo_casi_estándar_de_Gecko /es/docs/Monitoring_downloads /es/docs/Vigilar_descargas +/es/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +/es/docs/Mozilla/Add-ons/WebExtensions/Depuración /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Debugging +/es/docs/Mozilla/Add-ons/WebExtensions/Packaging_and_installation /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +/es/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +/es/docs/Mozilla/Add-ons/WebExtensions/Prerequisitos /es/docs/Mozilla/Add-ons/WebExtensions/Prerequisites +/es/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension /es/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_ +/es/docs/Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions /es/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +/es/docs/Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension /es/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +/es/docs/Mozilla/Add-ons/WebExtensions/Tutorial /es/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +/es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador /es/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +/es/docs/Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla /es/docs/Mozilla/Developer_guide/Mozilla_build_FAQ +/es/docs/Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) /es/docs/Mozilla/Developer_guide/Source_Code/CVS +/es/docs/Módulos_JavaScript /es/docs/orphaned/Módulos_JavaScript /es/docs/Novedades_en_JavaScript_1.6 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6 /es/docs/Novedades_en_JavaScript_1.7 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.7 /es/docs/Novedades_en_JavaScript_1.8 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8 /es/docs/Novedades_en_Javascript_1.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5 -/es/docs/Participando_en_el_proyecto_Mozilla /es/docs/Participar_en_el_proyecto_Mozilla -/es/docs/Poniendo_al_día_extensiones_para_Firefox_3 /es/docs/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 +/es/docs/Participando_en_el_proyecto_Mozilla /es/docs/orphaned/Participar_en_el_proyecto_Mozilla +/es/docs/Participar_en_el_proyecto_Mozilla /es/docs/orphaned/Participar_en_el_proyecto_Mozilla +/es/docs/Plantillas_en_Firefox_3 /es/docs/Mozilla/Firefox/Releases/3/Templates +/es/docs/Poniendo_al_día_extensiones_para_Firefox_3 /es/docs/orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 /es/docs/Portada /es/docs/Web -/es/docs/Preguntas_frecuentes_sobre_CSS /es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS -/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla:Introducción_a_Gecko_e_inscrustación /es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación -/es/docs/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla /es/docs/Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla +/es/docs/Preguntas_frecuentes_sobre_CSS /es/docs/Learn/CSS/Howto/CSS_FAQ +/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla /es/docs/orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla +/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación /es/docs/orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación +/es/docs/Preguntas_frecuentes_sobre_incrustación_en_Mozilla:Introducción_a_Gecko_e_inscrustación /es/docs/orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación +/es/docs/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla /es/docs/Mozilla/Developer_guide/Mozilla_build_FAQ +/es/docs/Principios_básicos_de_los_servicios_Web /es/docs/orphaned/Principios_básicos_de_los_servicios_Web /es/docs/Quirks_Mode_and_Standards_Mode /es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode -/es/docs/Recursos_offline_en_firefox /es/docs/Web/HTML/Recursos_offline_en_firefox -/es/docs/Referencia_CSS /es/docs/Web/CSS/Referencia_CSS +/es/docs/Recursos_en_modo_desconectado_en_Firefox /es/docs/orphaned/Recursos_en_modo_desconectado_en_Firefox +/es/docs/Recursos_offline_en_firefox /es/docs/Web/HTML/Using_the_application_cache +/es/docs/Referencia_CSS /es/docs/Web/CSS/Reference /es/docs/Referencia_CSS/Extensiones_CSS_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Referencia_CSS:Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions -/es/docs/Referencia_DOM_de_Gecko:Ejemplos /es/docs/Referencia_DOM_de_Gecko/Ejemplos -/es/docs/Referencia_DOM_de_Gecko:Introducción /es/docs/Referencia_DOM_de_Gecko/Introducción -/es/docs/Referencia_DOM_de_Gecko:Prefacio /es/docs/Referencia_DOM_de_Gecko/Prefacio -/es/docs/Referencia_de_JavaScript_1.5 /es/docs/Web/JavaScript/Referencia -/es/docs/Referencia_de_JavaScript_1.5/Acerca_de /es/docs/Web/JavaScript/Referencia/Acerca_de -/es/docs/Referencia_de_JavaScript_1.5/Características_Desaprobadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/Referencia_de_JavaScript_1.5/Características_Despreciadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/Referencia_de_JavaScript_1.5/Funciones /es/docs/Web/JavaScript/Referencia/Funciones -/es/docs/Referencia_de_JavaScript_1.5/Funciones/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments /es/docs/Web/JavaScript/Referencia/Funciones/arguments -/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments/callee /es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/call /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10 -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2 -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/create /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString +/es/docs/Referencia_DOM_de_Gecko /es/docs/Web/API/Document_Object_Model +/es/docs/Referencia_DOM_de_Gecko/Cómo_espacioenblanco /es/docs/Web/API/Document_Object_Model/Whitespace +/es/docs/Referencia_DOM_de_Gecko/Ejemplos /es/docs/Web/API/Document_Object_Model/Examples +/es/docs/Referencia_DOM_de_Gecko/Eventos /es/docs/Web/API/Document_Object_Model/Events +/es/docs/Referencia_DOM_de_Gecko/Introducción /es/docs/Web/API/Document_Object_Model/Introduction +/es/docs/Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores /es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors +/es/docs/Referencia_DOM_de_Gecko/Prefacio /es/docs/conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 +/es/docs/Referencia_DOM_de_Gecko:Ejemplos /es/docs/Web/API/Document_Object_Model/Examples +/es/docs/Referencia_DOM_de_Gecko:Introducción /es/docs/Web/API/Document_Object_Model/Introduction +/es/docs/Referencia_DOM_de_Gecko:Prefacio /es/docs/conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 +/es/docs/Referencia_de_JavaScript_1.5 /es/docs/Web/JavaScript/Reference +/es/docs/Referencia_de_JavaScript_1.5/Acerca_de /es/docs/Web/JavaScript/Reference/About +/es/docs/Referencia_de_JavaScript_1.5/Características_Desaprobadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/Referencia_de_JavaScript_1.5/Características_Despreciadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/Referencia_de_JavaScript_1.5/Funciones /es/docs/Web/JavaScript/Reference/Functions +/es/docs/Referencia_de_JavaScript_1.5/Funciones/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments /es/docs/Web/JavaScript/Reference/Functions/arguments +/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments/callee /es/docs/Web/JavaScript/Reference/Functions/arguments/callee +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseFloat /es/docs/Web/JavaScript/Reference/Global_Objects/parseFloat +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/parseInt +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/push /es/docs/Web/JavaScript/Reference/Global_Objects/Array/push +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/now /es/docs/Web/JavaScript/Reference/Global_Objects/Date/now +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Reference/Global_Objects/Date/parse +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Error /es/docs/Web/JavaScript/Reference/Global_Objects/Error +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Reference/Global_Objects/Function/apply +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/call /es/docs/Web/JavaScript/Reference/Global_Objects/Function/call +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON /es/docs/Web/JavaScript/Reference/Global_Objects/JSON +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/E +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10 +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN2 +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG2E +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/create /es/docs/Web/JavaScript/Reference/Global_Objects/Object/create +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toString /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/unwatch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch /es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/watch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/big /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/blink /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/bold /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/concat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/italics /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/length /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/link /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/match /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/replace /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/search /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/slice /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/split /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/strike /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sub /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substr /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substring /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sup /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments -/es/docs/Referencia_de_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Aritméticos /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/void /es/docs/Web/JavaScript/Referencia/Operadores/void -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Miembros /es/docs/Web/JavaScript/Referencia/Operadores/Miembros -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence -/es/docs/Referencia_de_JavaScript_1.5/Operadores/String /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/Referencia_de_JavaScript_1.5/Operadores/function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/Referencia_de_JavaScript_1.5/Operadores/get /es/docs/Web/JavaScript/Referencia/Funciones/get -/es/docs/Referencia_de_JavaScript_1.5/Operadores/in /es/docs/Web/JavaScript/Referencia/Operadores/in -/es/docs/Referencia_de_JavaScript_1.5/Operadores/new /es/docs/Web/JavaScript/Referencia/Operadores/new -/es/docs/Referencia_de_JavaScript_1.5/Operadores/this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/Referencia_de_JavaScript_1.5/Palabras_Reservadas /es/docs/Web/JavaScript/Referencia/Palabras_Reservadas -/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity -/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN -/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined -/es/docs/Referencia_de_JavaScript_1.5/Sentencias /es/docs/Web/JavaScript/Referencia/Sentencias -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/block /es/docs/Web/JavaScript/Referencia/Sentencias/block -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/break /es/docs/Web/JavaScript/Referencia/Sentencias/break -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/const /es/docs/Web/JavaScript/Referencia/Sentencias/const -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/continue /es/docs/Web/JavaScript/Referencia/Sentencias/continue -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/do...while /es/docs/Web/JavaScript/Referencia/Sentencias/do...while -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/export /es/docs/Web/JavaScript/Referencia/Sentencias/export -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for /es/docs/Web/JavaScript/Referencia/Sentencias/for -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for...in /es/docs/Web/JavaScript/Referencia/Sentencias/for...in +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Reference/Global_Objects/String/anchor +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/big /es/docs/Web/JavaScript/Reference/Global_Objects/String/big +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/blink /es/docs/Web/JavaScript/Reference/Global_Objects/String/blink +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/bold /es/docs/Web/JavaScript/Reference/Global_Objects/String/bold +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charAt +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/concat /es/docs/Web/JavaScript/Reference/Global_Objects/String/concat +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Reference/Global_Objects/String/fixed +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/italics /es/docs/Web/JavaScript/Reference/Global_Objects/String/italics +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/split /es/docs/Web/JavaScript/Reference/Global_Objects/String/split +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/strike /es/docs/Web/JavaScript/Reference/Global_Objects/String/strike +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sub /es/docs/Web/JavaScript/Reference/Global_Objects/String/sub +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substr /es/docs/Web/JavaScript/Reference/Global_Objects/String/substr +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substring /es/docs/Web/JavaScript/Reference/Global_Objects/String/substring +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sup /es/docs/Web/JavaScript/Reference/Global_Objects/String/sup +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toString /es/docs/Web/JavaScript/Reference/Global_Objects/String/toString +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments +/es/docs/Referencia_de_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/typeof /es/docs/Web/JavaScript/Reference/Operators/typeof +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/void /es/docs/Web/JavaScript/Reference/Operators/void +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Miembros /es/docs/Web/JavaScript/Reference/Operators/Property_Accessors +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence +/es/docs/Referencia_de_JavaScript_1.5/Operadores/String /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5/Operadores/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/Referencia_de_JavaScript_1.5/Operadores/get /es/docs/Web/JavaScript/Reference/Functions/get +/es/docs/Referencia_de_JavaScript_1.5/Operadores/in /es/docs/Web/JavaScript/Reference/Operators/in +/es/docs/Referencia_de_JavaScript_1.5/Operadores/new /es/docs/Web/JavaScript/Reference/Operators/new +/es/docs/Referencia_de_JavaScript_1.5/Operadores/this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/Referencia_de_JavaScript_1.5/Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/undefined /es/docs/Web/JavaScript/Reference/Global_Objects/undefined +/es/docs/Referencia_de_JavaScript_1.5/Sentencias /es/docs/Web/JavaScript/Reference/Statements +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/block /es/docs/Web/JavaScript/Reference/Statements/block +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/break /es/docs/Web/JavaScript/Reference/Statements/break +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/const /es/docs/Web/JavaScript/Reference/Statements/const +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/continue /es/docs/Web/JavaScript/Reference/Statements/continue +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/do...while /es/docs/Web/JavaScript/Reference/Statements/do...while +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/export /es/docs/Web/JavaScript/Reference/Statements/export +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for /es/docs/Web/JavaScript/Reference/Statements/for +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for...in /es/docs/Web/JavaScript/Reference/Statements/for...in /es/docs/Referencia_de_JavaScript_1.5/Sentencias/for_each...in /es/docs/Web/JavaScript/Referencia/Sentencias/for_each...in -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/function /es/docs/Web/JavaScript/Referencia/Sentencias/function -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/if...else /es/docs/Web/JavaScript/Referencia/Sentencias/if...else -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/label /es/docs/Web/JavaScript/Referencia/Sentencias/label -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/return /es/docs/Web/JavaScript/Referencia/Sentencias/return -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/throw /es/docs/Web/JavaScript/Referencia/Sentencias/throw -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/var /es/docs/Web/JavaScript/Referencia/Sentencias/var -/es/docs/Referencia_de_JavaScript_1.5/Sentencias/while /es/docs/Web/JavaScript/Referencia/Sentencias/while -/es/docs/Referencia_de_JavaScript_1.5:Acerca_de /es/docs/Web/JavaScript/Referencia/Acerca_de -/es/docs/Referencia_de_JavaScript_1.5:Características_Desaprobadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/Referencia_de_JavaScript_1.5:Características_Despreciadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/Referencia_de_JavaScript_1.5:Funciones /es/docs/Web/JavaScript/Referencia/Funciones -/es/docs/Referencia_de_JavaScript_1.5:Funciones:String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments /es/docs/Web/JavaScript/Referencia/Funciones/arguments -/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments:callee /es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduceRight /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean:toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:UTC /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function:prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/function /es/docs/Web/JavaScript/Reference/Statements/function +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/if...else /es/docs/Web/JavaScript/Reference/Statements/if...else +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/label /es/docs/Web/JavaScript/Reference/Statements/label +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/return /es/docs/Web/JavaScript/Reference/Statements/return +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/throw /es/docs/Web/JavaScript/Reference/Statements/throw +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/try...catch /es/docs/Web/JavaScript/Reference/Statements/try...catch +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/var /es/docs/Web/JavaScript/Reference/Statements/var +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/while /es/docs/Web/JavaScript/Reference/Statements/while +/es/docs/Referencia_de_JavaScript_1.5:Acerca_de /es/docs/Web/JavaScript/Reference/About +/es/docs/Referencia_de_JavaScript_1.5:Características_Desaprobadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/Referencia_de_JavaScript_1.5:Características_Despreciadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/Referencia_de_JavaScript_1.5:Funciones /es/docs/Web/JavaScript/Reference/Functions +/es/docs/Referencia_de_JavaScript_1.5:Funciones:String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments /es/docs/Web/JavaScript/Reference/Functions/arguments +/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments:callee /es/docs/Web/JavaScript/Reference/Functions/arguments/callee +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseFloat /es/docs/Web/JavaScript/Reference/Global_Objects/parseFloat +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/parseInt +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduce /es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduceRight /es/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean:toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:UTC /es/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:now /es/docs/Web/JavaScript/Reference/Global_Objects/Date/now +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:parse /es/docs/Web/JavaScript/Reference/Global_Objects/Date/parse +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Error /es/docs/Web/JavaScript/Reference/Global_Objects/Error +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function:prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:toString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toString /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:unwatch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch /es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:watch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:anchor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:big /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:blink /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:bold /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charCodeAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:concat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fromCharCode /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:italics /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:lastIndexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:length /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:link /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:match /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:replace /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:search /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:slice /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:split /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:strike /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sub /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substr /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substring /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sup /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toLowerCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toUpperCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:valueOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf -/es/docs/Referencia_de_JavaScript_1.5:Objetos_globlales:Function:arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments -/es/docs/Referencia_de_JavaScript_1.5:Operadores /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Aritméticos /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:void /es/docs/Web/JavaScript/Referencia/Operadores/void -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Miembros /es/docs/Web/JavaScript/Referencia/Operadores/Miembros -/es/docs/Referencia_de_JavaScript_1.5:Operadores:Operadores_especiales:Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/Referencia_de_JavaScript_1.5:Operadores:String /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/Referencia_de_JavaScript_1.5:Palabras_Reservadas /es/docs/Web/JavaScript/Referencia/Palabras_Reservadas -/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity -/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN -/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined -/es/docs/Referencia_de_JavaScript_1.5:Sentencias /es/docs/Web/JavaScript/Referencia/Sentencias -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:block /es/docs/Web/JavaScript/Referencia/Sentencias/block -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:break /es/docs/Web/JavaScript/Referencia/Sentencias/break -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:continue /es/docs/Web/JavaScript/Referencia/Sentencias/continue -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:do...while /es/docs/Web/JavaScript/Referencia/Sentencias/do...while -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for /es/docs/Web/JavaScript/Referencia/Sentencias/for -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for...in /es/docs/Web/JavaScript/Referencia/Sentencias/for...in -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:function /es/docs/Web/JavaScript/Referencia/Sentencias/function -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:if...else /es/docs/Web/JavaScript/Referencia/Sentencias/if...else -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:label /es/docs/Web/JavaScript/Referencia/Sentencias/label -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:return /es/docs/Web/JavaScript/Referencia/Sentencias/return -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:throw /es/docs/Web/JavaScript/Referencia/Sentencias/throw -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:var /es/docs/Web/JavaScript/Referencia/Sentencias/var -/es/docs/Referencia_de_JavaScript_1.5:Sentencias:while /es/docs/Web/JavaScript/Referencia/Sentencias/while +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:anchor /es/docs/Web/JavaScript/Reference/Global_Objects/String/anchor +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:big /es/docs/Web/JavaScript/Reference/Global_Objects/String/big +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:blink /es/docs/Web/JavaScript/Reference/Global_Objects/String/blink +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:bold /es/docs/Web/JavaScript/Reference/Global_Objects/String/bold +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charAt +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charCodeAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:concat /es/docs/Web/JavaScript/Reference/Global_Objects/String/concat +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:constructor /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fixed /es/docs/Web/JavaScript/Reference/Global_Objects/String/fixed +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fromCharCode /es/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:italics /es/docs/Web/JavaScript/Reference/Global_Objects/String/italics +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:lastIndexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:split /es/docs/Web/JavaScript/Reference/Global_Objects/String/split +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:strike /es/docs/Web/JavaScript/Reference/Global_Objects/String/strike +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sub /es/docs/Web/JavaScript/Reference/Global_Objects/String/sub +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substr /es/docs/Web/JavaScript/Reference/Global_Objects/String/substr +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substring /es/docs/Web/JavaScript/Reference/Global_Objects/String/substring +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sup /es/docs/Web/JavaScript/Reference/Global_Objects/String/sup +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toLowerCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toString /es/docs/Web/JavaScript/Reference/Global_Objects/String/toString +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toUpperCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globlales:Function:arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments +/es/docs/Referencia_de_JavaScript_1.5:Operadores /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:typeof /es/docs/Web/JavaScript/Reference/Operators/typeof +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:void /es/docs/Web/JavaScript/Reference/Operators/void +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Miembros /es/docs/Web/JavaScript/Reference/Operators/Property_Accessors +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Operadores_especiales:Operador_this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/Referencia_de_JavaScript_1.5:Operadores:String /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/Referencia_de_JavaScript_1.5:Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:undefined /es/docs/Web/JavaScript/Reference/Global_Objects/undefined +/es/docs/Referencia_de_JavaScript_1.5:Sentencias /es/docs/Web/JavaScript/Reference/Statements +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:block /es/docs/Web/JavaScript/Reference/Statements/block +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:break /es/docs/Web/JavaScript/Reference/Statements/break +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:continue /es/docs/Web/JavaScript/Reference/Statements/continue +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:do...while /es/docs/Web/JavaScript/Reference/Statements/do...while +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for /es/docs/Web/JavaScript/Reference/Statements/for +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for...in /es/docs/Web/JavaScript/Reference/Statements/for...in +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:function /es/docs/Web/JavaScript/Reference/Statements/function +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:if...else /es/docs/Web/JavaScript/Reference/Statements/if...else +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:label /es/docs/Web/JavaScript/Reference/Statements/label +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:return /es/docs/Web/JavaScript/Reference/Statements/return +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:throw /es/docs/Web/JavaScript/Reference/Statements/throw +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:try...catch /es/docs/Web/JavaScript/Reference/Statements/try...catch +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:var /es/docs/Web/JavaScript/Reference/Statements/var +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:while /es/docs/Web/JavaScript/Reference/Statements/while +/es/docs/Referencia_de_XUL /es/docs/orphaned/Referencia_de_XUL /es/docs/SVG /es/docs/Web/SVG -/es/docs/SVG/SVG_en_Firefox_1.5 /es/docs/Web/SVG/SVG_en_Firefox_1.5 +/es/docs/SVG/SVG_en_Firefox_1.5 /es/docs/orphaned/Web/SVG/SVG_en_Firefox_1.5 /es/docs/SVG/Tutorial /es/docs/Web/SVG/Tutorial /es/docs/SVG/Tutorial/Getting_Started /es/docs/Web/SVG/Tutorial/Getting_Started -/es/docs/SVG:SVG_en_Firefox_1.5 /es/docs/Web/SVG/SVG_en_Firefox_1.5 +/es/docs/SVG:SVG_en_Firefox_1.5 /es/docs/orphaned/Web/SVG/SVG_en_Firefox_1.5 /es/docs/SVG_In_HTML_Introduction /es/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction +/es/docs/SVG_en_Firefox /es/docs/Web/SVG/SVG_1.1_Support_in_Firefox /es/docs/Screening_duplicate_bugs /es/docs/QA/Screening_duplicate_bugs -/es/docs/Secciones_y_contornos_de_un_documento_HTML5 /es/docs/Sections_and_Outlines_of_an_HTML5_document -/es/docs/Secciones_y_esquema_de_un_documento_HTML_5 /es/docs/Sections_and_Outlines_of_an_HTML5_document +/es/docs/Secciones_y_contornos_de_un_documento_HTML5 /es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/es/docs/Secciones_y_esquema_de_un_documento_HTML_5 /es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/es/docs/Sections_and_Outlines_of_an_HTML5_document /es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/es/docs/Seguridad_en_Firefox_2 /es/docs/Mozilla/Firefox/Releases/2/Security_changes +/es/docs/Selección_de_modo_en_Mozilla /es/docs/orphaned/Selección_de_modo_en_Mozilla +/es/docs/Server-sent_events /es/docs/Web/API/Server-sent_events +/es/docs/Server-sent_events/utilizando_server_sent_events_sse /es/docs/Web/API/Server-sent_events/Using_server-sent_events /es/docs/Social_API-redirect-1 /es/docs/Social_API /es/docs/Social_API-redirect-2 /es/docs/Social_API /es/docs/Social_API/Glossary-redirect-1 /es/docs/Social_API/Glossary /es/docs/Social_API/Glossary-redirect-2 /es/docs/Social_API/Glossary /es/docs/Social_API/Guide-redirect-1 /es/docs/Social_API/Guide -/es/docs/Transformando_XML_con_XSLT /es/docs/Web/XSLT/Transformando_XML_con_XSLT -/es/docs/Usando_audio_y_video_con_HTML5 /es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 -/es/docs/Usando_audio_y_video_en_Firefox /es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 +/es/docs/Storage /es/docs/orphaned/Storage +/es/docs/Tipo_MIME_incorrecto_en_archivos_CSS /es/docs/conflicting/Web/HTTP/Basics_of_HTTP/MIME_types +/es/docs/Tools/Accesos_directos /es/docs/Tools/Keyboard_shortcuts +/es/docs/Tools/Add-ons /es/docs/orphaned/Tools/Add-ons +/es/docs/Tools/Debugger/How_to/Uso_de_un_mapa_fuente /es/docs/Tools/Debugger/How_to/Use_a_source_map +/es/docs/Tools/Desempeño /es/docs/Tools/Performance +/es/docs/Tools/Desempeño/UI_Tour /es/docs/Tools/Performance/UI_Tour +/es/docs/Tools/Editor_Audio_Web /es/docs/Tools/Web_Audio_Editor +/es/docs/Tools/Editor_Estilo /es/docs/Tools/Style_Editor +/es/docs/Tools/Monitor_de_Red /es/docs/Tools/Network_Monitor +/es/docs/Tools/Page_Inspector/3er-panel_modo /es/docs/Tools/Page_Inspector/3-pane_mode +/es/docs/Tools/Page_Inspector/How_to/Abrir_el_Inspector /es/docs/Tools/Page_Inspector/How_to/Open_the_Inspector +/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_HTML /es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML +/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel /es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +/es/docs/Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores /es/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors +/es/docs/Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina /es/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +/es/docs/Tools/Profiler /es/docs/conflicting/Tools/Performance +/es/docs/Tools/Remote_Debugging/Debugging_over_a_network /es/docs/conflicting/Tools/about:debugging +/es/docs/Tools/Remote_Debugging/Firefox_para_Android /es/docs/Tools/Remote_Debugging/Firefox_for_Android +/es/docs/Tools/Responsive_Design_View /es/docs/Tools/Responsive_Design_Mode +/es/docs/Tools/Tomar_capturas_de_pantalla /es/docs/Tools/Taking_screenshots +/es/docs/Tools/Web_Console/Iniciando_la_Consola_Web /es/docs/Tools/Web_Console/UI_Tour +/es/docs/Tools/Web_Console/La_línea_de_comandos_del_intérprete /es/docs/Tools/Web_Console/The_command_line_interpreter +/es/docs/Traducir_las_descripciones_de_las_extensiones /es/docs/orphaned/Traducir_las_descripciones_de_las_extensiones +/es/docs/Traducir_una_extensión /es/docs/orphaned/Traducir_una_extensión +/es/docs/Transformando_XML_con_XSLT /es/docs/Web/XSLT/Transforming_XML_with_XSLT +/es/docs/Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM /es/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +/es/docs/Usando_archivos_desde_aplicaciones_web /es/docs/orphaned/Usando_archivos_desde_aplicaciones_web +/es/docs/Usando_audio_y_video_con_HTML5 /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/es/docs/Usando_audio_y_video_en_Firefox /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /es/docs/Usando_módulos_de_código_JavaScript /es/docs/JavaScript_code_modules/Using -/es/docs/Usar_audio_y_vídeo_en_Firefox /es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 -/es/docs/Usar_gradientes /es/docs/CSS/Using_CSS_gradients -/es/docs/Usar_la_Geolocalización /es/docs/WebAPI/Using_geolocation +/es/docs/Usar_XPInstall_para_instalar_plugins /es/docs/orphaned/Usar_XPInstall_para_instalar_plugins +/es/docs/Usar_audio_y_vídeo_en_Firefox /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/es/docs/Usar_código_de_Mozilla_en_otros_proyectos /es/docs/orphaned/Usar_código_de_Mozilla_en_otros_proyectos +/es/docs/Usar_gradientes /es/docs/Web/CSS/CSS_Images/Using_CSS_gradients +/es/docs/Usar_la_Geolocalización /es/docs/Web/API/Geolocation_API +/es/docs/Usar_web_workers /es/docs/orphaned/Usar_web_workers /es/docs/Using_files_from_web_applications /es/docs/Web/API/File/Using_files_from_web_applications -/es/docs/Using_geolocation /es/docs/WebAPI/Using_geolocation -/es/docs/Uso_de_URL_como_valor_de_la_propiedad_cursor /es/docs/Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor -/es/docs/Vigilando_complementos /es/docs/Vigilar_plugins +/es/docs/Using_geolocation /es/docs/Web/API/Geolocation_API +/es/docs/Using_the_W3C_DOM_Level_1_Core /es/docs/Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +/es/docs/Uso_de_URL_como_valor_de_la_propiedad_cursor /es/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +/es/docs/Uso_del_núcleo_del_nivel_1_del_DOM /es/docs/orphaned/Uso_del_núcleo_del_nivel_1_del_DOM +/es/docs/Vigilando_complementos /es/docs/orphaned/Vigilar_plugins /es/docs/Vigilando_descargas /es/docs/Vigilar_descargas -/es/docs/Vigilando_plugins /es/docs/Vigilar_plugins +/es/docs/Vigilando_plugins /es/docs/orphaned/Vigilar_plugins +/es/docs/Vigilar_plugins /es/docs/orphaned/Vigilar_plugins +/es/docs/Web/API/API_de_almacenamiento_web /es/docs/Web/API/Web_Storage_API +/es/docs/Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web /es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API +/es/docs/Web/API/API_del_portapapeles /es/docs/Web/API/Clipboard_API +/es/docs/Web/API/Animation/Animación /es/docs/Web/API/Animation/Animation +/es/docs/Web/API/Animation/terminado /es/docs/Web/API/Animation/finished +/es/docs/Web/API/Animation/tiempoActual /es/docs/Web/API/Animation/currentTime /es/docs/Web/API/Apps.checkInstalled /es/docs/Web/API/DOMApplicationsRegistry/checkInstalled /es/docs/Web/API/Apps.getInstalled /es/docs/Web/API/DOMApplicationsRegistry/getInstalled /es/docs/Web/API/Apps.install /es/docs/Web/API/DOMApplicationsRegistry/install @@ -1422,62 +1782,220 @@ /es/docs/Web/API/CSSStyleSheet.insertRule /es/docs/Web/API/CSSStyleSheet/insertRule /es/docs/Web/API/CameraCapabilities.maxExposureCompensation /es/docs/Web/API/CameraCapabilities/maxExposureCompensation /es/docs/Web/API/CameraCapabilities.maxFocusAreas /es/docs/Web/API/CameraCapabilities/maxFocusAreas +/es/docs/Web/API/Canvas_API/Tutorial/Compositing/Ejemplo /es/docs/Web/API/Canvas_API/Tutorial/Compositing/Example +/es/docs/Web/API/Console/tabla /es/docs/Web/API/Console/table /es/docs/Web/API/Constraint_validation/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event /es/docs/Web/API/Coordinates /es/docs/Web/API/GeolocationCoordinates /es/docs/Web/API/Coordinates/latitude /es/docs/Web/API/GeolocationCoordinates/latitude +/es/docs/Web/API/DOMString/Cadenas_binarias /es/docs/Web/API/DOMString/Binary +/es/docs/Web/API/Document/abrir /es/docs/Web/API/Document/open +/es/docs/Web/API/Document/async /es/docs/Web/API/XMLDocument/async +/es/docs/Web/API/Document/crearAtributo /es/docs/Web/API/Document/createAttribute +/es/docs/Web/API/Document/getSelection /es/docs/Web/API/DocumentOrShadowRoot/getSelection +/es/docs/Web/API/Document/pointerLockElement /es/docs/Web/API/DocumentOrShadowRoot/pointerLockElement +/es/docs/Web/API/Document/styleSheets /es/docs/Web/API/DocumentOrShadowRoot/styleSheets +/es/docs/Web/API/Element/accessKey /es/docs/Web/API/HTMLElement/accessKey +/es/docs/Web/API/Element/name /es/docs/conflicting/Web/API +/es/docs/Web/API/Element/ongotpointercapture /es/docs/Web/API/GlobalEventHandlers/ongotpointercapture +/es/docs/Web/API/Element/onlostpointercapture /es/docs/Web/API/GlobalEventHandlers/onlostpointercapture +/es/docs/Web/API/Element/onwheel /es/docs/Web/API/GlobalEventHandlers/onwheel +/es/docs/Web/API/ElementosHTMLparaVideo /es/docs/Web/API/HTMLVideoElement +/es/docs/Web/API/Event/createEvent /es/docs/Web/API/Document/createEvent +/es/docs/Web/API/Fetch_API/Conceptos_basicos /es/docs/Web/API/Fetch_API/Basic_concepts +/es/docs/Web/API/Fetch_API/Utilizando_Fetch /es/docs/Web/API/Fetch_API/Using_Fetch /es/docs/Web/API/Geolocalización /es/docs/Web/API/Geolocation /es/docs/Web/API/Geolocation.clearWatch /es/docs/Web/API/Geolocation/clearWatch /es/docs/Web/API/Geolocation.getCurrentPosition /es/docs/Web/API/Geolocation/getCurrentPosition /es/docs/Web/API/Geolocation.watchPosition /es/docs/Web/API/Geolocation/watchPosition +/es/docs/Web/API/GlobalEventHandlers/onunload /es/docs/Web/API/WindowEventHandlers/onunload +/es/docs/Web/API/HTMLElement/dataset /es/docs/Web/API/HTMLOrForeignElement/dataset +/es/docs/Web/API/HTMLElement/focus /es/docs/Web/API/HTMLOrForeignElement/focus /es/docs/Web/API/HTMLElement/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event +/es/docs/Web/API/HTMLElement/style /es/docs/Web/API/ElementCSSInlineStyle/style /es/docs/Web/API/IDBObjectStore.add /es/docs/Web/API/IDBObjectStore/add +/es/docs/Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB /es/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +/es/docs/Web/API/IndexedDB_API/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Using_IndexedDB /es/docs/Web/API/Navigator.getUserMedia /es/docs/Web/API/Navigator/getUserMedia +/es/docs/Web/API/NavigatorGeolocation /es/docs/conflicting/Web/API/Geolocation +/es/docs/Web/API/NavigatorGeolocation/geolocation /es/docs/Web/API/Navigator/geolocation +/es/docs/Web/API/NavigatorOnLine/Eventos_online_y_offline /es/docs/Web/API/NavigatorOnLine/Online_and_offline_events /es/docs/Web/API/Node.nextSibling /es/docs/Web/API/Node/nextSibling +/es/docs/Web/API/Node/elementoPadre /es/docs/Web/API/Node/parentElement +/es/docs/Web/API/Node/insertarAntes /es/docs/Web/API/Node/insertBefore +/es/docs/Web/API/Node/nodoPrincipal /es/docs/conflicting/Web/API/Node +/es/docs/Web/API/Notifications_API/Usando_la_API_de_Notificaciones /es/docs/Web/API/Notifications_API/Using_the_Notifications_API /es/docs/Web/API/Position /es/docs/Web/API/GeolocationPosition +/es/docs/Web/API/Push_API/Using_the_Push_API /es/docs/conflicting/Web/API/Push_API +/es/docs/Web/API/RandomSource /es/docs/conflicting/Web/API/Crypto/getRandomValues +/es/docs/Web/API/RandomSource/Obtenervaloresaleatorios /es/docs/Web/API/Crypto/getRandomValues +/es/docs/Web/API/Storage/LocalStorage /es/docs/conflicting/Web/API/Window/localStorage +/es/docs/Web/API/SubtleCrypto/encrypt /es/docs/Web/HTTP/Headers/Digest /es/docs/Web/API/WebGL_API/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/WindowTimers/clearTimeout +/es/docs/Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/es/docs/Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +/es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_server +/es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers +/es/docs/Web/API/Web_Crypto_API/Checking_authenticity_with_password /es/docs/orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password +/es/docs/Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API /es/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API +/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/Window.navigator /es/docs/Web/API/Window/navigator /es/docs/Web/API/Window.onbeforeunload /es/docs/Web/API/WindowEventHandlers/onbeforeunload -/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/WindowTimers/setTimeout -/es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/WindowBase64/atob +/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/es/docs/Web/API/Window/URL /es/docs/conflicting/Web/API/URL +/es/docs/Web/API/WindowBase64 /es/docs/conflicting/Web/API/WindowOrWorkerGlobalScope +/es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/WindowOrWorkerGlobalScope/atob +/es/docs/Web/API/WindowBase64/Base64_codificando_y_decodificando /es/docs/Glossary/Base64 +/es/docs/Web/API/WindowBase64/atob /es/docs/Web/API/WindowOrWorkerGlobalScope/atob +/es/docs/Web/API/WindowTimers /es/docs/conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a +/es/docs/Web/API/WindowTimers/clearInterval /es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval +/es/docs/Web/API/WindowTimers/clearTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout +/es/docs/Web/API/WindowTimers/setInterval /es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval +/es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/es/docs/Web/API/XMLHttpRequest/FormData /es/docs/Web/API/FormData /es/docs/Web/API/event.defaultPrevented /es/docs/Web/API/Event/defaultPrevented /es/docs/Web/API/event.which /es/docs/Web/API/KeyboardEvent/which +/es/docs/Web/Accesibilidad /es/docs/Web/Accessibility +/es/docs/Web/Accesibilidad/Comunidad /es/docs/Web/Accessibility/Community +/es/docs/Web/Accesibilidad/Understanding_WCAG /es/docs/Web/Accessibility/Understanding_WCAG +/es/docs/Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres /es/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names +/es/docs/Web/Accesibilidad/Understanding_WCAG/Perceivable /es/docs/Web/Accessibility/Understanding_WCAG/Perceivable +/es/docs/Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste /es/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +/es/docs/Web/Accesibilidad/Understanding_WCAG/Teclado /es/docs/Web/Accessibility/Understanding_WCAG/Keyboard +/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required /es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog /es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +/es/docs/Web/Accessibility/ARIA/forms/Etiquetas_complejas /es/docs/Web/Accessibility/ARIA/forms/Multipart_labels +/es/docs/Web/Accessibility/ARIA/forms/alertas /es/docs/Web/Accessibility/ARIA/forms/alerts +/es/docs/Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios /es/docs/Web/Accessibility/ARIA/forms/Basic_form_hints /es/docs/Web/Aplicaciones/Progressive /es/docs/Web/Progressive_web_apps /es/docs/Web/Aplicaciones/Progressive/Introduction /es/docs/Web/Progressive_web_apps/Introduction /es/docs/Web/CSS/-moz-appearance /es/docs/Web/CSS/appearance +/es/docs/Web/CSS/-moz-box-flex /es/docs/Web/CSS/box-flex +/es/docs/Web/CSS/-moz-box-ordinal-group /es/docs/Web/CSS/box-ordinal-group +/es/docs/Web/CSS/-moz-box-pack /es/docs/Web/CSS/box-pack +/es/docs/Web/CSS/-moz-cell /es/docs/conflicting/Web/CSS/cursor +/es/docs/Web/CSS/-moz-font-language-override /es/docs/Web/CSS/font-language-override +/es/docs/Web/CSS/-moz-user-modify /es/docs/Web/CSS/user-modify +/es/docs/Web/CSS/-webkit-mask /es/docs/Web/CSS/mask +/es/docs/Web/CSS/-webkit-mask-clip /es/docs/Web/CSS/mask-clip +/es/docs/Web/CSS/-webkit-mask-image /es/docs/Web/CSS/mask-image +/es/docs/Web/CSS/-webkit-mask-origin /es/docs/Web/CSS/mask-origin +/es/docs/Web/CSS/-webkit-mask-position /es/docs/Web/CSS/mask-position +/es/docs/Web/CSS/-webkit-mask-repeat /es/docs/Web/CSS/mask-repeat +/es/docs/Web/CSS/:-moz-placeholder /es/docs/conflicting/Web/CSS/:placeholder-shown +/es/docs/Web/CSS/:-moz-ui-invalid /es/docs/Web/CSS/:user-invalid +/es/docs/Web/CSS/:-ms-input-placeholder /es/docs/conflicting/Web/CSS/:placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891 +/es/docs/Web/CSS/:-webkit-autofill /es/docs/Web/CSS/:autofill +/es/docs/Web/CSS/::-moz-placeholder /es/docs/conflicting/Web/CSS/::placeholder +/es/docs/Web/CSS/::-webkit-file-upload-button /es/docs/Web/CSS/::file-selector-button +/es/docs/Web/CSS/::-webkit-input-placeholder /es/docs/conflicting/Web/CSS/::placeholder_70bda352bb504ebdd6cd3362879e2479 +/es/docs/Web/CSS/:any /es/docs/Web/CSS/:is +/es/docs/Web/CSS/:not() /es/docs/Web/CSS/:not +/es/docs/Web/CSS/@media/altura /es/docs/Web/CSS/@media/height +/es/docs/Web/CSS/@media/resolución /es/docs/Web/CSS/@media/resolution +/es/docs/Web/CSS/@viewport/height /es/docs/conflicting/Web/CSS/@viewport +/es/docs/Web/CSS/@viewport/width /es/docs/conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 +/es/docs/Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS /es/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support +/es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/es/docs/Web/CSS/CSS_Background_and_Borders /es/docs/Web/CSS/CSS_Backgrounds_and_Borders +/es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generador /es/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator +/es/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /es/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/es/docs/Web/CSS/CSS_Colors /es/docs/Web/CSS/CSS_Color +/es/docs/Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color /es/docs/Web/CSS/CSS_Colors/Color_picker_tool +/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web /es/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS /es/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/es/docs/Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas /es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +/es/docs/Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout /es/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +/es/docs/Web/CSS/CSS_Logical_Properties/Dimensionamiento /es/docs/Web/CSS/CSS_Logical_Properties/Sizing +/es/docs/Web/CSS/CSS_Modelo_Caja /es/docs/Web/CSS/CSS_Box_Model +/es/docs/Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS /es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +/es/docs/Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing /es/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +/es/docs/Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento /es/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +/es/docs/Web/CSS/CSS_Reglas_Condicionales /es/docs/Web/CSS/CSS_Conditional_Rules /es/docs/Web/CSS/Child_selectors /es/docs/Web/CSS/Child_combinator -/es/docs/Web/CSS/Como_iniciar/Porqué_usar_CSS /es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS -/es/docs/Web/CSS/Consultas_multimedia /es/docs/CSS/Media_queries +/es/docs/Web/CSS/Columnas_CSS /es/docs/Web/CSS/CSS_Columns +/es/docs/Web/CSS/Comentarios /es/docs/Web/CSS/Comments +/es/docs/Web/CSS/Comenzando_(tutorial_CSS) /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/Web/CSS/Como_iniciar /es/docs/orphaned/Web/CSS/Como_iniciar +/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/es/docs/Web/CSS/Como_iniciar/Porqué_usar_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/es/docs/Web/CSS/Como_iniciar/Que_es_CSS /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 +/es/docs/Web/CSS/Consultas_multimedia /es/docs/Web/CSS/Media_Queries/Using_media_queries /es/docs/Web/CSS/Descendant_selectors /es/docs/Web/CSS/Descendant_combinator -/es/docs/Web/CSS/Getting_Started /es/docs/Web/CSS/Comenzando_(tutorial_CSS) -/es/docs/Web/CSS/Introducción/Content /es/docs/Learn/CSS/Sábercomo/Generated_content +/es/docs/Web/CSS/Elemento_reemplazo /es/docs/Web/CSS/Replaced_element +/es/docs/Web/CSS/Especificidad /es/docs/Web/CSS/Specificity +/es/docs/Web/CSS/Getting_Started /es/docs/orphaned/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/Web/CSS/Gradiente /es/docs/Web/CSS/gradient +/es/docs/Web/CSS/Herramientas /es/docs/Web/CSS/Tools +/es/docs/Web/CSS/Herramientas/Cubic_Bezier_Generator /es/docs/Web/CSS/Tools/Cubic_Bezier_Generator +/es/docs/Web/CSS/Introducción /es/docs/conflicting/Learn/CSS/First_steps +/es/docs/Web/CSS/Introducción/Boxes /es/docs/conflicting/Learn/CSS/Building_blocks +/es/docs/Web/CSS/Introducción/Cascading_and_inheritance /es/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance +/es/docs/Web/CSS/Introducción/Color /es/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/es/docs/Web/CSS/Introducción/Content /es/docs/Learn/CSS/Howto/Generated_content +/es/docs/Web/CSS/Introducción/How_CSS_works /es/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_194e34e451d4ace023d98021c00b3cfd +/es/docs/Web/CSS/Introducción/Layout /es/docs/conflicting/Learn/CSS/CSS_layout +/es/docs/Web/CSS/Introducción/Los:estilos_de_texto /es/docs/conflicting/Learn/CSS/Styling_text/Fundamentals +/es/docs/Web/CSS/Introducción/Media /es/docs/Web/Progressive_web_apps/Responsive/Media_types +/es/docs/Web/CSS/Introducción/Selectors /es/docs/conflicting/Learn/CSS/Building_blocks/Selectors +/es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS /es/docs/Learn/CSS/Howto/CSS_FAQ +/es/docs/Web/CSS/Primeros_pasos /es/docs/orphaned/Web/CSS/Primeros_pasos +/es/docs/Web/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudo-elements +/es/docs/Web/CSS/Referencia_CSS /es/docs/Web/CSS/Reference /es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Web/CSS/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions /es/docs/Web/CSS/Referencia_CSS/background-blend-mode /es/docs/Web/CSS/background-blend-mode -/es/docs/Web/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS +/es/docs/Web/CSS/Referencia_CSS/mix-blend-mode /es/docs/Web/CSS/mix-blend-mode +/es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_Selectors +/es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +/es/docs/Web/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors +/es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Adjacent_sibling_combinator +/es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/General_sibling_combinator +/es/docs/Web/CSS/Sintaxis_definición_de_valor /es/docs/Web/CSS/Value_definition_syntax +/es/docs/Web/CSS/Texto_CSS /es/docs/Web/CSS/CSS_Text +/es/docs/Web/CSS/Transiciones_de_CSS /es/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/es/docs/Web/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Using_CSS_animations /es/docs/Web/CSS/Using_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /es/docs/Web/CSS/Using_CSS_variables /es/docs/Web/CSS/Using_CSS_custom_properties +/es/docs/Web/CSS/Valor_calculado /es/docs/Web/CSS/computed_value +/es/docs/Web/CSS/Valor_inicial /es/docs/Web/CSS/initial_value /es/docs/Web/CSS/after /es/docs/Web/CSS/::after /es/docs/Web/CSS/animacion-iteracion-cuenta /es/docs/Web/CSS/animation-iteration-count /es/docs/Web/CSS/animacion-nombre /es/docs/Web/CSS/animation-name /es/docs/Web/CSS/attr /es/docs/Web/CSS/attr() +/es/docs/Web/CSS/auto /es/docs/conflicting/Web/CSS/width /es/docs/Web/CSS/before /es/docs/Web/CSS/::before /es/docs/Web/CSS/calc /es/docs/Web/CSS/calc() /es/docs/Web/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS -/es/docs/Web/CSS/computed_value /es/docs/Web/CSS/Valor_calculado +/es/docs/Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor /es/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /es/docs/Web/CSS/env /es/docs/Web/CSS/env() /es/docs/Web/CSS/filter-function/blur /es/docs/Web/CSS/filter-function/blur() /es/docs/Web/CSS/filter-function/brightness /es/docs/Web/CSS/filter-function/brightness() +/es/docs/Web/CSS/filter-function/url /es/docs/Web/CSS/url() /es/docs/Web/CSS/filtro /es/docs/Web/CSS/filter +/es/docs/Web/CSS/grid-column-gap /es/docs/Web/CSS/column-gap +/es/docs/Web/CSS/grid-gap /es/docs/Web/CSS/gap /es/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning /es/docs/Web/CSS/linear-gradient /es/docs/Web/CSS/linear-gradient() /es/docs/Web/CSS/min /es/docs/Web/CSS/min() /es/docs/Web/CSS/minmax /es/docs/Web/CSS/minmax() /es/docs/Web/CSS/none /es/docs/Web/CSS/float +/es/docs/Web/CSS/normal /es/docs/conflicting/Web/CSS/font-variant /es/docs/Web/CSS/padding_paspartu /es/docs/Web/CSS/padding +/es/docs/Web/CSS/porcentaje /es/docs/Web/CSS/percentage /es/docs/Web/CSS/radial-gradient /es/docs/Web/CSS/radial-gradient() /es/docs/Web/CSS/repeat /es/docs/Web/CSS/repeat() +/es/docs/Web/CSS/resolución /es/docs/Web/CSS/resolution +/es/docs/Web/CSS/rtl /es/docs/orphaned/Web/CSS/rtl /es/docs/Web/CSS/transform-function/rotate /es/docs/Web/CSS/transform-function/rotate() /es/docs/Web/CSS/transform-function/rotate3d /es/docs/Web/CSS/transform-function/rotate3d() /es/docs/Web/CSS/transform-function/scale /es/docs/Web/CSS/transform-function/scale() @@ -1485,49 +2003,285 @@ /es/docs/Web/CSS/transform-function/translateY /es/docs/Web/CSS/transform-function/translateY() /es/docs/Web/CSS/transform-function/translateZ /es/docs/Web/CSS/transform-function/translateZ() /es/docs/Web/CSS/var /es/docs/Web/CSS/var() +/es/docs/Web/Events/DOMContentLoaded /es/docs/Web/API/Window/DOMContentLoaded_event +/es/docs/Web/Events/abort /es/docs/Web/API/HTMLMediaElement/abort_event +/es/docs/Web/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event +/es/docs/Web/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event +/es/docs/Web/Events/blur /es/docs/Web/API/Element/blur_event /es/docs/Web/Events/canplay /es/docs/Web/API/HTMLMediaElement/canplay_event /es/docs/Web/Events/click /es/docs/Web/API/Element/click_event /es/docs/Web/Events/close_websocket /es/docs/Web/API/WebSocket/close_event /es/docs/Web/Events/dragover /es/docs/Web/API/Document/dragover_event /es/docs/Web/Events/hashchange /es/docs/Web/API/Window/hashchange_event /es/docs/Web/Events/keydown /es/docs/Web/API/Document/keydown_event +/es/docs/Web/Events/load /es/docs/Web/API/Window/load_event +/es/docs/Web/Events/loadend /es/docs/Web/API/XMLHttpRequest/loadend_event /es/docs/Web/Events/mousedown /es/docs/Web/API/Element/mousedown_event /es/docs/Web/Events/offline /es/docs/Web/API/Window/offline_event +/es/docs/Web/Events/pointerlockchange /es/docs/Web/API/Document/pointerlockchange_event /es/docs/Web/Events/scroll /es/docs/Web/API/Document/scroll_event /es/docs/Web/Events/tecla /es/docs/Web/API/Document/keyup_event /es/docs/Web/Events/timeupdate /es/docs/Web/API/HTMLMediaElement/timeupdate_event +/es/docs/Web/Events/transitioncancel /es/docs/Web/API/HTMLElement/transitioncancel_event +/es/docs/Web/Events/transitionend /es/docs/Web/API/HTMLElement/transitionend_event /es/docs/Web/Events/wheel /es/docs/Web/API/Element/wheel_event +/es/docs/Web/Guide/AJAX/Comunidad /es/docs/Web/Guide/AJAX/Community +/es/docs/Web/Guide/AJAX/Primeros_Pasos /es/docs/Web/Guide/AJAX/Getting_Started +/es/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained /es/docs/Web/Guide/Events/Orientation_and_motion_data_explained +/es/docs/Web/Guide/API/Vibration /es/docs/Web/API/Vibration_API /es/docs/Web/Guide/CSS /es/docs/Learn/CSS -/es/docs/Web/Guide/CSS/Cajas_flexibles /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS -/es/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained +/es/docs/Web/Guide/CSS/Cajas_flexibles /es/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/es/docs/Web/Guide/CSS/probando_media_queries /es/docs/Web/CSS/Media_Queries/Testing_media_queries +/es/docs/Web/Guide/DOM /es/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 +/es/docs/Web/Guide/DOM/Events /es/docs/Web/Guide/Events +/es/docs/Web/Guide/DOM/Events/Creacion_y_Activación_Eventos /es/docs/Web/Guide/Events/Creating_and_triggering_events +/es/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/Events/Orientation_and_motion_data_explained +/es/docs/Web/Guide/DOM/Events/eventos_controlador /es/docs/Web/Guide/Events/Event_handlers /es/docs/Web/Guide/HTML /es/docs/Learn/HTML -/es/docs/Web/Guide/HTML/Forms /es/docs/Learn/HTML/Forms -/es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form -/es/docs/Web/Guide/HTML/Forms/My_first_HTML_form /es/docs/Learn/HTML/Forms/Your_first_HTML_form -/es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data -/es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /es/docs/Learn/HTML/Forms/Styling_HTML_forms -/es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduccion_a_HTML -/es/docs/Web/HTML/Elemento/Audio2 /es/docs/Web/HTML/Elemento/audio -/es/docs/Web/HTML/Elemento/Progreso /es/docs/Web/HTML/Elemento/progress -/es/docs/Web/HTML/Elemento/etiqueta /es/docs/Web/HTML/Elemento/label -/es/docs/Web/HTML/Elemento/h2 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/Web/HTML/Elemento/h3 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/Web/HTML/Elemento/h4 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/Web/HTML/Elemento/h5 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/Web/HTML/Elemento/h6 /es/docs/Web/HTML/Elemento/Elementos_títulos -/es/docs/Web/HTML/Elemento/preformato /es/docs/Web/HTML/Elemento/pre +/es/docs/Web/Guide/HTML/Canvas_tutorial /es/docs/Web/API/Canvas_API/Tutorial +/es/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /es/docs/Web/API/Canvas_API/Tutorial/Advanced_animations +/es/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors /es/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +/es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations /es/docs/Web/API/Canvas_API/Tutorial/Basic_animations +/es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage /es/docs/Web/API/Canvas_API/Tutorial/Basic_usage +/es/docs/Web/Guide/HTML/Canvas_tutorial/Dibujando_formas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes +/es/docs/Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility /es/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +/es/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas /es/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas +/es/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas /es/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +/es/docs/Web/Guide/HTML/Forms /es/docs/conflicting/Learn/Forms +/es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/Forms/How_to_structure_a_web_form +/es/docs/Web/Guide/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form +/es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/Forms/Sending_and_retrieving_form_data +/es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /es/docs/Learn/Forms/Styling_web_forms +/es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduction_to_HTML +/es/docs/Web/Guide/HTML/Introduction_alhtml_clone /es/docs/orphaned/Web/Guide/HTML/Introduction_alhtml_clone +/es/docs/Web/Guide/HTML/categorias_de_contenido /es/docs/Web/Guide/HTML/Content_categories +/es/docs/Web/Guide/Movil /es/docs/Web/Guide/Mobile +/es/docs/Web/Guide/Performance/Usando_web_workers /es/docs/Web/API/Web_Workers_API/Using_web_workers +/es/docs/Web/Guide/Usando_Objetos_FormData /es/docs/Web/API/FormData/Using_FormData_Objects +/es/docs/Web/HTML/Atributos /es/docs/Web/HTML/Attributes +/es/docs/Web/HTML/Atributos/accept /es/docs/Web/HTML/Attributes/accept +/es/docs/Web/HTML/Atributos/autocomplete /es/docs/Web/HTML/Attributes/autocomplete +/es/docs/Web/HTML/Atributos/min /es/docs/Web/HTML/Attributes/min +/es/docs/Web/HTML/Atributos/minlength /es/docs/Web/HTML/Attributes/minlength +/es/docs/Web/HTML/Atributos/multiple /es/docs/Web/HTML/Attributes/multiple +/es/docs/Web/HTML/Atributos_Globales /es/docs/Web/HTML/Global_attributes +/es/docs/Web/HTML/Atributos_Globales/accesskey /es/docs/Web/HTML/Global_attributes/accesskey +/es/docs/Web/HTML/Atributos_Globales/autocapitalize /es/docs/Web/HTML/Global_attributes/autocapitalize +/es/docs/Web/HTML/Atributos_Globales/class /es/docs/Web/HTML/Global_attributes/class +/es/docs/Web/HTML/Atributos_Globales/contenteditable /es/docs/Web/HTML/Global_attributes/contenteditable +/es/docs/Web/HTML/Atributos_Globales/contextmenu /es/docs/Web/HTML/Global_attributes/contextmenu +/es/docs/Web/HTML/Atributos_Globales/data-* /es/docs/Web/HTML/Global_attributes/data-* +/es/docs/Web/HTML/Atributos_Globales/dir /es/docs/Web/HTML/Global_attributes/dir +/es/docs/Web/HTML/Atributos_Globales/draggable /es/docs/Web/HTML/Global_attributes/draggable +/es/docs/Web/HTML/Atributos_Globales/dropzone /es/docs/orphaned/Web/HTML/Global_attributes/dropzone +/es/docs/Web/HTML/Atributos_Globales/hidden /es/docs/Web/HTML/Global_attributes/hidden +/es/docs/Web/HTML/Atributos_Globales/id /es/docs/Web/HTML/Global_attributes/id +/es/docs/Web/HTML/Atributos_Globales/is /es/docs/Web/HTML/Global_attributes/is +/es/docs/Web/HTML/Atributos_Globales/itemid /es/docs/Web/HTML/Global_attributes/itemid +/es/docs/Web/HTML/Atributos_Globales/itemprop /es/docs/Web/HTML/Global_attributes/itemprop +/es/docs/Web/HTML/Atributos_Globales/itemref /es/docs/Web/HTML/Global_attributes/itemref +/es/docs/Web/HTML/Atributos_Globales/itemscope /es/docs/Web/HTML/Global_attributes/itemscope +/es/docs/Web/HTML/Atributos_Globales/lang /es/docs/Web/HTML/Global_attributes/lang +/es/docs/Web/HTML/Atributos_Globales/slot /es/docs/Web/HTML/Global_attributes/slot +/es/docs/Web/HTML/Atributos_Globales/spellcheck /es/docs/Web/HTML/Global_attributes/spellcheck +/es/docs/Web/HTML/Atributos_Globales/style /es/docs/Web/HTML/Global_attributes/style +/es/docs/Web/HTML/Atributos_Globales/tabindex /es/docs/Web/HTML/Global_attributes/tabindex +/es/docs/Web/HTML/Atributos_Globales/title /es/docs/Web/HTML/Global_attributes/title +/es/docs/Web/HTML/Atributos_Globales/translate /es/docs/Web/HTML/Global_attributes/translate +/es/docs/Web/HTML/Atributos_Globales/x-ms-acceleratorkey /es/docs/Web/HTML/Global_attributes/x-ms-acceleratorkey +/es/docs/Web/HTML/Atributos_de_configuracion_CORS /es/docs/Web/HTML/Attributes/crossorigin +/es/docs/Web/HTML/Canvas /es/docs/Web/API/Canvas_API +/es/docs/Web/HTML/Canvas/A_basic_ray-caster /es/docs/Web/API/Canvas_API/A_basic_ray-caster +/es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/conflicting/Web/API/Canvas_API/Tutorial +/es/docs/Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida /es/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages +/es/docs/Web/HTML/Elemento /es/docs/Web/HTML/Element +/es/docs/Web/HTML/Elemento/Audio2 /es/docs/Web/HTML/Element/audio +/es/docs/Web/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 /es/docs/orphaned/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 +/es/docs/Web/HTML/Elemento/Progreso /es/docs/Web/HTML/Element/progress +/es/docs/Web/HTML/Elemento/Shadow /es/docs/Web/HTML/Element/shadow +/es/docs/Web/HTML/Elemento/Tipos_de_elementos /es/docs/orphaned/Web/HTML/Elemento/Tipos_de_elementos +/es/docs/Web/HTML/Elemento/a /es/docs/Web/HTML/Element/a +/es/docs/Web/HTML/Elemento/abbr /es/docs/Web/HTML/Element/abbr +/es/docs/Web/HTML/Elemento/acronym /es/docs/Web/HTML/Element/acronym +/es/docs/Web/HTML/Elemento/address /es/docs/Web/HTML/Element/address +/es/docs/Web/HTML/Elemento/applet /es/docs/Web/HTML/Element/applet +/es/docs/Web/HTML/Elemento/area /es/docs/Web/HTML/Element/area +/es/docs/Web/HTML/Elemento/article /es/docs/Web/HTML/Element/article +/es/docs/Web/HTML/Elemento/aside /es/docs/Web/HTML/Element/aside +/es/docs/Web/HTML/Elemento/audio /es/docs/Web/HTML/Element/audio +/es/docs/Web/HTML/Elemento/b /es/docs/Web/HTML/Element/b +/es/docs/Web/HTML/Elemento/base /es/docs/Web/HTML/Element/base +/es/docs/Web/HTML/Elemento/basefont /es/docs/Web/HTML/Element/basefont +/es/docs/Web/HTML/Elemento/bdi /es/docs/Web/HTML/Element/bdi +/es/docs/Web/HTML/Elemento/bdo /es/docs/Web/HTML/Element/bdo +/es/docs/Web/HTML/Elemento/bgsound /es/docs/Web/HTML/Element/bgsound +/es/docs/Web/HTML/Elemento/big /es/docs/Web/HTML/Element/big +/es/docs/Web/HTML/Elemento/blink /es/docs/Web/HTML/Element/blink +/es/docs/Web/HTML/Elemento/blockquote /es/docs/Web/HTML/Element/blockquote +/es/docs/Web/HTML/Elemento/body /es/docs/Web/HTML/Element/body +/es/docs/Web/HTML/Elemento/br /es/docs/Web/HTML/Element/br +/es/docs/Web/HTML/Elemento/button /es/docs/Web/HTML/Element/button +/es/docs/Web/HTML/Elemento/canvas /es/docs/Web/HTML/Element/canvas +/es/docs/Web/HTML/Elemento/caption /es/docs/Web/HTML/Element/caption +/es/docs/Web/HTML/Elemento/center /es/docs/Web/HTML/Element/center +/es/docs/Web/HTML/Elemento/cite /es/docs/Web/HTML/Element/cite +/es/docs/Web/HTML/Elemento/code /es/docs/Web/HTML/Element/code +/es/docs/Web/HTML/Elemento/col /es/docs/Web/HTML/Element/col +/es/docs/Web/HTML/Elemento/colgroup /es/docs/Web/HTML/Element/colgroup +/es/docs/Web/HTML/Elemento/command /es/docs/orphaned/Web/HTML/Element/command +/es/docs/Web/HTML/Elemento/content /es/docs/Web/HTML/Element/content +/es/docs/Web/HTML/Elemento/data /es/docs/Web/HTML/Element/data +/es/docs/Web/HTML/Elemento/datalist /es/docs/Web/HTML/Element/datalist +/es/docs/Web/HTML/Elemento/dd /es/docs/Web/HTML/Element/dd +/es/docs/Web/HTML/Elemento/del /es/docs/Web/HTML/Element/del +/es/docs/Web/HTML/Elemento/details /es/docs/Web/HTML/Element/details +/es/docs/Web/HTML/Elemento/dfn /es/docs/Web/HTML/Element/dfn +/es/docs/Web/HTML/Elemento/dialog /es/docs/Web/HTML/Element/dialog +/es/docs/Web/HTML/Elemento/dir /es/docs/Web/HTML/Element/dir +/es/docs/Web/HTML/Elemento/div /es/docs/Web/HTML/Element/div +/es/docs/Web/HTML/Elemento/dl /es/docs/Web/HTML/Element/dl +/es/docs/Web/HTML/Elemento/dt /es/docs/Web/HTML/Element/dt +/es/docs/Web/HTML/Elemento/element /es/docs/orphaned/Web/HTML/Element/element +/es/docs/Web/HTML/Elemento/em /es/docs/Web/HTML/Element/em +/es/docs/Web/HTML/Elemento/embed /es/docs/Web/HTML/Element/embed +/es/docs/Web/HTML/Elemento/etiqueta /es/docs/Web/HTML/Element/label +/es/docs/Web/HTML/Elemento/fieldset /es/docs/Web/HTML/Element/fieldset +/es/docs/Web/HTML/Elemento/figcaption /es/docs/Web/HTML/Element/figcaption +/es/docs/Web/HTML/Elemento/figure /es/docs/Web/HTML/Element/figure +/es/docs/Web/HTML/Elemento/font /es/docs/Web/HTML/Element/font +/es/docs/Web/HTML/Elemento/footer /es/docs/Web/HTML/Element/footer +/es/docs/Web/HTML/Elemento/form /es/docs/Web/HTML/Element/form +/es/docs/Web/HTML/Elemento/frame /es/docs/Web/HTML/Element/frame +/es/docs/Web/HTML/Elemento/frameset /es/docs/Web/HTML/Element/frameset +/es/docs/Web/HTML/Elemento/h2 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/Web/HTML/Elemento/h3 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/Web/HTML/Elemento/h4 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/Web/HTML/Elemento/h5 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/Web/HTML/Elemento/h6 /es/docs/Web/HTML/Element/Heading_Elements +/es/docs/Web/HTML/Elemento/head /es/docs/Web/HTML/Element/head +/es/docs/Web/HTML/Elemento/header /es/docs/Web/HTML/Element/header +/es/docs/Web/HTML/Elemento/hgroup /es/docs/Web/HTML/Element/hgroup +/es/docs/Web/HTML/Elemento/hr /es/docs/Web/HTML/Element/hr +/es/docs/Web/HTML/Elemento/html /es/docs/Web/HTML/Element/html +/es/docs/Web/HTML/Elemento/i /es/docs/Web/HTML/Element/i +/es/docs/Web/HTML/Elemento/iframe /es/docs/Web/HTML/Element/iframe +/es/docs/Web/HTML/Elemento/image /es/docs/Web/HTML/Element/image +/es/docs/Web/HTML/Elemento/img /es/docs/Web/HTML/Element/img +/es/docs/Web/HTML/Elemento/input /es/docs/Web/HTML/Element/input +/es/docs/Web/HTML/Elemento/input/Botón /es/docs/Web/HTML/Element/input/button +/es/docs/Web/HTML/Elemento/input/checkbox /es/docs/Web/HTML/Element/input/checkbox +/es/docs/Web/HTML/Elemento/input/color /es/docs/Web/HTML/Element/input/color +/es/docs/Web/HTML/Elemento/input/date /es/docs/Web/HTML/Element/input/date +/es/docs/Web/HTML/Elemento/input/datetime /es/docs/Web/HTML/Element/input/datetime +/es/docs/Web/HTML/Elemento/input/email /es/docs/Web/HTML/Element/input/email +/es/docs/Web/HTML/Elemento/input/hidden /es/docs/Web/HTML/Element/input/hidden +/es/docs/Web/HTML/Elemento/input/number /es/docs/Web/HTML/Element/input/number +/es/docs/Web/HTML/Elemento/input/password /es/docs/Web/HTML/Element/input/password +/es/docs/Web/HTML/Elemento/input/range /es/docs/Web/HTML/Element/input/range +/es/docs/Web/HTML/Elemento/input/text /es/docs/Web/HTML/Element/input/text +/es/docs/Web/HTML/Elemento/ins /es/docs/Web/HTML/Element/ins +/es/docs/Web/HTML/Elemento/isindex /es/docs/Web/HTML/Element/isindex +/es/docs/Web/HTML/Elemento/kbd /es/docs/Web/HTML/Element/kbd +/es/docs/Web/HTML/Elemento/keygen /es/docs/Web/HTML/Element/keygen +/es/docs/Web/HTML/Elemento/label /es/docs/Web/HTML/Element/label +/es/docs/Web/HTML/Elemento/legend /es/docs/Web/HTML/Element/legend +/es/docs/Web/HTML/Elemento/li /es/docs/Web/HTML/Element/li +/es/docs/Web/HTML/Elemento/link /es/docs/Web/HTML/Element/link +/es/docs/Web/HTML/Elemento/main /es/docs/Web/HTML/Element/main +/es/docs/Web/HTML/Elemento/map /es/docs/Web/HTML/Element/map +/es/docs/Web/HTML/Elemento/mark /es/docs/Web/HTML/Element/mark +/es/docs/Web/HTML/Elemento/marquee /es/docs/Web/HTML/Element/marquee +/es/docs/Web/HTML/Elemento/menu /es/docs/Web/HTML/Element/menu +/es/docs/Web/HTML/Elemento/meta /es/docs/Web/HTML/Element/meta +/es/docs/Web/HTML/Elemento/multicol /es/docs/Web/HTML/Element/multicol +/es/docs/Web/HTML/Elemento/nav /es/docs/Web/HTML/Element/nav +/es/docs/Web/HTML/Elemento/nobr /es/docs/Web/HTML/Element/nobr +/es/docs/Web/HTML/Elemento/noframes /es/docs/Web/HTML/Element/noframes +/es/docs/Web/HTML/Elemento/noscript /es/docs/Web/HTML/Element/noscript +/es/docs/Web/HTML/Elemento/object /es/docs/Web/HTML/Element/object +/es/docs/Web/HTML/Elemento/ol /es/docs/Web/HTML/Element/ol +/es/docs/Web/HTML/Elemento/option /es/docs/Web/HTML/Element/option +/es/docs/Web/HTML/Elemento/p /es/docs/Web/HTML/Element/p +/es/docs/Web/HTML/Elemento/param /es/docs/Web/HTML/Element/param +/es/docs/Web/HTML/Elemento/picture /es/docs/Web/HTML/Element/picture +/es/docs/Web/HTML/Elemento/pre /es/docs/Web/HTML/Element/pre +/es/docs/Web/HTML/Elemento/preformato /es/docs/Web/HTML/Element/pre +/es/docs/Web/HTML/Elemento/progress /es/docs/Web/HTML/Element/progress +/es/docs/Web/HTML/Elemento/q /es/docs/Web/HTML/Element/q +/es/docs/Web/HTML/Elemento/s /es/docs/Web/HTML/Element/s +/es/docs/Web/HTML/Elemento/samp /es/docs/Web/HTML/Element/samp +/es/docs/Web/HTML/Elemento/script /es/docs/Web/SVG/Element/script +/es/docs/Web/HTML/Elemento/section /es/docs/Web/HTML/Element/section +/es/docs/Web/HTML/Elemento/select /es/docs/Web/HTML/Element/select +/es/docs/Web/HTML/Elemento/slot /es/docs/Web/HTML/Element/slot +/es/docs/Web/HTML/Elemento/small /es/docs/Web/HTML/Element/small +/es/docs/Web/HTML/Elemento/source /es/docs/Web/HTML/Element/source +/es/docs/Web/HTML/Elemento/span /es/docs/Web/HTML/Element/span +/es/docs/Web/HTML/Elemento/strike /es/docs/Web/HTML/Element/strike +/es/docs/Web/HTML/Elemento/strong /es/docs/Web/HTML/Element/strong +/es/docs/Web/HTML/Elemento/style /es/docs/Web/HTML/Element/style +/es/docs/Web/HTML/Elemento/sub /es/docs/Web/HTML/Element/sub +/es/docs/Web/HTML/Elemento/sup /es/docs/Web/HTML/Element/sup +/es/docs/Web/HTML/Elemento/table /es/docs/Web/HTML/Element/table +/es/docs/Web/HTML/Elemento/td /es/docs/Web/HTML/Element/td +/es/docs/Web/HTML/Elemento/template /es/docs/Web/HTML/Element/template +/es/docs/Web/HTML/Elemento/textarea /es/docs/Web/HTML/Element/textarea +/es/docs/Web/HTML/Elemento/th /es/docs/Web/HTML/Element/th +/es/docs/Web/HTML/Elemento/time /es/docs/Web/HTML/Element/time +/es/docs/Web/HTML/Elemento/title /es/docs/Web/HTML/Element/title +/es/docs/Web/HTML/Elemento/tr /es/docs/Web/HTML/Element/tr +/es/docs/Web/HTML/Elemento/track /es/docs/Web/HTML/Element/track +/es/docs/Web/HTML/Elemento/tt /es/docs/Web/HTML/Element/tt +/es/docs/Web/HTML/Elemento/u /es/docs/Web/HTML/Element/u +/es/docs/Web/HTML/Elemento/ul /es/docs/Web/HTML/Element/ul +/es/docs/Web/HTML/Elemento/var /es/docs/Web/HTML/Element/var +/es/docs/Web/HTML/Elemento/video /es/docs/Web/HTML/Element/video /es/docs/Web/HTML/Elemento/video/canplay_event /es/docs/Web/API/HTMLMediaElement/canplay_event /es/docs/Web/HTML/Elemento/video/timeupdate_event /es/docs/Web/API/HTMLMediaElement/timeupdate_event +/es/docs/Web/HTML/Elemento/wbr /es/docs/Web/HTML/Element/wbr +/es/docs/Web/HTML/Elemento/xmp /es/docs/Web/HTML/Element/xmp +/es/docs/Web/HTML/Elementos_en_línea /es/docs/Web/HTML/Inline_elements +/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/conflicting/Web/Media/Formats /es/docs/Web/HTML/Gestión_del_foco_en_HTML /es/docs/Web/API/Document/hasFocus +/es/docs/Web/HTML/Imagen_con_CORS_habilitado /es/docs/Web/HTML/CORS_enabled_image +/es/docs/Web/HTML/La_importancia_de_comentar_correctamente /es/docs/conflicting/Learn/HTML/Introduction_to_HTML/Getting_started +/es/docs/Web/HTML/Microdatos /es/docs/Web/HTML/Microdata +/es/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /es/docs/Glossary/speculative_parsing +/es/docs/Web/HTML/Recursos_offline_en_firefox /es/docs/Web/HTML/Using_the_application_cache +/es/docs/Web/HTML/Referencia /es/docs/Web/HTML/Reference +/es/docs/Web/HTML/Tipos_de_enlaces /es/docs/Web/HTML/Link_types +/es/docs/Web/HTML/Transision_adaptativa_DASH /es/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 /es/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +/es/docs/Web/HTML/anipular_video_por_medio_de_canvas /es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas +/es/docs/Web/HTML/microformatos /es/docs/Web/HTML/microformats +/es/docs/Web/HTML/Índice /es/docs/Web/HTML/Index +/es/docs/Web/HTTP/Access_control_CORS /es/docs/Web/HTTP/CORS +/es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs /es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs +/es/docs/Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web /es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types -/es/docs/Web/JavaScript/Guide/AcercaDe /es/docs/Web/JavaScript/Guide/Introducción +/es/docs/Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x /es/docs/Web/HTTP/Connection_management_in_HTTP_1.x +/es/docs/Web/HTTP/Peticiones_condicionales /es/docs/Web/HTTP/Conditional_requests +/es/docs/Web/HTTP/Sesión /es/docs/Web/HTTP/Session +/es/docs/Web/HTTP/Status/8080 /es/docs/Web/HTTP/Status/413 +/es/docs/Web/HTTP/mecanismo_actualizacion_protocolo /es/docs/Web/HTTP/Protocol_upgrade_mechanism +/es/docs/Web/HTTP/recursos_y_especificaciones /es/docs/Web/HTTP/Resources_and_specifications +/es/docs/Web/JavaScript/Acerca_de_JavaScript /es/docs/Web/JavaScript/About_JavaScript +/es/docs/Web/JavaScript/Descripción_de_las_tecnologías_JavaScript /es/docs/Web/JavaScript/JavaScript_technologies_overview +/es/docs/Web/JavaScript/Gestion_de_Memoria /es/docs/Web/JavaScript/Memory_Management +/es/docs/Web/JavaScript/Guide/AcercaDe /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Web/JavaScript/Guide/Bucles_e_iteración /es/docs/Web/JavaScript/Guide/Loops_and_iteration /es/docs/Web/JavaScript/Guide/Closures /es/docs/Web/JavaScript/Closures -/es/docs/Web/JavaScript/Guide/JavaScript_Overview /es/docs/Web/JavaScript/Guide/Introducción +/es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores /es/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/es/docs/Web/JavaScript/Guide/Funciones /es/docs/Web/JavaScript/Guide/Functions +/es/docs/Web/JavaScript/Guide/Introducción /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Web/JavaScript/Guide/JavaScript_Overview /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Web/JavaScript/Guide/Módulos /es/docs/Web/JavaScript/Guide/Modules /es/docs/Web/JavaScript/Guide/Obsolete_Pages /es/docs/Web/JavaScript/Guide /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5 /es/docs/Web/JavaScript/Guide -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducción -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Acerca_de_esta_guía /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introduction +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Reference/Statements/const /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Constructores_más_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades @@ -1540,7 +2294,7 @@ /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Crear_una_expresión_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Functions /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarquía /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia @@ -1566,15 +2320,15 @@ /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Herencia_no_múltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Información_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Más_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Reference +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Reference/Global_Objects/String /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_aritméticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos @@ -1584,10 +2338,10 @@ /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_lógicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Operadores/Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Reference/Statements/block /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement @@ -1598,193 +2352,703 @@ /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones -/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Functions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Functions /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Guía_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types /es/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions /en-US/docs/Web/JavaScript/Guide/Functions /es/docs/Web/JavaScript/Guide/Obsolete_Pages/The_Employee_Example /en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/Web/JavaScript/Guide/Regular_Expressions/Aserciones /es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions +/es/docs/Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres /es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes +/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cuantificadores /es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers +/es/docs/Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode /es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes +/es/docs/Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos /es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +/es/docs/Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia /es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet +/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos /es/docs/Web/JavaScript/Guide/Working_with_Objects +/es/docs/Web/JavaScript/Guide/Usar_promesas /es/docs/Web/JavaScript/Guide/Using_promises /es/docs/Web/JavaScript/Guide/Valores,_variables_y_literales /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Web/JavaScript/Guide/colecciones_indexadas /es/docs/Web/JavaScript/Guide/Indexed_collections +/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos /es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/es/docs/Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos /es/docs/conflicting/Learn/JavaScript/Objects +/es/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/JavaScript/New_in_JavaScript /es/docs/Web/JavaScript/Novedades_en_JavaScript /es/docs/Web/JavaScript/Primeros_Pasos /es/docs/Learn/Getting_started_with_the_web/JavaScript_basics -/es/docs/Web/JavaScript/Reference/Classes /es/docs/Web/JavaScript/Referencia/Classes -/es/docs/Web/JavaScript/Reference/Classes/static /es/docs/Web/JavaScript/Referencia/Classes/static -/es/docs/Web/JavaScript/Reference/Global_Objects/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON -/es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify -/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray -/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer -/es/docs/Web/JavaScript/Reference/Statements /es/docs/Web/JavaScript/Referencia/Sentencias -/es/docs/Web/JavaScript/Reference/Statements/const /es/docs/Web/JavaScript/Referencia/Sentencias/const -/es/docs/Web/JavaScript/Referencia/Características_Despreciadas /es/docs/Web/JavaScript/Referencia/Características_Desaprobadas -/es/docs/Web/JavaScript/Referencia/Funciones/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Web/JavaScript/Referencia/Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Web/JavaScript/Referencia/Funciones_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean -/es/docs/Web/JavaScript/Referencia/Funciones_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date -/es/docs/Web/JavaScript/Referencia/Funciones_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object -/es/docs/Web/JavaScript/Referencia/Funciones_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI -/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent -/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI -/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent -/es/docs/Web/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite -/es/docs/Web/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN -/es/docs/Web/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt -/es/docs/Web/JavaScript/Referencia/Methods_Index /es/docs/Web/JavaScript/Referencia -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flatten /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flat -/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat /es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat -/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat/format /es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/all /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all -/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/race /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/race -/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String -/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeUR /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI -/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite_ /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite -/es/docs/Web/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Web/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Web/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Referencia/Operadores/function -/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Referencia/Operadores -/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this -/es/docs/Web/JavaScript/Referencia/Operadores/String /es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos -/es/docs/Web/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Referencia/Funciones/get -/es/docs/Web/JavaScript/Referencia/Properties_Index /es/docs/Web/JavaScript/Referencia -/es/docs/Web/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales -/es/docs/Web/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity -/es/docs/Web/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN -/es/docs/Web/JavaScript/Referencia/Propiedades_globales/undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined -/es/docs/Web/JavaScript/Una_nueva_introducción_a_JavaScript /es/docs/Web/JavaScript/Una_re-introducción_a_JavaScript +/es/docs/Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion /es/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +/es/docs/Web/JavaScript/Reference/Errors/Indicador_regexp_no-val /es/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag +/es/docs/Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos /es/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +/es/docs/Web/JavaScript/Reference/Errors/caracter_ilegal /es/docs/Web/JavaScript/Reference/Errors/Illegal_character +/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError +/es/docs/Web/JavaScript/Referencia /es/docs/Web/JavaScript/Reference +/es/docs/Web/JavaScript/Referencia/Acerca_de /es/docs/Web/JavaScript/Reference/About +/es/docs/Web/JavaScript/Referencia/Características_Desaprobadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/Web/JavaScript/Referencia/Características_Desaprobadas/The_legacy_Iterator_protocol /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +/es/docs/Web/JavaScript/Referencia/Características_Despreciadas /es/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/es/docs/Web/JavaScript/Referencia/Classes /es/docs/Web/JavaScript/Reference/Classes +/es/docs/Web/JavaScript/Referencia/Classes/Class_fields /es/docs/Web/JavaScript/Reference/Classes/Public_class_fields +/es/docs/Web/JavaScript/Referencia/Classes/Private_class_fields /es/docs/Web/JavaScript/Reference/Classes/Private_class_fields +/es/docs/Web/JavaScript/Referencia/Classes/constructor /es/docs/Web/JavaScript/Reference/Classes/constructor +/es/docs/Web/JavaScript/Referencia/Classes/extends /es/docs/Web/JavaScript/Reference/Classes/extends +/es/docs/Web/JavaScript/Referencia/Classes/static /es/docs/Web/JavaScript/Reference/Classes/static +/es/docs/Web/JavaScript/Referencia/Funciones /es/docs/Web/JavaScript/Reference/Functions +/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions /es/docs/Web/JavaScript/Reference/Functions/Arrow_functions +/es/docs/Web/JavaScript/Referencia/Funciones/Method_definitions /es/docs/Web/JavaScript/Reference/Functions/Method_definitions +/es/docs/Web/JavaScript/Referencia/Funciones/Parametros_por_defecto /es/docs/Web/JavaScript/Reference/Functions/Default_parameters +/es/docs/Web/JavaScript/Referencia/Funciones/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Web/JavaScript/Referencia/Funciones/arguments /es/docs/Web/JavaScript/Reference/Functions/arguments +/es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee /es/docs/Web/JavaScript/Reference/Functions/arguments/callee +/es/docs/Web/JavaScript/Referencia/Funciones/arguments/length /es/docs/Web/JavaScript/Reference/Functions/arguments/length +/es/docs/Web/JavaScript/Referencia/Funciones/get /es/docs/Web/JavaScript/Reference/Functions/get +/es/docs/Web/JavaScript/Referencia/Funciones/parametros_rest /es/docs/Web/JavaScript/Reference/Functions/rest_parameters +/es/docs/Web/JavaScript/Referencia/Funciones/set /es/docs/Web/JavaScript/Reference/Functions/set +/es/docs/Web/JavaScript/Referencia/Funciones_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Web/JavaScript/Referencia/Funciones_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Web/JavaScript/Referencia/Funciones_globales/Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Web/JavaScript/Referencia/Funciones_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Web/JavaScript/Referencia/Funciones_globales/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI +/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent +/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI +/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent +/es/docs/Web/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite +/es/docs/Web/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN +/es/docs/Web/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/parseInt +/es/docs/Web/JavaScript/Referencia/Gramatica_lexica /es/docs/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Web/JavaScript/Referencia/Iteration_protocols /es/docs/Web/JavaScript/Reference/Iteration_protocols +/es/docs/Web/JavaScript/Referencia/Methods_Index /es/docs/Web/JavaScript/Reference +/es/docs/Web/JavaScript/Referencia/Modo_estricto /es/docs/Web/JavaScript/Reference/Strict_mode +/es/docs/Web/JavaScript/Referencia/Objetos_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Web/JavaScript/Referencia/Objetos_globales/AggregateError /es/docs/Web/JavaScript/Reference/Global_Objects/AggregateError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array /es/docs/Web/JavaScript/Reference/Global_Objects/Array +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator /es/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@species /es/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables /es/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/concat /es/docs/Web/JavaScript/Reference/Global_Objects/Array/concat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin /es/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/entries /es/docs/Web/JavaScript/Reference/Global_Objects/Array/entries +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/every /es/docs/Web/JavaScript/Reference/Global_Objects/Array/every +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/fill /es/docs/Web/JavaScript/Reference/Global_Objects/Array/fill +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter /es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find /es/docs/Web/JavaScript/Reference/Global_Objects/Array/find +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/findIndex /es/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flat /es/docs/Web/JavaScript/Reference/Global_Objects/Array/flat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flatMap /es/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flatten /es/docs/Web/JavaScript/Reference/Global_Objects/Array/flat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/from /es/docs/Web/JavaScript/Reference/Global_Objects/Array/from +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/includes /es/docs/Web/JavaScript/Reference/Global_Objects/Array/includes +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/isArray /es/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join /es/docs/Web/JavaScript/Reference/Global_Objects/Array/join +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/keys /es/docs/Web/JavaScript/Reference/Global_Objects/Array/keys +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf /es/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/length /es/docs/Web/JavaScript/Reference/Global_Objects/Array/length +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map /es/docs/Web/JavaScript/Reference/Global_Objects/Array/map +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/of /es/docs/Web/JavaScript/Reference/Global_Objects/Array/of +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/pop /es/docs/Web/JavaScript/Reference/Global_Objects/Array/pop +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/prototype /es/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push /es/docs/Web/JavaScript/Reference/Global_Objects/Array/push +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reverse /es/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/shift /es/docs/Web/JavaScript/Reference/Global_Objects/Array/shift +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/slice /es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/some /es/docs/Web/JavaScript/Reference/Global_Objects/Array/some +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort /es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/splice /es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString /es/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Array/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/unshift /es/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/values /es/docs/Web/JavaScript/Reference/Global_Objects/Array/values +/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer /es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species /es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species +/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength /es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength +/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Boolean/toSource +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date /es/docs/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getDate /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getDay /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getHours /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getMilliseconds /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getMinutes /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getMinutes +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getMonth /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getSeconds /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getSeconds +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getTime /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getUTCFullYear /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours /es/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now /es/docs/Web/JavaScript/Reference/Global_Objects/Date/now +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Reference/Global_Objects/Date/parse +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear /es/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/setMonth /es/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toDateString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toISOString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toJSON /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleDateString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleTimeString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString /es/docs/Web/JavaScript/Reference/Global_Objects/Date/toUTCString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error /es/docs/Web/JavaScript/Reference/Global_Objects/Error +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/constructor_Error /es/docs/Web/JavaScript/Reference/Global_Objects/Error/Error +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/fileName /es/docs/Web/JavaScript/Reference/Global_Objects/Error/fileName +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber /es/docs/Web/JavaScript/Reference/Global_Objects/Error/lineNumber +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/message /es/docs/Web/JavaScript/Reference/Global_Objects/Error/message +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/name /es/docs/Web/JavaScript/Reference/Global_Objects/Error/name +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Error/toSource +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Error/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/EvalError /es/docs/Web/JavaScript/Reference/Global_Objects/EvalError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Funcionesasíncronas /es/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function /es/docs/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/Función /es/docs/Web/JavaScript/Reference/Global_Objects/Function/Function +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Reference/Global_Objects/Function/apply +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments /es/docs/Web/JavaScript/Reference/Global_Objects/Function/arguments +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/bind /es/docs/Web/JavaScript/Reference/Global_Objects/Function/bind +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call /es/docs/Web/JavaScript/Reference/Global_Objects/Function/call +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/caller /es/docs/Web/JavaScript/Reference/Global_Objects/Function/caller +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/displayName /es/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/length /es/docs/Web/JavaScript/Reference/Global_Objects/Function/length +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/name /es/docs/Web/JavaScript/Reference/Global_Objects/Function/name +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Function/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Generador /es/docs/Web/JavaScript/Reference/Global_Objects/Generator +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Generador/next /es/docs/Web/JavaScript/Reference/Global_Objects/Generator/next +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Generador/return /es/docs/Web/JavaScript/Reference/Global_Objects/Generator/return +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Generador/throw /es/docs/Web/JavaScript/Reference/Global_Objects/Generator/throw +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity +/es/docs/Web/JavaScript/Referencia/Objetos_globales/InternalError /es/docs/Web/JavaScript/Reference/Global_Objects/InternalError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/InternalError/Constructor_InternalError /es/docs/Web/JavaScript/Reference/Global_Objects/InternalError/InternalError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl /es/docs/Web/JavaScript/Reference/Global_Objects/Intl +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat /es/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format /es/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/RelativeTimeFormat /es/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON /es/docs/Web/JavaScript/Reference/Global_Objects/JSON +/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/parse /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse +/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map /es/docs/Web/JavaScript/Reference/Global_Objects/Map +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/clear /es/docs/Web/JavaScript/Reference/Global_Objects/Map/clear +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/delete /es/docs/Web/JavaScript/Reference/Global_Objects/Map/delete +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/entries /es/docs/Web/JavaScript/Reference/Global_Objects/Map/entries +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/forEach /es/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/get /es/docs/Web/JavaScript/Reference/Global_Objects/Map/get +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/has /es/docs/Web/JavaScript/Reference/Global_Objects/Map/has +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/keys /es/docs/Web/JavaScript/Reference/Global_Objects/Map/keys +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/set /es/docs/Web/JavaScript/Reference/Global_Objects/Map/set +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/size /es/docs/Web/JavaScript/Reference/Global_Objects/Map/size +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/values /es/docs/Web/JavaScript/Reference/Global_Objects/Map/values +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math /es/docs/Web/JavaScript/Reference/Global_Objects/Math +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/E +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN10 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LN2 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG10E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG10E +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Reference/Global_Objects/Math/LOG2E +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/PI /es/docs/Web/JavaScript/Reference/Global_Objects/Math/PI +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/SQRT1_2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/SQRT2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/abs /es/docs/Web/JavaScript/Reference/Global_Objects/Math/abs +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/acos /es/docs/Web/JavaScript/Reference/Global_Objects/Math/acos +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/acosh /es/docs/Web/JavaScript/Reference/Global_Objects/Math/acosh +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/asin /es/docs/Web/JavaScript/Reference/Global_Objects/Math/asin +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/asinh /es/docs/Web/JavaScript/Reference/Global_Objects/Math/asinh +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/atan /es/docs/Web/JavaScript/Reference/Global_Objects/Math/atan +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/atan2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/atanh /es/docs/Web/JavaScript/Reference/Global_Objects/Math/atanh +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/cbrt /es/docs/Web/JavaScript/Reference/Global_Objects/Math/cbrt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/ceil /es/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/cos /es/docs/Web/JavaScript/Reference/Global_Objects/Math/cos +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/exp /es/docs/Web/JavaScript/Reference/Global_Objects/Math/exp +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/expm1 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/expm1 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Reference/Global_Objects/Math/floor +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/fround /es/docs/Web/JavaScript/Reference/Global_Objects/Math/fround +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/hypot /es/docs/Web/JavaScript/Reference/Global_Objects/Math/hypot +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/log /es/docs/Web/JavaScript/Reference/Global_Objects/Math/log +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/log10 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/log10 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/log2 /es/docs/Web/JavaScript/Reference/Global_Objects/Math/log2 +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/max /es/docs/Web/JavaScript/Reference/Global_Objects/Math/max +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/min /es/docs/Web/JavaScript/Reference/Global_Objects/Math/min +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/pow /es/docs/Web/JavaScript/Reference/Global_Objects/Math/pow +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/random /es/docs/Web/JavaScript/Reference/Global_Objects/Math/random +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/round /es/docs/Web/JavaScript/Reference/Global_Objects/Math/round +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/seno /es/docs/Web/JavaScript/Reference/Global_Objects/Math/sin +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/sign /es/docs/Web/JavaScript/Reference/Global_Objects/Math/sign +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/sqrt /es/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/tan /es/docs/Web/JavaScript/Reference/Global_Objects/Math/tan +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/tanh /es/docs/Web/JavaScript/Reference/Global_Objects/Math/tanh +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/trunc /es/docs/Web/JavaScript/Reference/Global_Objects/Math/trunc +/es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number /es/docs/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/MAX_SAFE_INTEGER /es/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/MAX_VALUE /es/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/MIN_VALUE /es/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/Number/NaN +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/Number/isFinite +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isInteger /es/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger /es/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat /es/docs/Web/JavaScript/Reference/Global_Objects/Number/parseFloat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/Number/parseInt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toFixed /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toPrecision +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Number/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/Number/valueOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat /es/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat/format /es/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object /es/docs/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/__defineGetter__ /es/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/__lookupGetter__ /es/docs/Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/assign /es/docs/Web/JavaScript/Reference/Global_Objects/Object/assign +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create /es/docs/Web/JavaScript/Reference/Global_Objects/Object/create +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty /es/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/entries /es/docs/Web/JavaScript/Reference/Global_Objects/Object/entries +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/freeze /es/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/fromEntries /es/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptor /es/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptors /es/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames /es/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertySymbols /es/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/getPrototypeOf /es/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/is /es/docs/Web/JavaScript/Reference/Global_Objects/Object/is +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/isExtensible /es/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/isFrozen /es/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/isPrototypeOf /es/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/isSealed /es/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys /es/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions /es/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable /es/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/proto /es/docs/Web/JavaScript/Reference/Global_Objects/Object/proto +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/seal /es/docs/Web/JavaScript/Reference/Global_Objects/Object/seal +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf /es/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Reference/Global_Objects/Object/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/values /es/docs/Web/JavaScript/Reference/Global_Objects/Object/values +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa /es/docs/Web/JavaScript/Reference/Global_Objects/Promise +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/all /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/all +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/race /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/race +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise /es/docs/Web/JavaScript/Reference/Global_Objects/Promise +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/all +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/catch /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/finally /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/race /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/race +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/reject /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/resolve /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/then /es/docs/Web/JavaScript/Reference/Global_Objects/Promise/then +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Proxy /es/docs/Web/JavaScript/Reference/Global_Objects/Proxy +/es/docs/Web/JavaScript/Referencia/Objetos_globales/ReferenceError /es/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/RegExp /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/compile /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/compile +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/exec /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/ignoreCase /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/rightContext /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/rightContext +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/test /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test +/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp/toString /es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set /es/docs/Web/JavaScript/Reference/Global_Objects/Set +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/@@iterator /es/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/add /es/docs/Web/JavaScript/Reference/Global_Objects/Set/add +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/clear /es/docs/Web/JavaScript/Reference/Global_Objects/Set/clear +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/delete /es/docs/Web/JavaScript/Reference/Global_Objects/Set/delete +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/entries /es/docs/Web/JavaScript/Reference/Global_Objects/Set/entries +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/has /es/docs/Web/JavaScript/Reference/Global_Objects/Set/has +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/size /es/docs/Web/JavaScript/Reference/Global_Objects/Set/size +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Set/values /es/docs/Web/JavaScript/Reference/Global_Objects/Set/values +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/Trim /es/docs/Web/JavaScript/Reference/Global_Objects/String/Trim +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Reference/Global_Objects/String/anchor +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big /es/docs/Web/JavaScript/Reference/Global_Objects/String/big +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink /es/docs/Web/JavaScript/Reference/Global_Objects/String/blink +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold /es/docs/Web/JavaScript/Reference/Global_Objects/String/bold +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charAt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/codePointAt /es/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat /es/docs/Web/JavaScript/Reference/Global_Objects/String/concat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/endsWith /es/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Reference/Global_Objects/String/fixed +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fontcolor /es/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fontsize /es/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCodePoint /es/docs/Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/includes /es/docs/Web/JavaScript/Reference/Global_Objects/String/includes +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics /es/docs/Web/JavaScript/Reference/Global_Objects/String/italics +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length /es/docs/Web/JavaScript/Reference/Global_Objects/String/length +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link /es/docs/Web/JavaScript/Reference/Global_Objects/String/link +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/localeCompare /es/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match /es/docs/Web/JavaScript/Reference/Global_Objects/String/match +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/matchAll /es/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/normalize /es/docs/Web/JavaScript/Reference/Global_Objects/String/normalize +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/padStart /es/docs/Web/JavaScript/Reference/Global_Objects/String/padStart +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/raw /es/docs/Web/JavaScript/Reference/Global_Objects/String/raw +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/repeat /es/docs/Web/JavaScript/Reference/Global_Objects/String/repeat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace /es/docs/Web/JavaScript/Reference/Global_Objects/String/replace +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search /es/docs/Web/JavaScript/Reference/Global_Objects/String/search +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice /es/docs/Web/JavaScript/Reference/Global_Objects/String/slice +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small /es/docs/Web/JavaScript/Reference/Global_Objects/String/small +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split /es/docs/Web/JavaScript/Reference/Global_Objects/String/split +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/startsWith /es/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike /es/docs/Web/JavaScript/Reference/Global_Objects/String/strike +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub /es/docs/Web/JavaScript/Reference/Global_Objects/String/sub +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr /es/docs/Web/JavaScript/Reference/Global_Objects/String/substr +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring /es/docs/Web/JavaScript/Reference/Global_Objects/String/substring +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup /es/docs/Web/JavaScript/Reference/Global_Objects/String/sup +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLocaleLowerCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLocaleUpperCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toSource /es/docs/Web/JavaScript/Reference/Global_Objects/String/toSource +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString /es/docs/Web/JavaScript/Reference/Global_Objects/String/toString +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/trimEnd /es/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol /es/docs/Web/JavaScript/Reference/Global_Objects/Symbol +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol/for /es/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance /es/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator /es/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator +/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError /es/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray /es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray +/es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer /es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer +/es/docs/Web/JavaScript/Referencia/Objetos_globales/URIError /es/docs/Web/JavaScript/Reference/Global_Objects/URIError +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Uint8Array /es/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/clear /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/clear +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/delete +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/get /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/get +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/has /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/has +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype /es/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakMap/set /es/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/set +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WeakSet /es/docs/Web/JavaScript/Reference/Global_Objects/WeakSet +/es/docs/Web/JavaScript/Referencia/Objetos_globales/WebAssembly /es/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly +/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeUR /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI +/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI +/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent +/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI +/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent +/es/docs/Web/JavaScript/Referencia/Objetos_globales/escape /es/docs/Web/JavaScript/Reference/Global_Objects/escape +/es/docs/Web/JavaScript/Referencia/Objetos_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval +/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite +/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite_ /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite +/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN +/es/docs/Web/JavaScript/Referencia/Objetos_globales/null /es/docs/Web/JavaScript/Reference/Global_Objects/null +/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat /es/docs/Web/JavaScript/Reference/Global_Objects/parseFloat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/parseInt +/es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined /es/docs/Web/JavaScript/Reference/Global_Objects/undefined +/es/docs/Web/JavaScript/Referencia/Objetos_globales/unescape /es/docs/Web/JavaScript/Reference/Global_Objects/unescape +/es/docs/Web/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Web/JavaScript/Referencia/Operadores /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Web/JavaScript/Referencia/Operadores/Adición /es/docs/Web/JavaScript/Reference/Operators/Addition +/es/docs/Web/JavaScript/Referencia/Operadores/Aritméticos /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/Web/JavaScript/Referencia/Operadores/Asignacion /es/docs/Web/JavaScript/Reference/Operators/Assignment +/es/docs/Web/JavaScript/Referencia/Operadores/Assignment_Operators /es/docs/conflicting/Web/JavaScript/Reference/Operators_d3958587a3d3dd644852ad397eb5951b +/es/docs/Web/JavaScript/Referencia/Operadores/Bitwise_Operators /es/docs/conflicting/Web/JavaScript/Reference/Operators_5c44e7d07c463ff1a5a63654f4bda87b +/es/docs/Web/JavaScript/Referencia/Operadores/Comparacion /es/docs/Web/JavaScript/Reference/Operators/Equality +/es/docs/Web/JavaScript/Referencia/Operadores/Comparison_Operators /es/docs/conflicting/Web/JavaScript/Reference/Operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8 +/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator /es/docs/Web/JavaScript/Reference/Operators/Conditional_Operator +/es/docs/Web/JavaScript/Referencia/Operadores/Decremento /es/docs/Web/JavaScript/Reference/Operators/Decrement +/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment /es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment +/es/docs/Web/JavaScript/Referencia/Operadores/Division /es/docs/Web/JavaScript/Reference/Operators/Division +/es/docs/Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional /es/docs/Web/JavaScript/Reference/Operators/Optional_chaining +/es/docs/Web/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Web/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/Web/JavaScript/Referencia/Operadores/Grouping /es/docs/Web/JavaScript/Reference/Operators/Grouping +/es/docs/Web/JavaScript/Referencia/Operadores/Miembros /es/docs/Web/JavaScript/Reference/Operators/Property_Accessors +/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Reference/Operators +/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_lógicos /es/docs/conflicting/Web/JavaScript/Reference/Operators_e72d8790e25513408a18a5826660f704 +/es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence +/es/docs/Web/JavaScript/Referencia/Operadores/Pipeline_operator /es/docs/Web/JavaScript/Reference/Operators/Pipeline_operator +/es/docs/Web/JavaScript/Referencia/Operadores/Resto /es/docs/Web/JavaScript/Reference/Operators/Remainder +/es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread /es/docs/Web/JavaScript/Reference/Operators/Spread_syntax +/es/docs/Web/JavaScript/Referencia/Operadores/Spread_operator /es/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax +/es/docs/Web/JavaScript/Referencia/Operadores/Strict_equality /es/docs/Web/JavaScript/Reference/Operators/Strict_equality +/es/docs/Web/JavaScript/Referencia/Operadores/String /es/docs/conflicting/Web/JavaScript/Reference/Operators +/es/docs/Web/JavaScript/Referencia/Operadores/Sustracción /es/docs/Web/JavaScript/Reference/Operators/Subtraction +/es/docs/Web/JavaScript/Referencia/Operadores/async_function /es/docs/Web/JavaScript/Reference/Operators/async_function +/es/docs/Web/JavaScript/Referencia/Operadores/await /es/docs/Web/JavaScript/Reference/Operators/await +/es/docs/Web/JavaScript/Referencia/Operadores/class /es/docs/Web/JavaScript/Reference/Operators/class +/es/docs/Web/JavaScript/Referencia/Operadores/delete /es/docs/Web/JavaScript/Reference/Operators/delete +/es/docs/Web/JavaScript/Referencia/Operadores/function /es/docs/Web/JavaScript/Reference/Operators/function +/es/docs/Web/JavaScript/Referencia/Operadores/function* /es/docs/Web/JavaScript/Reference/Operators/function* +/es/docs/Web/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Reference/Functions/get +/es/docs/Web/JavaScript/Referencia/Operadores/in /es/docs/Web/JavaScript/Reference/Operators/in +/es/docs/Web/JavaScript/Referencia/Operadores/instanceof /es/docs/Web/JavaScript/Reference/Operators/instanceof +/es/docs/Web/JavaScript/Referencia/Operadores/new /es/docs/Web/JavaScript/Reference/Operators/new +/es/docs/Web/JavaScript/Referencia/Operadores/new.target /es/docs/Web/JavaScript/Reference/Operators/new.target +/es/docs/Web/JavaScript/Referencia/Operadores/operador_coma /es/docs/Web/JavaScript/Reference/Operators/Comma_Operator +/es/docs/Web/JavaScript/Referencia/Operadores/super /es/docs/Web/JavaScript/Reference/Operators/super +/es/docs/Web/JavaScript/Referencia/Operadores/this /es/docs/Web/JavaScript/Reference/Operators/this +/es/docs/Web/JavaScript/Referencia/Operadores/typeof /es/docs/Web/JavaScript/Reference/Operators/typeof +/es/docs/Web/JavaScript/Referencia/Operadores/void /es/docs/Web/JavaScript/Reference/Operators/void +/es/docs/Web/JavaScript/Referencia/Operadores/yield /es/docs/Web/JavaScript/Reference/Operators/yield +/es/docs/Web/JavaScript/Referencia/Operadores/yield* /es/docs/Web/JavaScript/Reference/Operators/yield* +/es/docs/Web/JavaScript/Referencia/Palabras_Reservadas /es/docs/conflicting/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Web/JavaScript/Referencia/Properties_Index /es/docs/Web/JavaScript/Reference +/es/docs/Web/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Reference/Global_Objects +/es/docs/Web/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Reference/Global_Objects/Infinity +/es/docs/Web/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Reference/Global_Objects/NaN +/es/docs/Web/JavaScript/Referencia/Propiedades_globales/undefined /es/docs/Web/JavaScript/Reference/Global_Objects/undefined +/es/docs/Web/JavaScript/Referencia/Sentencias /es/docs/Web/JavaScript/Reference/Statements +/es/docs/Web/JavaScript/Referencia/Sentencias/Empty /es/docs/Web/JavaScript/Reference/Statements/Empty +/es/docs/Web/JavaScript/Referencia/Sentencias/block /es/docs/Web/JavaScript/Reference/Statements/block +/es/docs/Web/JavaScript/Referencia/Sentencias/break /es/docs/Web/JavaScript/Reference/Statements/break +/es/docs/Web/JavaScript/Referencia/Sentencias/class /es/docs/Web/JavaScript/Reference/Statements/class +/es/docs/Web/JavaScript/Referencia/Sentencias/const /es/docs/Web/JavaScript/Reference/Statements/const +/es/docs/Web/JavaScript/Referencia/Sentencias/continue /es/docs/Web/JavaScript/Reference/Statements/continue +/es/docs/Web/JavaScript/Referencia/Sentencias/debugger /es/docs/Web/JavaScript/Reference/Statements/debugger +/es/docs/Web/JavaScript/Referencia/Sentencias/default /es/docs/conflicting/Web/JavaScript/Reference/Statements/switch +/es/docs/Web/JavaScript/Referencia/Sentencias/do...while /es/docs/Web/JavaScript/Reference/Statements/do...while +/es/docs/Web/JavaScript/Referencia/Sentencias/export /es/docs/Web/JavaScript/Reference/Statements/export +/es/docs/Web/JavaScript/Referencia/Sentencias/for /es/docs/Web/JavaScript/Reference/Statements/for +/es/docs/Web/JavaScript/Referencia/Sentencias/for-await...of /es/docs/Web/JavaScript/Reference/Statements/for-await...of +/es/docs/Web/JavaScript/Referencia/Sentencias/for...in /es/docs/Web/JavaScript/Reference/Statements/for...in +/es/docs/Web/JavaScript/Referencia/Sentencias/for...of /es/docs/Web/JavaScript/Reference/Statements/for...of +/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona /es/docs/Web/JavaScript/Reference/Statements/async_function +/es/docs/Web/JavaScript/Referencia/Sentencias/function /es/docs/Web/JavaScript/Reference/Statements/function +/es/docs/Web/JavaScript/Referencia/Sentencias/function* /es/docs/Web/JavaScript/Reference/Statements/function* +/es/docs/Web/JavaScript/Referencia/Sentencias/if...else /es/docs/Web/JavaScript/Reference/Statements/if...else +/es/docs/Web/JavaScript/Referencia/Sentencias/import /es/docs/Web/JavaScript/Reference/Statements/import +/es/docs/Web/JavaScript/Referencia/Sentencias/import.meta /es/docs/Web/JavaScript/Reference/Statements/import.meta +/es/docs/Web/JavaScript/Referencia/Sentencias/label /es/docs/Web/JavaScript/Reference/Statements/label +/es/docs/Web/JavaScript/Referencia/Sentencias/let /es/docs/Web/JavaScript/Reference/Statements/let +/es/docs/Web/JavaScript/Referencia/Sentencias/return /es/docs/Web/JavaScript/Reference/Statements/return +/es/docs/Web/JavaScript/Referencia/Sentencias/switch /es/docs/Web/JavaScript/Reference/Statements/switch +/es/docs/Web/JavaScript/Referencia/Sentencias/throw /es/docs/Web/JavaScript/Reference/Statements/throw +/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch /es/docs/Web/JavaScript/Reference/Statements/try...catch +/es/docs/Web/JavaScript/Referencia/Sentencias/var /es/docs/Web/JavaScript/Reference/Statements/var +/es/docs/Web/JavaScript/Referencia/Sentencias/while /es/docs/Web/JavaScript/Reference/Statements/while +/es/docs/Web/JavaScript/Referencia/Sentencias/with /es/docs/Web/JavaScript/Reference/Statements/with +/es/docs/Web/JavaScript/Referencia/template_strings /es/docs/Web/JavaScript/Reference/Template_literals +/es/docs/Web/JavaScript/Una_nueva_introducción_a_JavaScript /es/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/es/docs/Web/JavaScript/Una_re-introducción_a_JavaScript /es/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/es/docs/Web/JavaScript/Vectores_tipados /es/docs/Web/JavaScript/Typed_arrays +/es/docs/Web/JavaScript/enumeracion_y_propietario_de_propiedades /es/docs/Web/JavaScript/Enumerability_and_ownership_of_properties +/es/docs/Web/MathML/Elemento /es/docs/Web/MathML/Element +/es/docs/Web/MathML/Elemento/math /es/docs/Web/MathML/Element/math +/es/docs/Web/Performance/mejorando_rendimienot_inicial /es/docs/Web/Performance/Optimizing_startup_performance +/es/docs/Web/Progressive_web_apps/Developer_guide/Instalar /es/docs/Web/Progressive_web_apps/Developer_guide/Installing +/es/docs/Web/Progressive_web_apps/Ventajas /es/docs/conflicting/Web/Progressive_web_apps/Introduction /es/docs/Web/Reference/Events /es/docs/Web/Events -/es/docs/Web/Reference/Events/DOMContentLoaded /es/docs/Web/Events/DOMContentLoaded +/es/docs/Web/Reference/Events/DOMContentLoaded /es/docs/Web/API/Window/DOMContentLoaded_event /es/docs/Web/Reference/Events/DOMSubtreeModified /es/docs/Web/Events/DOMSubtreeModified -/es/docs/Web/Reference/Events/abort /es/docs/Web/Events/abort -/es/docs/Web/Reference/Events/animationend /es/docs/Web/Events/animationend -/es/docs/Web/Reference/Events/beforeunload /es/docs/Web/Events/beforeunload -/es/docs/Web/Reference/Events/blur /es/docs/Web/Events/blur +/es/docs/Web/Reference/Events/abort /es/docs/Web/API/HTMLMediaElement/abort_event +/es/docs/Web/Reference/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event +/es/docs/Web/Reference/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event +/es/docs/Web/Reference/Events/blur /es/docs/Web/API/Element/blur_event /es/docs/Web/Reference/Events/canplay /es/docs/Web/API/HTMLMediaElement/canplay_event /es/docs/Web/Reference/Events/click /es/docs/Web/API/Element/click_event /es/docs/Web/Reference/Events/close_websocket /es/docs/Web/API/WebSocket/close_event /es/docs/Web/Reference/Events/dragover /es/docs/Web/API/Document/dragover_event /es/docs/Web/Reference/Events/hashchange /es/docs/Web/API/Window/hashchange_event /es/docs/Web/Reference/Events/keydown /es/docs/Web/API/Document/keydown_event -/es/docs/Web/Reference/Events/load /es/docs/Web/Events/load -/es/docs/Web/Reference/Events/loadend /es/docs/Web/Events/loadend +/es/docs/Web/Reference/Events/load /es/docs/Web/API/Window/load_event +/es/docs/Web/Reference/Events/loadend /es/docs/Web/API/XMLHttpRequest/loadend_event /es/docs/Web/Reference/Events/mousedown /es/docs/Web/API/Element/mousedown_event -/es/docs/Web/Reference/Events/pointerlockchange /es/docs/Web/Events/pointerlockchange +/es/docs/Web/Reference/Events/pointerlockchange /es/docs/Web/API/Document/pointerlockchange_event /es/docs/Web/Reference/Events/scroll /es/docs/Web/API/Document/scroll_event /es/docs/Web/Reference/Events/tecla /es/docs/Web/API/Document/keyup_event /es/docs/Web/Reference/Events/timeupdate /es/docs/Web/API/HTMLMediaElement/timeupdate_event -/es/docs/Web/Reference/Events/transitioncancel /es/docs/Web/Events/transitioncancel -/es/docs/Web/Reference/Events/transitionend /es/docs/Web/Events/transitionend +/es/docs/Web/Reference/Events/transitioncancel /es/docs/Web/API/HTMLElement/transitioncancel_event +/es/docs/Web/Reference/Events/transitionend /es/docs/Web/API/HTMLElement/transitionend_event /es/docs/Web/Reference/Events/wheel /es/docs/Web/API/Element/wheel_event +/es/docs/Web/SVG/Element/glifo /es/docs/Web/SVG/Element/glyph +/es/docs/Web/SVG/SVG_en_Firefox_1.5 /es/docs/orphaned/Web/SVG/SVG_en_Firefox_1.5 +/es/docs/Web/SVG/Tutorial/Introducción /es/docs/Web/SVG/Tutorial/Introduction +/es/docs/Web/Security/CSP /es/docs/conflicting/Web/HTTP/CSP +/es/docs/Web/Security/CSP/CSP_policy_directives /es/docs/conflicting/Web/HTTP/Headers/Content-Security-Policy +/es/docs/Web/Security/CSP/Introducing_Content_Security_Policy /es/docs/conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 +/es/docs/Web/Security/Same-origin_politica /es/docs/Web/Security/Same-origin_policy +/es/docs/Web/Security/Securing_your_site/desactivar_autocompletado_formulario /es/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion +/es/docs/Web/Tutoriales /es/docs/Web/Tutorials /es/docs/Web/WebGL /es/docs/Web/API/WebGL_API /es/docs/Web/WebGL/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL /es/docs/Web/WebGL/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/es/docs/Web/Web_Components/Custom_Elements /es/docs/conflicting/Web/Web_Components/Using_custom_elements +/es/docs/Web/XML/Introducción_a_XML /es/docs/Web/XML/XML_introduction +/es/docs/Web/XPath/Ejes /es/docs/Web/XPath/Axes +/es/docs/Web/XPath/Ejes/ancestor /es/docs/Web/XPath/Axes/ancestor +/es/docs/Web/XPath/Ejes/ancestor-or-self /es/docs/Web/XPath/Axes/ancestor-or-self +/es/docs/Web/XPath/Ejes/attribute /es/docs/Web/XPath/Axes/attribute +/es/docs/Web/XPath/Ejes/child /es/docs/Web/XPath/Axes/child +/es/docs/Web/XPath/Ejes/descendant /es/docs/Web/XPath/Axes/descendant +/es/docs/Web/XPath/Ejes/descendant-or-self /es/docs/Web/XPath/Axes/descendant-or-self +/es/docs/Web/XPath/Ejes/following /es/docs/Web/XPath/Axes/following +/es/docs/Web/XPath/Ejes/following-sibling /es/docs/Web/XPath/Axes/following-sibling +/es/docs/Web/XPath/Ejes/namespace /es/docs/Web/XPath/Axes/namespace +/es/docs/Web/XPath/Ejes/parent /es/docs/Web/XPath/Axes/parent +/es/docs/Web/XPath/Ejes/preceding /es/docs/Web/XPath/Axes/preceding +/es/docs/Web/XPath/Ejes/preceding-sibling /es/docs/Web/XPath/Axes/preceding-sibling +/es/docs/Web/XPath/Funciones /es/docs/Web/XPath/Functions +/es/docs/Web/XPath/Funciones/contains /es/docs/Web/XPath/Functions/contains +/es/docs/Web/XPath/Funciones/substring /es/docs/Web/XPath/Functions/substring +/es/docs/Web/XPath/Funciones/true /es/docs/Web/XPath/Functions/true /es/docs/Web/XSLT/Elementos /es/docs/Web/XSLT/Element /es/docs/Web/XSLT/Elementos/element /es/docs/Web/XSLT/Element/element +/es/docs/Web/XSLT/Transformando_XML_con_XSLT /es/docs/Web/XSLT/Transforming_XML_with_XSLT +/es/docs/Web/XSLT/apply-imports /es/docs/Web/XSLT/Element/apply-imports +/es/docs/Web/XSLT/apply-templates /es/docs/Web/XSLT/Element/apply-templates +/es/docs/Web/XSLT/attribute /es/docs/Web/XSLT/Element/attribute +/es/docs/Web/XSLT/attribute-set /es/docs/Web/XSLT/Element/attribute-set +/es/docs/Web/XSLT/call-template /es/docs/Web/XSLT/Element/call-template +/es/docs/Web/XSLT/choose /es/docs/Web/XSLT/Element/choose +/es/docs/Web/XSLT/comment /es/docs/Web/XSLT/Element/comment +/es/docs/Web/XSLT/copy /es/docs/Web/XSLT/Element/copy +/es/docs/Web/XSLT/copy-of /es/docs/Web/XSLT/Element/copy-of +/es/docs/Web/XSLT/decimal-format /es/docs/Web/XSLT/Element/decimal-format +/es/docs/Web/XSLT/fallback /es/docs/Web/XSLT/Element/fallback +/es/docs/Web/XSLT/for-each /es/docs/Web/XSLT/Element/for-each +/es/docs/Web/XSLT/if /es/docs/Web/XSLT/Element/if +/es/docs/Web/XSLT/import /es/docs/Web/XSLT/Element/import +/es/docs/Web/XSLT/include /es/docs/Web/XSLT/Element/include +/es/docs/Web/XSLT/key /es/docs/Web/XSLT/Element/key +/es/docs/Web/XSLT/message /es/docs/Web/XSLT/Element/message +/es/docs/Web/XSLT/namespace-alias /es/docs/Web/XSLT/Element/namespace-alias +/es/docs/Web/XSLT/number /es/docs/Web/XSLT/Element/number +/es/docs/Web/XSLT/otherwise /es/docs/Web/XSLT/Element/otherwise +/es/docs/Web/XSLT/when /es/docs/Web/XSLT/Element/when +/es/docs/Web/XSLT/with-param /es/docs/Web/XSLT/Element/with-param +/es/docs/WebAPI /es/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 +/es/docs/WebAPI/Estado_de_Bateria /es/docs/Web/API/Battery_Status_API +/es/docs/WebAPI/Pointer_Lock /es/docs/Web/API/Pointer_Lock_API +/es/docs/WebAPI/Using_geolocation /es/docs/Web/API/Geolocation_API /es/docs/WebGL /es/docs/Web/API/WebGL_API /es/docs/WebGL/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/es/docs/WebRTC /es/docs/conflicting/Web/API/WebRTC_API +/es/docs/WebRTC/Introduction /es/docs/Web/API/WebRTC_API/Session_lifetime +/es/docs/WebRTC/MediaStream_API /es/docs/Web/API/Media_Streams_API +/es/docs/WebRTC/Peer-to-peer_communications_with_WebRTC /es/docs/Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC +/es/docs/WebRTC/Taking_webcam_photos /es/docs/Web/API/WebRTC_API/Taking_still_photos +/es/docs/WebSockets /es/docs/conflicting/Web/API/WebSockets_API /es/docs/WebSockets-840092-dup /es/docs/Web/API/WebSockets_API -/es/docs/WebSockets-840092-dup/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket -/es/docs/WebSockets-840092-dup/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket +/es/docs/WebSockets-840092-dup/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_server +/es/docs/WebSockets-840092-dup/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers /es/docs/WebSockets-840092-dup/Writing_WebSocket_client_applications /es/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications +/es/docs/Web_Audio_API /es/docs/Web/API/Web_Audio_API +/es/docs/Web_Development/Mobile /es/docs/conflicting/Web/Guide/Mobile +/es/docs/Web_Development/Mobile/Diseño_responsivo /es/docs/conflicting/Web/Progressive_web_apps /es/docs/XForms:Soporte_en_Mozilla /es/docs/XForms/Soporte_en_Mozilla +/es/docs/XHTML /es/docs/Glossary/XHTML /es/docs/XMLHttpRequest /es/docs/Web/API/XMLHttpRequest -/es/docs/XMLHttpRequest/FormData /es/docs/Web/API/XMLHttpRequest/FormData +/es/docs/XMLHttpRequest/FormData /es/docs/Web/API/FormData /es/docs/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /es/docs/XMLHttpRequest/abort /es/docs/Web/API/XMLHttpRequest/abort /es/docs/XMLHttpRequest/onreadystatechange /es/docs/Web/API/XMLHttpRequest/onreadystatechange +/es/docs/XPInstall_API_Reference /es/docs/orphaned/XPInstall_API_Reference /es/docs/XPath /es/docs/Web/XPath -/es/docs/XPath/Ejes /es/docs/Web/XPath/Ejes -/es/docs/XPath/Ejes/ancestor /es/docs/Web/XPath/Ejes/ancestor -/es/docs/XPath/Ejes/ancestor-or-self /es/docs/Web/XPath/Ejes/ancestor-or-self -/es/docs/XPath/Ejes/attribute /es/docs/Web/XPath/Ejes/attribute -/es/docs/XPath/Ejes/child /es/docs/Web/XPath/Ejes/child -/es/docs/XPath/Ejes/descendant /es/docs/Web/XPath/Ejes/descendant -/es/docs/XPath/Ejes/descendant-or-self /es/docs/Web/XPath/Ejes/descendant-or-self -/es/docs/XPath/Ejes/following /es/docs/Web/XPath/Ejes/following -/es/docs/XPath/Ejes/following-sibling /es/docs/Web/XPath/Ejes/following-sibling -/es/docs/XPath/Ejes/namespace /es/docs/Web/XPath/Ejes/namespace -/es/docs/XPath/Ejes/parent /es/docs/Web/XPath/Ejes/parent -/es/docs/XPath/Ejes/preceding /es/docs/Web/XPath/Ejes/preceding -/es/docs/XPath/Ejes/preceding-sibling /es/docs/Web/XPath/Ejes/preceding-sibling -/es/docs/XPath/Funciones /es/docs/Web/XPath/Funciones -/es/docs/XPath/Funciones-XPath/true /es/docs/Web/XPath/Funciones/true -/es/docs/XPath/Funciones/contains /es/docs/Web/XPath/Funciones/contains -/es/docs/XPath/Funciones/substring /es/docs/Web/XPath/Funciones/substring -/es/docs/XPath/Funciones/true /es/docs/Web/XPath/Funciones/true -/es/docs/XPath/funciones-xpath /es/docs/Web/XPath/Funciones -/es/docs/XPath/funciones-xpath/contains /es/docs/Web/XPath/Funciones/contains -/es/docs/XPath/funciones-xpath/substring /es/docs/Web/XPath/Funciones/substring -/es/docs/XPath:Ejes /es/docs/Web/XPath/Ejes -/es/docs/XPath:Ejes:ancestor /es/docs/Web/XPath/Ejes/ancestor -/es/docs/XPath:Ejes:ancestor-or-self /es/docs/Web/XPath/Ejes/ancestor-or-self -/es/docs/XPath:Ejes:attribute /es/docs/Web/XPath/Ejes/attribute -/es/docs/XPath:Ejes:child /es/docs/Web/XPath/Ejes/child -/es/docs/XPath:Ejes:descendant /es/docs/Web/XPath/Ejes/descendant -/es/docs/XPath:Ejes:descendant-or-self /es/docs/Web/XPath/Ejes/descendant-or-self -/es/docs/XPath:Ejes:following /es/docs/Web/XPath/Ejes/following -/es/docs/XPath:Ejes:following-sibling /es/docs/Web/XPath/Ejes/following-sibling -/es/docs/XPath:Ejes:namespace /es/docs/Web/XPath/Ejes/namespace -/es/docs/XPath:Ejes:parent /es/docs/Web/XPath/Ejes/parent -/es/docs/XPath:Ejes:preceding /es/docs/Web/XPath/Ejes/preceding -/es/docs/XPath:Ejes:preceding-sibling /es/docs/Web/XPath/Ejes/preceding-sibling -/es/docs/XPath:Funciones:contains /es/docs/Web/XPath/Funciones/contains -/es/docs/XPath:Funciones:substring /es/docs/Web/XPath/Funciones/substring -/es/docs/XPath:Funciones:true /es/docs/Web/XPath/Funciones/true +/es/docs/XPath/Ejes /es/docs/Web/XPath/Axes +/es/docs/XPath/Ejes/ancestor /es/docs/Web/XPath/Axes/ancestor +/es/docs/XPath/Ejes/ancestor-or-self /es/docs/Web/XPath/Axes/ancestor-or-self +/es/docs/XPath/Ejes/attribute /es/docs/Web/XPath/Axes/attribute +/es/docs/XPath/Ejes/child /es/docs/Web/XPath/Axes/child +/es/docs/XPath/Ejes/descendant /es/docs/Web/XPath/Axes/descendant +/es/docs/XPath/Ejes/descendant-or-self /es/docs/Web/XPath/Axes/descendant-or-self +/es/docs/XPath/Ejes/following /es/docs/Web/XPath/Axes/following +/es/docs/XPath/Ejes/following-sibling /es/docs/Web/XPath/Axes/following-sibling +/es/docs/XPath/Ejes/namespace /es/docs/Web/XPath/Axes/namespace +/es/docs/XPath/Ejes/parent /es/docs/Web/XPath/Axes/parent +/es/docs/XPath/Ejes/preceding /es/docs/Web/XPath/Axes/preceding +/es/docs/XPath/Ejes/preceding-sibling /es/docs/Web/XPath/Axes/preceding-sibling +/es/docs/XPath/Funciones /es/docs/Web/XPath/Functions +/es/docs/XPath/Funciones-XPath/true /es/docs/Web/XPath/Functions/true +/es/docs/XPath/Funciones/contains /es/docs/Web/XPath/Functions/contains +/es/docs/XPath/Funciones/substring /es/docs/Web/XPath/Functions/substring +/es/docs/XPath/Funciones/true /es/docs/Web/XPath/Functions/true +/es/docs/XPath/funciones-xpath /es/docs/Web/XPath/Functions +/es/docs/XPath/funciones-xpath/contains /es/docs/Web/XPath/Functions/contains +/es/docs/XPath/funciones-xpath/substring /es/docs/Web/XPath/Functions/substring +/es/docs/XPath:Ejes /es/docs/Web/XPath/Axes +/es/docs/XPath:Ejes:ancestor /es/docs/Web/XPath/Axes/ancestor +/es/docs/XPath:Ejes:ancestor-or-self /es/docs/Web/XPath/Axes/ancestor-or-self +/es/docs/XPath:Ejes:attribute /es/docs/Web/XPath/Axes/attribute +/es/docs/XPath:Ejes:child /es/docs/Web/XPath/Axes/child +/es/docs/XPath:Ejes:descendant /es/docs/Web/XPath/Axes/descendant +/es/docs/XPath:Ejes:descendant-or-self /es/docs/Web/XPath/Axes/descendant-or-self +/es/docs/XPath:Ejes:following /es/docs/Web/XPath/Axes/following +/es/docs/XPath:Ejes:following-sibling /es/docs/Web/XPath/Axes/following-sibling +/es/docs/XPath:Ejes:namespace /es/docs/Web/XPath/Axes/namespace +/es/docs/XPath:Ejes:parent /es/docs/Web/XPath/Axes/parent +/es/docs/XPath:Ejes:preceding /es/docs/Web/XPath/Axes/preceding +/es/docs/XPath:Ejes:preceding-sibling /es/docs/Web/XPath/Axes/preceding-sibling +/es/docs/XPath:Funciones:contains /es/docs/Web/XPath/Functions/contains +/es/docs/XPath:Funciones:substring /es/docs/Web/XPath/Functions/substring +/es/docs/XPath:Funciones:true /es/docs/Web/XPath/Functions/true /es/docs/XSLT /es/docs/Web/XSLT /es/docs/XSLT/Elementos /es/docs/Web/XSLT/Element -/es/docs/XSLT/apply-imports /es/docs/Web/XSLT/apply-imports -/es/docs/XSLT/apply-templates /es/docs/Web/XSLT/apply-templates -/es/docs/XSLT/attribute /es/docs/Web/XSLT/attribute -/es/docs/XSLT/attribute-set /es/docs/Web/XSLT/attribute-set -/es/docs/XSLT/call-template /es/docs/Web/XSLT/call-template -/es/docs/XSLT/choose /es/docs/Web/XSLT/choose -/es/docs/XSLT/comment /es/docs/Web/XSLT/comment -/es/docs/XSLT/copy /es/docs/Web/XSLT/copy -/es/docs/XSLT/copy-of /es/docs/Web/XSLT/copy-of -/es/docs/XSLT/decimal-format /es/docs/Web/XSLT/decimal-format +/es/docs/XSLT/apply-imports /es/docs/Web/XSLT/Element/apply-imports +/es/docs/XSLT/apply-templates /es/docs/Web/XSLT/Element/apply-templates +/es/docs/XSLT/attribute /es/docs/Web/XSLT/Element/attribute +/es/docs/XSLT/attribute-set /es/docs/Web/XSLT/Element/attribute-set +/es/docs/XSLT/call-template /es/docs/Web/XSLT/Element/call-template +/es/docs/XSLT/choose /es/docs/Web/XSLT/Element/choose +/es/docs/XSLT/comment /es/docs/Web/XSLT/Element/comment +/es/docs/XSLT/copy /es/docs/Web/XSLT/Element/copy +/es/docs/XSLT/copy-of /es/docs/Web/XSLT/Element/copy-of +/es/docs/XSLT/decimal-format /es/docs/Web/XSLT/Element/decimal-format /es/docs/XSLT/element /es/docs/Web/XSLT/Element/element -/es/docs/XSLT/fallback /es/docs/Web/XSLT/fallback -/es/docs/XSLT/for-each /es/docs/Web/XSLT/for-each -/es/docs/XSLT/if /es/docs/Web/XSLT/if -/es/docs/XSLT/import /es/docs/Web/XSLT/import -/es/docs/XSLT/include /es/docs/Web/XSLT/include -/es/docs/XSLT/key /es/docs/Web/XSLT/key -/es/docs/XSLT/message /es/docs/Web/XSLT/message -/es/docs/XSLT/namespace-alias /es/docs/Web/XSLT/namespace-alias -/es/docs/XSLT/number /es/docs/Web/XSLT/number -/es/docs/XSLT/otherwise /es/docs/Web/XSLT/otherwise -/es/docs/XSLT/when /es/docs/Web/XSLT/when -/es/docs/XSLT/with-param /es/docs/Web/XSLT/with-param +/es/docs/XSLT/fallback /es/docs/Web/XSLT/Element/fallback +/es/docs/XSLT/for-each /es/docs/Web/XSLT/Element/for-each +/es/docs/XSLT/if /es/docs/Web/XSLT/Element/if +/es/docs/XSLT/import /es/docs/Web/XSLT/Element/import +/es/docs/XSLT/include /es/docs/Web/XSLT/Element/include +/es/docs/XSLT/key /es/docs/Web/XSLT/Element/key +/es/docs/XSLT/message /es/docs/Web/XSLT/Element/message +/es/docs/XSLT/namespace-alias /es/docs/Web/XSLT/Element/namespace-alias +/es/docs/XSLT/number /es/docs/Web/XSLT/Element/number +/es/docs/XSLT/otherwise /es/docs/Web/XSLT/Element/otherwise +/es/docs/XSLT/when /es/docs/Web/XSLT/Element/when +/es/docs/XSLT/with-param /es/docs/Web/XSLT/Element/with-param /es/docs/XSLT:Elementos /es/docs/Web/XSLT/Element -/es/docs/XSLT:apply-imports /es/docs/Web/XSLT/apply-imports -/es/docs/XSLT:apply-templates /es/docs/Web/XSLT/apply-templates -/es/docs/XSLT:attribute /es/docs/Web/XSLT/attribute -/es/docs/XSLT:attribute-set /es/docs/Web/XSLT/attribute-set -/es/docs/XSLT:call-template /es/docs/Web/XSLT/call-template -/es/docs/XSLT:choose /es/docs/Web/XSLT/choose -/es/docs/XSLT:comment /es/docs/Web/XSLT/comment -/es/docs/XSLT:copy /es/docs/Web/XSLT/copy -/es/docs/XSLT:copy-of /es/docs/Web/XSLT/copy-of -/es/docs/XSLT:decimal-format /es/docs/Web/XSLT/decimal-format +/es/docs/XSLT:apply-imports /es/docs/Web/XSLT/Element/apply-imports +/es/docs/XSLT:apply-templates /es/docs/Web/XSLT/Element/apply-templates +/es/docs/XSLT:attribute /es/docs/Web/XSLT/Element/attribute +/es/docs/XSLT:attribute-set /es/docs/Web/XSLT/Element/attribute-set +/es/docs/XSLT:call-template /es/docs/Web/XSLT/Element/call-template +/es/docs/XSLT:choose /es/docs/Web/XSLT/Element/choose +/es/docs/XSLT:comment /es/docs/Web/XSLT/Element/comment +/es/docs/XSLT:copy /es/docs/Web/XSLT/Element/copy +/es/docs/XSLT:copy-of /es/docs/Web/XSLT/Element/copy-of +/es/docs/XSLT:decimal-format /es/docs/Web/XSLT/Element/decimal-format /es/docs/XSLT:element /es/docs/Web/XSLT/Element/element -/es/docs/XSLT:fallback /es/docs/Web/XSLT/fallback -/es/docs/XSLT:for-each /es/docs/Web/XSLT/for-each -/es/docs/XSLT:if /es/docs/Web/XSLT/if -/es/docs/XSLT:import /es/docs/Web/XSLT/import -/es/docs/XSLT:include /es/docs/Web/XSLT/include -/es/docs/XSLT:key /es/docs/Web/XSLT/key -/es/docs/XSLT:message /es/docs/Web/XSLT/message -/es/docs/XSLT:namespace-alias /es/docs/Web/XSLT/namespace-alias -/es/docs/XSLT:number /es/docs/Web/XSLT/number -/es/docs/XSLT:otherwise /es/docs/Web/XSLT/otherwise -/es/docs/XSLT:when /es/docs/Web/XSLT/when -/es/docs/XSLT:with-param /es/docs/Web/XSLT/with-param +/es/docs/XSLT:fallback /es/docs/Web/XSLT/Element/fallback +/es/docs/XSLT:for-each /es/docs/Web/XSLT/Element/for-each +/es/docs/XSLT:if /es/docs/Web/XSLT/Element/if +/es/docs/XSLT:import /es/docs/Web/XSLT/Element/import +/es/docs/XSLT:include /es/docs/Web/XSLT/Element/include +/es/docs/XSLT:key /es/docs/Web/XSLT/Element/key +/es/docs/XSLT:message /es/docs/Web/XSLT/Element/message +/es/docs/XSLT:namespace-alias /es/docs/Web/XSLT/Element/namespace-alias +/es/docs/XSLT:number /es/docs/Web/XSLT/Element/number +/es/docs/XSLT:otherwise /es/docs/Web/XSLT/Element/otherwise +/es/docs/XSLT:when /es/docs/Web/XSLT/Element/when +/es/docs/XSLT:with-param /es/docs/Web/XSLT/Element/with-param +/es/docs/Zoom_a_página_completa /es/docs/Mozilla/Firefox/Releases/3/Full_page_zoom /es/docs/controladores_protocolos_web /es/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /es/docs/en /en-US/ /es/docs/firefox_Web_Developer_(externo) https://addons.mozilla.org/firefox/60/ /es/docs/lugares /es/docs/Catálogo /es/docs/mozilla-central /es/docs/Mozilla/Developer_guide/mozilla-central +/es/docs/nsDirectoryService /es/docs/orphaned/nsDirectoryService /es/docs/nsISupports:AddRef /es/docs/nsISupports/AddRef /es/docs/nsISupports:QueryInterface /es/docs/nsISupports/QueryInterface /es/docs/nsISupports:Release /es/docs/nsISupports/Release -/es/docs/video /es/docs/Web/HTML/Elemento/video +/es/docs/video /es/docs/Web/HTML/Element/video diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index ed848eb960..c388d8a6cd 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -1,16691 +1,17020 @@ { - "Acerca_del_Modelo_de_Objetos_del_Documento": { - "modified": "2019-03-24T00:02:47.149Z", + "Games": { + "modified": "2019-09-09T15:31:15.455Z", "contributors": [ + "SphinxKnight", + "isocialweb", + "wbamberg", "fscholz", - "Mgjbot", - "Nathymig", - "Jorolo" + "ajspadial", + "Arudb79", + "atlas7jean", + "chrisdavidmills" ] }, - "Actualizar_aplicaciones_web_para_Firefox_3": { - "modified": "2019-03-23T23:58:06.668Z", + "Games/Anatomy": { + "modified": "2019-01-16T22:18:47.235Z", "contributors": [ "wbamberg", + "cnaucler" + ] + }, + "Games/Publishing_games": { + "modified": "2019-03-18T21:22:03.542Z", + "contributors": [ + "carlosgocereceda", + "mikelmg", "SphinxKnight", - "Sheppy", - "trada", - "manueljrs", - "flaviog", - "Rafavs", - "Marcomavil", - "Mgjbot" + "wbamberg" ] }, - "Actualizar_extensiones_para_Firefox_3": { - "modified": "2019-03-23T23:58:10.215Z", + "Games/Publishing_games/Game_distribution": { + "modified": "2020-08-09T16:02:37.394Z", + "contributors": [ + "katherincorredor", + "WilsonIsAliveClone", + "carlosgocereceda" + ] + }, + "Games/Techniques": { + "modified": "2019-01-17T02:01:32.309Z", "contributors": [ "wbamberg", - "SphinxKnight", - "Pgulijczuk", - "deimidis", - "flaviog", - "Nukeador", - "Giovanisf13", - "Firewordy", - "Dfier", - "Rumont", - "Wrongloop", - "Mgjbot" + "chrisdavidmills" ] }, - "Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3": { - "modified": "2019-12-13T20:34:57.052Z", + "Games/Techniques/2D_collision_detection": { + "modified": "2019-01-17T02:34:23.543Z", "contributors": [ "wbamberg", - "lajaso", - "teoli", - "Sheppy", - "Pgulijczuk", - "deimidis", - "Nukeador", - "Ffranz", - "HenryGR" + "SuperHostile" ] }, - "Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla": { - "modified": "2019-01-16T14:53:56.551Z", + "Games/Techniques/3D_on_the_web": { + "modified": "2019-03-18T21:23:46.780Z", "contributors": [ - "DoctorRomi", - "Superruzafa" + "wbamberg" ] }, - "Applying_SVG_effects_to_HTML_content": { - "modified": "2019-03-24T00:09:04.196Z", + "Games/Techniques/WebRTC_data_channels": { + "modified": "2019-03-23T22:04:08.435Z", "contributors": [ - "elPatox" + "wbamberg", + "J4MP" ] }, - "Añadir_lectores_de_canales_a_Firefox": { - "modified": "2019-03-23T23:54:31.423Z", + "Games/Tutorials/2D_breakout_game_Phaser": { + "modified": "2019-03-18T21:43:09.977Z", "contributors": [ "wbamberg", - "Mgjbot", - "RickieesES", - "Nukeador", - "Anyulled" + "chrisdavidmills" ] }, - "Añadir_motores_de_búsqueda_desde_páginas_web": { - "modified": "2019-01-16T15:27:59.157Z", + "Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens": { + "modified": "2019-03-18T21:18:57.095Z", "contributors": [ - "Mgjbot", - "Superruzafa", - "Lesmo sft", - "Nukeador" + "WilsonIsAliveClone", + "serarroy" ] }, - "Bugs_importantes_solucionados_en_Firefox_3": { - "modified": "2019-03-23T23:53:21.447Z", + "Games/Tutorials/2D_breakout_game_Phaser/Collision_detection": { + "modified": "2019-03-18T21:21:35.455Z", "contributors": [ - "wbamberg", - "Mgjbot", - "Nathymig", - "Nukeador", - "HenryGR", - "RickieesES", - "Ciberman osman" + "WilsonIsAliveClone", + "serarroy" ] }, - "Building_an_Extension": { - "modified": "2019-03-23T23:19:24.053Z", + "Games/Tutorials/2D_breakout_game_Phaser/Extra_lives": { + "modified": "2019-03-18T21:21:17.358Z", "contributors": [ - "martin.weingart", - "Josele89" + "carlosgocereceda", + "WilsonIsAliveClone", + "serarroy" ] }, - "CSS/Media_queries": { - "modified": "2019-10-03T11:52:26.928Z", + "Games/Tutorials/2D_breakout_game_Phaser/Game_over": { + "modified": "2019-03-18T21:20:23.610Z", "contributors": [ - "danielblazquez", - "brunonra-dev", - "kitab15", - "Sebastianz", - "jsx", - "carlossuarez", - "mrstork", - "malayaleecoder", - "seeker8", - "Xaviju", - "sinfallas", - "maedca" + "mikelmg", + "carlosgocereceda", + "WilsonIsAliveClone" ] }, - "CSS/Using_CSS_gradients": { - "modified": "2019-06-03T20:30:31.836Z", + "Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework": { + "modified": "2019-01-17T02:28:59.298Z", "contributors": [ - "GasGen", - "undest", - "Sebastianz", - "Eneagrama" + "wbamberg", + "proncaglia" ] }, - "CSS_dinámico": { - "modified": "2019-01-16T14:14:46.881Z", + "Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball": { + "modified": "2019-03-18T21:21:15.950Z", "contributors": [ - "RickieesES", - "Jorolo", - "Peperoni", - "Hande", - "Nukeador" + "WilsonIsAliveClone", + "serarroy" ] }, - "Cadenas_del_User_Agent_de_Gecko": { - "modified": "2019-03-23T23:45:27.069Z", + "Games/Tutorials/2D_breakout_game_Phaser/Scaling": { + "modified": "2019-01-17T02:28:53.459Z", "contributors": [ - "teoli", - "Orestesleal13022" + "wbamberg", + "proncaglia" ] }, - "Code_snippets": { - "modified": "2019-01-16T13:52:37.564Z", + "Games/Tutorials/2D_breakout_game_Phaser/The_score": { + "modified": "2019-03-18T21:21:15.588Z", "contributors": [ - "ffox" + "mikelmg", + "WilsonIsAliveClone", + "serarroy" ] }, - "Code_snippets/Pestañas_del_navegador": { - "modified": "2019-01-16T13:52:57.159Z", + "Games/Tutorials/2D_breakout_game_Phaser/Win_the_game": { + "modified": "2020-04-05T22:13:29.758Z", "contributors": [ - "ffox" + "KevinPiola", + "carlosgocereceda", + "serarroy" ] }, - "Columnas_con_CSS-3": { - "modified": "2019-03-23T23:43:23.940Z", + "Glossary": { + "modified": "2020-10-07T11:08:11.871Z", "contributors": [ - "Mgjbot", - "Jorolo", - "Nukeador" + "peterbe", + "joseluisq", + "SphinxKnight", + "wbamberg", + "raecillacastellana", + "LauraHilliger" ] }, - "Compilar_e_instalar": { - "modified": "2019-03-23T23:58:55.256Z", + "Glossary/404": { + "modified": "2019-03-23T22:37:45.365Z", "contributors": [ - "teoli", - "DoctorRomi", - "Mgjbot", - "Blank zero" + "pekechis" ] }, - "Configurar_correctamente_los_tipos_MIME_del_servidor": { - "modified": "2020-07-16T22:36:04.341Z", + "Glossary/502": { + "modified": "2019-03-23T22:37:47.150Z", "contributors": [ - "Nukeador", - "Kroatan", - "Mtiscordio", - "Hostar", - "Iwa1", - "Markens", - "Brayan Habid" + "pekechis" ] }, - "Control_de_la_corrección_ortográfica_en_formularios_HTML": { - "modified": "2019-03-23T23:54:20.583Z", + "Glossary/AJAX": { + "modified": "2020-08-03T01:24:29.370Z", "contributors": [ - "raecillacastellana", - "vltamara", - "MxJ3susDi4z", - "teoli", - "Mgjbot", - "Jorolo", - "Omnisilver", - "Nukeador" + "zgreco2000", + "hello", + "hectoraldairah", + "tonyrodrigues", + "memotronix", + "ekros" ] }, - "Creacion_de_plugins_OpenSearch_para_Firefox": { - "modified": "2019-03-24T00:00:08.096Z", + "Glossary/API": { + "modified": "2019-03-23T23:14:34.833Z", "contributors": [ "teoli", - "Etrigan", - "tbusca", - "Nukeador", - "Rodrigoknascimento", - "Citora", - "Mgjbot", - "Fenomeno" + "AngelFQC" ] }, - "Creación_de_Componentes_XPCOM/Interior_del_Componente": { - "modified": "2019-04-20T03:45:43.371Z", + "Glossary/ARIA": { + "modified": "2019-03-23T22:15:41.387Z", "contributors": [ - "wbamberg", - "Maharba" + "gparra989" ] }, - "Creación_de_Componentes_XPCOM/Prefacio": { - "modified": "2019-04-20T03:45:45.365Z", + "Glossary/ARPA": { + "modified": "2019-03-18T21:31:13.320Z", "contributors": [ - "wbamberg", - "Maharba" + "dcantomo" ] }, - "Creando_una_extensión": { - "modified": "2019-03-24T00:13:16.401Z", + "Glossary/ASCII": { + "modified": "2019-03-23T22:15:33.120Z", "contributors": [ - "teoli", - "ethertank", - "Sheppy", - "athesto", - "StripTM", - "myfcr", - "DoctorRomi", - "Mgjbot", - "M4ur170", - "Nukeador", - "Wayner", - "El Hacker", - "Arcangelhak", - "Psanz", - "Victor-27-", - "Arteadonis", - "Gadolinio", - "Opevelyn", - "Verruckt", - "Spg2006", - "Gbulfon", - "Damien", - "Peperoni", - "CD77", - "Ordep", - "Indigo", - "Jp1", - "GMG", - "Ateneo", - "Doctormanfer", - "A Morenazo", - "Trace2x", - "Odo", - "Hatch", - "Jorolo", - "Lastjuan", - "Ulntux" + "lajaso", + "gparra989" ] }, - "Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System": { - "modified": "2019-04-26T15:53:18.603Z", + "Glossary/ATAG": { + "modified": "2019-03-23T22:15:44.329Z", "contributors": [ - "cantineoqueteveo", - "2stapps", - "teoli", - "DoctorRomi", - "Carok", - "Gustavo Ruiz", - "Nukeador", - "JuninhoBoy95", - "Kuriboh", - "Mgjbot", - "RickieesES", - "Geomorillo", - "Blank zero", - "Haelmx", - "Superruzafa" + "gparra989" ] }, - "DHTML": { - "modified": "2019-03-23T23:44:54.880Z", + "Glossary/Abstraction": { + "modified": "2019-03-23T22:24:49.785Z", "contributors": [ - "Mgjbot", - "Jorolo", - "Jos" + "feliperomero3", + "israel-munoz", + "ekros" ] }, - "DHTML_Demostraciones_del_uso_de_DOM_Style": { - "modified": "2019-01-16T16:07:51.712Z", + "Glossary/Accessibility": { + "modified": "2019-03-23T22:25:00.142Z", "contributors": [ - "Mgjbot", - "Superruzafa", - "Trace2x", - "Fedora-core", - "Nukeador" + "ekros" ] }, - "DOM": { - "modified": "2019-03-24T00:03:50.113Z", + "Glossary/Accessibility_tree": { + "modified": "2020-10-23T07:47:20.142Z", "contributors": [ - "ethertank", - "fscholz", - "Mgjbot", - "Nukeador", - "Jorolo", - "Takenbot", - "julionc", - "Versae" + "chrisdavidmills", + "caro-oviedo" ] }, - "DOM/Almacenamiento": { - "modified": "2019-03-24T00:11:21.014Z", + "Glossary/Adobe_Flash": { + "modified": "2019-03-18T20:57:35.400Z", "contributors": [ - "AshfaqHossain", - "StripTM", - "RickieesES", - "inma_610", - "Mgjbot", - "Superruzafa", - "Nukeador" + "yoshimii", + "ekros" ] }, - "DOM/Manipulando_el_historial_del_navegador": { - "modified": "2019-09-07T17:44:48.428Z", + "Glossary/Apple_Safari": { + "modified": "2020-08-30T09:41:20.026Z", "contributors": [ - "seaug", - "HerniHdez", - "AlePerez92", - "SphinxKnight", - "talo242", - "mauroc8", - "javiernunez", - "dongerardor", - "StripTM", - "Galsas", - "teoli", - "Izel", - "Sheppy", - "translatoon" + "mastertrooper", + "ekros" ] }, - "DOM/Manipulando_el_historial_del_navegador/Ejemplo": { - "modified": "2019-03-23T22:29:32.414Z", + "Glossary/Arpanet": { + "modified": "2020-03-15T22:50:09.715Z", "contributors": [ - "maitret" + "kev8in", + "gparra989" ] }, - "DOM/Touch_events": { - "modified": "2019-03-23T23:35:01.361Z", + "Glossary/Bandwidth": { + "modified": "2019-03-23T22:15:45.908Z", "contributors": [ - "wbamberg", - "wffranco", - "fscholz", - "teoli", - "Fjaguero", - "jvmjunior", - "maedca" + "gparra989" ] }, - "DOM/document.cookie": { - "modified": "2020-04-15T13:31:17.928Z", + "Glossary/BigInt": { + "modified": "2020-09-25T04:27:46.263Z", "contributors": [ - "atiliopereira", - "Skattspa", - "aralvarez", - "SphinxKnight", - "khalid32", - "Ogquir", - "strongville", - "Ciencia Al Poder", - "Markens", - "DR" + "4rturd13" ] }, - "DOM_Inspector": { - "modified": "2020-07-16T22:36:24.191Z", + "Glossary/Blink": { + "modified": "2019-03-18T21:44:06.201Z", "contributors": [ - "Mgjbot", - "Jorolo", - "Tatan", - "TETSUO" + "ferlopezcarr" ] }, - "Desarrollando_Mozilla": { - "modified": "2019-01-16T14:32:31.515Z", + "Glossary/Block": { + "modified": "2019-03-18T21:41:49.707Z", "contributors": [ - "another_sam", - "Mgjbot", - "Jorolo", - "Nukeador", - "Turin" + "Esteban" ] }, - "Desarrollo_Web": { - "modified": "2019-03-23T23:43:57.691Z", + "Glossary/Block/CSS": { + "modified": "2020-06-24T23:38:45.496Z", "contributors": [ - "Mgjbot", - "Jorolo" + "LinkStrifer", + "BubuAnabelas", + "Esteban" ] }, - "Detectar_la_orientación_del_dispositivo": { - "modified": "2019-03-24T00:07:57.131Z", + "Glossary/Boolean": { + "modified": "2019-03-23T22:58:03.390Z", "contributors": [ - "inma_610" + "Cleon" ] }, - "Dibujando_Gráficos_con_Canvas": { - "modified": "2019-01-16T20:01:59.575Z", + "Glossary/Browser": { + "modified": "2019-03-18T21:43:56.678Z", "contributors": [ - "Firegooploer" + "Maletil", + "ferlopezcarr" ] }, - "Dibujar_texto_usando_canvas": { - "modified": "2019-01-16T15:31:41.845Z", + "Glossary/Browsing_context": { + "modified": "2019-04-04T14:36:22.033Z", "contributors": [ - "Mgjbot", - "HenryGR", - "Nukeador", - "RickieesES", - "Debianpc" + "danielblazquez" ] }, - "DragDrop": { - "modified": "2019-03-23T23:18:26.504Z", + "Glossary/Buffer": { + "modified": "2019-03-18T21:18:59.378Z", "contributors": [ - "drewp" + "diegorhs" ] }, - "DragDrop/Drag_and_Drop": { - "modified": "2019-03-24T00:07:57.845Z", + "Glossary/CDN": { + "modified": "2020-05-28T16:24:22.721Z", "contributors": [ - "ethertank", - "inma_610" + "jaimefdezmv", + "quirinolemanches" ] }, - "DragDrop/Drag_and_Drop/drag_and_drop_archivo": { - "modified": "2020-11-01T11:34:07.543Z", + "Glossary/CRUD": { + "modified": "2019-03-23T22:03:05.724Z", "contributors": [ - "juanrueda", - "davidpala.dev", - "brahAraya", - "ajuni880", - "israteneda", - "RVidalki", - "clarii", - "rgomez" + "velizluisma" ] }, - "DragDrop/Recommended_Drag_Types": { - "modified": "2019-03-23T23:18:24.597Z", + "Glossary/CSRF": { + "modified": "2019-03-18T21:19:22.851Z", "contributors": [ - "Evinton" + "sergiomgm" ] }, - "Estructura_de_directorios_de_código_fuente_de_Mozilla": { - "modified": "2019-03-24T00:17:11.569Z", + "Glossary/CSS": { + "modified": "2020-06-20T09:41:42.032Z", "contributors": [ - "ethertank", - "MiguelFRomeroR", - "Sheppy" + "hello", + "Maletil", + "cawilff", + "Sergio_Gonzalez_Collado", + "analia.antenucci", + "sergio_p_d", + "memotronix" ] }, - "Etiquetas_audio_y_video_en_Firefox": { - "modified": "2019-03-23T23:59:36.294Z", + "Glossary/Callback_function": { + "modified": "2019-04-22T16:14:36.669Z", "contributors": [ - "Nukeador", - "deimidis" + "faustom721", + "lcassettai", + "yomar-dev" ] }, - "Extensiones/Actualización_de_extensiones_para_Firefox_4": { - "modified": "2019-03-24T00:05:58.390Z", + "Glossary/Canvas": { + "modified": "2020-09-21T20:35:53.439Z", "contributors": [ - "inma_610" + "Alejo1417", + "jorgeluispedro16" ] }, - "FAQ_Incrustando_Mozilla": { - "modified": "2019-01-16T16:20:13.874Z", + "Glossary/Chrome": { + "modified": "2019-03-18T21:42:29.056Z", "contributors": [ - "Lastjuan" + "amirtorrez" ] }, - "Firefox_1.5_para_Desarrolladores": { - "modified": "2019-03-23T23:47:34.365Z", + "Glossary/Class": { + "modified": "2019-03-18T21:18:45.753Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "Rubenbae", - "Pachtonio", - "Sheppy", - "Mgjbot", - "Jorolo", - "Fedora-core", - "Nukeador", - "Takenbot", - "Willyaranda", - "Pasky", - "Angelr04", - "Epaclon" + "PabloDeTorre", + "carlosCharlie" ] }, - "Firefox_19_para_desarrolladores": { - "modified": "2019-03-18T20:54:04.568Z", + "Glossary/Codec": { + "modified": "2019-03-18T21:19:01.793Z", "contributors": [ - "ulisestrujillo", - "wbamberg", - "Sebastianz", - "mannyatico" + "diegorhs" ] }, - "Firefox_2_para_desarrolladores": { - "modified": "2019-03-23T23:58:56.168Z", + "Glossary/Compile": { + "modified": "2019-03-18T21:19:15.661Z", "contributors": [ - "wbamberg", - "DoctorRomi", - "Markens", - "Mgjbot", - "Nukeador", - "Superruzafa", - "Guis", - "StripTM", - "Jorolo" + "PabloDeTorre", + "carlosCharlie" ] }, - "Firefox_3.5_para_desarrolladores": { - "modified": "2019-03-24T00:03:16.036Z", + "Glossary/Computer_Programming": { + "modified": "2019-03-23T22:02:08.531Z", "contributors": [ - "wbamberg", - "ethertank", - "another_sam", - "deimidis", - "Nukeador" + "israel-munoz" ] }, - "Firefox_3_para_desarrolladores": { - "modified": "2019-03-24T00:04:08.312Z", + "Glossary/Constructor": { + "modified": "2019-03-23T22:15:36.356Z", "contributors": [ - "wbamberg", - "teoli", - "fscholz", - "Mgjbot", - "Nukeador", - "Surferosx", - "Nathymig", - "Dfier", - "Wrongloop", - "Garlock", - "Brahiam", - "Mariano", - "HenryGR", - "Jseldon" + "untilbit", + "gparra989" ] }, - "Firefox_addons_developer_guide/Introduction_to_Extensions": { - "modified": "2019-03-23T23:37:41.632Z", + "Glossary/Cookie": { + "modified": "2019-03-18T21:19:00.075Z", "contributors": [ - "pacommozilla", - "AgustinAlvia" + "diegorhs" ] }, - "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions": { - "modified": "2019-03-18T21:16:06.336Z", + "Glossary/Copyleft": { + "modified": "2019-03-18T21:43:43.180Z", "contributors": [ - "AgustinAlvia" + "ferlopezcarr" ] }, - "Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio": { - "modified": "2019-01-16T14:22:48.165Z", + "Glossary/Cross-site_scripting": { + "modified": "2020-04-13T08:31:08.536Z", "contributors": [ - "inma_610" + "Luiggy", + "qwerty726" ] }, - "Fragmentos_de_código": { - "modified": "2019-01-16T13:52:44.049Z", + "Glossary/DOM": { + "modified": "2019-03-18T21:10:52.251Z", "contributors": [ - "ffox" + "ChrisMHM", + "PabloDeTorre", + "vinyetcg", + "ferlopezcarr", + "HerberWest" ] }, - "Funciones": { - "modified": "2019-01-16T16:18:04.260Z", + "Glossary/Doctype": { + "modified": "2019-03-23T22:07:28.155Z", "contributors": [ - "Jorolo" + "omertafox" ] }, - "Games": { - "modified": "2019-09-09T15:31:15.455Z", + "Glossary/Domain": { + "modified": "2019-03-18T21:19:17.838Z", "contributors": [ - "SphinxKnight", - "isocialweb", - "wbamberg", - "fscholz", - "ajspadial", - "Arudb79", - "atlas7jean", - "chrisdavidmills" + "PabloDeTorre" ] }, - "Games/Anatomy": { - "modified": "2019-01-16T22:18:47.235Z", + "Glossary/Dynamic_programming_language": { + "modified": "2020-09-12T18:21:07.076Z", "contributors": [ - "wbamberg", - "cnaucler" + "IsraFloores", + "DaniNz" ] }, - "Games/Herramients": { - "modified": "2019-01-16T19:29:51.696Z", + "Glossary/ECMAScript": { + "modified": "2020-08-31T05:49:16.882Z", "contributors": [ - "wbamberg", - "atlas7jean" + "Nachec", + "anaturrillo", + "Cleon" ] }, - "Games/Herramients/asm.js": { - "modified": "2019-03-18T21:21:31.919Z", + "Glossary/Element": { + "modified": "2019-03-18T21:31:18.857Z", "contributors": [ - "WilsonIsAliveClone", - "serarroy" + "eddieurbina", + "carllewisc" ] }, - "Games/Introduccion": { - "modified": "2020-11-28T21:23:49.961Z", + "Glossary/Empty_element": { + "modified": "2019-03-23T22:10:52.378Z", "contributors": [ - "rayrojas", - "titox", - "gauchoscript", - "wbamberg", - "Mancux2", - "Albizures", - "atlas7jean" + "juanmmendez", + "DaniNz" ] }, - "Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen)": { - "modified": "2019-08-05T12:49:59.324Z", + "Glossary/Encapsulation": { + "modified": "2019-03-18T21:19:13.092Z", "contributors": [ - "WilsonIsAliveClone" + "PabloDeTorre" ] }, - "Games/Publishing_games": { - "modified": "2019-03-18T21:22:03.542Z", + "Glossary/FPS": { + "modified": "2020-08-19T14:42:01.823Z", "contributors": [ - "carlosgocereceda", - "mikelmg", - "SphinxKnight", - "wbamberg" + "ianaya89" ] }, - "Games/Publishing_games/Game_distribution": { - "modified": "2020-08-09T16:02:37.394Z", + "Glossary/FTP": { + "modified": "2020-06-22T03:59:10.085Z", "contributors": [ - "katherincorredor", - "WilsonIsAliveClone", - "carlosgocereceda" + "Maose" ] }, - "Games/Publishing_games/Monetización_de_los_juegos": { - "modified": "2019-03-18T21:22:04.540Z", + "Glossary/Flex": { + "modified": "2020-10-03T01:09:13.365Z", "contributors": [ - "mikelmg", - "carlosgocereceda", - "WilsonIsAliveClone" + "duduindo", + "FlashAmarillo" ] }, - "Games/Techniques": { - "modified": "2019-01-17T02:01:32.309Z", + "Glossary/Flex_Container": { + "modified": "2019-11-21T16:42:31.273Z", "contributors": [ - "wbamberg", - "chrisdavidmills" + "scaloner" ] }, - "Games/Techniques/2D_collision_detection": { - "modified": "2019-01-17T02:34:23.543Z", + "Glossary/Flexbox": { + "modified": "2019-03-18T21:23:56.502Z", "contributors": [ - "wbamberg", - "SuperHostile" + "danpaltor", + "ericksonespejo" ] }, - "Games/Techniques/3D_on_the_web": { - "modified": "2019-03-18T21:23:46.780Z", + "Glossary/GPL": { + "modified": "2019-03-18T21:43:50.897Z", "contributors": [ - "wbamberg" + "ferlopezcarr" ] }, - "Games/Techniques/WebRTC_data_channels": { - "modified": "2019-03-23T22:04:08.435Z", + "Glossary/Git": { + "modified": "2019-03-18T21:19:20.412Z", "contributors": [ - "wbamberg", - "J4MP" + "PabloDeTorre", + "sergiomgm" ] }, - "Games/Tutorials/2D_breakout_game_Phaser": { - "modified": "2019-03-18T21:43:09.977Z", + "Glossary/Google_Chrome": { + "modified": "2019-03-18T21:44:29.185Z", "contributors": [ - "wbamberg", - "chrisdavidmills" + "ferlopezcarr" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens": { - "modified": "2019-03-18T21:18:57.095Z", + "Glossary/Grid": { + "modified": "2019-03-23T22:10:55.372Z", "contributors": [ - "WilsonIsAliveClone", - "serarroy" + "ocamachor", + "tipoqueno", + "welm" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Botones": { - "modified": "2019-11-03T00:22:01.318Z", + "Glossary/Grid_Areas": { + "modified": "2019-03-18T21:46:28.612Z", "contributors": [ - "AdryDev92", - "carlosgocereceda", - "serarroy" + "tipoqueno" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Collision_detection": { - "modified": "2019-03-18T21:21:35.455Z", + "Glossary/Grid_Column": { + "modified": "2020-05-19T18:27:14.068Z", "contributors": [ - "WilsonIsAliveClone", - "serarroy" + "biclope13", + "amaiafilo" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Extra_lives": { - "modified": "2019-03-18T21:21:17.358Z", + "Glossary/Grid_Lines": { + "modified": "2019-05-27T03:46:29.561Z", "contributors": [ - "carlosgocereceda", - "WilsonIsAliveClone", - "serarroy" + "asael2" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Game_over": { - "modified": "2019-03-18T21:20:23.610Z", + "Glossary/Grid_Rows": { + "modified": "2019-03-18T21:23:35.644Z", "contributors": [ - "mikelmg", - "carlosgocereceda", - "WilsonIsAliveClone" + "Xino" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework": { - "modified": "2019-01-17T02:28:59.298Z", + "Glossary/HTML": { + "modified": "2020-01-23T12:51:04.156Z", "contributors": [ - "wbamberg", - "proncaglia" - ] - }, - "Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball": { - "modified": "2019-03-18T21:21:15.950Z", - "contributors": [ - "WilsonIsAliveClone", - "serarroy" + "editorUOC", + "edsonv", + "jpmontoya182", + "sergio_p_d", + "raecillacastellana" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes": { - "modified": "2019-03-18T21:18:55.239Z", + "Glossary/HTML5": { + "modified": "2020-06-22T04:32:17.508Z", "contributors": [ - "WilsonIsAliveClone" + "Maose" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Scaling": { - "modified": "2019-01-17T02:28:53.459Z", + "Glossary/HTTP": { + "modified": "2019-07-01T03:11:50.434Z", "contributors": [ - "wbamberg", - "proncaglia" + "SphinxKnight", + "unaivalle", + "sdelrio", + "sergio_p_d" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/The_score": { - "modified": "2019-03-18T21:21:15.588Z", + "Glossary/Head": { + "modified": "2020-06-22T04:54:37.023Z", "contributors": [ - "mikelmg", - "WilsonIsAliveClone", - "serarroy" + "Maose" ] }, - "Games/Tutorials/2D_breakout_game_Phaser/Win_the_game": { - "modified": "2020-04-05T22:13:29.758Z", + "Glossary/Hoisting": { + "modified": "2019-05-15T21:40:52.256Z", "contributors": [ - "KevinPiola", - "carlosgocereceda", - "serarroy" + "jevvilla", + "IsaacAaron", + "sminutoli" ] }, - "Games/Workflows": { - "modified": "2019-01-16T19:25:39.809Z", + "Glossary/Host": { + "modified": "2020-12-10T07:42:38.267Z", "contributors": [ - "wbamberg", - "groovecoder" + "ojgarciab" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro": { - "modified": "2019-03-23T22:19:39.385Z", + "Glossary/Hyperlink": { + "modified": "2019-03-18T21:44:07.373Z", "contributors": [ - "wbamberg", - "profesooooor", - "emolinerom", - "jolosan" + "ferlopezcarr" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls": { - "modified": "2019-03-23T22:19:43.884Z", + "Glossary/Hypertext": { + "modified": "2019-03-18T21:30:26.239Z", "contributors": [ - "wbamberg", - "regisdark", - "profesooooor", - "emolinerom" + "12g" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques": { - "modified": "2019-01-17T00:34:48.662Z", + "Glossary/IDE": { + "modified": "2019-03-18T21:18:59.913Z", "contributors": [ - "wbamberg", - "profesooooor", - "emolinerom" + "PabloDeTorre", + "carlosCharlie" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado": { - "modified": "2019-01-17T00:34:24.542Z", + "Glossary/IIFE": { + "modified": "2019-03-18T20:50:02.318Z", "contributors": [ - "wbamberg", - "profesooooor", - "emolinerom" + "danyparc", + "Efrain", + "bluesky11117", + "emorc" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton": { - "modified": "2019-01-17T00:34:40.600Z", + "Glossary/IP_Address": { + "modified": "2020-06-22T03:38:12.516Z", "contributors": [ - "wbamberg", - "profesooooor", - "emolinerom" + "Maose" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it": { - "modified": "2019-01-17T00:33:08.752Z", + "Glossary/IPv6": { + "modified": "2020-06-03T01:33:08.312Z", "contributors": [ - "wbamberg", - "profesooooor", - "jolosan" + "geryescalier" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones": { - "modified": "2019-03-18T20:48:38.662Z", + "Glossary/IRC": { + "modified": "2020-12-03T00:37:27.868Z", "contributors": [ - "juanedsa", - "wbamberg", - "profesooooor", - "emolinerom" + "devil64-dev" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego": { - "modified": "2019-03-23T22:17:05.460Z", + "Glossary/ISP": { + "modified": "2020-06-22T04:21:55.362Z", "contributors": [ - "wbamberg", - "regisdark", - "profesooooor", - "jolosan" + "Maose" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola": { - "modified": "2019-03-23T22:19:10.641Z", + "Glossary/IndexedDB": { + "modified": "2019-03-23T22:36:07.366Z", "contributors": [ - "wbamberg", - "profesooooor", - "jolosan", - "emolinerom" + "Loque" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando": { - "modified": "2019-01-17T01:08:54.537Z", + "Glossary/Internet": { + "modified": "2020-04-27T00:09:14.977Z", "contributors": [ - "wbamberg", - "profesooooor" + "candepineyro2015", + "r2cris", + "cawilff" ] }, - "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win": { - "modified": "2019-01-17T01:08:23.453Z", + "Glossary/JSON": { + "modified": "2019-05-24T12:44:54.639Z", "contributors": [ - "wbamberg", - "profesooooor" + "EstebanRK", + "chavesrdj", + "LeonardoDG" ] }, - "Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation": { - "modified": "2019-03-23T23:11:29.148Z", + "Glossary/Java": { + "modified": "2019-03-18T21:19:11.310Z", "contributors": [ - "wbamberg", - "lauttttaro", - "chebit" + "PabloDeTorre", + "carlosCharlie" ] }, - "Generación_de_GUIDs": { - "modified": "2019-03-24T00:06:07.388Z", + "Glossary/JavaScript": { + "modified": "2020-09-01T00:56:53.463Z", "contributors": [ - "ibnkhaldun" + "Nachec", + "c9009", + "missmakita", + "sergio_p_d", + "gorrotowi" ] }, - "Glossary": { - "modified": "2020-10-07T11:08:11.871Z", + "Glossary/Keyword": { + "modified": "2020-05-04T10:31:29.902Z", "contributors": [ - "peterbe", - "joseluisq", - "SphinxKnight", - "wbamberg", - "raecillacastellana", - "LauraHilliger" + "jorgeCaster", + "blanchart", + "DaniNz" ] }, - "Glossary/404": { - "modified": "2019-03-23T22:37:45.365Z", + "Glossary/LGPL": { + "modified": "2019-03-18T21:43:48.377Z", "contributors": [ - "pekechis" + "ferlopezcarr" ] }, - "Glossary/502": { - "modified": "2019-03-23T22:37:47.150Z", + "Glossary/Long_task": { + "modified": "2020-08-08T01:38:15.029Z", "contributors": [ - "pekechis" + "Nachec" ] }, - "Glossary/AJAX": { - "modified": "2020-08-03T01:24:29.370Z", + "Glossary/MVC": { + "modified": "2020-01-31T17:55:57.978Z", "contributors": [ - "zgreco2000", - "hello", - "hectoraldairah", - "tonyrodrigues", - "memotronix", - "ekros" + "deit", + "IsaacAlvrt" ] }, - "Glossary/API": { - "modified": "2019-03-23T23:14:34.833Z", + "Glossary/MitM": { + "modified": "2019-03-18T21:25:35.556Z", "contributors": [ - "teoli", - "AngelFQC" + "lcastrosaez" ] }, - "Glossary/ARIA": { - "modified": "2019-03-23T22:15:41.387Z", + "Glossary/Mixin": { + "modified": "2019-03-23T22:37:38.011Z", "contributors": [ - "gparra989" + "josepaez2", + "raecillacastellana", + "kramery" ] }, - "Glossary/ARPA": { - "modified": "2019-03-18T21:31:13.320Z", + "Glossary/Mobile_First": { + "modified": "2019-07-02T17:22:58.448Z", "contributors": [ - "dcantomo" + "JuanMaRuiz" ] }, - "Glossary/ASCII": { - "modified": "2019-03-23T22:15:33.120Z", + "Glossary/Mozilla_Firefox": { + "modified": "2019-03-23T22:06:36.476Z", "contributors": [ - "lajaso", - "gparra989" + "BrodaNoel" ] }, - "Glossary/ATAG": { - "modified": "2019-03-23T22:15:44.329Z", + "Glossary/Node": { + "modified": "2019-05-17T13:24:16.608Z", "contributors": [ - "gparra989" + "GUEROZ", + "untilbit", + "klez" ] }, - "Glossary/Abstraction": { - "modified": "2019-03-23T22:24:49.785Z", + "Glossary/Node.js": { + "modified": "2020-10-24T17:01:45.516Z", "contributors": [ - "feliperomero3", - "israel-munoz", - "ekros" + "oism28", + "rlopezAyala", + "malonson", + "migdonio1" ] }, - "Glossary/Accessibility": { - "modified": "2019-03-23T22:25:00.142Z", + "Glossary/Node/DOM": { + "modified": "2019-03-23T22:27:35.877Z", "contributors": [ - "ekros" + "malonson" ] }, - "Glossary/Accessibility_tree": { - "modified": "2020-10-23T07:47:20.142Z", + "Glossary/Null": { + "modified": "2019-03-23T22:58:02.167Z", "contributors": [ - "chrisdavidmills", - "caro-oviedo" + "Cleon" ] }, - "Glossary/Adobe_Flash": { - "modified": "2019-03-18T20:57:35.400Z", + "Glossary/OOP": { + "modified": "2019-03-18T21:19:20.278Z", "contributors": [ - "yoshimii", - "ekros" + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/Algoritmo": { - "modified": "2019-01-17T00:09:54.063Z", + "Glossary/PHP": { + "modified": "2020-05-07T14:37:16.100Z", "contributors": [ - "ekros" + "pascual143" ] }, - "Glossary/Apple_Safari": { - "modified": "2020-08-30T09:41:20.026Z", + "Glossary/POP": { + "modified": "2020-04-18T03:21:04.687Z", "contributors": [ - "mastertrooper", - "ekros" + "itrjwyss" ] }, - "Glossary/Argumento": { - "modified": "2019-03-23T22:15:34.303Z", + "Glossary/Parse": { + "modified": "2020-12-05T08:25:54.330Z", "contributors": [ - "gparra989" + "StripTM" ] }, - "Glossary/Arpanet": { - "modified": "2020-03-15T22:50:09.715Z", + "Glossary/Polyfill": { + "modified": "2019-03-18T21:24:24.118Z", "contributors": [ - "kev8in", - "gparra989" + "viabadia" ] }, - "Glossary/Arquitectura_de_la_información": { - "modified": "2020-09-06T16:32:32.362Z", + "Glossary/Port": { + "modified": "2020-04-18T03:24:57.722Z", "contributors": [ - "Nachec" + "itrjwyss", + "malonson" ] }, - "Glossary/Arreglos": { - "modified": "2020-05-28T13:51:10.546Z", + "Glossary/Progressive_Enhancement": { + "modified": "2019-07-07T08:35:50.920Z", "contributors": [ - "fedoroffs", - "BubuAnabelas", - "Davids-Devel", - "Daniel_Martin", - "gparra989" + "JuanMaRuiz" ] }, - "Glossary/Asíncrono": { - "modified": "2020-05-04T10:40:03.360Z", + "Glossary/Promise": { + "modified": "2019-03-18T21:18:47.852Z", "contributors": [ - "jorgeCaster", - "fjluengo", - "gparra989" + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/Atributo": { - "modified": "2019-03-23T22:15:46.319Z", + "Glossary/Protocol": { + "modified": "2020-12-10T11:56:54.768Z", "contributors": [ - "gparra989" + "ojgarciab", + "Maose", + "itrjwyss", + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/Atributo_global": { - "modified": "2019-03-18T21:19:21.658Z", + "Glossary/Prototype": { + "modified": "2019-03-28T18:50:47.544Z", "contributors": [ - "PabloDeTorre" + "maruskina" ] }, - "Glossary/Bandwidth": { - "modified": "2019-03-23T22:15:45.908Z", + "Glossary/Prototype-based_programming": { + "modified": "2020-08-25T19:45:44.389Z", "contributors": [ - "gparra989" + "duduindo", + "paolazaratem" ] }, - "Glossary/BigInt": { - "modified": "2020-09-25T04:27:46.263Z", + "Glossary/Public-key_cryptography": { + "modified": "2019-03-18T21:18:41.396Z", "contributors": [ - "4rturd13" + "GCF7" ] }, - "Glossary/Blink": { - "modified": "2019-03-18T21:44:06.201Z", + "Glossary/Python": { + "modified": "2019-01-17T03:26:06.615Z", "contributors": [ - "ferlopezcarr" + "Guzmanr1", + "ax16mr" ] }, - "Glossary/Block": { - "modified": "2019-03-18T21:41:49.707Z", + "Glossary/REST": { + "modified": "2019-03-18T21:19:06.376Z", "contributors": [ - "Esteban" + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/Block/CSS": { - "modified": "2020-06-24T23:38:45.496Z", + "Glossary/RGB": { + "modified": "2019-03-18T21:19:01.657Z", "contributors": [ - "LinkStrifer", - "BubuAnabelas", - "Esteban" + "PabloDeTorre" ] }, - "Glossary/Boolean": { - "modified": "2019-03-23T22:58:03.390Z", + "Glossary/RSS": { + "modified": "2019-03-18T21:43:45.312Z", "contributors": [ - "Cleon" + "ferlopezcarr" ] }, - "Glossary/Browser": { - "modified": "2019-03-18T21:43:56.678Z", + "Glossary/Reflow": { + "modified": "2020-11-16T21:27:00.470Z", "contributors": [ - "Maletil", - "ferlopezcarr" + "ccamiloo" ] }, - "Glossary/Browsing_context": { - "modified": "2019-04-04T14:36:22.033Z", + "Glossary/Regular_expression": { + "modified": "2019-03-23T22:27:50.421Z", "contributors": [ - "danielblazquez" + "lurkinboss81", + "malonson" ] }, - "Glossary/Buffer": { - "modified": "2019-03-18T21:18:59.378Z", + "Glossary/Responsive_web_design": { + "modified": "2019-03-18T21:36:04.998Z", "contributors": [ - "diegorhs" + "lajaso" ] }, - "Glossary/CDN": { - "modified": "2020-05-28T16:24:22.721Z", + "Glossary/Ruby": { + "modified": "2019-03-18T21:18:51.137Z", "contributors": [ - "jaimefdezmv", - "quirinolemanches" + "diegorhs" ] }, - "Glossary/CID": { - "modified": "2019-03-18T21:19:22.724Z", + "Glossary/SEO": { + "modified": "2019-03-23T22:38:01.994Z", "contributors": [ - "PabloDeTorre", - "sergiomgm" + "carlossuarez" ] }, - "Glossary/CRUD": { - "modified": "2019-03-23T22:03:05.724Z", + "Glossary/SGML": { + "modified": "2019-03-18T21:43:11.251Z", "contributors": [ - "velizluisma" + "Undigon", + "cawilff" ] }, - "Glossary/CSRF": { - "modified": "2019-03-18T21:19:22.851Z", + "Glossary/SIMD": { + "modified": "2019-03-18T21:18:44.939Z", "contributors": [ - "sergiomgm" + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/CSS": { - "modified": "2020-06-20T09:41:42.032Z", + "Glossary/SISD": { + "modified": "2019-03-18T21:18:56.313Z", "contributors": [ - "hello", - "Maletil", - "cawilff", - "Sergio_Gonzalez_Collado", - "analia.antenucci", - "sergio_p_d", - "memotronix" + "carlosCharlie" ] }, - "Glossary/Cabecera_general": { - "modified": "2019-03-18T21:34:28.155Z", + "Glossary/SLD": { + "modified": "2019-04-30T13:59:51.577Z", "contributors": [ - "Watermelonnable" + "manfredosanchez" ] }, - "Glossary/Caché": { - "modified": "2019-03-18T21:19:00.217Z", + "Glossary/SMTP": { + "modified": "2020-04-18T03:31:14.904Z", "contributors": [ - "diegorhs" + "itrjwyss" ] }, - "Glossary/Callback_function": { - "modified": "2019-04-22T16:14:36.669Z", + "Glossary/SQL": { + "modified": "2019-03-18T21:18:56.658Z", "contributors": [ - "faustom721", - "lcassettai", - "yomar-dev" + "diegorhs" ] }, - "Glossary/Canvas": { - "modified": "2020-09-21T20:35:53.439Z", + "Glossary/SVG": { + "modified": "2019-03-18T21:35:52.789Z", "contributors": [ - "Alejo1417", - "jorgeluispedro16" + "lajaso" ] }, - "Glossary/Caracter": { - "modified": "2020-08-23T05:27:25.056Z", + "Glossary/SVN": { + "modified": "2019-03-18T21:19:01.509Z", "contributors": [ - "Nachec" + "PabloDeTorre" ] }, - "Glossary/Chrome": { - "modified": "2019-03-18T21:42:29.056Z", + "Glossary/Scope": { + "modified": "2019-07-02T17:59:48.762Z", "contributors": [ - "amirtorrez" + "Angel10050" ] }, - "Glossary/Cifrado": { - "modified": "2019-03-18T21:19:02.237Z", + "Glossary/Sloppy_mode": { + "modified": "2020-08-31T05:32:49.321Z", "contributors": [ - "PabloDeTorre", - "sergiomgm" + "Nachec", + "dcarmal-dayvo" ] }, - "Glossary/Clasificación_por_tarjetas_(card_sorting)": { - "modified": "2019-03-18T21:19:20.709Z", + "Glossary/Slug": { + "modified": "2019-03-18T21:43:51.297Z", "contributors": [ - "PabloDeTorre" + "LSanchez697" ] }, - "Glossary/Class": { - "modified": "2019-03-18T21:18:45.753Z", + "Glossary/String": { + "modified": "2019-03-23T22:58:03.956Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "Cleon" ] }, - "Glossary/Clausura": { - "modified": "2020-08-12T18:07:27.330Z", + "Glossary/Symbol": { + "modified": "2019-03-23T22:57:59.274Z", "contributors": [ - "l1oret" + "Cleon" ] }, - "Glossary/Clave": { - "modified": "2020-02-18T06:49:22.148Z", + "Glossary/Symmetric-key_cryptography": { + "modified": "2019-03-18T21:18:28.720Z", "contributors": [ - "joseluisq", "sergiomgm", "GCF7" ] }, - "Glossary/Codec": { - "modified": "2019-03-18T21:19:01.793Z", + "Glossary/TCP": { + "modified": "2020-12-10T12:12:08.342Z", "contributors": [ - "diegorhs" + "ojgarciab", + "itrjwyss", + "DaniNz" ] }, - "Glossary/Compile": { - "modified": "2019-03-18T21:19:15.661Z", + "Glossary/Tag": { + "modified": "2020-05-04T10:24:41.308Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "jorgeCaster", + "DaniNz" ] }, - "Glossary/Computer_Programming": { - "modified": "2019-03-23T22:02:08.531Z", + "Glossary/Three_js": { + "modified": "2020-11-09T17:44:33.436Z", "contributors": [ - "israel-munoz" + "Plumas" ] }, - "Glossary/Constante": { - "modified": "2019-03-18T21:19:15.794Z", + "Glossary/Truthy": { + "modified": "2019-03-18T21:45:50.903Z", "contributors": [ - "PabloDeTorre" + "AlePerez92", + "VlixesItaca", + "juandata" ] }, - "Glossary/Constructor": { - "modified": "2019-03-23T22:15:36.356Z", - "contributors": [ - "untilbit", - "gparra989" - ] - }, - "Glossary/Cookie": { - "modified": "2019-03-18T21:19:00.075Z", + "Glossary/Type": { + "modified": "2019-03-18T21:19:01.358Z", "contributors": [ - "diegorhs" + "PabloDeTorre" ] }, - "Glossary/Copyleft": { - "modified": "2019-03-18T21:43:43.180Z", + "Glossary/URI": { + "modified": "2019-03-18T21:33:53.970Z", "contributors": [ - "ferlopezcarr" + "DaniNz" ] }, - "Glossary/Criptoanálisis": { - "modified": "2019-03-18T21:18:36.783Z", + "Glossary/URL": { + "modified": "2020-09-05T02:39:54.712Z", "contributors": [ - "sergiomgm", - "GCF7" + "Nachec", + "BubuAnabelas", + "Jabi" ] }, - "Glossary/Criptografía": { - "modified": "2019-03-23T22:02:58.447Z", + "Glossary/UTF-8": { + "modified": "2020-08-28T17:54:39.004Z", "contributors": [ - "velizluisma" + "Nachec", + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/Cross-site_scripting": { - "modified": "2020-04-13T08:31:08.536Z", + "Glossary/UX": { + "modified": "2020-11-10T01:47:49.876Z", "contributors": [ - "Luiggy", - "qwerty726" + "rockoldo" ] }, - "Glossary/DOM": { - "modified": "2019-03-18T21:10:52.251Z", + "Glossary/Unicode": { + "modified": "2020-08-28T17:48:20.454Z", "contributors": [ - "ChrisMHM", - "PabloDeTorre", - "vinyetcg", - "ferlopezcarr", - "HerberWest" + "Nachec" ] }, - "Glossary/DTD": { - "modified": "2019-01-17T00:20:06.485Z", + "Glossary/Variable": { + "modified": "2020-09-01T08:00:19.523Z", "contributors": [ - "wilfridoSantos" + "Nachec", + "Oscarloray" ] }, - "Glossary/Descifrado": { - "modified": "2019-03-18T21:19:11.476Z", + "Glossary/Vendor_Prefix": { + "modified": "2019-03-18T21:21:31.446Z", "contributors": [ - "sergiomgm", - "GCF7" + "Carlos_Gutierrez" ] }, - "Glossary/Doctype": { - "modified": "2019-03-23T22:07:28.155Z", + "Glossary/Viewport": { + "modified": "2019-07-22T14:35:59.639Z", "contributors": [ - "omertafox" + "EBregains", + "ffcc" ] }, - "Glossary/Domain": { - "modified": "2019-03-18T21:19:17.838Z", + "Glossary/WCAG": { + "modified": "2019-03-18T21:19:06.839Z", "contributors": [ "PabloDeTorre" ] }, - "Glossary/Dynamic_programming_language": { - "modified": "2020-09-12T18:21:07.076Z", + "Glossary/WHATWG": { + "modified": "2019-03-18T21:43:10.212Z", "contributors": [ - "IsraFloores", - "DaniNz" + "cawilff" ] }, - "Glossary/ECMAScript": { - "modified": "2020-08-31T05:49:16.882Z", + "Glossary/WebKit": { + "modified": "2019-03-18T21:43:49.861Z", "contributors": [ - "Nachec", - "anaturrillo", - "Cleon" + "ferlopezcarr" ] }, - "Glossary/Element": { - "modified": "2019-03-18T21:31:18.857Z", + "Glossary/WebSockets": { + "modified": "2019-03-23T22:10:09.047Z", "contributors": [ - "eddieurbina", - "carllewisc" + "spachecojimenez" ] }, - "Glossary/Empty_element": { - "modified": "2019-03-23T22:10:52.378Z", + "Glossary/WebVTT": { + "modified": "2020-08-13T17:05:43.218Z", "contributors": [ - "juanmmendez", - "DaniNz" + "Pablo-No" ] }, - "Glossary/Encapsulation": { - "modified": "2019-03-18T21:19:13.092Z", + "Glossary/World_Wide_Web": { + "modified": "2020-07-07T13:22:38.798Z", "contributors": [ - "PabloDeTorre" + "pauli.rodriguez.c", + "camsa", + "SphinxKnight", + "r2cris", + "sergio_p_d" ] }, - "Glossary/Encriptación": { - "modified": "2019-03-18T21:19:07.209Z", + "Glossary/Wrapper": { + "modified": "2019-03-18T21:18:59.254Z", "contributors": [ "PabloDeTorre", - "carlosCharlie", - "sergiomgm" + "carlosCharlie" ] }, - "Glossary/Entidad": { - "modified": "2020-07-08T14:34:06.256Z", + "Glossary/XML": { + "modified": "2019-03-18T21:43:43.021Z", "contributors": [ - "lucasreta" + "ferlopezcarr" ] }, - "Glossary/Espacio_en_blanco": { - "modified": "2020-08-24T04:59:10.953Z", + "Glossary/application_context": { + "modified": "2019-03-23T22:22:51.795Z", "contributors": [ - "Nachec" + "ekros" ] }, - "Glossary/Estructura_de_datos": { - "modified": "2019-03-18T21:24:31.453Z", + "Glossary/cacheable": { + "modified": "2019-10-03T19:16:28.937Z", "contributors": [ - "edsonv" + "htmike" ] }, - "Glossary/FPS": { - "modified": "2020-08-19T14:42:01.823Z", + "Glossary/challenge": { + "modified": "2019-03-23T22:03:38.845Z", "contributors": [ - "ianaya89" + "_deiberchacon" ] }, - "Glossary/FTP": { - "modified": "2020-06-22T03:59:10.085Z", + "Glossary/character_encoding": { + "modified": "2019-03-18T21:19:17.489Z", "contributors": [ - "Maose" + "PabloDeTorre", + "carlosCharlie" ] }, - "Glossary/Flex": { - "modified": "2020-10-03T01:09:13.365Z", + "Glossary/compile_time": { + "modified": "2020-12-05T08:34:39.507Z", "contributors": [ - "duduindo", - "FlashAmarillo" + "StripTM" ] }, - "Glossary/Flex_Container": { - "modified": "2019-11-21T16:42:31.273Z", + "Glossary/event": { + "modified": "2019-03-18T21:19:03.177Z", "contributors": [ - "scaloner" + "PabloDeTorre" ] }, - "Glossary/Flexbox": { - "modified": "2019-03-18T21:23:56.502Z", + "Glossary/gif": { + "modified": "2019-03-18T21:44:23.965Z", "contributors": [ - "danpaltor", - "ericksonespejo" + "lajaso", + "ferlopezcarr" ] }, - "Glossary/Funcion_de_primera_clase": { - "modified": "2020-05-14T19:36:29.513Z", + "Glossary/https": { + "modified": "2019-03-18T21:20:16.521Z", "contributors": [ - "l1oret", - "hmorv", - "LaloHao" + "mikelmg", + "BubuAnabelas" ] }, - "Glossary/Función": { - "modified": "2019-03-18T21:19:19.995Z", + "Glossary/jQuery": { + "modified": "2019-03-23T22:02:49.153Z", "contributors": [ - "PabloDeTorre" + "yancarq", + "velizluisma" ] }, - "Glossary/GPL": { - "modified": "2019-03-18T21:43:50.897Z", + "Glossary/jpeg": { + "modified": "2019-03-23T22:15:35.380Z", "contributors": [ - "ferlopezcarr" + "gparra989" ] }, - "Glossary/Git": { - "modified": "2019-03-18T21:19:20.412Z", + "Glossary/undefined": { + "modified": "2019-03-23T22:58:03.590Z", "contributors": [ - "PabloDeTorre", - "sergiomgm" + "teoli", + "Cleon" ] }, - "Glossary/Google_Chrome": { - "modified": "2019-03-18T21:44:29.185Z", + "Learn": { + "modified": "2020-10-06T09:14:51.258Z", "contributors": [ - "ferlopezcarr" + "blanchart", + "Nachec", + "Maose", + "methodx", + "npcsayfail", + "GilbertoHernan", + "ivanagui2", + "svarlamov", + "clarii", + "hamfree", + "raul782", + "astrapotro", + "karlalhdz", + "sillo01", + "carlosmartinezfyd", + "carlo.romero1991", + "nelruk", + "merol-dad", + "Pablo_Ivan", + "Da_igual", + "jhapik", + "cgsramirez", + "PedroFumero", + "Yanlu", + "Jenny-T-Type", + "Jeremie" ] }, - "Glossary/Grid": { - "modified": "2019-03-23T22:10:55.372Z", + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:56.491Z", "contributors": [ - "ocamachor", - "tipoqueno", - "welm" + "adiccb", + "WilsonIsAliveClone", + "mikelmg" ] }, - "Glossary/Grid_Areas": { - "modified": "2019-03-18T21:46:28.612Z", + "Learn/Accessibility/Accessibility_troubleshooting": { + "modified": "2020-09-27T07:55:30.040Z", "contributors": [ - "tipoqueno" + "UOCccorcoles", + "adiccb" ] }, - "Glossary/Grid_Column": { - "modified": "2020-05-19T18:27:14.068Z", + "Learn/Accessibility/CSS_and_JavaScript": { + "modified": "2020-09-25T04:23:21.491Z", "contributors": [ - "biclope13", - "amaiafilo" + "UOCccorcoles" ] }, - "Glossary/Grid_Lines": { - "modified": "2019-05-27T03:46:29.561Z", + "Learn/Accessibility/HTML": { + "modified": "2020-09-24T10:25:02.383Z", "contributors": [ - "asael2" - ] - }, - "Glossary/Grid_Rows": { - "modified": "2019-03-18T21:23:35.644Z", - "contributors": [ - "Xino" + "UOCccorcoles", + "diegocastillogz", + "jeronimonunez", + "WilsonIsAliveClone" ] }, - "Glossary/HTML": { - "modified": "2020-01-23T12:51:04.156Z", + "Learn/Accessibility/Mobile": { + "modified": "2020-07-16T22:40:29.507Z", "contributors": [ - "editorUOC", - "edsonv", - "jpmontoya182", - "sergio_p_d", - "raecillacastellana" + "Adorta4", + "mikelmg" ] }, - "Glossary/HTML5": { - "modified": "2020-06-22T04:32:17.508Z", + "Learn/CSS": { + "modified": "2020-07-16T22:25:33.047Z", "contributors": [ - "Maose" + "welm", + "javierpolit", + "TomatoSenpai", + "andrpueb", + "Aglezabad", + "RaulHernandez" ] }, - "Glossary/HTTP": { - "modified": "2019-07-01T03:11:50.434Z", + "Learn/CSS/Building_blocks": { + "modified": "2020-10-02T00:43:44.395Z", "contributors": [ + "johanfvn", + "capitanzealot", + "Enesimus", "SphinxKnight", - "unaivalle", - "sdelrio", - "sergio_p_d" + "inwm", + "edixonMoreno", + "rayrojas", + "chrisdavidmills" ] }, - "Glossary/Head": { - "modified": "2020-06-22T04:54:37.023Z", + "Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2020-09-14T09:45:44.143Z", "contributors": [ - "Maose" + "UOCccorcoles", + "editorUOC", + "chrisdavidmills", + "otheym", + "wbamberg", + "IXTRUnai" ] }, - "Glossary/Hilo_principal": { - "modified": "2020-03-12T06:05:36.693Z", + "Learn/CSS/CSS_layout": { + "modified": "2020-07-31T15:01:33.453Z", "contributors": [ - "elimperiodelaweb" + "AndrewSKV", + "untilbit", + "pantuflo", + "chrisdavidmills" ] }, - "Glossary/Hoisting": { - "modified": "2019-05-15T21:40:52.256Z", + "Learn/CSS/CSS_layout/Flexbox": { + "modified": "2020-09-15T16:36:01.723Z", "contributors": [ - "jevvilla", - "IsaacAaron", - "sminutoli" + "UOCccorcoles", + "nachopo", + "chrisdavidmills", + "editorUOC", + "facundogqr", + "felixgomez", + "LuisL", + "amaiafilo", + "spachecojimenez" ] }, - "Glossary/Host": { - "modified": "2020-12-10T07:42:38.267Z", + "Learn/CSS/CSS_layout/Floats": { + "modified": "2020-10-16T12:52:48.804Z", "contributors": [ - "ojgarciab" + "zuruckzugehen", + "chrisdavidmills" ] }, - "Glossary/Hyperlink": { - "modified": "2019-03-18T21:44:07.373Z", + "Learn/CSS/CSS_layout/Grids": { + "modified": "2020-07-16T22:26:58.625Z", "contributors": [ - "ferlopezcarr" + "editorUOC", + "chrisdavidmills", + "Luis_Calvo" ] }, - "Glossary/Hypertext": { - "modified": "2019-03-18T21:30:26.239Z", + "Learn/CSS/CSS_layout/Positioning": { + "modified": "2020-07-16T22:26:42.380Z", "contributors": [ - "12g" + "fr3dth" ] }, - "Glossary/IDE": { - "modified": "2019-03-18T21:18:59.913Z", + "Learn/CSS/First_steps": { + "modified": "2020-07-16T22:27:38.921Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "GiuMagnani", + "Enesimus", + "cinthylli", + "BiP00", + "jesquintero" ] }, - "Glossary/IIFE": { - "modified": "2019-03-18T20:50:02.318Z", + "Learn/CSS/Styling_text": { + "modified": "2020-07-16T22:25:57.799Z", "contributors": [ - "danyparc", - "Efrain", - "bluesky11117", - "emorc" + "laatcode", + "wilton-cruz" ] }, - "Glossary/IP_Address": { - "modified": "2020-06-22T03:38:12.516Z", + "Learn/CSS/Styling_text/Fundamentals": { + "modified": "2020-09-18T08:01:18.738Z", "contributors": [ - "Maose" + "UOCccorcoles", + "editorUOC", + "laatcode", + "joseanpg" ] }, - "Glossary/IPv6": { - "modified": "2020-06-03T01:33:08.312Z", + "Learn/CSS/Styling_text/Styling_links": { + "modified": "2020-09-18T08:20:17.759Z", "contributors": [ - "geryescalier" + "UOCccorcoles", + "editorUOC", + "Tull666" ] }, - "Glossary/IRC": { - "modified": "2020-12-03T00:37:27.868Z", + "Learn/CSS/Styling_text/Styling_lists": { + "modified": "2020-09-01T06:14:44.024Z", "contributors": [ - "devil64-dev" + "UOCccorcoles", + "editorUOC", + "MARKO75", + "Tull666", + "laatcode", + "jmcavanzo" ] }, - "Glossary/ISP": { - "modified": "2020-06-22T04:21:55.362Z", + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:23.102Z", "contributors": [ - "Maose" + "eduardo-estrada", + "balderasric", + "soedrego", + "astrapotro", + "Miguelank", + "chrisdavidmills" ] }, - "Glossary/IU": { - "modified": "2019-03-18T21:18:49.573Z", + "Learn/Common_questions/How_does_the_Internet_work": { + "modified": "2020-09-07T00:56:10.834Z", "contributors": [ - "diegorhs" + "IsraFloores", + "Pau_Vera_S", + "Yel-Martinez-Consultor-Seo", + "Creasick", + "Tan_", + "punkyh", + "krthr", + "DaniNz" ] }, - "Glossary/Identificador": { - "modified": "2020-08-28T17:30:13.071Z", + "Learn/Common_questions/Pages_sites_servers_and_search_engines": { + "modified": "2020-07-16T22:35:39.645Z", "contributors": [ - "Nachec" + "benelliraul", + "MarcosN", + "DaniNz" ] }, - "Glossary/IndexedDB": { - "modified": "2019-03-23T22:36:07.366Z", + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.085Z", "contributors": [ - "Loque" + "Beatriz_Ortega_Valdes", + "LourFabiM", + "DaniNz" ] }, - "Glossary/Inmutable": { - "modified": "2019-03-18T21:19:12.385Z", + "Learn/Common_questions/What_are_browser_developer_tools": { + "modified": "2020-09-13T07:49:07.373Z", "contributors": [ - "PabloDeTorre" + "rockoldo", + "IsraFloores", + "Nachec", + "John19D", + "DaniNz" ] }, - "Glossary/Internet": { - "modified": "2020-04-27T00:09:14.977Z", + "Learn/Common_questions/What_are_hyperlinks": { + "modified": "2020-07-16T22:35:42.995Z", "contributors": [ - "candepineyro2015", - "r2cris", - "cawilff" + "ezzep66" ] }, - "Glossary/JSON": { - "modified": "2019-05-24T12:44:54.639Z", + "Learn/Common_questions/What_is_a_domain_name": { + "modified": "2020-07-16T22:35:43.888Z", "contributors": [ - "EstebanRK", - "chavesrdj", - "LeonardoDG" + "Beatriz_Ortega_Valdes", + "hmendezm90" ] }, - "Glossary/Java": { - "modified": "2019-03-18T21:19:11.310Z", + "Learn/Common_questions/set_up_a_local_testing_server": { + "modified": "2020-07-16T22:35:52.759Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "rjpu24", + "iseafa", + "DaniNz" ] }, - "Glossary/JavaScript": { - "modified": "2020-09-01T00:56:53.463Z", + "Learn/Getting_started_with_the_web": { + "modified": "2020-09-22T16:37:42.904Z", "contributors": [ "Nachec", - "c9009", - "missmakita", - "sergio_p_d", - "gorrotowi" + "IsraFloores", + "Enesimus", + "rodririobo", + "escalant3", + "jimmypazos", + "ingridc", + "hamfree", + "npcsayfail", + "BrodaNoel", + "israel-munoz", + "Da_igual", + "welm", + "Diio", + "darbalma", + "chrisdavidmills" ] }, - "Glossary/Keyword": { - "modified": "2020-05-04T10:31:29.902Z", + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-11-10T20:04:05.272Z", "contributors": [ - "jorgeCaster", - "blanchart", - "DaniNz" - ] - }, - "Glossary/LGPL": { - "modified": "2019-03-18T21:43:48.377Z", - "contributors": [ - "ferlopezcarr" + "rockoldo", + "Maose", + "JaviGonLope", + "hamfree", + "juanluis", + "montygabe", + "mamptecnocrata", + "juanqui", + "welm" ] }, - "Glossary/Long_task": { - "modified": "2020-08-08T01:38:15.029Z", + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-12-10T12:30:46.714Z", "contributors": [ - "Nachec" + "ojgarciab", + "SphinxKnight", + "cesarmolina.sdb", + "egonzalez", + "Maose", + "Axes", + "NataliaCba", + "Armando-Cruz", + "hamfree", + "BrodaNoel", + "PhantomDemon", + "DaniNz", + "SandraMoreH", + "HeberRojo", + "welm", + "JoaquinBedoian", + "Huarseral" ] }, - "Glossary/MVC": { - "modified": "2020-01-31T17:55:57.978Z", + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-08-17T06:23:11.691Z", "contributors": [ - "deit", - "IsaacAlvrt" + "Nachec", + "Enesimus", + "Maose", + "John19D", + "yavemu", + "pablopennisi", + "Sergio_Gonzalez_Collado", + "hamfree", + "Bluterg", + "jpmontoya182", + "sillo01", + "lfrasae", + "bartolocarrasco", + "nhuamani", + "ricardormeza", + "fcojgodoy", + "soulminato", + "chech", + "juanqui", + "RaulHernandez", + "joelomar", + "welm", + "derplak", + "sin_nombre365", + "germanfr", + "cgsramirez", + "nekludov" ] }, - "Glossary/Metadato": { - "modified": "2019-03-18T21:19:04.572Z", + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-11-11T14:35:28.910Z", "contributors": [ - "PabloDeTorre" + "Yuunichi", + "Maose", + "IrwinAcosta", + "rjpu24", + "ingridc", + "binariosistemas", + "emermao", + "Michelangeur", + "javierdelpino", + "krthr", + "DaniNz", + "Rivo23", + "alexguerrero", + "MaurooRen", + "Da_igual", + "welm", + "Yadira" ] }, - "Glossary/MitM": { - "modified": "2019-03-18T21:25:35.556Z", + "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { + "modified": "2020-09-22T18:59:15.940Z", "contributors": [ - "lcastrosaez" + "Nachec", + "Maose", + "jimmy_ml", + "NataliaCba", + "vact", + "israel-munoz", + "DaniNz", + "7eacemaker", + "mads0306", + "Da_igual", + "Davixe", + "Chrixos", + "diazwatson", + "omar.fiscal" ] }, - "Glossary/Mixin": { - "modified": "2019-03-23T22:37:38.011Z", + "Learn/HTML": { + "modified": "2020-12-10T12:33:09.889Z", "contributors": [ - "josepaez2", - "raecillacastellana", - "kramery" + "ojgarciab", + "Nachec", + "Enesimus", + "mppfiles", + "titox", + "patoezequiel", + "mitodamabra", + "crispragmatico", + "chancherokerido", + "Athene2RM", + "Alejandra.B", + "welm", + "jpazos" ] }, - "Glossary/Mobile_First": { - "modified": "2019-07-02T17:22:58.448Z", + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-08-08T01:15:36.731Z", "contributors": [ - "JuanMaRuiz" + "Nachec", + "Loba25", + "emibena75", + "tomandech", + "rayrojas", + "SphinxKnight", + "rickygutim", + "luchiano199", + "jonasmreza", + "vHarz", + "hell0h0la", + "J0rgeMG", + "yarochewsky" ] }, - "Glossary/Mozilla_Firefox": { - "modified": "2019-03-23T22:06:36.476Z", + "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": { + "modified": "2020-08-13T15:11:41.992Z", "contributors": [ - "BrodaNoel" + "JuanMejia" ] }, - "Glossary/Método": { - "modified": "2020-07-21T21:37:11.109Z", + "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": { + "modified": "2020-09-01T08:06:52.329Z", "contributors": [ - "Assael02", - "Davids-Devel" + "UOCccorcoles", + "jmalsar", + "editorUOC", + "ccorcoles", + "acvidelaa", + "BubuAnabelas", + "Alpha3-Developer", + "Makinita", + "Parziva_1", + "luchiano199", + "calvearc", + "soedrego", + "JuniorBO", + "JoseCuestas" ] }, - "Glossary/Node": { - "modified": "2019-05-17T13:24:16.608Z", + "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": { + "modified": "2020-07-16T22:25:06.606Z", "contributors": [ - "GUEROZ", - "untilbit", - "klez" + "Loba25", + "henardemiguel" ] }, - "Glossary/Node.js": { - "modified": "2020-10-24T17:01:45.516Z", + "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": { + "modified": "2020-07-16T22:25:00.943Z", "contributors": [ - "oism28", - "rlopezAyala", - "malonson", - "migdonio1" + "Ismael_Diaz", + "cinthylli", + "duduindo", + "soedrego", + "luchiano199", + "SphinxKnight", + "dylanroman03" ] }, - "Glossary/Node/DOM": { - "modified": "2019-03-23T22:27:35.877Z", + "Learn/HTML/Multimedia_and_embedding/Responsive_images": { + "modified": "2020-11-02T15:27:00.386Z", "contributors": [ - "malonson" + "Daniel_Martin", + "LuisCA", + "baumannzone", + "JuanMejia", + "lucasan", + "pipe01", + "sebaLinares", + "kuntur-studio", + "iiegor", + "malonson", + "javierarcheni", + "alexuy51", + "SigridMonsalve", + "arnoldobr", + "anfuca" ] }, - "Glossary/Nombre_de_dominio": { - "modified": "2019-03-18T21:19:21.120Z", + "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2020-12-07T13:00:58.885Z", "contributors": [ - "PabloDeTorre" + "occu29", + "Leiner.lop", + "pabdani", + "Enesimus", + "soedrego", + "jesusgirao", + "acvidelaa", + "rayrojas" ] }, - "Glossary/Nombre_de_encabezado_prohibido": { - "modified": "2019-03-23T22:02:11.147Z", + "Learn/JavaScript": { + "modified": "2020-08-08T12:13:32.547Z", "contributors": [ - "Luiggy", - "tonialfaro" + "Nachec", + "chrisdavidmills", + "NavetsArev", + "ivanagui2", + "Makinita", + "hamfree", + "tonymedrano", + "0sc4rR4v3l0" ] }, - "Glossary/Null": { - "modified": "2019-03-23T22:58:02.167Z", + "Learn/JavaScript/Asynchronous": { + "modified": "2020-08-07T20:26:22.020Z", "contributors": [ - "Cleon" + "Nachec", + "PatoDeTuring", + "duduindo", + "madmaxdios" ] }, - "Glossary/Numero": { - "modified": "2019-03-23T22:58:03.851Z", + "Learn/JavaScript/Asynchronous/Async_await": { + "modified": "2020-11-12T21:09:30.375Z", "contributors": [ - "Cleon" + "sargentogato", + "oscartzgz", + "SphinxKnight" ] }, - "Glossary/OOP": { - "modified": "2019-03-18T21:19:20.278Z", - "contributors": [ - "PabloDeTorre", - "carlosCharlie" - ] - }, - "Glossary/Objecto": { - "modified": "2019-03-23T22:58:05.221Z", + "Learn/JavaScript/Asynchronous/Concepts": { + "modified": "2020-11-19T20:30:13.091Z", "contributors": [ - "Cleon" + "AndresSalomon1990", + "marcusdesantis" ] }, - "Glossary/Operador": { - "modified": "2019-03-23T22:53:20.989Z", + "Learn/JavaScript/Building_blocks": { + "modified": "2020-07-17T01:46:33.034Z", "contributors": [ - "germanfr" + "Enesimus", + "InmobAli", + "rodririobo", + "josecampo", + "ivanagui2", + "ldeth", + "Makinita", + "jhonattanbenitez", + "Sergio_Gonzalez_Collado", + "Michelangeur", + "Elicar", + "chrisdavidmills" ] }, - "Glossary/Operando": { - "modified": "2020-09-05T17:33:42.415Z", + "Learn/JavaScript/Building_blocks/Functions": { + "modified": "2020-10-10T22:09:39.322Z", "contributors": [ - "brayan-orellanos" + "GianGuerra", + "pmusetti", + "pablorebora", + "blanchart", + "Alessa", + "DanielAgustinTradito" ] }, - "Glossary/PHP": { - "modified": "2020-05-07T14:37:16.100Z", + "Learn/JavaScript/Building_blocks/Return_values": { + "modified": "2020-07-17T01:43:24.262Z", "contributors": [ - "pascual143" + "Enesimus", + "EnekoOdoo" ] }, - "Glossary/POP": { - "modified": "2020-04-18T03:21:04.687Z", + "Learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-11-28T22:20:55.059Z", "contributors": [ - "itrjwyss" + "willian593", + "Enesimus", + "InmobAli", + "BorisQF", + "markosaav", + "Atabord", + "jhonattanbenitez" ] }, - "Glossary/Parse": { - "modified": "2020-12-05T08:25:54.330Z", + "Learn/JavaScript/Client-side_web_APIs": { + "modified": "2020-07-16T22:32:38.714Z", "contributors": [ - "StripTM" + "rayrojas", + "FedeRacun", + "dvincent" ] }, - "Glossary/Pila_llamadas": { - "modified": "2020-04-26T12:00:35.332Z", + "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": { + "modified": "2020-09-22T05:14:27.901Z", "contributors": [ - "l1oret" + "Nachec", + "Enesimus" ] }, - "Glossary/Polyfill": { - "modified": "2019-03-18T21:24:24.118Z", + "Learn/JavaScript/Client-side_web_APIs/Fetching_data": { + "modified": "2020-07-16T22:32:57.121Z", "contributors": [ - "viabadia" + "Dsabillon" ] }, - "Glossary/Port": { - "modified": "2020-04-18T03:24:57.722Z", + "Learn/JavaScript/First_steps": { + "modified": "2020-09-22T14:49:32.194Z", "contributors": [ - "itrjwyss", - "malonson" + "Nachec", + "IsraFloores", + "mvuljevas", + "Mario-new", + "lalaggv2", + "rodrigocruz13", + "antonygiomarx", + "rickygutim", + "ivanagui2", + "EliasMCaja", + "Creasick", + "Aussith_9NT", + "sergioqa123", + "RayPL", + "ernestomr", + "eliud-c-delgado", + "chrisdavidmills" ] }, - "Glossary/Preflight_peticion": { - "modified": "2019-03-18T21:29:47.773Z", + "Learn/JavaScript/First_steps/A_first_splash": { + "modified": "2020-08-09T09:51:52.684Z", "contributors": [ - "daviddelamo" + "Nachec", + "zgreco2000", + "Enesimus", + "jacobo.delgado", + "xisco", + "Creasick", + "JaviMartain", + "Alfacoy", + "bosspetta", + "NataliaCba", + "arnaldop10", + "recortes", + "Darkiring", + "oscarkb24", + "roberbnd", + "joosemi02" ] }, - "Glossary/Preprocesador_CSS": { - "modified": "2019-03-23T22:02:54.782Z", + "Learn/JavaScript/First_steps/Arrays": { + "modified": "2020-07-16T22:30:53.191Z", "contributors": [ - "ealch", - "velizluisma" + "InmobAli", + "amIsmael", + "Creasick", + "DaniNz" ] }, - "Glossary/Primitivo": { - "modified": "2020-09-17T22:06:17.504Z", + "Learn/JavaScript/First_steps/Strings": { + "modified": "2020-09-06T21:18:25.448Z", "contributors": [ + "brayan-orellanos", "Nachec", - "cocososo", - "abaracedo", - "Cleon" + "Enesimus", + "keskyle17", + "wajari", + "Ale87GG", + "Creasick", + "malonson", + "punkcuadecuc" ] }, - "Glossary/Progressive_Enhancement": { - "modified": "2019-07-07T08:35:50.920Z", + "Learn/JavaScript/First_steps/Test_your_skills:_Math": { + "modified": "2020-10-27T13:03:04.825Z", "contributors": [ - "JuanMaRuiz" + "mediodepan", + "FabianBeltran96", + "syntaxter" ] }, - "Glossary/Promise": { - "modified": "2019-03-18T21:18:47.852Z", + "Learn/JavaScript/First_steps/Test_your_skills:_variables": { + "modified": "2020-09-05T01:09:05.732Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "FabianBeltran96", + "Nachec" ] }, - "Glossary/Protocol": { - "modified": "2020-12-10T11:56:54.768Z", + "Learn/JavaScript/First_steps/Useful_string_methods": { + "modified": "2020-10-19T12:56:16.453Z", "contributors": [ - "ojgarciab", - "Maose", - "itrjwyss", - "PabloDeTorre", - "carlosCharlie" + "chrisdavidmills", + "yeyskalyn", + "Enesimus", + "Rtf747", + "InmobAli", + "keskyle17", + "enekate", + "Creasick", + "DaniNz" ] }, - "Glossary/Prototype": { - "modified": "2019-03-28T18:50:47.544Z", + "Learn/JavaScript/First_steps/Variables": { + "modified": "2020-08-22T08:01:38.443Z", "contributors": [ - "maruskina" + "Nachec", + "Enesimus", + "jacobo.delgado", + "pmusetti", + "keskyle17", + "amIsmael", + "enekate", + "xisco", + "Creasick", + "TheJarX", + "hchelbat", + "JaviMartain", + "Dhelarius" ] }, - "Glossary/Prototype-based_programming": { - "modified": "2020-08-25T19:45:44.389Z", + "Learn/JavaScript/First_steps/What_went_wrong": { + "modified": "2020-08-10T05:39:33.652Z", "contributors": [ - "duduindo", - "paolazaratem" + "Nachec", + "Enesimus", + "CarlesBou", + "enekate", + "amIsmael", + "xisco", + "mamjerez", + "Creasick", + "Alfacoy", + "NataliaCba", + "esencialinux" ] }, - "Glossary/Pseudo-clase": { - "modified": "2019-03-23T22:38:49.143Z", + "Learn/JavaScript/Howto": { + "modified": "2020-07-16T22:33:09.029Z", "contributors": [ - "VictorAbdon" + "FelipeAndrade" ] }, - "Glossary/Pseudocódigo": { - "modified": "2019-03-18T21:19:15.497Z", + "Learn/JavaScript/Objects": { + "modified": "2020-11-12T18:14:51.703Z", "contributors": [ - "PabloDeTorre" + "alejandro.fca", + "pablojp", + "ivanagui2", + "clarii", + "Irwin1985", + "jsanpedror", + "blaipas", + "Tzikin100", + "edu1464", + "chrisdavidmills" ] }, - "Glossary/Public-key_cryptography": { - "modified": "2019-03-18T21:18:41.396Z", + "Learn/JavaScript/Objects/Adding_bouncing_balls_features": { + "modified": "2020-07-16T22:32:34.341Z", "contributors": [ - "GCF7" + "Enesimus", + "serarroy", + "carlosgocereceda" ] }, - "Glossary/Python": { - "modified": "2019-01-17T03:26:06.615Z", + "Learn/JavaScript/Objects/Basics": { + "modified": "2020-08-08T03:12:26.699Z", "contributors": [ - "Guzmanr1", - "ax16mr" + "Nachec", + "Fernando-Funes", + "pmusetti", + "ivanagui2", + "djdouta", + "seba2305", + "B1tF8er", + "kevin-loal98" ] }, - "Glossary/REST": { - "modified": "2019-03-18T21:19:06.376Z", - "contributors": [ - "PabloDeTorre", - "carlosCharlie" - ] - }, - "Glossary/RGB": { - "modified": "2019-03-18T21:19:01.657Z", + "Learn/JavaScript/Objects/Inheritance": { + "modified": "2020-07-28T01:53:21.821Z", "contributors": [ - "PabloDeTorre" + "Fernando-Funes", + "darkarth80", + "ivanagui2", + "cvillafraz", + "Adrian-Cuellar", + "B1tF8er" ] }, - "Glossary/RSS": { - "modified": "2019-03-18T21:43:45.312Z", + "Learn/JavaScript/Objects/JSON": { + "modified": "2020-07-16T22:32:24.819Z", "contributors": [ - "ferlopezcarr" + "jorgeCaster", + "pmiranda-geo", + "Enesimus" ] }, - "Glossary/Recursión": { - "modified": "2019-03-18T21:19:02.064Z", + "Learn/JavaScript/Objects/Object-oriented_JS": { + "modified": "2020-08-08T09:41:13.386Z", "contributors": [ - "PabloDeTorre", - "sergiomgm" + "Nachec", + "andyesp", + "Fernando-Funes", + "jhonarielgj", + "rimbener", + "ReneAG", + "EnekoOdoo", + "ivanagui2", + "cristianmarquezp", + "djdouta", + "paulaco", + "martinGerez", + "anyruizd", + "Michelangeur" ] }, - "Glossary/Reflow": { - "modified": "2020-11-16T21:27:00.470Z", + "Learn/JavaScript/Objects/Object_prototypes": { + "modified": "2020-11-22T14:56:33.662Z", "contributors": [ - "ccamiloo" + "VictoriaRamirezCharles", + "TextC0de", + "Cesaraugp", + "Fernando-Funes", + "joooni1998", + "kevin_Luna", + "asamajamasa", + "ddavalos", + "JuanMaRuiz", + "ivanagui2", + "salpreh", + "djangoJosele" ] }, - "Glossary/Regular_expression": { - "modified": "2019-03-23T22:27:50.421Z", + "Learn/Performance": { + "modified": "2020-07-16T22:40:38.336Z", "contributors": [ - "lurkinboss81", - "malonson" + "mikelmg" ] }, - "Glossary/Responsive_web_design": { - "modified": "2019-03-18T21:36:04.998Z", + "Learn/Server-side": { + "modified": "2020-07-16T22:35:56.070Z", "contributors": [ - "lajaso" + "davidenriq11", + "javierdelpino", + "IXTRUnai" ] }, - "Glossary/Ruby": { - "modified": "2019-03-18T21:18:51.137Z", + "Learn/Server-side/Django": { + "modified": "2020-07-16T22:36:31.705Z", "contributors": [ - "diegorhs" + "jlpb97", + "javierdelpino", + "oscvic", + "faustinoloeza" ] }, - "Glossary/SCV": { - "modified": "2019-03-18T21:19:21.440Z", + "Learn/Server-side/Django/Admin_site": { + "modified": "2020-07-16T22:37:02.726Z", "contributors": [ - "carlosCharlie", - "sergiomgm" + "ricardo-soria", + "cristianaguilarvelozo", + "SgtSteiner", + "javierdelpino" ] }, - "Glossary/SEO": { - "modified": "2019-03-23T22:38:01.994Z", + "Learn/Server-side/Django/Authentication": { + "modified": "2020-07-29T13:34:31.552Z", "contributors": [ - "carlossuarez" + "rayrojas", + "quijot", + "gatopadre", + "zelkovar", + "cbayonao", + "DTaiD", + "Carlosmgs111", + "ricardo-soria", + "GankerDev", + "javierdelpino" ] }, - "Glossary/SGML": { - "modified": "2019-03-18T21:43:11.251Z", + "Learn/Server-side/Django/Deployment": { + "modified": "2020-09-29T05:31:27.175Z", "contributors": [ - "Undigon", - "cawilff" + "chrisdavidmills", + "LIBIDORI", + "taponato", + "joanvasa", + "banideus", + "LUISCR", + "ricardo-soria", + "javierdelpino" ] }, - "Glossary/SIMD": { - "modified": "2019-03-18T21:18:44.939Z", + "Learn/Server-side/Django/Forms": { + "modified": "2020-09-03T20:14:00.959Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "FoulMangoPY", + "joserojas1270", + "panpy-web", + "taponato", + "gatopadre", + "gt67ma", + "soberanes", + "ricardo-soria", + "boleklolek", + "SgtSteiner", + "javierdelpino" ] }, - "Glossary/SISD": { - "modified": "2019-03-18T21:18:56.313Z", + "Learn/Server-side/Django/Generic_views": { + "modified": "2020-07-16T22:37:14.516Z", "contributors": [ - "carlosCharlie" + "ricardo-soria", + "javierdelpino" ] }, - "Glossary/SLD": { - "modified": "2019-04-30T13:59:51.577Z", + "Learn/Server-side/Django/Home_page": { + "modified": "2020-07-16T22:37:08.036Z", "contributors": [ - "manfredosanchez" + "dr2d4", + "MatiasJAco", + "ricardo-soria", + "cristianaguilarvelozo", + "AnPlandolit", + "javierdelpino" ] }, - "Glossary/SMTP": { - "modified": "2020-04-18T03:31:14.904Z", + "Learn/Server-side/Django/Models": { + "modified": "2020-08-27T11:46:51.559Z", "contributors": [ - "itrjwyss" + "FoulMangoPY", + "dr2d4", + "Kalisto", + "cuantosoft", + "cruzito626", + "ricardo-soria", + "CristianFonseca03", + "cristianaguilarvelozo", + "iehurtado", + "SgtSteiner", + "javierdelpino", + "Panchosama", + "MatiMateo" ] }, - "Glossary/SQL": { - "modified": "2019-03-18T21:18:56.658Z", + "Learn/Server-side/Django/Sessions": { + "modified": "2020-09-02T12:56:54.473Z", "contributors": [ - "diegorhs" + "FoulMangoPY", + "franpandol", + "ricardo-soria", + "tonyrodrigues", + "javierdelpino" ] }, - "Glossary/SVG": { - "modified": "2019-03-18T21:35:52.789Z", + "Learn/Server-side/Django/Testing": { + "modified": "2020-11-25T15:32:01.505Z", "contributors": [ - "lajaso" + "JanoVZ", + "joserojas1270", + "rayrojas", + "julyaann", + "ferxohn", + "ricardo-soria", + "R4v3n15", + "javierdelpino" ] }, - "Glossary/SVN": { - "modified": "2019-03-18T21:19:01.509Z", + "Learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-07-16T22:36:48.653Z", "contributors": [ - "PabloDeTorre" + "dr2d4", + "jfpIE16", + "ricardo-soria", + "javierdelpino" ] }, - "Glossary/Scope": { - "modified": "2019-07-02T17:59:48.762Z", + "Learn/Server-side/Django/development_environment": { + "modified": "2020-07-16T22:36:43.747Z", "contributors": [ - "Angel10050" + "sign4l", + "cruzito626", + "ricardo-soria", + "javierdelpino" ] }, - "Glossary/Sentencias": { - "modified": "2019-03-23T22:57:58.260Z", + "Learn/Server-side/Django/django_assessment_blog": { + "modified": "2020-07-16T22:37:48.773Z", "contributors": [ - "abaracedo", - "Cleon" + "ricardo-soria", + "matiexe", + "javierdelpino" ] }, - "Glossary/Sincronico": { - "modified": "2020-11-14T06:15:42.366Z", + "Learn/Server-side/Django/skeleton_website": { + "modified": "2020-07-16T22:36:52.017Z", "contributors": [ - "Yuunichi" + "dr2d4", + "cuantosoft", + "gozarrojas", + "ricardo-soria", + "javierdelpino" ] }, - "Glossary/Sistema_gestion_contenidos": { - "modified": "2020-05-23T07:15:12.062Z", + "Learn/Server-side/Django/web_application_security": { + "modified": "2020-07-16T22:37:45.102Z", "contributors": [ - "l1oret" + "sebastianmr6", + "ricardo-soria", + "javierdelpino" ] }, - "Glossary/Sloppy_mode": { - "modified": "2020-08-31T05:32:49.321Z", + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:51.529Z", "contributors": [ - "Nachec", - "dcarmal-dayvo" + "GUEROZ", + "deit", + "rmon_vfer", + "sergiodiezdepedro", + "javierdelpino", + "sergionunez" ] }, - "Glossary/Slug": { - "modified": "2019-03-18T21:43:51.297Z", + "Learn/Server-side/Express_Nodejs/Introduction": { + "modified": "2020-07-16T22:38:09.037Z", "contributors": [ - "LSanchez697" + "evaferreira", + "threevanny", + "hernanfloresramirez1987", + "jorgesqm95", + "GUEROZ", + "Slb-Sbsz", + "tec.josec", + "crisaragon", + "Sergio_Gonzalez_Collado", + "fedechiappero", + "RigobertoUlloa", + "javierdelpino", + "SphinxKnight" ] }, - "Glossary/String": { - "modified": "2019-03-23T22:58:03.956Z", + "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website": { + "modified": "2020-07-16T22:38:15.482Z", "contributors": [ - "Cleon" + "acasco", + "antiepoke" ] }, - "Glossary/Symbol": { - "modified": "2019-03-23T22:57:59.274Z", + "Learn/Server-side/Express_Nodejs/development_environment": { + "modified": "2020-07-16T22:37:58.161Z", "contributors": [ - "Cleon" + "sandromedina", + "threevanny", + "pajaro5", + "GUEROZ", + "maringenio" ] }, - "Glossary/Symmetric-key_cryptography": { - "modified": "2019-03-18T21:18:28.720Z", + "Learn/Server-side/Express_Nodejs/mongoose": { + "modified": "2020-07-16T22:38:20.335Z", "contributors": [ - "sergiomgm", - "GCF7" + "danimrprofe", + "rmon_vfer" ] }, - "Glossary/TCP": { - "modified": "2020-12-10T12:12:08.342Z", + "Learn/Server-side/Express_Nodejs/skeleton_website": { + "modified": "2020-07-16T22:38:03.936Z", "contributors": [ - "ojgarciab", - "itrjwyss", - "DaniNz" + "juancorbacho", + "tec.josec", + "maringenio", + "mimz2563" ] }, - "Glossary/Tag": { - "modified": "2020-05-04T10:24:41.308Z", + "Learn/Server-side/Node_server_without_framework": { + "modified": "2020-07-16T22:36:05.239Z", "contributors": [ - "jorgeCaster", - "DaniNz" + "javierdelpino" ] }, - "Glossary/TextoCifrado": { - "modified": "2019-03-18T21:19:21.003Z", + "MDN": { + "modified": "2020-07-08T14:43:57.058Z", "contributors": [ - "sergiomgm", - "GCF7" + "Maose", + "jswisher", + "SphinxKnight", + "Riszin", + "Beatriz_Ortega_Valdes", + "facufacu3789", + "wbamberg", + "0zxo", + "Jeremie", + "raecillacastellana", + "DonPrime", + "GersonLazaro", + "Arudb79", + "MauricioGil", + "Sheppy" ] }, - "Glossary/TextoSimple": { - "modified": "2019-03-18T21:19:20.138Z", + "MDN/About": { + "modified": "2020-05-03T01:47:58.469Z", "contributors": [ - "sergiomgm", - "GCF7" + "Beatriz_Ortega_Valdes", + "ecedenyo", + "wbamberg", + "jswisher", + "hecaxmmx", + "SoftwareRVG", + "Jeremie", + "carloslazaro", + "cosmesantos", + "wilo", + "LuisArt", + "sinfallas", + "maedca" ] }, - "Glossary/Three_js": { - "modified": "2020-11-09T17:44:33.436Z", + "MDN/Contribute": { + "modified": "2019-03-22T01:52:35.495Z", "contributors": [ - "Plumas" + "Beatriz_Ortega_Valdes", + "wbamberg", + "Rrxxxx", + "Ibrahim1997", + "LeoHirsch", + "MauricioGil", + "Mars" ] }, - "Glossary/Tipado_dinámico": { - "modified": "2020-05-04T14:10:14.107Z", + "MDN/Contribute/Feedback": { + "modified": "2020-12-02T14:04:57.487Z", "contributors": [ - "Caav98" + "SphinxKnight", + "abcserviki", + "chrisdavidmills", + "Rafasu", + "jswisher", + "yohanolmedo", + "alex16jpv", + "wbamberg", + "astrapotro", + "Jabi", + "Sergio_Gonzalez_Collado", + "karl_", + "MARVINFLORENTINO", + "aresth+", + "DracotMolver" ] }, - "Glossary/Tipificación_estática": { - "modified": "2019-11-22T03:17:09.186Z", + "MDN/Contribute/Getting_started": { + "modified": "2020-12-02T19:26:24.923Z", "contributors": [ - "HugolJumex" + "chrisdavidmills", + "Anibalismo", + "MIKE1203", + "gcjuan", + "clarii", + "wbamberg", + "0zxo", + "dariomaim", + "grover.velasquez", + "Primo18", + "maubarbetti", + "Arukantara", + "jsx", + "fraph", + "teoli", + "aguilaindomable", + "LeoHirsch", + "cototion" ] }, - "Glossary/Truthy": { - "modified": "2019-03-18T21:45:50.903Z", + "MDN/Contribute/Howto": { + "modified": "2019-01-16T18:56:52.965Z", "contributors": [ - "AlePerez92", - "VlixesItaca", - "juandata" + "wbamberg", + "0zxo", + "astrapotro", + "MauricioGil", + "Sheppy" ] }, - "Glossary/Type": { - "modified": "2019-03-18T21:19:01.358Z", + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T19:10:19.469Z", "contributors": [ - "PabloDeTorre" + "wbamberg", + "javierdp", + "gpadilla", + "RoxPulido", + "LeoHirsch" ] }, - "Glossary/URI": { - "modified": "2019-03-18T21:33:53.970Z", + "MDN/Contribute/Howto/Document_a_CSS_property": { + "modified": "2020-02-19T19:43:18.253Z", "contributors": [ - "DaniNz" + "jswisher", + "SphinxKnight", + "wbamberg", + "teoli", + "stephaniehobson", + "MauricioGil" ] }, - "Glossary/URL": { - "modified": "2020-09-05T02:39:54.712Z", + "MDN/Contribute/Howto/Tag": { + "modified": "2019-03-23T23:15:01.953Z", "contributors": [ - "Nachec", - "BubuAnabelas", - "Jabi" + "wbamberg", + "Creasick", + "blanchart", + "meCarrion17", + "rafamagno", + "teoli", + "PepeAntonio", + "CristianMar25", + "anmartinez", + "LeoHirsch" ] }, - "Glossary/UTF-8": { - "modified": "2020-08-28T17:54:39.004Z", + "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": { + "modified": "2019-03-23T23:09:23.417Z", "contributors": [ - "Nachec", - "PabloDeTorre", - "carlosCharlie" + "wbamberg", + "astrapotro", + "teoli", + "L_e_o" ] }, - "Glossary/UX": { - "modified": "2020-11-10T01:47:49.876Z", + "MDN/Guidelines": { + "modified": "2020-09-30T15:28:55.816Z", "contributors": [ - "rockoldo" + "chrisdavidmills", + "wbamberg", + "Jeremie", + "LeoHirsch" ] }, - "Glossary/Unicode": { - "modified": "2020-08-28T17:48:20.454Z", + "MDN/Structures": { + "modified": "2020-09-30T09:06:15.403Z", "contributors": [ - "Nachec" + "chrisdavidmills", + "wbamberg", + "jswisher" ] }, - "Glossary/Validador": { - "modified": "2019-03-18T21:19:01.934Z", + "MDN/Structures/Macros": { + "modified": "2020-09-30T09:06:16.658Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie", - "sergiomgm" + "chrisdavidmills", + "Nachec", + "wbamberg" ] }, - "Glossary/Valor": { - "modified": "2020-09-01T08:20:32.500Z", + "MDN/Structures/Macros/Commonly-used_macros": { + "modified": "2020-09-30T09:06:17.138Z", "contributors": [ + "chrisdavidmills", "Nachec" ] }, - "Glossary/Variable": { - "modified": "2020-09-01T08:00:19.523Z", + "MDN/Tools": { + "modified": "2020-09-30T16:48:18.728Z", "contributors": [ - "Nachec", - "Oscarloray" + "chrisdavidmills", + "wbamberg", + "Jeremie", + "Arudb79", + "atlas7jean" ] }, - "Glossary/Vendor_Prefix": { - "modified": "2019-03-18T21:21:31.446Z", + "Mozilla": { + "modified": "2019-01-16T13:16:23.082Z", "contributors": [ - "Carlos_Gutierrez" - ] + "cosmesantos", + "andersonvc89", + "Vladi05", + "Granpichi", + "yesypsb", + "Getachi", + "Izel" + ] }, - "Glossary/Viewport": { - "modified": "2019-07-22T14:35:59.639Z", + "Mozilla/Add-ons": { + "modified": "2019-03-18T21:08:47.524Z", "contributors": [ - "EBregains", - "ffcc" + "hecaxmmx", + "hamfree", + "Aldrin508", + "Arudb79", + "Psy", + "RaulVisa", + "LeoHirsch", + "rojo32" ] }, - "Glossary/WCAG": { - "modified": "2019-03-18T21:19:06.839Z", + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-07-18T20:39:33.007Z", "contributors": [ - "PabloDeTorre" + "hecaxmmx", + "ivanruvalcaba", + "AngelFQC", + "yuniers" ] }, - "Glossary/WHATWG": { - "modified": "2019-03-18T21:43:10.212Z", + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-05-09T20:52:57.986Z", "contributors": [ - "cawilff" + "Micronine", + "BubuAnabelas", + "chicocoulomb", + "yuniers" ] }, - "Glossary/WebKit": { - "modified": "2019-03-18T21:43:49.861Z", + "Mozilla/Add-ons/WebExtensions/API/i18n": { + "modified": "2020-10-15T21:39:41.302Z", "contributors": [ - "ferlopezcarr" + "wbamberg", + "fitojb", + "yuniers" ] }, - "Glossary/WebSockets": { - "modified": "2019-03-23T22:10:09.047Z", + "Mozilla/Add-ons/WebExtensions/API/storage": { + "modified": "2020-10-15T22:13:52.747Z", "contributors": [ - "spachecojimenez" + "SphinxKnight", + "wbamberg", + "grxdipgra" ] }, - "Glossary/WebVTT": { - "modified": "2020-08-13T17:05:43.218Z", + "Mozilla/Add-ons/WebExtensions/API/storage/local": { + "modified": "2020-10-15T22:13:52.742Z", "contributors": [ - "Pablo-No" + "wbamberg", + "grxdipgra" ] }, - "Glossary/World_Wide_Web": { - "modified": "2020-07-07T13:22:38.798Z", + "Mozilla/Add-ons/WebExtensions/API/storage/sync": { + "modified": "2020-10-15T22:13:52.602Z", "contributors": [ - "pauli.rodriguez.c", - "camsa", - "SphinxKnight", - "r2cris", - "sergio_p_d" + "wbamberg", + "grxdipgra" ] }, - "Glossary/Wrapper": { - "modified": "2019-03-18T21:18:59.254Z", + "Mozilla/Add-ons/WebExtensions/API/webNavigation": { + "modified": "2020-10-15T21:52:47.862Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "wbamberg", + "tanclony" ] }, - "Glossary/XForm": { - "modified": "2019-03-23T22:15:44.959Z", + "Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar": { + "modified": "2019-03-18T21:05:11.701Z", "contributors": [ - "gparra989" + "roberbnd" ] }, - "Glossary/XML": { - "modified": "2019-03-18T21:43:43.021Z", + "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { + "modified": "2020-10-15T20:55:02.467Z", "contributors": [ - "ferlopezcarr" + "rossc90" ] }, - "Glossary/application_context": { - "modified": "2019-03-23T22:22:51.795Z", + "Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities": { + "modified": "2019-03-23T22:45:10.191Z", "contributors": [ - "ekros" + "Nitram_G", + "yuniers" ] }, - "Glossary/cacheable": { - "modified": "2019-10-03T19:16:28.937Z", + "Mozilla/Add-ons/WebExtensions/Examples": { + "modified": "2019-03-18T21:06:01.388Z", "contributors": [ - "htmike" + "hecaxmmx" ] }, - "Glossary/challenge": { - "modified": "2019-03-23T22:03:38.845Z", + "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { + "modified": "2020-09-27T05:32:44.293Z", "contributors": [ - "_deiberchacon" + "omaralonsog" ] }, - "Glossary/character_encoding": { - "modified": "2019-03-18T21:19:17.489Z", + "Mozilla/Add-ons/WebExtensions/Implement_a_settings_page": { + "modified": "2019-03-18T21:06:46.901Z", "contributors": [ - "PabloDeTorre", - "carlosCharlie" + "SoftwareRVG" ] }, - "Glossary/coercion": { - "modified": "2020-02-29T16:57:08.213Z", + "Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests": { + "modified": "2019-03-18T21:06:03.133Z", "contributors": [ - "frankynztein" + "juanbrujo", + "regisdark", + "hecaxmmx" ] }, - "Glossary/compile_time": { - "modified": "2020-12-05T08:34:39.507Z", + "Mozilla/Add-ons/WebExtensions/Internationalization": { + "modified": "2020-06-29T22:25:32.104Z", "contributors": [ - "StripTM" + "hugojavierduran9" ] }, - "Glossary/conjunto_de_caracteres": { - "modified": "2020-08-28T18:09:05.836Z", + "Mozilla/Add-ons/WebExtensions/Modify_a_web_page": { + "modified": "2019-03-18T21:02:55.354Z", "contributors": [ - "Nachec" + "alexgilsoncampi" ] }, - "Glossary/elemento": { - "modified": "2019-01-16T19:38:18.287Z", + "Mozilla/Add-ons/WebExtensions/What_next_": { + "modified": "2019-03-18T20:43:00.251Z", "contributors": [ - "BubuAnabelas", - "HerberWest" + "chicocoulomb" ] }, - "Glossary/event": { - "modified": "2019-03-18T21:19:03.177Z", + "Mozilla/Add-ons/WebExtensions/manifest.json": { + "modified": "2020-10-15T21:39:41.879Z", "contributors": [ - "PabloDeTorre" + "wachunei", + "legomolina", + "yuniers" ] }, - "Glossary/gif": { - "modified": "2019-03-18T21:44:23.965Z", + "Mozilla/Add-ons/WebExtensions/manifest.json/icons": { + "modified": "2020-10-15T22:27:24.193Z", "contributors": [ - "lajaso", - "ferlopezcarr" + "qwerty726" ] }, - "Glossary/https": { - "modified": "2019-03-18T21:20:16.521Z", + "Mozilla/Add-ons/WebExtensions/user_interface": { + "modified": "2019-03-18T21:03:49.876Z", "contributors": [ - "mikelmg", - "BubuAnabelas" + "rebloor" ] }, - "Glossary/jQuery": { - "modified": "2019-03-23T22:02:49.153Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Page_actions": { + "modified": "2019-08-12T17:02:44.540Z", "contributors": [ - "yancarq", - "velizluisma" + "rayrojas" ] }, - "Glossary/jpeg": { - "modified": "2019-03-23T22:15:35.380Z", + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:34:39.883Z", "contributors": [ - "gparra989" + "chrisdavidmills", + "Etruscco" ] }, - "Glossary/miga-de-pan": { - "modified": "2020-02-02T10:51:21.098Z", + "Mozilla/Developer_guide/Source_Code": { + "modified": "2020-03-01T17:19:51.307Z", "contributors": [ - "blanchart" + "IngrownMink4", + "Allamc11", + "chrisdavidmills", + "jntesteves" ] }, - "Glossary/propiedad": { - "modified": "2020-08-28T18:32:40.804Z", + "Mozilla/Developer_guide/mozilla-central": { + "modified": "2019-03-18T21:11:07.718Z", "contributors": [ - "Nachec" + "duduindo", + "chrisdavidmills", + "fscholz", + "RickieesES" ] }, - "Glossary/seguro": { - "modified": "2019-03-18T21:18:23.904Z", + "Mozilla/Firefox": { + "modified": "2020-01-18T13:20:40.065Z", "contributors": [ - "SackmannDV" + "leela52452", + "SphinxKnight", + "wbamberg", + "jonasmreza", + "avelper", + "regisdark", + "AlmondCupcake", + "hecaxmmx", + "SecurityResearcher", + "Pablo_Ivan", + "Alejandro_Blanco", + "gabpull", + "nekside" ] }, - "Glossary/undefined": { - "modified": "2019-03-23T22:58:03.590Z", + "Mozilla/Firefox/Experimental_features": { + "modified": "2019-04-01T12:56:43.181Z", "contributors": [ - "teoli", - "Cleon" + "johnboy-99", + "wbamberg", + "Maletil" ] }, - "Guía_para_el_desarrollador_de_agregados_para_Firefox": { - "modified": "2019-01-16T14:29:03.747Z", + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:27:32.191Z", "contributors": [ - "teoli", - "Sheppy", - "Eloy" + "wbamberg", + "thzunder", + "Sheppy" ] }, - "Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones": { - "modified": "2019-03-24T00:04:44.724Z", + "Mozilla/Firefox/Releases/30": { + "modified": "2019-03-23T23:06:34.308Z", "contributors": [ - "christopherccg", - "Sheppy", - "Eloy" + "wbamberg", + "mrbyte007" ] }, - "Guía_para_la_migración_a_catálogo": { - "modified": "2019-01-16T15:34:19.890Z", + "Mozilla/Firefox/Releases/50": { + "modified": "2019-03-18T21:11:07.358Z", "contributors": [ - "HenryGR", - "Mgjbot" + "duduindo", + "wbamberg", + "frank-orellana", + "raiosxdxd" ] }, - "HTML/Elemento/datalist": { - "modified": "2019-01-16T19:13:20.868Z", + "Mozilla/Firefox/Releases/57": { + "modified": "2019-03-23T22:03:40.720Z", "contributors": [ - "Darkgyro", - "teoli" + "wbamberg", + "fitojb" ] }, - "HTML/Elemento/form": { - "modified": "2019-01-16T21:24:44.882Z", - "contributors": [ - "eincioch" + "Mozilla/Firefox/Releases/61": { + "modified": "2019-03-18T21:34:25.134Z", + "contributors": [ + "wbamberg", + "JoaLop" ] }, - "HTML/Elemento/section": { - "modified": "2019-03-23T23:08:59.333Z", + "Mozilla/Firefox/Releases/62": { + "modified": "2019-03-18T21:26:40.295Z", "contributors": [ - "Raulpascual2", - "carllewisc", - "GeorgeAviateur" + "laptou" ] }, - "HTML/HTML5": { - "modified": "2020-05-16T09:08:08.720Z", + "Mozilla/Firefox/Releases/63": { + "modified": "2019-03-18T21:22:18.650Z", "contributors": [ - "jonasdamher", "SphinxKnight", - "anibalymariacantantes60", - "AzulMartin", - "264531666", - "fracp", - "damianed", - "alfredotemiquel", - "rossettistone", - "carlossuarez", - "teoli", - "JosueMolina", - "Pablo_Ivan", - "welm", - "bicentenario", - "jesusruiz", - "pierre_alfonso", - "pitufo_cabron", - "cesar_ortiz_elPatox", - "inma_610", - "vigia122", - "StripTM", - "deimidis", - "Izel" + "Dev-MADJ" ] }, - "HTML/HTML5/Forms_in_HTML5": { - "modified": "2019-03-24T00:17:58.788Z", + "Mozilla/Firefox/Releases/66": { + "modified": "2019-05-09T17:56:10.878Z", "contributors": [ - "DGarCam", - "teoli", - "prieto.any", - "deibyod", - "Ces", - "hugohabel", - "deimidis" + "Smartloony" ] }, - "HTML/HTML5/Formularios_en_HTML5": { - "modified": "2019-03-24T00:07:51.068Z", + "Mozilla/Firefox/Releases/67": { + "modified": "2019-06-27T23:25:44.498Z", "contributors": [ - "inma_610", - "Izel", - "StripTM", - "deimidis" + "erickton", + "marcorichetta" ] }, - "HTML/HTML5/HTML5_Parser": { - "modified": "2019-03-24T00:07:09.448Z", + "Mozilla/Firefox/Releases/68": { + "modified": "2019-07-14T03:15:02.367Z", "contributors": [ - "teoli", - "RickieesES", - "inma_610", - "StripTM", - "juanb", - "Izel" + "Gummox" ] }, - "HTML/HTML5/HTML5_lista_elementos": { - "modified": "2020-01-21T22:36:54.135Z", + "Mozilla/Firefox/Releases/9": { + "modified": "2019-12-13T20:33:17.732Z", "contributors": [ - "losfroger", - "cocoletzimata", - "Duque61", - "raecillacastellana", - "maymaury", - "squidjam", - "on3_g" + "wbamberg", + "fscholz" ] }, - "HTML/HTML5/Introducción_a_HTML5": { - "modified": "2019-03-24T00:05:36.058Z", + "Mozilla/Firefox/Releases/9/Updating_add-ons": { + "modified": "2019-03-23T23:09:25.426Z", "contributors": [ - "teoli", - "inma_610" + "wbamberg", + "Rickatomato" ] }, - "HTML/HTML5/Validacion_de_restricciones": { - "modified": "2020-08-11T08:06:04.309Z", + "Tools": { + "modified": "2020-07-16T22:44:14.436Z", "contributors": [ - "gerardo750711", - "israel-munoz" + "SphinxKnight", + "wbamberg", + "sprodrigues", + "Bugrtn", + "guillermocamon", + "mautematico", + "superrebe", + "mishelashala", + "juan-castano", + "Joker_DC", + "rossif", + "ArcangelZith", + "adri1993", + "zota", + "danielUFO", + "Arudb79", + "Jacqueline", + "@Perlyshh_76", + "ivanlopez", + "Gusvar", + "cristel.ariana", + "jesusruiz", + "PabloDev", + "gorrotowi", + "SebastianRave", + "Houseboyzgz", + "hjaguen", + "foxtro", + "reoo", + "dinoop.p1" ] }, - "Herramientas": { - "modified": "2019-01-16T13:52:37.109Z", + "Tools/3D_View": { + "modified": "2020-07-16T22:34:25.151Z", "contributors": [ - "teoli", - "StripTM", - "inma_610", - "camilourd" + "rmilano" ] }, - "How_to_create_a_DOM_tree": { - "modified": "2019-03-23T23:22:26.711Z", + "Tools/Browser_Console": { + "modified": "2020-07-16T22:35:42.205Z", "contributors": [ - "carrillog.luis" + "AldoSantiago", + "almozara" ] }, - "Incrustando_Mozilla/Comunidad": { - "modified": "2019-03-23T22:39:14.279Z", + "Tools/Browser_Toolbox": { + "modified": "2020-07-16T22:35:55.417Z", "contributors": [ - "vamm1981" + "norwie" ] }, - "IndexedDB": { - "modified": "2019-03-18T21:11:08.379Z", + "Tools/Debugger": { + "modified": "2020-09-13T21:00:58.239Z", "contributors": [ - "duduindo", - "teoli", - "semptrion", - "CHORVAT", - "inma_610" + "luuiizzaa9060", + "Juanchoib", + "jcmarcfloress", + "eroto", + "wbamberg", + "nacholereu", + "Pablo_Ivan", + "trevorh", + "cgsramirez", + "stephaniehobson", + "Jacqueline", + "C.E." ] }, - "Instalación_de_motores_de_búsqueda_desde_páginas_web": { - "modified": "2019-01-16T16:13:53.798Z", + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.255Z", "contributors": [ - "teoli", - "Nukeador", - "Jorolo" + "wbamberg" ] }, - "Learn": { - "modified": "2020-10-06T09:14:51.258Z", + "Tools/Debugger/How_to/Disable_breakpoints": { + "modified": "2020-07-16T22:35:11.175Z", "contributors": [ - "blanchart", - "Nachec", - "Maose", - "methodx", - "npcsayfail", - "GilbertoHernan", - "ivanagui2", - "svarlamov", - "clarii", - "hamfree", - "raul782", - "astrapotro", - "karlalhdz", - "sillo01", - "carlosmartinezfyd", - "carlo.romero1991", - "nelruk", - "merol-dad", - "Pablo_Ivan", - "Da_igual", - "jhapik", - "cgsramirez", - "PedroFumero", - "Yanlu", - "Jenny-T-Type", - "Jeremie" + "drdavi7@hotmail.com" ] }, - "Learn/Accessibility": { - "modified": "2020-07-16T22:39:56.491Z", + "Tools/Debugger/How_to/Set_a_breakpoint": { + "modified": "2020-07-16T22:35:09.854Z", "contributors": [ - "adiccb", - "WilsonIsAliveClone", - "mikelmg" + "erickton" ] }, - "Learn/Accessibility/Accessibility_troubleshooting": { - "modified": "2020-09-27T07:55:30.040Z", + "Tools/Debugger/Source_map_errors": { + "modified": "2020-07-16T22:35:19.165Z", "contributors": [ - "UOCccorcoles", - "adiccb" + "Makinita" ] }, - "Learn/Accessibility/CSS_and_JavaScript": { - "modified": "2020-09-25T04:23:21.491Z", + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:27.363Z", "contributors": [ - "UOCccorcoles" + "amaiafilo", + "SoftwareRVG", + "maybe", + "webmaster", + "Jacqueline", + "MauricioGil" ] }, - "Learn/Accessibility/HTML": { - "modified": "2020-09-24T10:25:02.383Z", + "Tools/Page_Inspector/How_to": { + "modified": "2020-07-16T22:34:30.977Z", "contributors": [ - "UOCccorcoles", - "diegocastillogz", - "jeronimonunez", - "WilsonIsAliveClone" + "sidgan" ] }, - "Learn/Accessibility/Mobile": { - "modified": "2020-07-16T22:40:29.507Z", + "Tools/Page_Inspector/How_to/Examine_and_edit_CSS": { + "modified": "2020-07-16T22:34:42.117Z", "contributors": [ - "Adorta4", - "mikelmg" + "amaiafilo" ] }, - "Learn/Accessibility/Qué_es_la_accesibilidad": { - "modified": "2020-07-16T22:40:03.734Z", + "Tools/Page_Inspector/How_to/Examine_grid_layouts": { + "modified": "2020-07-16T22:34:47.093Z", "contributors": [ - "editorUOC" + "welm" ] }, - "Learn/Aprender_y_obtener_ayuda": { - "modified": "2020-09-02T21:15:54.167Z", + "Tools/Page_Inspector/How_to/Select_an_element": { + "modified": "2020-07-16T22:34:33.474Z", "contributors": [ - "Nachec" + "amaiafilo" ] }, - "Learn/CSS": { - "modified": "2020-07-16T22:25:33.047Z", - "contributors": [ - "welm", - "javierpolit", - "TomatoSenpai", - "andrpueb", - "Aglezabad", - "RaulHernandez" + "Tools/Page_Inspector/How_to/Work_with_animations": { + "modified": "2020-07-16T22:34:36.333Z", + "contributors": [ + "lyono666", + "angelmillan", + "fmagrosoto" ] }, - "Learn/CSS/Building_blocks": { - "modified": "2020-10-02T00:43:44.395Z", + "Tools/Page_Inspector/UI_Tour": { + "modified": "2020-07-16T22:34:48.922Z", "contributors": [ - "johanfvn", - "capitanzealot", - "Enesimus", - "SphinxKnight", - "inwm", - "edixonMoreno", - "rayrojas", - "chrisdavidmills" + "maruskina", + "amaiafilo" ] }, - "Learn/CSS/Building_blocks/Cascada_y_herencia": { - "modified": "2020-09-10T08:32:11.848Z", + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.186Z", "contributors": [ - "renatico", - "UOCccorcoles", - "Enesimus", - "editorUOC" + "sonidos", + "mando", + "Xorgius", + "CesarS", + "Fani100", + "Patriposa", + "awbruna190", + "aguntinito" ] }, - "Learn/CSS/Building_blocks/Contenido_desbordado": { - "modified": "2020-09-07T07:36:40.422Z", + "Tools/Settings": { + "modified": "2020-07-16T22:36:34.818Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "amaiafilo" ] }, - "Learn/CSS/Building_blocks/Depurar_el_CSS": { - "modified": "2020-10-15T22:26:23.448Z", + "Tools/Storage_Inspector": { + "modified": "2020-07-16T22:36:09.696Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "Sebastianz" ] }, - "Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS": { - "modified": "2020-07-16T22:29:20.704Z", + "Tools/Storage_Inspector/Cookies": { + "modified": "2020-07-16T22:36:11.000Z", "contributors": [ - "editorUOC" + "Enesimus" ] }, - "Learn/CSS/Building_blocks/El_modelo_de_caja": { - "modified": "2020-09-06T15:07:38.107Z", + "Tools/Tools_Toolbox": { + "modified": "2020-07-16T22:35:26.877Z", "contributors": [ - "UOCccorcoles", - "capitanzealot", - "editorUOC" + "amaiafilo", + "Papicorito", + "am.garcia" ] }, - "Learn/CSS/Building_blocks/Fondos_y_bordes": { - "modified": "2020-09-06T17:26:53.330Z", + "Tools/View_source": { + "modified": "2020-07-16T22:35:02.649Z", "contributors": [ - "UOCccorcoles", - "psotresc", - "editorUOC" + "StripTM" ] }, - "Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario": { - "modified": "2020-07-16T22:29:24.707Z", + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:05.366Z", "contributors": [ - "editorUOC" + "elias_ramirez_elriso", + "cgsramirez", + "bassam", + "wbamberg" ] }, - "Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto": { - "modified": "2020-07-31T14:48:40.359Z", + "Tools/Web_Console/Console_messages": { + "modified": "2020-07-16T22:34:14.880Z", "contributors": [ - "AndrewSKV", - "Enesimus" + "Enesimus", + "pacommozilla", + "JeidyVega" ] }, - "Learn/CSS/Building_blocks/Selectores_CSS": { - "modified": "2020-09-06T12:41:53.412Z", + "Tools/Working_with_iframes": { + "modified": "2020-07-16T22:36:11.768Z", "contributors": [ - "UOCccorcoles", - "VichoReyes", - "editorUOC" + "carpasse" ] }, - "Learn/CSS/Building_blocks/Selectores_CSS/Combinadores": { - "modified": "2020-09-06T14:09:26.839Z", + "Tools/about:debugging": { + "modified": "2020-07-30T13:12:25.833Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "Anibalismo" ] }, - "Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos": { - "modified": "2020-09-06T13:58:30.411Z", + "Web": { + "modified": "2020-11-28T21:26:15.631Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "gabrielazambrano307", + "Nachec", + "Enesimus", + "blanchart", + "SoftwareRVG", + "danieldelvillar", + "raecillacastellana", + "jcbp", + "BubuAnabelas", + "Jacqueline", + "igualar.com", + "atlas7jean", + "luisgm76", + "Sheppy" ] }, - "Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos": { - "modified": "2020-09-06T13:34:27.599Z", + "Web/API": { + "modified": "2020-08-08T02:17:57.801Z", "contributors": [ - "UOCccorcoles", - "psotresc", - "editorUOC" + "Nachec", + "Enesimus", + "fscholz", + "AJMG", + "tecniloco", + "teoli", + "maedca", + "ethertank", + "Sheppy" ] }, - "Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID": { - "modified": "2020-09-06T13:13:47.580Z", + "Web/API/AbstractWorker": { + "modified": "2019-12-20T01:50:52.328Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "Kaliu", + "Gustavo_Armoa", + "AshWilliams" ] }, - "Learn/CSS/Building_blocks/Styling_tables": { - "modified": "2020-09-14T09:45:44.143Z", + "Web/API/Ambient_Light_Events": { + "modified": "2019-03-23T22:33:31.225Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "chrisdavidmills", - "otheym", - "wbamberg", - "IXTRUnai" + "BubuAnabelas", + "RockoDev", + "guiller1998" ] }, - "Learn/CSS/Building_blocks/Valores_y_unidades_CSS": { - "modified": "2020-09-07T09:35:00.652Z", + "Web/API/AnalyserNode": { + "modified": "2019-03-23T22:51:59.371Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "teoli", + "CarlosLinares" ] }, - "Learn/CSS/CSS_layout": { - "modified": "2020-07-31T15:01:33.453Z", + "Web/API/Animation": { + "modified": "2020-10-15T21:57:43.283Z", "contributors": [ - "AndrewSKV", - "untilbit", - "pantuflo", - "chrisdavidmills" + "AlePerez92", + "evaferreira", + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Diseño_receptivo": { - "modified": "2020-07-16T22:27:27.257Z", + "Web/API/Animation/cancel": { + "modified": "2019-03-23T22:04:37.170Z", "contributors": [ - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Flexbox": { - "modified": "2020-09-15T16:36:01.723Z", + "Web/API/Animation/effect": { + "modified": "2019-03-18T21:15:31.270Z", "contributors": [ - "UOCccorcoles", - "nachopo", - "chrisdavidmills", - "editorUOC", - "facundogqr", - "felixgomez", - "LuisL", - "amaiafilo", - "spachecojimenez" + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Floats": { - "modified": "2020-10-16T12:52:48.804Z", + "Web/API/Animation/finish": { + "modified": "2019-03-23T22:04:33.125Z", "contributors": [ - "zuruckzugehen", - "chrisdavidmills" + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Flujo_normal": { - "modified": "2020-07-16T22:27:20.728Z", + "Web/API/Animation/id": { + "modified": "2019-03-18T21:15:30.202Z", "contributors": [ - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Grids": { - "modified": "2020-07-16T22:26:58.625Z", + "Web/API/Animation/oncancel": { + "modified": "2019-03-23T22:05:09.237Z", "contributors": [ - "editorUOC", - "chrisdavidmills", - "Luis_Calvo" + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Introducción": { - "modified": "2020-09-15T13:39:37.384Z", + "Web/API/Animation/onfinish": { + "modified": "2019-03-23T22:05:11.188Z", "contributors": [ - "UOCccorcoles", - "AndrewSKV", - "editorUOC", - "Jhonaz" + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Positioning": { - "modified": "2020-07-16T22:26:42.380Z", + "Web/API/Animation/pause": { + "modified": "2020-10-15T21:58:07.078Z", "contributors": [ - "fr3dth" + "AlePerez92", + "IngoBongo" ] }, - "Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos": { - "modified": "2020-07-16T22:27:17.501Z", + "Web/API/Animation/play": { + "modified": "2019-03-23T22:04:30.047Z", "contributors": [ - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/First_steps": { - "modified": "2020-07-16T22:27:38.921Z", + "Web/API/Animation/playState": { + "modified": "2019-03-23T22:05:06.415Z", "contributors": [ - "GiuMagnani", - "Enesimus", - "cinthylli", - "BiP00", - "jesquintero" + "IngoBongo" ] }, - "Learn/CSS/First_steps/Comenzando_CSS": { - "modified": "2020-08-31T14:16:45.193Z", + "Web/API/Animation/playbackRate": { + "modified": "2019-03-23T22:05:12.184Z", "contributors": [ - "UOCccorcoles", - "AndrewSKV", - "tito-ramirez", - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/First_steps/Como_funciona_CSS": { - "modified": "2020-09-18T07:47:46.630Z", + "Web/API/Animation/ready": { + "modified": "2019-03-23T22:04:55.912Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/First_steps/Como_se_estructura_CSS": { - "modified": "2020-08-31T16:55:37.346Z", + "Web/API/Animation/reverse": { + "modified": "2019-03-23T22:04:31.837Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/First_steps/Qué_es_CSS": { - "modified": "2020-10-15T22:25:30.119Z", + "Web/API/Animation/startTime": { + "modified": "2019-03-23T22:04:36.769Z", "contributors": [ - "UOCccorcoles", - "Enesimus", - "editorUOC" + "IngoBongo" ] }, - "Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento": { - "modified": "2020-08-23T19:45:30.596Z", + "Web/API/Animation/timeline": { + "modified": "2019-03-23T22:04:30.790Z", "contributors": [ - "capitanzealot", - "AndrewSKV", - "Enesimus" + "IngoBongo" ] }, - "Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension": { - "modified": "2020-07-16T22:28:11.693Z", + "Web/API/AnimationEvent": { + "modified": "2019-03-23T22:31:58.545Z", "contributors": [ - "Creasick", - "Enesimus", - "javierpolit", - "DennisM" + "fscholz", + "jzatarain", + "Vanessa85" ] }, - "Learn/CSS/Styling_text": { - "modified": "2020-07-16T22:25:57.799Z", + "Web/API/AnimationEvent/animationName": { + "modified": "2019-03-23T22:29:49.749Z", "contributors": [ - "laatcode", - "wilton-cruz" + "jzatarain" ] }, - "Learn/CSS/Styling_text/Fuentes_web": { - "modified": "2020-09-01T07:26:18.054Z", + "Web/API/Attr": { + "modified": "2020-04-04T11:16:16.397Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "MiguelHG2351", + "rayrojas", + "AlePerez92" ] }, - "Learn/CSS/Styling_text/Fundamentals": { - "modified": "2020-09-18T08:01:18.738Z", + "Web/API/AudioBuffer": { + "modified": "2020-10-15T22:15:24.740Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "laatcode", - "joseanpg" + "rayrojas" ] }, - "Learn/CSS/Styling_text/Styling_links": { - "modified": "2020-09-18T08:20:17.759Z", + "Web/API/AudioNode": { + "modified": "2020-10-15T22:15:25.198Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "Tull666" + "rayrojas" ] }, - "Learn/CSS/Styling_text/Styling_lists": { - "modified": "2020-09-01T06:14:44.024Z", + "Web/API/BaseAudioContext": { + "modified": "2019-03-18T21:00:34.809Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "MARKO75", - "Tull666", - "laatcode", - "jmcavanzo" + "SphinxKnight", + "miguelonce", + "chrisdavidmills" ] }, - "Learn/CSS/Sábercomo": { - "modified": "2020-07-16T22:25:42.139Z", + "Web/API/BaseAudioContext/createBiquadFilter": { + "modified": "2019-03-23T22:04:57.563Z", "contributors": [ - "alebarbaja", - "abestrad1" + "GersonRosales" ] }, - "Learn/CSS/Sábercomo/Generated_content": { - "modified": "2020-07-16T22:25:47.515Z", + "Web/API/BatteryManager": { + "modified": "2019-03-23T23:24:54.302Z", "contributors": [ - "chrisdavidmills", - "Juansereina", - "lavilofam1" + "David_Marcos", + "maedca", + "sinfallas" ] }, - "Learn/Common_questions": { - "modified": "2020-07-16T22:35:23.102Z", + "Web/API/BatteryManager/charging": { + "modified": "2019-03-23T23:27:11.890Z", "contributors": [ - "eduardo-estrada", - "balderasric", - "soedrego", - "astrapotro", - "Miguelank", - "chrisdavidmills" + "fscholz", + "Hasilt", + "LuisE" ] }, - "Learn/Common_questions/Cuanto_cuesta": { - "modified": "2020-07-16T22:35:45.385Z", + "Web/API/BatteryManager/chargingTime": { + "modified": "2019-03-23T23:25:12.194Z", "contributors": [ - "Beatriz_Ortega_Valdes" + "fscholz", + "palfrei" ] }, - "Learn/Common_questions/How_does_the_Internet_work": { - "modified": "2020-09-07T00:56:10.834Z", + "Web/API/BatteryManager/dischargingTime": { + "modified": "2019-03-23T23:27:15.312Z", "contributors": [ - "IsraFloores", - "Pau_Vera_S", - "Yel-Martinez-Consultor-Seo", - "Creasick", - "Tan_", - "punkyh", - "krthr", - "DaniNz" + "fscholz", + "khalid32", + "LuisE" ] }, - "Learn/Common_questions/Pages_sites_servers_and_search_engines": { - "modified": "2020-07-16T22:35:39.645Z", + "Web/API/BatteryManager/level": { + "modified": "2019-03-23T23:25:16.177Z", "contributors": [ - "benelliraul", - "MarcosN", - "DaniNz" + "fscholz", + "eliezerb", + "maedca", + "David_Marcos", + "sinfallas", + "voylinux" ] }, - "Learn/Common_questions/Que_es_un_servidor_WEB": { - "modified": "2020-10-27T18:34:43.608Z", + "Web/API/BatteryManager/onchargingchange": { + "modified": "2019-03-23T23:25:06.308Z", "contributors": [ - "noksenberg", - "Yel-Martinez-Consultor-Seo", - "Spectrum369", - "Luisk955", - "Sebaspaco", - "flaki53", - "welm" + "fscholz", + "Pau_Ilargia", + "voylinux" ] }, - "Learn/Common_questions/Que_software_necesito": { - "modified": "2020-07-16T22:35:32.855Z", + "Web/API/BatteryManager/onlevelchange": { + "modified": "2019-03-23T23:25:08.174Z", "contributors": [ - "Beatriz_Ortega_Valdes" + "fscholz", + "teoli", + "eliezerb", + "robertoasq", + "voylinux" ] }, - "Learn/Common_questions/Qué_es_una_URL": { - "modified": "2020-07-16T22:35:29.126Z", + "Web/API/BeforeUnloadEvent": { + "modified": "2020-10-15T22:19:49.552Z", "contributors": [ - "ezzep66", - "BubuAnabelas" + "tuamigoxavi", + "matias981" ] }, - "Learn/Common_questions/Thinking_before_coding": { - "modified": "2020-07-16T22:35:34.085Z", + "Web/API/Blob": { + "modified": "2019-03-23T23:07:07.610Z", "contributors": [ - "Beatriz_Ortega_Valdes", - "LourFabiM", - "DaniNz" + "parzibyte", + "japho", + "fscholz", + "degrammer" ] }, - "Learn/Common_questions/What_are_browser_developer_tools": { - "modified": "2020-09-13T07:49:07.373Z", + "Web/API/Blob/Blob": { + "modified": "2020-10-15T21:31:45.424Z", "contributors": [ - "rockoldo", - "IsraFloores", - "Nachec", - "John19D", - "DaniNz" + "IsraelFloresDGA", + "BrodaNoel", + "fscholz", + "matajm" ] }, - "Learn/Common_questions/What_are_hyperlinks": { - "modified": "2020-07-16T22:35:42.995Z", + "Web/API/Blob/type": { + "modified": "2019-03-23T22:06:34.982Z", "contributors": [ - "ezzep66" + "BrodaNoel" ] }, - "Learn/Common_questions/What_is_a_domain_name": { - "modified": "2020-07-16T22:35:43.888Z", + "Web/API/BlobBuilder": { + "modified": "2019-03-23T22:49:30.131Z", "contributors": [ - "Beatriz_Ortega_Valdes", - "hmendezm90" + "BrodaNoel", + "japho" ] }, - "Learn/Common_questions/diseños_web_comunes": { - "modified": "2020-07-16T22:35:42.298Z", + "Web/API/Body": { + "modified": "2020-10-15T22:17:35.545Z", "contributors": [ - "Beatriz_Ortega_Valdes" + "SphinxKnight", + "bigblair81" ] }, - "Learn/Common_questions/set_up_a_local_testing_server": { - "modified": "2020-07-16T22:35:52.759Z", + "Web/API/Body/formData": { + "modified": "2020-10-15T22:17:33.164Z", "contributors": [ - "rjpu24", - "iseafa", - "DaniNz" + "brauni800" ] }, - "Learn/Como_Contribuir": { - "modified": "2020-07-16T22:33:43.206Z", + "Web/API/Body/json": { + "modified": "2020-10-15T22:29:20.361Z", "contributors": [ - "SphinxKnight", - "Code118", - "dervys19", - "javierdelpino", - "axgeon", - "Leonardo_Valdez", - "cgsramirez" + "camsa" ] }, - "Learn/Desarrollo_web_Front-end": { - "modified": "2020-11-18T03:33:37.370Z", + "Web/API/CSSRule": { + "modified": "2019-03-23T23:58:11.498Z", "contributors": [ "SphinxKnight", - "marquezpedro151", - "andresf.duran", - "Nachec" + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-09-22T16:37:42.904Z", + "Web/API/CSSRule/cssText": { + "modified": "2019-03-23T23:58:05.630Z", "contributors": [ - "Nachec", - "IsraFloores", - "Enesimus", - "rodririobo", - "escalant3", - "jimmypazos", - "ingridc", - "hamfree", - "npcsayfail", - "BrodaNoel", - "israel-munoz", - "Da_igual", - "welm", - "Diio", - "darbalma", - "chrisdavidmills" + "fscholz", + "arunpandianp", + "teoli", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web/CSS_basics": { - "modified": "2020-11-10T20:04:05.272Z", + "Web/API/CSSRule/parentStyleSheet": { + "modified": "2019-03-23T23:58:10.522Z", "contributors": [ - "rockoldo", - "Maose", - "JaviGonLope", - "hamfree", - "juanluis", - "montygabe", - "mamptecnocrata", - "juanqui", - "welm" + "fscholz", + "arunpandianp", + "teoli", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web/Cómo_funciona_la_Web": { - "modified": "2020-07-16T22:33:59.672Z", + "Web/API/CSSStyleDeclaration": { + "modified": "2019-03-23T22:44:46.721Z", "contributors": [ - "Enesimus", - "Maose", - "rulo_diaz", - "SphinxKnight" + "guerratron" ] }, - "Learn/Getting_started_with_the_web/HTML_basics": { - "modified": "2020-12-10T12:30:46.714Z", + "Web/API/CSSStyleRule": { + "modified": "2019-03-23T23:01:37.512Z", "contributors": [ - "ojgarciab", - "SphinxKnight", - "cesarmolina.sdb", - "egonzalez", - "Maose", - "Axes", - "NataliaCba", - "Armando-Cruz", - "hamfree", - "BrodaNoel", - "PhantomDemon", - "DaniNz", - "SandraMoreH", - "HeberRojo", - "welm", - "JoaquinBedoian", - "Huarseral" + "darioperez", + "fscholz" ] }, - "Learn/Getting_started_with_the_web/Instalacion_de_software_basico": { - "modified": "2020-11-10T01:28:22.294Z", + "Web/API/CSSStyleRule/selectorText": { + "modified": "2019-03-23T23:58:12.055Z", "contributors": [ - "rockoldo", - "Nachec", - "Maose", - "Anyito", - "ingridc", - "Enesimus", - "israel-munoz", - "Neto2412", - "AngelFQC", - "mads0306", - "Da_igual", - "Chrixos", - "darbalma" + "fscholz", + "jsx", + "teoli", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2020-08-17T06:23:11.691Z", + "Web/API/CSSStyleSheet": { + "modified": "2019-03-23T23:58:09.423Z", "contributors": [ - "Nachec", - "Enesimus", - "Maose", - "John19D", - "yavemu", - "pablopennisi", - "Sergio_Gonzalez_Collado", - "hamfree", - "Bluterg", - "jpmontoya182", - "sillo01", - "lfrasae", - "bartolocarrasco", - "nhuamani", - "ricardormeza", - "fcojgodoy", - "soulminato", - "chech", - "juanqui", - "RaulHernandez", - "joelomar", - "welm", - "derplak", - "sin_nombre365", - "germanfr", - "cgsramirez", - "nekludov" + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web/La_web_y_los_estandares_web": { - "modified": "2020-09-03T04:02:22.375Z", + "Web/API/CSSStyleSheet/deleteRule": { + "modified": "2019-03-23T23:58:10.847Z", "contributors": [ - "Nachec" + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web/Manejando_los_archivos": { - "modified": "2020-09-23T03:12:43.364Z", + "Web/API/CSSStyleSheet/insertRule": { + "modified": "2019-03-23T23:16:46.847Z", "contributors": [ - "Nachec", - "chrisdavidmills", - "NavetsArev", - "Maose", - "airmind97", - "hamfree", - "israel-munoz", - "GuilleMiranda", - "merol-dad", - "samshara1", - "mads0306", - "mamptecnocrata", - "Huarseral", - "diazwatson" + "fscholz", + "LeoHirsch" ] }, - "Learn/Getting_started_with_the_web/Publishing_your_website": { - "modified": "2020-11-11T14:35:28.910Z", + "Web/API/CSSStyleSheet/ownerRule": { + "modified": "2019-03-23T23:58:08.873Z", "contributors": [ - "Yuunichi", - "Maose", - "IrwinAcosta", - "rjpu24", - "ingridc", - "binariosistemas", - "emermao", - "Michelangeur", - "javierdelpino", - "krthr", - "DaniNz", - "Rivo23", - "alexguerrero", - "MaurooRen", - "Da_igual", - "welm", - "Yadira" + "fscholz", + "khalid32", + "HenryGR" ] }, - "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { - "modified": "2020-09-22T18:59:15.940Z", + "Web/API/CSS_Object_Model": { + "modified": "2019-03-23T22:01:23.472Z", "contributors": [ - "Nachec", - "Maose", - "jimmy_ml", - "NataliaCba", - "vact", - "israel-munoz", - "DaniNz", - "7eacemaker", - "mads0306", - "Da_igual", - "Davixe", - "Chrixos", - "diazwatson", - "omar.fiscal" + "dmelian" ] }, - "Learn/HTML": { - "modified": "2020-12-10T12:33:09.889Z", + "Web/API/CacheStorage": { + "modified": "2020-10-15T22:30:42.396Z", "contributors": [ - "ojgarciab", - "Nachec", - "Enesimus", - "mppfiles", - "titox", - "patoezequiel", - "mitodamabra", - "crispragmatico", - "chancherokerido", - "Athene2RM", - "Alejandra.B", - "welm", - "jpazos" + "AprilSylph" ] }, - "Learn/HTML/Forms": { - "modified": "2020-07-16T22:20:56.050Z", + "Web/API/CacheStorage/keys": { + "modified": "2020-10-15T22:30:42.056Z", "contributors": [ - "xyvs", - "mikiangel10", - "chrisdavidmills", - "eljonims", - "sjmiles" + "duduindo", + "ph4538157" ] }, - "Learn/HTML/Forms/How_to_structure_an_HTML_form": { - "modified": "2020-09-18T11:13:13.645Z", + "Web/API/CanvasImageSource": { + "modified": "2019-03-23T22:09:10.185Z", "contributors": [ - "UOCccorcoles", - "UOCjcanovasi", - "editorUOC", - "chrisdavidmills", - "eljonims" + "alinarezrangel" ] }, - "Learn/HTML/Forms/Property_compatibility_table_for_form_controls": { - "modified": "2020-08-30T01:12:52.090Z", + "Web/API/CanvasRenderingContext2D": { + "modified": "2019-03-23T22:54:41.294Z", "contributors": [ - "edchasw" + "rrodrigo", + "JoSaGuDu", + "iamwao", + "geodracs" ] }, - "Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles": { - "modified": "2020-07-16T22:22:12.140Z", + "Web/API/CanvasRenderingContext2D/arc": { + "modified": "2019-04-15T00:25:11.182Z", "contributors": [ - "Enesimus" + "Rodrigo-Sanchez", + "Mancux2" ] }, - "Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5": { - "modified": "2020-07-16T22:22:11.445Z", + "Web/API/CanvasRenderingContext2D/beginPath": { + "modified": "2019-03-23T22:47:39.451Z", "contributors": [ - "Enesimus" + "PepeBeat" ] }, - "Learn/HTML/Forms/Sending_and_retrieving_form_data": { - "modified": "2020-07-16T22:21:26.056Z", + "Web/API/CanvasRenderingContext2D/clearRect": { + "modified": "2019-03-23T22:19:13.064Z", "contributors": [ - "Rafasu", - "rocioDEV", - "MrGreen", - "OseChez", - "DaniNz", - "peternerd", - "SphinxKnight", - "chrisdavidmills", - "Ricky_Lomax" + "andrpueb" ] }, - "Learn/HTML/Forms/Styling_HTML_forms": { - "modified": "2020-07-16T22:21:30.546Z", + "Web/API/CanvasRenderingContext2D/drawImage": { + "modified": "2019-03-23T22:47:09.124Z", "contributors": [ - "OMEGAYALFA", - "chrisdavidmills", - "cizquierdof" + "iamwao" ] }, - "Learn/HTML/Forms/The_native_form_widgets": { - "modified": "2020-09-15T08:02:23.197Z", + "Web/API/CanvasRenderingContext2D/fillRect": { + "modified": "2019-03-23T22:32:43.881Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "rayrojas" + "eljonims" ] }, - "Learn/HTML/Forms/Tipos_input_HTML5": { - "modified": "2020-10-30T10:06:35.877Z", + "Web/API/CanvasRenderingContext2D/getImageData": { + "modified": "2020-10-15T22:03:53.553Z", "contributors": [ - "alejandro0619", - "panpy-web" + "LEUGIM99" ] }, - "Learn/HTML/Forms/Validacion_formulario_datos": { - "modified": "2020-11-19T13:12:47.854Z", + "Web/API/CanvasRenderingContext2D/lineCap": { + "modified": "2020-10-15T22:18:19.205Z", "contributors": [ - "tcebrian", - "UOCccorcoles", - "UOCjcanovasi", - "editorUOC", - "blanchart", - "israel-munoz" + "Ricardo_F." ] }, - "Learn/HTML/Forms/Your_first_HTML_form": { - "modified": "2020-09-15T05:57:07.460Z", + "Web/API/CanvasRenderingContext2D/rotate": { + "modified": "2020-10-15T22:12:15.546Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "BraisOliveira", - "OMEGAYALFA", - "OrlandoDeJesusCuxinYama", - "Giikah", - "chrisdavidmills", - "HGARZON" + "albertor21" ] }, - "Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados": { - "modified": "2020-07-16T22:21:55.231Z", + "Web/API/CanvasRenderingContext2D/save": { + "modified": "2020-10-15T22:23:30.799Z", "contributors": [ - "laatcode" + "feiss" ] }, - "Learn/HTML/Introduccion_a_HTML": { - "modified": "2020-09-03T05:18:15.831Z", + "Web/API/Canvas_API/Tutorial/Compositing": { + "modified": "2020-08-27T21:09:19.590Z", "contributors": [ - "Nachec", - "Enesimus", - "ivanagui2", - "Sergio_Gonzalez_Collado", - "cizquierdof", - "AngelFQC" + "mastertrooper", + "stephaniehobson" ] }, - "Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting": { - "modified": "2020-09-05T21:21:55.228Z", + "Web/API/ChildNode": { + "modified": "2019-03-29T14:12:39.589Z", "contributors": [ - "Nachec", - "UOCccorcoles", - "Enesimus", - "jmalsar", - "editorUOC", - "RG52", - "luchiano199", - "AlieYin" + "jpmedley" ] }, - "Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks": { - "modified": "2020-09-05T04:27:29.218Z", + "Web/API/ChildNode/after": { + "modified": "2020-10-15T21:50:39.528Z", "contributors": [ - "Nachec", - "UOCccorcoles", - "juan.grred", - "Enesimus", - "jmalsar", - "blanchart", - "editorUOC", - "Myuel", - "MichaelMejiaMora", - "ferlopezcarr", - "javierpolit" + "AlePerez92", + "SoftwareRVG" ] }, - "Learn/HTML/Introduccion_a_HTML/Debugging_HTML": { - "modified": "2020-08-31T12:17:08.843Z", + "Web/API/ChildNode/before": { + "modified": "2019-03-23T22:23:28.772Z", "contributors": [ - "UOCccorcoles", - "editorUOC", - "javierpolit" + "SoftwareRVG" ] }, - "Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido": { - "modified": "2020-07-16T22:24:18.388Z", + "Web/API/ChildNode/remove": { + "modified": "2020-10-15T21:50:43.901Z", "contributors": [ + "daniel.arango", + "teffcode", + "AlePerez92", "SoftwareRVG" ] }, - "Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter": { - "modified": "2020-07-16T22:23:11.881Z", + "Web/API/ChildNode/replaceWith": { + "modified": "2019-03-23T22:23:34.633Z", "contributors": [ - "jmalsar", - "luchiano199", - "javierpolit" + "SoftwareRVG" ] }, - "Learn/HTML/Introduccion_a_HTML/Metados_en": { - "modified": "2020-11-07T18:07:55.376Z", + "Web/API/ClipboardEvent": { + "modified": "2020-10-15T22:14:15.464Z", "contributors": [ - "nilo15", - "Nachec", - "UOCccorcoles", - "ccorcoles", - "editorUOC", - "hector080", - "clarii", - "Myuel", - "dmipaguirre", - "Armando-Cruz", - "MichaelMejiaMora", - "soedrego", - "absaucedo", - "venomdj2011", - "CarlosJose" + "fscholz" ] }, - "Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces": { - "modified": "2020-07-16T22:24:22.922Z", + "Web/API/ClipboardEvent/clipboardData": { + "modified": "2020-10-15T22:14:15.340Z", "contributors": [ - "Enesimus" + "Bumxu" ] }, - "Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML": { - "modified": "2020-07-16T22:24:21.949Z", + "Web/API/CloseEvent": { + "modified": "2020-11-24T05:35:48.408Z", "contributors": [ - "Enesimus" + "netizen", + "jpmontoya182" ] }, - "Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text": { - "modified": "2020-09-05T23:06:12.474Z", + "Web/API/Comment": { + "modified": "2020-10-15T22:24:21.833Z", "contributors": [ - "walter.boba79" + "pablorebora" ] }, - "Learn/HTML/Introduccion_a_HTML/estructura": { - "modified": "2020-09-06T16:55:31.460Z", + "Web/API/Console": { + "modified": "2019-08-30T08:42:12.082Z", "contributors": [ - "Nachec", - "UOCccorcoles", - "editorUOC", - "chaerf", - "AlidaContreras", - "javierpolit", - "SoftwareRVG", - "welm" + "ajuanjojjj", + "fcanellas", + "vlguerrero", + "chrisdavidmills" ] }, - "Learn/HTML/Introduccion_a_HTML/iniciar": { - "modified": "2020-11-24T21:57:47.560Z", + "Web/API/Console/count": { + "modified": "2019-03-23T22:07:26.644Z", "contributors": [ - "nilo15", - "Nachec", - "UOCccorcoles", - "maodecolombia", - "Enesimus", - "editorUOC", - "narvmtz", - "dmipaguirre", - "BubuAnabelas", - "marlabarbz", - "erllanosr", - "r2fv", - "jonasmreza", - "Cjpertuz", - "yan-vega", - "Armando-Cruz", - "felixgomez", - "olvap", - "emermao", - "soedrego", - "Abihu", - "mitocondriaco", - "nahuelsotelo", - "dayamll", - "JimP99", - "EdwinTorres", - "salvarez1988", - "cizquierdof", - "juanluis", - "welm" + "deluxury", + "roberbnd" ] }, - "Learn/HTML/Introduccion_a_HTML/texto": { - "modified": "2020-09-04T15:00:09.675Z", + "Web/API/Console/dir": { + "modified": "2020-11-11T11:46:41.122Z", "contributors": [ - "Nachec", - "UOCccorcoles", - "Enesimus", - "Maose", - "ccorcoles", - "editorUOC", - "hector080", - "JulianMahecha", - "BubuAnabelas", - "RafaelVentura", - "jadiosc", - "dcarmal-dayvo", - "Owildfox", - "Myuel", - "dmipaguirre", - "Dany07", - "welm" + "jomoji", + "laloptk" ] }, - "Learn/HTML/Multimedia_and_embedding": { - "modified": "2020-08-08T01:15:36.731Z", + "Web/API/Console/dirxml": { + "modified": "2019-03-23T22:18:03.809Z", "contributors": [ - "Nachec", - "Loba25", - "emibena75", - "tomandech", - "rayrojas", - "SphinxKnight", - "rickygutim", - "luchiano199", - "jonasmreza", - "vHarz", - "hell0h0la", - "J0rgeMG", - "yarochewsky" + "aeroxmotion" ] }, - "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": { - "modified": "2020-08-13T15:11:41.992Z", + "Web/API/Console/error": { + "modified": "2019-03-23T22:06:32.134Z", "contributors": [ - "JuanMejia" + "BrodaNoel" ] }, - "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": { - "modified": "2020-09-01T08:06:52.329Z", + "Web/API/Console/info": { + "modified": "2019-03-23T22:12:32.604Z", "contributors": [ - "UOCccorcoles", - "jmalsar", - "editorUOC", - "ccorcoles", - "acvidelaa", - "BubuAnabelas", - "Alpha3-Developer", - "Makinita", - "Parziva_1", - "luchiano199", - "calvearc", - "soedrego", - "JuniorBO", - "JoseCuestas" + "Lwissitoon" ] }, - "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": { - "modified": "2020-07-16T22:25:06.606Z", + "Web/API/Console/log": { + "modified": "2019-03-23T22:19:48.741Z", "contributors": [ - "Loba25", - "henardemiguel" + "BrodaNoel", + "fcanellas" ] }, - "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": { - "modified": "2020-07-16T22:25:00.943Z", + "Web/API/Console/time": { + "modified": "2019-03-18T21:42:22.745Z", "contributors": [ - "Ismael_Diaz", - "cinthylli", - "duduindo", - "soedrego", - "luchiano199", - "SphinxKnight", - "dylanroman03" + "jotaoncode" ] }, - "Learn/HTML/Multimedia_and_embedding/Responsive_images": { - "modified": "2020-11-02T15:27:00.386Z", + "Web/API/Console/timeEnd": { + "modified": "2020-10-15T22:13:11.825Z", "contributors": [ - "Daniel_Martin", - "LuisCA", - "baumannzone", - "JuanMejia", - "lucasan", - "pipe01", - "sebaLinares", - "kuntur-studio", - "iiegor", - "malonson", - "javierarcheni", - "alexuy51", - "SigridMonsalve", - "arnoldobr", - "anfuca" + "xlhector10" ] }, - "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { - "modified": "2020-12-07T13:00:58.885Z", + "Web/API/Console/trace": { + "modified": "2019-03-23T22:22:51.545Z", "contributors": [ - "occu29", - "Leiner.lop", - "pabdani", - "Enesimus", - "soedrego", - "jesusgirao", - "acvidelaa", - "rayrojas" + "Axl-Nolasco" ] }, - "Learn/HTML/Tablas": { - "modified": "2020-07-16T22:25:11.000Z", + "Web/API/Console/warn": { + "modified": "2020-10-15T21:53:36.780Z", "contributors": [ - "Drathveloper", - "IXTRUnai" + "juanluisrp", + "oderflaj" ] }, - "Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML": { - "modified": "2020-09-09T11:52:38.720Z", + "Web/API/Constraint_validation": { + "modified": "2019-04-22T15:33:44.796Z" + }, + "Web/API/Crypto": { + "modified": "2020-10-15T22:27:12.417Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "joseluisq" ] }, - "Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad": { - "modified": "2020-09-14T06:33:13.790Z", + "Web/API/Crypto/subtle": { + "modified": "2020-10-15T22:27:11.548Z", "contributors": [ - "UOCccorcoles", - "editorUOC" + "joseluisq" ] }, - "Learn/HTML/Tablas/Structuring_planet_data": { - "modified": "2020-07-16T22:25:29.339Z", + "Web/API/CustomElementRegistry": { + "modified": "2020-10-15T22:29:44.444Z", "contributors": [ - "IXTRUnai" + "alattalatta" ] }, - "Learn/HTML/como": { - "modified": "2020-07-16T22:22:28.075Z", + "Web/API/CustomElementRegistry/define": { + "modified": "2020-10-15T22:29:45.200Z", "contributors": [ - "Loba25", - "blanchart", - "welm" + "aguilerajl" ] }, - "Learn/HTML/como/Usando_atributos_de_datos": { - "modified": "2020-10-29T15:52:03.444Z", + "Web/API/CustomEvent": { + "modified": "2020-10-15T21:56:03.240Z", "contributors": [ - "angeljpa95", - "camsa", - "laatcode" + "fscholz", + "AlePerez92", + "daniville" ] }, - "Learn/Herramientas_y_pruebas": { - "modified": "2020-07-16T22:38:54.378Z", + "Web/API/DOMError": { + "modified": "2020-10-15T21:34:32.594Z", "contributors": [ - "WilsonIsAliveClone", - "carlosgocereceda", - "mikelmg" + "fscholz", + "MauroEldritch" ] }, - "Learn/Herramientas_y_pruebas/Cross_browser_testing": { - "modified": "2020-07-16T22:38:59.665Z", + "Web/API/DOMParser": { + "modified": "2019-03-23T22:20:06.466Z", "contributors": [ - "arnoldobr" + "rferraris" ] }, - "Learn/Herramientas_y_pruebas/GitHub": { - "modified": "2020-10-01T17:01:32.394Z", + "Web/API/DOMString": { + "modified": "2019-03-18T21:41:05.316Z", "contributors": [ - "IsraFloores", - "Nachec" + "jagomf" ] }, - "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks": { - "modified": "2020-08-22T19:34:32.519Z", + "Web/API/DataTransfer": { + "modified": "2019-03-23T23:17:03.398Z", "contributors": [ - "spaceinvadev", - "jhonarielgj" + "wbamberg", + "nmarmon", + "vmv", + "fscholz", + "yonatanalexis22" ] }, - "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started": { - "modified": "2020-08-22T19:52:35.580Z", + "Web/API/Detecting_device_orientation": { + "modified": "2020-08-11T08:30:00.189Z", "contributors": [ - "spaceinvadev" + "juancarlos.rmr", + "rayrojas", + "jairopezlo" ] }, - "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos": { - "modified": "2020-09-17T18:53:24.146Z", + "Web/API/DeviceMotionEvent": { + "modified": "2020-10-15T22:22:26.832Z", "contributors": [ - "Faem0220" + "miguelaup" ] }, - "Learn/Herramientas_y_pruebas/Understanding_client-side_tools": { - "modified": "2020-07-28T15:51:57.413Z", + "Web/API/Document": { + "modified": "2019-10-10T16:52:49.015Z", "contributors": [ - "b3m3bi" + "luis.iglesias", + "AlejandroCordova", + "fscholz", + "Crash", + "DoctorRomi", + "Mgjbot", + "DR", + "Carlosds", + "Nathymig" ] }, - "Learn/JavaScript": { - "modified": "2020-08-08T12:13:32.547Z", + "Web/API/Document/URL": { + "modified": "2020-10-15T21:18:01.820Z", "contributors": [ - "Nachec", - "chrisdavidmills", - "NavetsArev", - "ivanagui2", - "Makinita", - "hamfree", - "tonymedrano", - "0sc4rR4v3l0" + "AlePerez92", + "fscholz", + "DR" ] }, - "Learn/JavaScript/Asynchronous": { - "modified": "2020-08-07T20:26:22.020Z", + "Web/API/Document/adoptNode": { + "modified": "2020-10-15T22:06:16.900Z", "contributors": [ - "Nachec", - "PatoDeTuring", - "duduindo", - "madmaxdios" + "AlePerez92", + "InfaSysKey", + "ANDRUS74" ] }, - "Learn/JavaScript/Asynchronous/Async_await": { - "modified": "2020-11-12T21:09:30.375Z", + "Web/API/Document/alinkColor": { + "modified": "2019-03-23T23:46:52.743Z", "contributors": [ - "sargentogato", - "oscartzgz", - "SphinxKnight" + "fscholz", + "DR" ] }, - "Learn/JavaScript/Asynchronous/Concepts": { - "modified": "2020-11-19T20:30:13.091Z", + "Web/API/Document/anchors": { + "modified": "2020-10-15T21:18:02.380Z", "contributors": [ - "AndresSalomon1990", - "marcusdesantis" + "roocce", + "fscholz", + "DR" ] }, - "Learn/JavaScript/Building_blocks": { - "modified": "2020-07-17T01:46:33.034Z", + "Web/API/Document/applets": { + "modified": "2019-03-23T23:46:53.464Z", "contributors": [ - "Enesimus", - "InmobAli", - "rodririobo", - "josecampo", - "ivanagui2", - "ldeth", - "Makinita", - "jhonattanbenitez", - "Sergio_Gonzalez_Collado", - "Michelangeur", - "Elicar", - "chrisdavidmills" + "fscholz", + "DR" ] }, - "Learn/JavaScript/Building_blocks/Bucle_codigo": { - "modified": "2020-10-10T18:54:10.014Z", + "Web/API/Document/bgColor": { + "modified": "2019-03-23T23:46:48.550Z", "contributors": [ - "GianGuerra", - "Enesimus", - "josecampo", - "jesusvillalta", - "yohanolmedo", - "Zenchy", - "SebastianMaciel" + "fscholz", + "DR" ] }, - "Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion": { - "modified": "2020-07-16T22:31:28.751Z", + "Web/API/Document/body": { + "modified": "2019-03-23T23:47:18.556Z", "contributors": [ - "InmobAli", - "serarroy", - "carlosgocereceda" + "MauroEldritch", + "fscholz", + "Markens", + "DR" ] }, - "Learn/JavaScript/Building_blocks/Eventos": { - "modified": "2020-07-16T22:31:37.027Z", + "Web/API/Document/characterSet": { + "modified": "2019-03-23T23:46:47.961Z", "contributors": [ - "jhonarielgj", - "sebastiananea", - "maximilianotulian", - "ismamz" + "fscholz", + "Mgjbot", + "DR" ] }, - "Learn/JavaScript/Building_blocks/Functions": { - "modified": "2020-10-10T22:09:39.322Z", + "Web/API/Document/clear": { + "modified": "2019-03-23T22:27:12.101Z", "contributors": [ - "GianGuerra", - "pmusetti", - "pablorebora", - "blanchart", - "Alessa", - "DanielAgustinTradito" + "pekechis" ] }, - "Learn/JavaScript/Building_blocks/Galeria_de_imagenes": { - "modified": "2020-07-16T22:31:42.753Z", + "Web/API/Document/close": { + "modified": "2019-03-23T22:33:21.768Z", "contributors": [ - "amIsmael" + "AitorRodriguez990" ] }, - "Learn/JavaScript/Building_blocks/Return_values": { - "modified": "2020-07-17T01:43:24.262Z", + "Web/API/Document/contentType": { + "modified": "2019-03-23T22:57:42.530Z", "contributors": [ - "Enesimus", - "EnekoOdoo" + "MauroEldritch" ] }, - "Learn/JavaScript/Building_blocks/conditionals": { - "modified": "2020-11-28T22:20:55.059Z", + "Web/API/Document/createDocumentFragment": { + "modified": "2020-08-12T01:13:43.917Z", "contributors": [ - "willian593", - "Enesimus", - "InmobAli", - "BorisQF", - "markosaav", - "Atabord", - "jhonattanbenitez" + "zgreco2000", + "msaglietto" ] }, - "Learn/JavaScript/Client-side_web_APIs": { - "modified": "2020-07-16T22:32:38.714Z", + "Web/API/Document/createElement": { + "modified": "2019-09-19T04:18:24.578Z", "contributors": [ - "rayrojas", - "FedeRacun", - "dvincent" + "AlePerez92", + "Juandresyn", + "aitorllj93", + "BrodaNoel", + "McSonk", + "malonson", + "AlejandroBlanco", + "daesnorey_xy", + "JoaquinGonzalez" ] }, - "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": { - "modified": "2020-09-22T05:14:27.901Z", + "Web/API/Document/createElementNS": { + "modified": "2019-03-23T22:23:11.141Z", "contributors": [ - "Nachec", - "Enesimus" + "ErikMj69" ] }, - "Learn/JavaScript/Client-side_web_APIs/Fetching_data": { - "modified": "2020-07-16T22:32:57.121Z", + "Web/API/Document/createRange": { + "modified": "2019-08-27T15:00:09.804Z", "contributors": [ - "Dsabillon" + "iarah", + "fscholz", + "jsx", + "Mgjbot", + "DR" ] }, - "Learn/JavaScript/Client-side_web_APIs/Introducción": { - "modified": "2020-07-16T22:32:44.249Z", + "Web/API/Document/createTextNode": { + "modified": "2020-10-15T22:17:21.251Z", "contributors": [ - "robertsallent", - "gonzaa96", - "Usuario001", - "kevtinoco", - "Anonymous", - "OrlandoDeJesusCuxinYama" + "AlePerez92" ] }, - "Learn/JavaScript/First_steps": { - "modified": "2020-09-22T14:49:32.194Z", + "Web/API/Document/defaultView": { + "modified": "2019-03-23T22:54:20.024Z", "contributors": [ - "Nachec", - "IsraFloores", - "mvuljevas", - "Mario-new", - "lalaggv2", - "rodrigocruz13", - "antonygiomarx", - "rickygutim", - "ivanagui2", - "EliasMCaja", - "Creasick", - "Aussith_9NT", - "sergioqa123", - "RayPL", - "ernestomr", - "eliud-c-delgado", - "chrisdavidmills" + "ArcangelZith" ] }, - "Learn/JavaScript/First_steps/A_first_splash": { - "modified": "2020-08-09T09:51:52.684Z", + "Web/API/Document/designMode": { + "modified": "2020-10-15T21:40:52.052Z", "contributors": [ - "Nachec", - "zgreco2000", - "Enesimus", - "jacobo.delgado", - "xisco", - "Creasick", - "JaviMartain", - "Alfacoy", - "bosspetta", - "NataliaCba", - "arnaldop10", - "recortes", - "Darkiring", - "oscarkb24", - "roberbnd", - "joosemi02" + "AlePerez92", + "sohereitcomes" ] }, - "Learn/JavaScript/First_steps/Arrays": { - "modified": "2020-07-16T22:30:53.191Z", + "Web/API/Document/dir": { + "modified": "2019-03-23T22:57:39.171Z", "contributors": [ - "InmobAli", - "amIsmael", - "Creasick", - "DaniNz" + "MauroEldritch" ] }, - "Learn/JavaScript/First_steps/Generador_de_historias_absurdas": { - "modified": "2020-11-28T18:15:56.503Z", + "Web/API/Document/doctype": { + "modified": "2019-03-23T22:43:25.055Z", "contributors": [ - "willian593", - "Enesimus", - "fj1261", - "keskyle17", - "antqted" + "joselix" ] }, - "Learn/JavaScript/First_steps/Matemáticas": { - "modified": "2020-08-11T20:21:00.937Z", + "Web/API/Document/documentElement": { + "modified": "2019-03-23T23:50:27.852Z", "contributors": [ - "Nachec", - "Enesimus", - "keskyle17", - "Creasick", - "Aussith_9NT", - "JaviMartain", - "guibetancur", - "domingoacd", - "jjpc" + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" ] }, - "Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings": { - "modified": "2020-08-11T12:16:57.685Z", + "Web/API/Document/documentURI": { + "modified": "2019-03-23T22:39:59.389Z", "contributors": [ - "Nachec" + "Zholary" ] }, - "Learn/JavaScript/First_steps/Qué_es_JavaScript": { - "modified": "2020-08-08T22:05:17.982Z", + "Web/API/Document/documentURIObject": { + "modified": "2019-03-23T23:50:26.462Z", "contributors": [ - "Nachec", - "zgreco2000", - "jacobo.delgado", - "console", - "c9009", - "Creasick", - "bosspetta", - "alejoWeb", - "JorgeAML", - "eliud-c-delgado", - "roberbnd" + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" ] }, - "Learn/JavaScript/First_steps/Strings": { - "modified": "2020-09-06T21:18:25.448Z", + "Web/API/Document/dragover_event": { + "modified": "2019-04-30T14:24:25.773Z", "contributors": [ - "brayan-orellanos", - "Nachec", - "Enesimus", - "keskyle17", - "wajari", - "Ale87GG", - "Creasick", - "malonson", - "punkcuadecuc" + "wbamberg", + "fscholz", + "ExE-Boss", + "Vickysolo" ] }, - "Learn/JavaScript/First_steps/Test_your_skills:_Math": { - "modified": "2020-10-27T13:03:04.825Z", + "Web/API/Document/embeds": { + "modified": "2020-10-15T22:22:17.171Z", "contributors": [ - "mediodepan", - "FabianBeltran96", - "syntaxter" + "iarah" ] }, - "Learn/JavaScript/First_steps/Test_your_skills:_variables": { - "modified": "2020-09-05T01:09:05.732Z", + "Web/API/Document/evaluate": { + "modified": "2019-03-23T22:10:41.891Z", "contributors": [ - "FabianBeltran96", - "Nachec" + "bryan3561" ] }, - "Learn/JavaScript/First_steps/Useful_string_methods": { - "modified": "2020-10-19T12:56:16.453Z", + "Web/API/Document/execCommand": { + "modified": "2019-03-23T22:59:11.227Z", "contributors": [ - "chrisdavidmills", - "yeyskalyn", - "Enesimus", - "Rtf747", - "InmobAli", - "keskyle17", - "enekate", - "Creasick", - "DaniNz" + "MarkelCuesta", + "asero82", + "javatlacati" ] }, - "Learn/JavaScript/First_steps/Variables": { - "modified": "2020-08-22T08:01:38.443Z", + "Web/API/Document/exitFullscreen": { + "modified": "2020-10-15T22:23:56.627Z", "contributors": [ - "Nachec", - "Enesimus", - "jacobo.delgado", - "pmusetti", - "keskyle17", - "amIsmael", - "enekate", - "xisco", - "Creasick", - "TheJarX", - "hchelbat", - "JaviMartain", - "Dhelarius" + "davidmartinezfl" ] }, - "Learn/JavaScript/First_steps/What_went_wrong": { - "modified": "2020-08-10T05:39:33.652Z", + "Web/API/Document/getElementById": { + "modified": "2019-03-23T23:46:23.291Z", "contributors": [ - "Nachec", "Enesimus", - "CarlesBou", - "enekate", - "amIsmael", - "xisco", - "mamjerez", - "Creasick", - "Alfacoy", - "NataliaCba", - "esencialinux" + "jlpindado", + "pclifecl", + "OLiiver", + "fscholz", + "teoli", + "tuxisma", + "Juan c c q" ] }, - "Learn/JavaScript/Howto": { - "modified": "2020-07-16T22:33:09.029Z", - "contributors": [ - "FelipeAndrade" + "Web/API/Document/getElementsByClassName": { + "modified": "2019-03-23T22:48:57.077Z", + "contributors": [ + "JuanMacias", + "JungkookScript", + "ncaracci" ] }, - "Learn/JavaScript/Objects": { - "modified": "2020-11-12T18:14:51.703Z", + "Web/API/Document/getElementsByName": { + "modified": "2019-03-18T21:37:32.461Z", "contributors": [ - "alejandro.fca", - "pablojp", - "ivanagui2", - "clarii", - "Irwin1985", - "jsanpedror", - "blaipas", - "Tzikin100", - "edu1464", - "chrisdavidmills" + "MikeGsus" ] }, - "Learn/JavaScript/Objects/Adding_bouncing_balls_features": { - "modified": "2020-07-16T22:32:34.341Z", + "Web/API/Document/getElementsByTagName": { + "modified": "2019-03-23T23:50:32.110Z", "contributors": [ - "Enesimus", - "serarroy", - "carlosgocereceda" + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR", + "Mgjbot" ] }, - "Learn/JavaScript/Objects/Basics": { - "modified": "2020-08-08T03:12:26.699Z", + "Web/API/Document/getElementsByTagNameNS": { + "modified": "2019-03-23T23:50:38.494Z", "contributors": [ - "Nachec", - "Fernando-Funes", - "pmusetti", - "ivanagui2", - "djdouta", - "seba2305", - "B1tF8er", - "kevin-loal98" + "SphinxKnight", + "fscholz", + "khalid32", + "AlejandroSilva", + "leopic", + "HenryGR", + "Mgjbot" ] }, - "Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos": { - "modified": "2020-07-16T22:32:30.877Z", + "Web/API/Document/hasFocus": { + "modified": "2019-03-23T23:53:13.498Z", "contributors": [ - "r-vasquez", - "rayrojas", - "luchiano199", - "Sergio_Gonzalez_Collado", - "pomarbar" + "SphinxKnight", + "fscholz", + "khalid32", + "Mgjbot", + "Talisker", + "HenryGR" ] }, - "Learn/JavaScript/Objects/Inheritance": { - "modified": "2020-07-28T01:53:21.821Z", + "Web/API/Document/head": { + "modified": "2019-03-23T22:55:43.504Z", "contributors": [ - "Fernando-Funes", - "darkarth80", - "ivanagui2", - "cvillafraz", - "Adrian-Cuellar", - "B1tF8er" + "federicobond" ] }, - "Learn/JavaScript/Objects/JSON": { - "modified": "2020-07-16T22:32:24.819Z", + "Web/API/Document/height": { + "modified": "2019-03-23T22:09:21.631Z", "contributors": [ - "jorgeCaster", - "pmiranda-geo", - "Enesimus" + "HarleySG" ] }, - "Learn/JavaScript/Objects/Object-oriented_JS": { - "modified": "2020-08-08T09:41:13.386Z", + "Web/API/Document/hidden": { + "modified": "2020-10-15T22:14:24.023Z", "contributors": [ - "Nachec", - "andyesp", - "Fernando-Funes", - "jhonarielgj", - "rimbener", - "ReneAG", - "EnekoOdoo", - "ivanagui2", - "cristianmarquezp", - "djdouta", - "paulaco", - "martinGerez", - "anyruizd", - "Michelangeur" + "Elenito93" ] }, - "Learn/JavaScript/Objects/Object_prototypes": { - "modified": "2020-11-22T14:56:33.662Z", + "Web/API/Document/importNode": { + "modified": "2020-10-15T21:52:00.631Z", "contributors": [ - "VictoriaRamirezCharles", - "TextC0de", - "Cesaraugp", - "Fernando-Funes", - "joooni1998", - "kevin_Luna", - "asamajamasa", - "ddavalos", - "JuanMaRuiz", - "ivanagui2", - "salpreh", - "djangoJosele" + "fscholz", + "wbamberg", + "AsLogd" ] }, - "Learn/Performance": { - "modified": "2020-07-16T22:40:38.336Z", + "Web/API/Document/keydown_event": { + "modified": "2020-04-03T23:31:41.800Z", "contributors": [ - "mikelmg" + "camsa", + "irenesmith", + "ExE-Boss", + "fscholz", + "juan-ferrer-toribio" ] }, - "Learn/Server-side": { - "modified": "2020-07-16T22:35:56.070Z", + "Web/API/Document/keyup_event": { + "modified": "2019-04-18T03:50:20.204Z", "contributors": [ - "davidenriq11", - "javierdelpino", - "IXTRUnai" + "irenesmith", + "ExE-Boss", + "fscholz", + "gabojkz" ] }, - "Learn/Server-side/Django": { - "modified": "2020-07-16T22:36:31.705Z", + "Web/API/Document/querySelector": { + "modified": "2019-03-23T22:58:51.923Z", "contributors": [ - "jlpb97", - "javierdelpino", - "oscvic", - "faustinoloeza" + "BrodaNoel", + "Luis_Calvo", + "dannysalazar90" ] }, - "Learn/Server-side/Django/Admin_site": { - "modified": "2020-07-16T22:37:02.726Z", + "Web/API/Document/querySelectorAll": { + "modified": "2020-10-15T21:34:24.234Z", "contributors": [ - "ricardo-soria", - "cristianaguilarvelozo", - "SgtSteiner", - "javierdelpino" + "chrisdavidmills", + "AlePerez92", + "padrecedano", + "lfottaviano", + "joeljose" ] }, - "Learn/Server-side/Django/Authentication": { - "modified": "2020-07-29T13:34:31.552Z", + "Web/API/Document/readyState": { + "modified": "2019-03-23T22:46:17.268Z", "contributors": [ - "rayrojas", - "quijot", - "gatopadre", - "zelkovar", - "cbayonao", - "DTaiD", - "Carlosmgs111", - "ricardo-soria", - "GankerDev", - "javierdelpino" + "Codejobs" ] }, - "Learn/Server-side/Django/Deployment": { - "modified": "2020-09-29T05:31:27.175Z", + "Web/API/Document/registerElement": { + "modified": "2019-03-23T22:58:15.536Z", "contributors": [ - "chrisdavidmills", - "LIBIDORI", - "taponato", - "joanvasa", - "banideus", - "LUISCR", - "ricardo-soria", - "javierdelpino" + "SphinxKnight", + "AlePerez92", + "mclo", + "chrisdavidmills" ] }, - "Learn/Server-side/Django/Forms": { - "modified": "2020-09-03T20:14:00.959Z", + "Web/API/Document/scripts": { + "modified": "2019-03-23T22:57:42.662Z", "contributors": [ - "FoulMangoPY", - "joserojas1270", - "panpy-web", - "taponato", - "gatopadre", - "gt67ma", - "soberanes", - "ricardo-soria", - "boleklolek", - "SgtSteiner", - "javierdelpino" + "MauroEldritch" ] }, - "Learn/Server-side/Django/Generic_views": { - "modified": "2020-07-16T22:37:14.516Z", + "Web/API/Document/scroll_event": { + "modified": "2020-04-13T22:20:51.709Z", "contributors": [ - "ricardo-soria", - "javierdelpino" + "camsa", + "irenesmith", + "ExE-Boss", + "arkgast", + "fscholz", + "PatoDeTuring", + "Thargelion" ] }, - "Learn/Server-side/Django/Home_page": { - "modified": "2020-07-16T22:37:08.036Z", + "Web/API/Document/write": { + "modified": "2019-03-23T22:26:37.503Z", "contributors": [ - "dr2d4", - "MatiasJAco", - "ricardo-soria", - "cristianaguilarvelozo", - "AnPlandolit", - "javierdelpino" + "JohnnyKB", + "bastiantowers" ] }, - "Learn/Server-side/Django/Introducción": { - "modified": "2020-07-16T22:36:38.315Z", + "Web/API/Document/writeln": { + "modified": "2019-03-23T22:21:05.956Z", "contributors": [ - "dr2d4", - "jlpb97", - "oalberto96", - "javierdelpino", - "oscvic" + "mauroc8" ] }, - "Learn/Server-side/Django/Models": { - "modified": "2020-08-27T11:46:51.559Z", + "Web/API/DocumentFragment": { + "modified": "2020-10-15T22:29:37.426Z", "contributors": [ - "FoulMangoPY", - "dr2d4", - "Kalisto", - "cuantosoft", - "cruzito626", - "ricardo-soria", - "CristianFonseca03", - "cristianaguilarvelozo", - "iehurtado", - "SgtSteiner", - "javierdelpino", - "Panchosama", - "MatiMateo" + "JooseNavarro" ] }, - "Learn/Server-side/Django/Sessions": { - "modified": "2020-09-02T12:56:54.473Z", + "Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example": { + "modified": "2019-03-23T22:06:28.946Z", "contributors": [ - "FoulMangoPY", - "franpandol", - "ricardo-soria", - "tonyrodrigues", - "javierdelpino" + "BrodaNoel" ] }, - "Learn/Server-side/Django/Testing": { - "modified": "2020-11-25T15:32:01.505Z", + "Web/API/DragEvent": { + "modified": "2020-11-04T23:21:08.729Z", "contributors": [ - "JanoVZ", - "joserojas1270", - "rayrojas", - "julyaann", - "ferxohn", - "ricardo-soria", - "R4v3n15", - "javierdelpino" + "AngelFQC" ] }, - "Learn/Server-side/Django/Tutorial_local_library_website": { - "modified": "2020-07-16T22:36:48.653Z", + "Web/API/Element": { + "modified": "2019-03-24T00:06:42.464Z", "contributors": [ - "dr2d4", - "jfpIE16", - "ricardo-soria", - "javierdelpino" + "carllewisc", + "JuanMacias", + "SphinxKnight", + "fscholz", + "teoli", + "webmaster", + "AshfaqHossain", + "MARCASTELEON", + "Markens", + "Mgjbot", + "Nathymig" ] }, - "Learn/Server-side/Django/development_environment": { - "modified": "2020-07-16T22:36:43.747Z", + "Web/API/Element/animate": { + "modified": "2019-03-23T22:26:03.841Z", "contributors": [ - "sign4l", - "cruzito626", - "ricardo-soria", - "javierdelpino" + "SoftwareRVG" ] }, - "Learn/Server-side/Django/django_assessment_blog": { - "modified": "2020-07-16T22:37:48.773Z", + "Web/API/Element/attachShadow": { + "modified": "2020-10-15T22:29:44.635Z", "contributors": [ - "ricardo-soria", - "matiexe", - "javierdelpino" + "aguilerajl" ] }, - "Learn/Server-side/Django/skeleton_website": { - "modified": "2020-07-16T22:36:52.017Z", + "Web/API/Element/attributes": { + "modified": "2019-03-23T22:32:35.186Z", "contributors": [ - "dr2d4", - "cuantosoft", - "gozarrojas", - "ricardo-soria", - "javierdelpino" + "Grijander81" ] }, - "Learn/Server-side/Django/web_application_security": { - "modified": "2020-07-16T22:37:45.102Z", + "Web/API/Element/classList": { + "modified": "2019-08-07T11:56:45.170Z", "contributors": [ - "sebastianmr6", - "ricardo-soria", - "javierdelpino" + "AlePerez92", + "alkaithil", + "luispuchades" ] }, - "Learn/Server-side/Express_Nodejs": { - "modified": "2020-07-16T22:37:51.529Z", + "Web/API/Element/className": { + "modified": "2019-03-23T22:32:39.589Z", "contributors": [ - "GUEROZ", - "deit", - "rmon_vfer", - "sergiodiezdepedro", - "javierdelpino", - "sergionunez" + "AlePerez92", + "Grijander81" ] }, - "Learn/Server-side/Express_Nodejs/Introduction": { - "modified": "2020-07-16T22:38:09.037Z", + "Web/API/Element/click_event": { + "modified": "2019-03-18T20:47:32.813Z", "contributors": [ - "evaferreira", - "threevanny", - "hernanfloresramirez1987", - "jorgesqm95", - "GUEROZ", - "Slb-Sbsz", - "tec.josec", - "crisaragon", - "Sergio_Gonzalez_Collado", - "fedechiappero", - "RigobertoUlloa", - "javierdelpino", - "SphinxKnight" + "irenesmith", + "ExE-Boss", + "fscholz", + "jvas28" ] }, - "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website": { - "modified": "2020-07-16T22:38:15.482Z", + "Web/API/Element/clientHeight": { + "modified": "2019-03-18T20:59:01.264Z", "contributors": [ - "acasco", - "antiepoke" + "SphinxKnight", + "maxijb", + "germanfr" ] }, - "Learn/Server-side/Express_Nodejs/development_environment": { - "modified": "2020-07-16T22:37:58.161Z", + "Web/API/Element/clientLeft": { + "modified": "2019-03-23T23:50:22.640Z", "contributors": [ - "sandromedina", - "threevanny", - "pajaro5", - "GUEROZ", - "maringenio" + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" ] }, - "Learn/Server-side/Express_Nodejs/mongoose": { - "modified": "2020-07-16T22:38:20.335Z", + "Web/API/Element/clientTop": { + "modified": "2019-03-23T23:50:18.628Z", "contributors": [ - "danimrprofe", - "rmon_vfer" + "SphinxKnight", + "fscholz", + "AshfaqHossain", + "HenryGR", + "Mgjbot" ] }, - "Learn/Server-side/Express_Nodejs/skeleton_website": { - "modified": "2020-07-16T22:38:03.936Z", + "Web/API/Element/clientWidth": { + "modified": "2020-10-15T21:46:17.283Z", "contributors": [ - "juancorbacho", - "tec.josec", - "maringenio", - "mimz2563" + "SphinxKnight", + "Grijander81" ] }, - "Learn/Server-side/Node_server_without_framework": { - "modified": "2020-07-16T22:36:05.239Z", + "Web/API/Element/closest": { + "modified": "2020-10-15T21:51:29.500Z", "contributors": [ - "javierdelpino" + "AlePerez92" ] }, - "Learn/Server-side/Primeros_pasos": { - "modified": "2020-07-16T22:36:08.254Z", + "Web/API/Element/computedStyleMap": { + "modified": "2020-11-20T23:32:12.573Z", "contributors": [ - "javierdelpino" + "mrkadium" ] }, - "Learn/Server-side/Primeros_pasos/Introducción": { - "modified": "2020-07-16T22:36:13.094Z", + "Web/API/Element/currentStyle": { + "modified": "2019-03-23T22:26:01.738Z", "contributors": [ - "AnaHertaj", - "SphinxKnight", - "mortyBL", - "javierdelpino" + "SoftwareRVG" ] }, - "Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor": { - "modified": "2020-07-16T22:36:18.740Z", + "Web/API/Element/getAttribute": { + "modified": "2019-03-23T22:55:05.590Z", "contributors": [ - "Slb-Sbsz", - "javierdelpino" + "germanfr", + "hawkins" ] }, - "Learn/Server-side/Primeros_pasos/Web_frameworks": { - "modified": "2020-07-16T22:36:23.784Z", + "Web/API/Element/getAttributeNodeNS": { + "modified": "2019-03-18T21:40:41.705Z", "contributors": [ - "Slb-Sbsz", - "javierdelpino" + "FcoJavierEsc" ] }, - "Learn/Server-side/Primeros_pasos/seguridad_sitios_web": { - "modified": "2020-07-16T22:36:27.856Z", + "Web/API/Element/getBoundingClientRect": { + "modified": "2020-10-15T21:16:26.376Z", "contributors": [ - "isaine", - "Slb-Sbsz", - "javierdelpino" + "AlePerez92", + "slam", + "cristianmartinez", + "SphinxKnight", + "joseanpg", + "jzatarain", + "fscholz", + "jsx", + "HenryGR", + "Mgjbot" ] }, - "Learn/Using_Github_pages": { - "modified": "2020-07-16T22:35:51.571Z", + "Web/API/Element/getClientRects": { + "modified": "2019-03-23T23:50:31.325Z", "contributors": [ - "DaniNz", - "LuyisiMiger", - "TAXIS" + "SphinxKnight", + "edhzsz", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" ] }, - "Learn/codificacion-scripting": { - "modified": "2020-07-16T22:22:13.785Z", + "Web/API/Element/getElementsByClassName": { + "modified": "2019-03-23T22:32:46.843Z", "contributors": [ - "hamfree" + "Grijander81" ] }, - "Localización": { - "modified": "2019-01-16T13:31:36.167Z", + "Web/API/Element/getElementsByTagName": { + "modified": "2019-03-23T23:53:30.735Z", "contributors": [ - "DirkS", - "RickieesES", + "SphinxKnight", + "fscholz", + "khalid32", "Mgjbot", - "Verruckt", - "Jorolo", - "Takenbot", - "Nukeador", - "Radigar" + "HenryGR" ] }, - "Localizar_con_Narro": { - "modified": "2019-03-24T00:12:25.538Z", + "Web/API/Element/getElementsByTagNameNS": { + "modified": "2019-03-18T21:15:33.018Z", "contributors": [ - "jvmjunior", - "deimidis" + "cguimaraenz" ] }, - "MDN": { - "modified": "2020-07-08T14:43:57.058Z", + "Web/API/Element/hasAttribute": { + "modified": "2019-03-23T22:12:50.721Z", "contributors": [ - "Maose", - "jswisher", - "SphinxKnight", - "Riszin", - "Beatriz_Ortega_Valdes", - "facufacu3789", - "wbamberg", - "0zxo", - "Jeremie", - "raecillacastellana", - "DonPrime", - "GersonLazaro", - "Arudb79", - "MauricioGil", - "Sheppy" + "ElChiniNet" ] }, - "MDN/About": { - "modified": "2020-05-03T01:47:58.469Z", + "Web/API/Element/id": { + "modified": "2019-03-23T22:26:11.048Z", "contributors": [ - "Beatriz_Ortega_Valdes", - "ecedenyo", - "wbamberg", - "jswisher", - "hecaxmmx", - "SoftwareRVG", - "Jeremie", - "carloslazaro", - "cosmesantos", - "wilo", - "LuisArt", - "sinfallas", - "maedca" + "SoftwareRVG" ] }, - "MDN/Comunidad": { - "modified": "2020-04-24T19:14:03.228Z", + "Web/API/Element/innerHTML": { + "modified": "2019-03-18T20:58:51.922Z", "contributors": [ - "inwm", "SphinxKnight", - "wbamberg", - "jenyvera", - "0zxo", - "Jeremie", - "LeoHirsch", - "luisgm76" - ] - }, - "MDN/Contribute": { - "modified": "2019-03-22T01:52:35.495Z", - "contributors": [ - "Beatriz_Ortega_Valdes", - "wbamberg", - "Rrxxxx", - "Ibrahim1997", - "LeoHirsch", - "MauricioGil", - "Mars" + "IsaacAaron", + "BrodaNoel", + "CristhianLora1", + "fscholz", + "teoli", + "JAparici" ] }, - "MDN/Contribute/Community": { - "modified": "2020-09-03T13:14:53.733Z", + "Web/API/Element/insertAdjacentElement": { + "modified": "2020-12-03T10:36:12.400Z", "contributors": [ - "FoulMangoPY", - "jswisher", - "wbamberg", - "welm", - "Sebastian.Nagles" + "AlePerez92", + "alexlndn", + "AgustinPrieto" ] }, - "MDN/Contribute/Feedback": { - "modified": "2020-12-02T14:04:57.487Z", + "Web/API/Element/insertAdjacentHTML": { + "modified": "2020-10-15T21:56:01.516Z", "contributors": [ - "SphinxKnight", - "abcserviki", - "chrisdavidmills", - "Rafasu", - "jswisher", - "yohanolmedo", - "alex16jpv", - "wbamberg", - "astrapotro", - "Jabi", - "Sergio_Gonzalez_Collado", - "karl_", - "MARVINFLORENTINO", - "aresth+", - "DracotMolver" + "AlePerez92", + "mikekrn" ] }, - "MDN/Contribute/Getting_started": { - "modified": "2020-12-02T19:26:24.923Z", + "Web/API/Element/localName": { + "modified": "2019-03-23T22:26:08.984Z", "contributors": [ - "chrisdavidmills", - "Anibalismo", - "MIKE1203", - "gcjuan", - "clarii", - "wbamberg", - "0zxo", - "dariomaim", - "grover.velasquez", - "Primo18", - "maubarbetti", - "Arukantara", - "jsx", - "fraph", - "teoli", - "aguilaindomable", - "LeoHirsch", - "cototion" + "SoftwareRVG" ] }, - "MDN/Contribute/Howto": { - "modified": "2019-01-16T18:56:52.965Z", + "Web/API/Element/matches": { + "modified": "2020-12-06T16:23:07.481Z", "contributors": [ - "wbamberg", - "0zxo", - "astrapotro", - "MauricioGil", - "Sheppy" + "AlePerez92", + "amIsmael", + "nbouvrette", + "Grijander81" ] }, - "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { - "modified": "2019-01-16T19:10:19.469Z", + "Web/API/Element/mousedown_event": { + "modified": "2019-03-18T20:41:57.554Z", "contributors": [ - "wbamberg", - "javierdp", - "gpadilla", - "RoxPulido", - "LeoHirsch" + "irenesmith", + "ExE-Boss", + "fscholz", + "marydn" ] }, - "MDN/Contribute/Howto/Crear_cuenta_MDN": { - "modified": "2020-08-21T18:14:17.930Z", + "Web/API/Element/namespaceURI": { + "modified": "2019-03-23T22:25:51.573Z", "contributors": [ - "Tomillo", - "JADE-2006", - "wbamberg", - "JuniorBO", - "Arudb79", - "LeoHirsch" + "SoftwareRVG" ] }, - "MDN/Contribute/Howto/Document_a_CSS_property": { - "modified": "2020-02-19T19:43:18.253Z", + "Web/API/Element/outerHTML": { + "modified": "2019-03-23T22:32:38.203Z", "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "teoli", - "stephaniehobson", - "MauricioGil" + "Grijander81" ] }, - "MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad": { - "modified": "2019-03-18T21:31:21.033Z", + "Web/API/Element/prefix": { + "modified": "2019-03-23T22:25:56.753Z", "contributors": [ - "wbamberg", - "B1tF8er" + "SoftwareRVG" ] }, - "MDN/Contribute/Howto/Etiquetas_paginas_javascript": { - "modified": "2019-01-16T19:47:18.318Z", + "Web/API/Element/querySelector": { + "modified": "2020-10-01T13:45:10.425Z", "contributors": [ - "wbamberg", - "LeoHirsch" + "Augusto-Ruiz", + "Luis_Calvo", + "Fx-Enlcxx" ] }, - "MDN/Contribute/Howto/Remover_Macros_Experimentales": { - "modified": "2020-07-05T17:06:56.383Z", + "Web/API/Element/removeAttribute": { + "modified": "2019-03-23T22:32:43.147Z", "contributors": [ - "Anibalismo" + "AlePerez92", + "Grijander81" ] }, - "MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2020-07-05T16:17:53.925Z", + "Web/API/Element/requestFullScreen": { + "modified": "2019-03-23T22:46:59.466Z", "contributors": [ - "Anibalismo", - "Maose", - "wbamberg", - "gerard.am", - "LeoHirsch" + "joseamn1" ] }, - "MDN/Contribute/Howto/Tag": { - "modified": "2019-03-23T23:15:01.953Z", + "Web/API/Element/runtimeStyle": { + "modified": "2019-03-23T22:25:35.378Z", "contributors": [ - "wbamberg", - "Creasick", - "blanchart", - "meCarrion17", - "rafamagno", - "teoli", - "PepeAntonio", - "CristianMar25", - "anmartinez", - "LeoHirsch" + "SoftwareRVG" ] }, - "MDN/Contribute/Howto/Usar_barras_laterales_de_navegación": { - "modified": "2019-05-08T17:34:30.854Z", + "Web/API/Element/scrollHeight": { + "modified": "2020-09-19T11:38:52.843Z", "contributors": [ - "ivanagui2" + "amfolgar", + "SphinxKnight", + "SoftwareRVG" ] }, - "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": { - "modified": "2019-03-23T23:09:23.417Z", + "Web/API/Element/scrollIntoView": { + "modified": "2020-08-02T20:51:14.523Z", "contributors": [ - "wbamberg", - "astrapotro", - "teoli", - "L_e_o" + "maketas", + "avaleriani", + "magorismagor", + "germanfr" ] }, - "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { - "modified": "2020-06-26T02:13:25.044Z", + "Web/API/Element/scrollLeft": { + "modified": "2019-03-18T20:59:11.327Z", "contributors": [ - "Enesimus", - "pablorebora", - "blanchart", - "BubuAnabelas", "SphinxKnight", - "FranciscoImanolSuarez" + "SoftwareRVG" ] }, - "MDN/Contribute/Howto/revision_editorial": { - "modified": "2019-03-18T20:54:27.132Z", + "Web/API/Element/scrollTop": { + "modified": "2019-03-23T22:32:41.577Z", "contributors": [ - "LauraJaime8", - "wbamberg", - "ElNobDeTfm", - "Arudb79", - "LeoHirsch" + "Grijander81" ] }, - "MDN/Contribute/Howto/revision_tecnica": { - "modified": "2019-01-16T18:56:48.857Z", + "Web/API/Element/scrollTopMax": { + "modified": "2019-03-23T22:16:03.156Z", "contributors": [ - "wbamberg", - "MarkelCuesta", - "rowasc", - "LeoHirsch" + "lizzie136" ] }, - "MDN/Contribute/Procesos": { - "modified": "2019-01-17T02:12:44.469Z", + "Web/API/Element/scrollWidth": { + "modified": "2020-10-15T21:46:17.244Z", "contributors": [ - "wbamberg", - "astrapotro" + "SphinxKnight", + "Grijander81" ] }, - "MDN/Contribute/Tareas": { - "modified": "2019-01-16T18:56:38.941Z", + "Web/API/Element/setAttribute": { + "modified": "2019-03-23T23:58:09.577Z", "contributors": [ - "wbamberg", - "MauricioGil", - "LeoHirsch" + "AlePerez92", + "fscholz", + "AshfaqHossain", + "teoli", + "HenryGR" ] }, - "MDN/Guidelines": { - "modified": "2020-09-30T15:28:55.816Z", + "Web/API/Element/setAttributeNS": { + "modified": "2019-03-23T22:29:35.252Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Jeremie", - "LeoHirsch" + "developersoul" ] }, - "MDN/Guidelines/Content_blocks": { - "modified": "2020-09-30T15:28:56.171Z", + "Web/API/Element/setCapture": { + "modified": "2019-03-23T22:23:40.163Z", "contributors": [ - "chrisdavidmills", "wbamberg", - "Jeremie", - "LeoHirsch" + "SoftwareRVG" ] }, - "MDN/Guidelines/Convenciones_y_definiciones": { - "modified": "2020-09-30T15:28:56.412Z", + "Web/API/Element/shadowRoot": { + "modified": "2020-10-15T22:21:04.049Z", "contributors": [ - "chrisdavidmills", - "Nachec" + "quintero_japon" ] }, - "MDN/Guidelines/Project:Guía_de_estilo": { - "modified": "2020-09-30T15:28:56.038Z", + "Web/API/Element/tagName": { + "modified": "2019-03-23T23:53:26.081Z", "contributors": [ - "chrisdavidmills", - "blanchart", - "clarii", - "wbamberg", - "Jeremie", - "Salamandra101", - "Dgeek", + "SphinxKnight", "fscholz", - "LeoHirsch", - "teoli", - "Pgulijczuk", - "DoctorRomi", - "Nukeador", - "Nanomo", - "Eqx", - "Jorolo" + "khalid32", + "Mgjbot", + "HenryGR" ] }, - "MDN/Kuma": { - "modified": "2019-09-09T15:52:33.535Z", + "Web/API/Element/wheel_event": { + "modified": "2019-04-08T07:24:47.493Z", "contributors": [ - "SphinxKnight", - "clarii", - "wbamberg", - "Jeremie", - "Diio", - "atlas7jean" + "irenesmith", + "fscholz", + "ExE-Boss", + "dimuziop", + "Thargelion", + "PRDeving" ] }, - "MDN/Kuma/Contributing": { - "modified": "2019-03-23T23:15:25.956Z", + "Web/API/Event": { + "modified": "2019-03-24T00:00:03.889Z", "contributors": [ "wbamberg", - "Jeremie", - "MauricioGil" + "jesmarquez", + "fscholz", + "cesardelahoz", + "Mgjbot", + "Markens", + "DR", + "Nathymig" ] }, - "MDN/Kuma/Contributing/Getting_started": { - "modified": "2019-01-16T19:06:06.895Z", + "Web/API/Event/Event": { + "modified": "2020-10-15T21:51:25.582Z", "contributors": [ - "wbamberg", - "Jeremie", - "MauricioGil" + "fscholz", + "malonson" ] }, - "MDN/Structures": { - "modified": "2020-09-30T09:06:15.403Z", + "Web/API/Event/bubbles": { + "modified": "2019-03-23T23:50:25.843Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "jswisher" + "SphinxKnight", + "DeiberChacon", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" ] }, - "MDN/Structures/Ejemplos_ejecutables": { - "modified": "2020-09-30T09:06:15.983Z", + "Web/API/Event/cancelable": { + "modified": "2019-03-23T23:53:29.694Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "emanuelvega", - "LUISTGMDN", - "elihro" + "fscholz", + "hardhik", + "AshfaqHossain", + "Mgjbot", + "HenryGR" ] }, - "MDN/Structures/Macros": { - "modified": "2020-09-30T09:06:16.658Z", + "Web/API/Event/currentTarget": { + "modified": "2020-10-15T21:56:21.779Z", "contributors": [ - "chrisdavidmills", - "Nachec", - "wbamberg" + "AlePerez92", + "KacosPro", + "roberbnd" ] }, - "MDN/Structures/Macros/Commonly-used_macros": { - "modified": "2020-09-30T09:06:17.138Z", + "Web/API/Event/defaultPrevented": { + "modified": "2019-03-23T23:06:29.767Z", "contributors": [ - "chrisdavidmills", - "Nachec" + "AlePerez92", + "fscholz", + "matajm" ] }, - "MDN/Structures/Macros/Otras": { - "modified": "2020-09-30T09:06:17.522Z", + "Web/API/Event/initEvent": { + "modified": "2019-03-23T23:53:14.885Z", "contributors": [ - "chrisdavidmills", - "Nachec" + "SphinxKnight", + "fscholz", + "AndresSaa", + "AshfaqHossain", + "Mgjbot", + "HenryGR" ] }, - "MDN/Structures/Tablas_de_compatibilidad": { - "modified": "2020-10-15T22:33:39.399Z", + "Web/API/Event/preventDefault": { + "modified": "2019-03-23T23:53:27.022Z", "contributors": [ - "chrisdavidmills", - "Nachec" + "SphinxKnight", + "fscholz", + "khalid32", + "Mgjbot", + "HenryGR" ] }, - "MDN/Tools": { - "modified": "2020-09-30T16:48:18.728Z", + "Web/API/Event/stopPropagation": { + "modified": "2019-03-18T20:37:26.213Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "Jeremie", - "Arudb79", - "atlas7jean" + "sebaLinares", + "theskear", + "AlePerez92" ] }, - "MDN/Tools/Introduction_to_KumaScript": { - "modified": "2020-09-30T16:48:19.117Z", + "Web/API/Event/target": { + "modified": "2020-11-21T17:52:42.977Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "velizluisma", - "Jeremie", - "LeoHirsch" + "fernandoarmonellifiedler", + "luchosr", + "Eyurivilc", + "roberbnd" ] }, - "MDN/Tools/Page_regeneration": { - "modified": "2020-09-30T16:48:19.365Z", + "Web/API/Event/type": { + "modified": "2020-10-15T21:21:03.258Z", "contributors": [ - "chrisdavidmills", - "Anibalismo" + "AlePerez92", + "javier1nc", + "fscholz", + "Chacho" ] }, - "MDN/Tools/Template_editing": { - "modified": "2020-09-30T16:48:19.234Z", + "Web/API/EventListener": { + "modified": "2019-03-23T22:49:37.176Z", "contributors": [ - "chrisdavidmills", - "wbamberg", - "juan-ferrer-toribio" + "gdlm91", + "japho" ] }, - "MDN/User_guide": { - "modified": "2020-12-14T09:30:27.029Z", + "Web/API/EventSource": { + "modified": "2019-03-23T22:10:23.912Z", "contributors": [ - "wbamberg", - "Sheppy" + "Jabi" ] }, - "MDN_en_diez": { - "modified": "2019-03-23T22:49:57.954Z", + "Web/API/EventSource/onopen": { + "modified": "2019-03-23T22:03:59.180Z", "contributors": [ - "pabloveintimilla", - "diego.mauricio.meneses.rios" + "Hoosep" ] }, - "Mejoras_DOM_en_Firefox_3": { - "modified": "2019-03-23T23:50:52.840Z", + "Web/API/EventTarget": { + "modified": "2020-10-26T17:08:31.808Z", "contributors": [ - "wbamberg", - "Mgjbot", - "RickieesES", - "Nukeador", - "HenryGR", - "Talisker" + "Ktoxcon", + "diazpolanco13", + "jorgeherrera9103", + "fscholz" ] }, - "Mejoras_SVG_en_Firefox_3": { - "modified": "2019-03-23T23:50:55.206Z", + "Web/API/EventTarget/addEventListener": { + "modified": "2020-10-24T17:14:12.317Z", "contributors": [ + "codesandtags", "wbamberg", - "Mgjbot", - "RickieesES", - "Nukeador", - "Talisker" + "padrecedano", + "LuxDie", + "juanbrujo", + "StripTM", + "fscholz", + "samurai-code", + "Josias", + "edulon", + "Chacho" ] }, - "Mejoras_XUL_en_Firefox_3": { - "modified": "2019-03-24T00:02:34.038Z", + "Web/API/EventTarget/dispatchEvent": { + "modified": "2020-05-25T14:53:28.357Z", "contributors": [ - "wbamberg", + "OneLoneFox", + "SphinxKnight", "fscholz", - "Nukeador", + "jsx", + "teoli", "Mgjbot", - "Nathymig", - "Dukebody" + "HenryGR" ] }, - "Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla": { - "modified": "2019-03-23T23:59:56.566Z", + "Web/API/EventTarget/removeEventListener": { + "modified": "2020-10-15T21:33:28.829Z", "contributors": [ - "teoli", - "Siyivan", - "krusch", - "Mgjbot", - "Mrgonzalez", - "Superruzafa", - "Ttataje", - "Nukeador" + "IsraelFloresDGA", + "everblut", + "cmadrono" ] }, - "Modo_casi_estándar_de_Gecko": { - "modified": "2019-03-23T23:43:50.956Z", + "Web/API/FetchEvent": { + "modified": "2020-11-15T12:19:50.961Z", "contributors": [ - "teoli", - "Mgjbot", - "Jorolo" + "kuntur-studio", + "pavilion", + "fasalgad" ] }, - "Mozilla": { - "modified": "2019-01-16T13:16:23.082Z", + "Web/API/Fetch_API": { + "modified": "2020-10-15T21:38:02.526Z", "contributors": [ - "cosmesantos", - "andersonvc89", - "Vladi05", - "Granpichi", - "yesypsb", - "Getachi", - "Izel" + "PacoVela", + "SSantiago90", + "erpheus", + "AlePerez92", + "robermorales", + "jmcarnero", + "enlinea777" ] }, - "Mozilla/Add-ons": { - "modified": "2019-03-18T21:08:47.524Z", + "Web/API/File": { + "modified": "2020-10-15T21:37:53.420Z", "contributors": [ - "hecaxmmx", - "hamfree", - "Aldrin508", - "Arudb79", - "Psy", - "RaulVisa", - "LeoHirsch", - "rojo32" + "IsraelFloresDGA", + "mattkgross", + "AshWilliams" ] }, - "Mozilla/Add-ons/WebExtensions": { - "modified": "2019-07-18T20:39:33.007Z", + "Web/API/File/Using_files_from_web_applications": { + "modified": "2019-03-24T00:06:11.527Z", "contributors": [ - "hecaxmmx", - "ivanruvalcaba", - "AngelFQC", - "yuniers" + "chrisdavidmills", + "israelfl", + "pacommozilla", + "teoli", + "mare", + "Izel" ] }, - "Mozilla/Add-ons/WebExtensions/API": { - "modified": "2019-05-09T20:52:57.986Z", + "Web/API/File/fileName": { + "modified": "2020-02-09T09:40:59.258Z", "contributors": [ - "Micronine", - "BubuAnabelas", - "chicocoulomb", - "yuniers" + "blanchart", + "IsraelFloresDGA", + "BrodaNoel" ] }, - "Mozilla/Add-ons/WebExtensions/API/i18n": { - "modified": "2020-10-15T21:39:41.302Z", + "Web/API/File/lastModifiedDate": { + "modified": "2019-03-23T22:06:34.338Z", "contributors": [ - "wbamberg", - "fitojb", - "yuniers" + "BrodaNoel" ] }, - "Mozilla/Add-ons/WebExtensions/API/storage": { - "modified": "2020-10-15T22:13:52.747Z", + "Web/API/File/name": { + "modified": "2020-10-15T21:56:43.088Z", "contributors": [ - "SphinxKnight", - "wbamberg", - "grxdipgra" + "IsraelFloresDGA", + "BrodaNoel" ] }, - "Mozilla/Add-ons/WebExtensions/API/storage/local": { - "modified": "2020-10-15T22:13:52.742Z", + "Web/API/File/type": { + "modified": "2020-10-15T22:26:46.640Z", "contributors": [ - "wbamberg", - "grxdipgra" + "IsraelFloresDGA" ] }, - "Mozilla/Add-ons/WebExtensions/API/storage/sync": { - "modified": "2020-10-15T22:13:52.602Z", + "Web/API/File/webkitRelativePath": { + "modified": "2019-03-23T22:06:35.128Z", "contributors": [ - "wbamberg", - "grxdipgra" + "BrodaNoel" ] }, - "Mozilla/Add-ons/WebExtensions/API/webNavigation": { - "modified": "2020-10-15T21:52:47.862Z", + "Web/API/FileError": { + "modified": "2019-03-23T22:51:12.244Z", "contributors": [ - "wbamberg", - "tanclony" + "Jarvanux" ] }, - "Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar": { - "modified": "2019-03-18T21:05:11.701Z", + "Web/API/FileReader": { + "modified": "2019-03-23T23:04:14.656Z", "contributors": [ - "roberbnd" + "JuanjoVlado", + "V.Morantes", + "israelfl", + "Carlos-T", + "Clunaenc", + "fscholz", + "cm_rocanroll" ] }, - "Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension": { - "modified": "2019-03-18T21:08:05.873Z", + "Web/API/FileReader/onload": { + "modified": "2019-03-23T22:18:25.451Z", "contributors": [ - "hecaxmmx", - "rgo", - "jde-gr", - "doztrock", - "yuniers" + "DaniMartiRamirez" ] }, - "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { - "modified": "2020-10-15T20:55:02.467Z", + "Web/API/FileReader/readAsArrayBuffer": { + "modified": "2019-03-23T22:49:37.062Z", "contributors": [ - "rossc90" + "MarcoZepeda" ] }, - "Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities": { - "modified": "2019-03-23T22:45:10.191Z", + "Web/API/FileReader/readAsDataURL": { + "modified": "2019-03-23T22:48:53.339Z", "contributors": [ - "Nitram_G", - "yuniers" + "teoli", + "empirreamm", + "developersoul" ] }, - "Mozilla/Add-ons/WebExtensions/Depuración": { - "modified": "2019-03-18T21:05:20.525Z", + "Web/API/FileReader/readAsText": { + "modified": "2019-03-23T22:11:54.836Z", "contributors": [ - "Pau" + "owaremx" ] }, - "Mozilla/Add-ons/WebExtensions/Examples": { - "modified": "2019-03-18T21:06:01.388Z", + "Web/API/FileReader/result": { + "modified": "2020-10-15T22:16:53.945Z", "contributors": [ - "hecaxmmx" + "carlosbulnes" ] }, - "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { - "modified": "2020-09-27T05:32:44.293Z", + "Web/API/FileSystem": { + "modified": "2019-07-04T14:31:32.136Z", "contributors": [ - "omaralonsog" + "lperezp", + "jpmontoya182" ] }, - "Mozilla/Add-ons/WebExtensions/Implement_a_settings_page": { - "modified": "2019-03-18T21:06:46.901Z", + "Web/API/Fullscreen_API": { + "modified": "2019-03-23T22:19:43.566Z", "contributors": [ - "SoftwareRVG" + "wbamberg", + "israel-munoz" ] }, - "Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests": { - "modified": "2019-03-18T21:06:03.133Z", + "Web/API/GamepadButton": { + "modified": "2020-10-15T22:31:36.770Z", "contributors": [ - "juanbrujo", - "regisdark", - "hecaxmmx" + "kenliten" ] }, - "Mozilla/Add-ons/WebExtensions/Internationalization": { - "modified": "2020-06-29T22:25:32.104Z", + "Web/API/Gamepad_API": { + "modified": "2020-10-15T22:24:50.048Z", "contributors": [ - "hugojavierduran9" + "LeonEmil" ] }, - "Mozilla/Add-ons/WebExtensions/Modify_a_web_page": { - "modified": "2019-03-18T21:02:55.354Z", + "Web/API/Geolocation": { + "modified": "2019-03-23T23:21:41.383Z", "contributors": [ - "alexgilsoncampi" + "AlePerez92", + "fscholz", + "AJMG" ] }, - "Mozilla/Add-ons/WebExtensions/Packaging_and_installation": { - "modified": "2019-03-23T22:45:27.399Z", + "Web/API/Geolocation/clearWatch": { + "modified": "2019-03-23T23:21:31.757Z", "contributors": [ - "yuniers" + "franklevel", + "fscholz", + "AJMG" ] }, - "Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome": { - "modified": "2019-03-18T21:08:10.456Z", + "Web/API/Geolocation/getCurrentPosition": { + "modified": "2019-03-23T23:21:46.266Z", "contributors": [ - "fitojb", - "yuniers" + "AlePerez92", + "fscholz", + "lupomontero", + "AJMG" ] }, - "Mozilla/Add-ons/WebExtensions/Prerequisitos": { - "modified": "2019-03-23T22:45:28.352Z", + "Web/API/Geolocation/watchPosition": { + "modified": "2019-03-23T23:21:44.720Z", "contributors": [ - "yuniers" + "AlePerez92", + "fscholz", + "AJMG" ] }, - "Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension": { - "modified": "2019-03-18T21:05:24.379Z", + "Web/API/GeolocationCoordinates": { + "modified": "2019-12-10T09:34:21.214Z", "contributors": [ - "FacundoCerezo", - "IXTRUnai" + "chrisdavidmills", + "AlePerez92" ] }, - "Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions": { - "modified": "2020-11-23T00:59:33.889Z", + "Web/API/GeolocationCoordinates/latitude": { + "modified": "2019-12-10T09:34:21.409Z", "contributors": [ - "kenliten", - "hecaxmmx", - "13539" + "chrisdavidmills", + "elxris" ] }, - "Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension": { - "modified": "2020-11-23T01:34:20.681Z", + "Web/API/GeolocationPosition": { + "modified": "2020-10-15T22:10:48.604Z", "contributors": [ - "kenliten", - "IgnacioMilia", - "mppfiles", - "adderou", - "hecaxmmx", - "Maller_Lagoon" + "chrisdavidmills", + "sergitxu" ] }, - "Mozilla/Add-ons/WebExtensions/Tutorial": { - "modified": "2019-04-25T06:15:12.057Z", + "Web/API/GlobalEventHandlers": { + "modified": "2020-10-15T21:33:09.443Z", "contributors": [ - "Klius", - "IgnacioMilia", - "chicocoulomb", - "hecaxmmx", - "yuniers" - ] - }, - "Mozilla/Add-ons/WebExtensions/What_next_": { - "modified": "2019-03-18T20:43:00.251Z", - "contributors": [ - "chicocoulomb" + "Nachec", + "fscholz" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json": { - "modified": "2020-10-15T21:39:41.879Z", + "Web/API/GlobalEventHandlers/onblur": { + "modified": "2019-03-23T22:33:17.308Z", "contributors": [ - "wachunei", - "legomolina", - "yuniers" + "Grijander81" ] }, - "Mozilla/Add-ons/WebExtensions/manifest.json/icons": { - "modified": "2020-10-15T22:27:24.193Z", + "Web/API/GlobalEventHandlers/onchange": { + "modified": "2019-03-23T22:18:11.571Z", "contributors": [ - "qwerty726" + "gama" ] }, - "Mozilla/Add-ons/WebExtensions/user_interface": { - "modified": "2019-03-18T21:03:49.876Z", + "Web/API/GlobalEventHandlers/onclick": { + "modified": "2019-08-28T11:37:06.287Z", "contributors": [ - "rebloor" + "J-Lobo", + "Noreen", + "gama" ] }, - "Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador": { - "modified": "2019-03-18T21:03:34.447Z", + "Web/API/GlobalEventHandlers/onclose": { + "modified": "2020-10-15T22:12:16.407Z", "contributors": [ - "adderou" + "alexisrazok" ] }, - "Mozilla/Add-ons/WebExtensions/user_interface/Page_actions": { - "modified": "2019-08-12T17:02:44.540Z", + "Web/API/GlobalEventHandlers/onerror": { + "modified": "2019-03-23T22:53:42.268Z", "contributors": [ - "rayrojas" + "wbamberg", + "galegosimpatico" ] }, - "Mozilla/Developer_guide": { - "modified": "2019-03-23T23:34:39.883Z", + "Web/API/GlobalEventHandlers/onfocus": { + "modified": "2019-03-18T21:31:41.059Z", "contributors": [ - "chrisdavidmills", - "Etruscco" + "ANDRUS74" ] }, - "Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla": { - "modified": "2019-03-23T23:58:56.616Z", + "Web/API/GlobalEventHandlers/oninput": { + "modified": "2019-03-23T22:55:01.733Z", "contributors": [ - "chrisdavidmills", - "fscholz", - "teoli", - "DoctorRomi", - "Nukeador", - "Mgjbot", - "Blank zero" + "Diegosolo" ] }, - "Mozilla/Developer_guide/Source_Code": { - "modified": "2020-03-01T17:19:51.307Z", + "Web/API/GlobalEventHandlers/onkeydown": { + "modified": "2019-03-18T21:31:44.954Z", "contributors": [ - "IngrownMink4", - "Allamc11", - "chrisdavidmills", - "jntesteves" + "ANDRUS74" ] }, - "Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS)": { - "modified": "2019-03-23T23:46:33.805Z", + "Web/API/GlobalEventHandlers/onkeyup": { + "modified": "2019-03-18T21:31:50.304Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Nukeador", - "Mgjbot", - "Blank zero" + "ANDRUS74" ] }, - "Mozilla/Developer_guide/mozilla-central": { - "modified": "2019-03-18T21:11:07.718Z", + "Web/API/GlobalEventHandlers/onload": { + "modified": "2019-03-23T23:33:14.527Z", "contributors": [ - "duduindo", - "chrisdavidmills", "fscholz", - "RickieesES" + "khalid32", + "ehecatl" ] }, - "Mozilla/Firefox": { - "modified": "2020-01-18T13:20:40.065Z", + "Web/API/GlobalEventHandlers/onloadedmetadata": { + "modified": "2020-10-15T22:34:40.071Z", "contributors": [ - "leela52452", - "SphinxKnight", - "wbamberg", - "jonasmreza", - "avelper", - "regisdark", - "AlmondCupcake", - "hecaxmmx", - "SecurityResearcher", - "Pablo_Ivan", - "Alejandro_Blanco", - "gabpull", - "nekside" + "winxde" ] }, - "Mozilla/Firefox/Experimental_features": { - "modified": "2019-04-01T12:56:43.181Z", + "Web/API/GlobalEventHandlers/onresize": { + "modified": "2019-03-23T22:38:35.801Z", "contributors": [ - "johnboy-99", - "wbamberg", - "Maletil" + "NevinSantana" ] }, - "Mozilla/Firefox/Releases": { - "modified": "2019-03-23T23:27:32.191Z", + "Web/API/GlobalEventHandlers/onscroll": { + "modified": "2019-03-23T22:33:14.134Z", "contributors": [ - "wbamberg", - "thzunder", - "Sheppy" + "Grijander81" ] }, - "Mozilla/Firefox/Releases/30": { - "modified": "2019-03-23T23:06:34.308Z", + "Web/API/GlobalEventHandlers/onselect": { + "modified": "2019-03-23T22:33:14.413Z", "contributors": [ - "wbamberg", - "mrbyte007" + "Grijander81" ] }, - "Mozilla/Firefox/Releases/50": { - "modified": "2019-03-18T21:11:07.358Z", + "Web/API/GlobalEventHandlers/onselectstart": { + "modified": "2019-03-18T21:23:16.974Z", "contributors": [ - "duduindo", - "wbamberg", - "frank-orellana", - "raiosxdxd" + "Grijander81" ] }, - "Mozilla/Firefox/Releases/57": { - "modified": "2019-03-23T22:03:40.720Z", + "Web/API/GlobalEventHandlers/onsubmit": { + "modified": "2019-03-18T21:31:41.533Z", "contributors": [ - "wbamberg", - "fitojb" + "ANDRUS74" ] }, - "Mozilla/Firefox/Releases/61": { - "modified": "2019-03-18T21:34:25.134Z", + "Web/API/GlobalEventHandlers/ontouchstart": { + "modified": "2019-03-23T22:32:02.059Z", "contributors": [ - "wbamberg", - "JoaLop" + "AlePerez92" ] }, - "Mozilla/Firefox/Releases/62": { - "modified": "2019-03-18T21:26:40.295Z", + "Web/API/HTMLAnchorElement": { + "modified": "2019-03-18T21:42:27.257Z", "contributors": [ - "laptou" + "BubuAnabelas", + "LUISTGMDN" ] }, - "Mozilla/Firefox/Releases/63": { - "modified": "2019-03-18T21:22:18.650Z", + "Web/API/HTMLAudioElement": { + "modified": "2019-03-24T00:05:48.645Z", "contributors": [ - "SphinxKnight", - "Dev-MADJ" + "wbamberg", + "fscholz", + "teoli", + "inma_610" ] }, - "Mozilla/Firefox/Releases/66": { - "modified": "2019-05-09T17:56:10.878Z", + "Web/API/HTMLCanvasElement": { + "modified": "2019-03-23T22:50:27.840Z", "contributors": [ - "Smartloony" + "AshWilliams" ] }, - "Mozilla/Firefox/Releases/67": { - "modified": "2019-06-27T23:25:44.498Z", + "Web/API/HTMLCanvasElement/getContext": { + "modified": "2019-03-23T22:18:36.564Z", "contributors": [ - "erickton", - "marcorichetta" + "OrlandoIsay" ] }, - "Mozilla/Firefox/Releases/68": { - "modified": "2019-07-14T03:15:02.367Z", + "Web/API/HTMLCanvasElement/height": { + "modified": "2019-03-23T22:47:48.394Z", "contributors": [ - "Gummox" + "empirreamm" ] }, - "Mozilla/Firefox/Releases/9": { - "modified": "2019-12-13T20:33:17.732Z", + "Web/API/HTMLCanvasElement/toBlob": { + "modified": "2019-03-23T22:44:55.955Z", "contributors": [ - "wbamberg", - "fscholz" + "kodamirmo" ] }, - "Mozilla/Firefox/Releases/9/Updating_add-ons": { - "modified": "2019-03-23T23:09:25.426Z", + "Web/API/HTMLCanvasElement/toDataURL": { + "modified": "2020-10-15T21:38:42.950Z", "contributors": [ - "wbamberg", - "Rickatomato" + "jagomf", + "calmsz", + "genuinefafa", + "empirreamm" ] }, - "Módulos_JavaScript": { - "modified": "2019-03-23T23:53:21.168Z", + "Web/API/HTMLCanvasElement/width": { + "modified": "2019-03-23T22:47:52.236Z", "contributors": [ - "SphinxKnight", - "teoli", - "Mgjbot", - "Ffranz", - "Mariano" + "empirreamm" ] }, - "Participar_en_el_proyecto_Mozilla": { - "modified": "2019-03-24T00:07:54.638Z", + "Web/API/HTMLCollection": { + "modified": "2020-10-15T21:37:48.821Z", "contributors": [ - "teoli", - "inma_610" + "AlePerez92", + "diego_bardelas", + "kromsoft", + "djrm" ] }, - "Plantillas_en_Firefox_3": { - "modified": "2019-03-24T00:02:45.436Z", + "Web/API/HTMLContentElement": { + "modified": "2019-03-23T22:10:28.345Z", "contributors": [ - "wbamberg", - "fscholz", - "Nukeador", - "Kaltya", - "Mgjbot" + "dkocho4" ] }, - "Preguntas_frecuentes_sobre_incrustación_en_Mozilla": { - "modified": "2019-01-16T15:02:38.544Z", + "Web/API/HTMLContentElement/getDistributedNodes": { + "modified": "2019-03-23T22:10:26.488Z", "contributors": [ - "Anonymous" + "dkocho4" ] }, - "Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación": { - "modified": "2019-01-16T16:13:02.334Z", + "Web/API/HTMLContentElement/select": { + "modified": "2019-03-23T22:10:36.116Z", "contributors": [ - "Jorolo", - "Lastjuan" + "dkocho4" ] }, - "Principios_básicos_de_los_servicios_Web": { - "modified": "2019-01-16T16:13:03.069Z", + "Web/API/HTMLDivElement": { + "modified": "2019-03-23T22:03:41.348Z", "contributors": [ - "Jorolo", - "Xoan", - "Breaking Pitt" + "jonvadillo" ] }, - "Recursos_en_modo_desconectado_en_Firefox": { - "modified": "2019-03-18T21:11:07.042Z", + "Web/API/HTMLElement": { + "modified": "2020-06-20T19:45:51.700Z", "contributors": [ - "duduindo", - "Mgjbot", - "Nukeador", - "Nathymig", - "HenryGR" + "hernandoh", + "hpintos", + "fscholz" ] }, - "Referencia_DOM_de_Gecko": { - "modified": "2019-01-16T16:01:11.054Z", + "Web/API/HTMLElement/change_event": { + "modified": "2020-10-15T22:17:42.425Z", "contributors": [ - "DR", - "Nathymig" + "IsraelFloresDGA", + "AlePerez92" ] }, - "Referencia_DOM_de_Gecko/Cómo_espacioenblanco": { - "modified": "2020-08-24T04:42:05.596Z", + "Web/API/HTMLElement/click": { + "modified": "2020-10-15T21:59:51.355Z", "contributors": [ - "Nachec" + "hecaxmmx", + "mtnalonso" ] }, - "Referencia_DOM_de_Gecko/Ejemplos": { - "modified": "2019-03-23T23:51:24.173Z", + "Web/API/HTMLElement/contentEditable": { + "modified": "2020-10-15T22:23:54.889Z", "contributors": [ - "SphinxKnight", - "khalid32", - "Mgjbot", - "Manu", - "Markens", - "Nathymig" + "lauramacdaleno" ] }, - "Referencia_DOM_de_Gecko/Eventos": { - "modified": "2019-03-18T21:45:13.362Z", + "Web/API/HTMLElement/innerText": { + "modified": "2020-10-15T22:31:46.481Z", "contributors": [ - "recortes" + "hugojavierduran9" ] }, - "Referencia_DOM_de_Gecko/Introducción": { - "modified": "2019-03-23T23:48:16.078Z", + "Web/API/HTMLElement/input_event": { + "modified": "2020-10-15T22:17:41.989Z", "contributors": [ - "LuisSevillano", - "IsaacAaron", - "Sheppy", - "Uri", - "Nathymig" + "mariomoreno", + "IsraelFloresDGA" ] }, - "Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores": { - "modified": "2020-06-14T19:56:35.416Z", + "Web/API/HTMLElement/offsetHeight": { + "modified": "2019-04-30T12:33:07.062Z", "contributors": [ - "snickArg" + "AlePerez92", + "SphinxKnight", + "germanfr" ] }, - "Referencia_DOM_de_Gecko/Prefacio": { - "modified": "2019-06-16T19:12:21.185Z", + "Web/API/HTMLElement/offsetLeft": { + "modified": "2019-03-18T20:59:09.140Z", "contributors": [ - "jesusvillalta", - "Sheppy", - "Nathymig" + "SphinxKnight", + "gama" ] }, - "Referencia_de_XUL": { - "modified": "2019-04-19T23:18:32.719Z", + "Web/API/HTMLElement/offsetParent": { + "modified": "2020-10-15T22:11:55.510Z", "contributors": [ - "wbamberg", - "teoli", - "chukito" + "Vincetroid" ] }, - "SVG_en_Firefox": { - "modified": "2019-03-23T23:43:25.545Z", + "Web/API/HTMLElement/offsetTop": { + "modified": "2020-10-15T21:46:16.171Z", "contributors": [ - "teoli", - "Superruzafa", - "Jorolo" + "SphinxKnight", + "santinogue", + "Grijander81" ] }, - "Sections_and_Outlines_of_an_HTML5_document": { - "modified": "2019-03-23T23:38:22.567Z", + "Web/API/HTMLElement/offsetWidth": { + "modified": "2020-10-15T21:50:38.562Z", "contributors": [ - "blanchart", - "eljonims", - "welm", - "javigaar", - "learnercys", - "pierre_alfonso", - "jesanchez" + "SphinxKnight", + "Facu50196", + "jvas28" ] }, - "Seguridad_en_Firefox_2": { - "modified": "2019-03-23T23:42:29.185Z", + "Web/API/HTMLFormElement": { + "modified": "2019-03-23T23:46:38.218Z", "contributors": [ - "wbamberg", - "teoli", - "Nukeador" + "SphinxKnight", + "fscholz", + "khalid32", + "DR", + "Nathymig" ] }, - "Selección_de_modo_en_Mozilla": { - "modified": "2019-11-21T20:40:48.950Z", + "Web/API/HTMLFormElement/reset": { + "modified": "2020-11-28T13:27:49.559Z", "contributors": [ - "wbamberg", - "teoli", - "fscholz", - "Jorolo" + "hiperion" ] }, - "Server-sent_events": { - "modified": "2019-03-23T23:24:42.323Z", + "Web/API/HTMLHeadElement": { + "modified": "2020-10-15T22:31:07.133Z", "contributors": [ - "ethertank" + "jhonarielgj" ] }, - "Server-sent_events/utilizando_server_sent_events_sse": { - "modified": "2019-04-16T06:11:09.003Z", + "Web/API/HTMLHtmlElement": { + "modified": "2019-03-23T22:27:47.579Z", "contributors": [ - "albertoclarbrines", - "adlr", - "iamwao", - "jgutix", - "aztrock" + "raecillacastellana" ] }, - "Storage": { - "modified": "2019-03-24T00:09:02.141Z", + "Web/API/HTMLImageElement": { + "modified": "2019-03-23T22:42:00.195Z", "contributors": [ - "teoli", - "elPatox", - "Francoyote", - "HenryGR", - "Mgjbot" + "thzunder" ] }, - "Tipo_MIME_incorrecto_en_archivos_CSS": { - "modified": "2019-01-16T15:43:53.805Z", + "Web/API/HTMLImageElement/Image": { + "modified": "2019-03-23T22:12:14.962Z", "contributors": [ - "Dailosmm", - "Mgjbot", - "Jorolo", - "Nukeador", - "Epaclon", - "Pasky" + "gabo32", + "Jhandrox" ] }, - "Tools": { - "modified": "2020-07-16T22:44:14.436Z", + "Web/API/HTMLInputElement": { + "modified": "2020-08-25T19:55:45.034Z", "contributors": [ - "SphinxKnight", - "wbamberg", - "sprodrigues", - "Bugrtn", - "guillermocamon", - "mautematico", - "superrebe", - "mishelashala", - "juan-castano", - "Joker_DC", - "rossif", - "ArcangelZith", - "adri1993", - "zota", - "danielUFO", - "Arudb79", - "Jacqueline", - "@Perlyshh_76", - "ivanlopez", - "Gusvar", - "cristel.ariana", - "jesusruiz", - "PabloDev", - "gorrotowi", - "SebastianRave", - "Houseboyzgz", - "hjaguen", - "foxtro", - "reoo", - "dinoop.p1" + "duduindo", + "Enesimus", + "chrisdavidmills" ] }, - "Tools/3D_View": { - "modified": "2020-07-16T22:34:25.151Z", + "Web/API/HTMLInputElement/invalid_event": { + "modified": "2019-04-30T13:47:32.409Z", "contributors": [ - "rmilano" + "wbamberg", + "estelle", + "IsraelFloresDGA" ] }, - "Tools/Accesos_directos": { - "modified": "2020-07-28T10:35:37.425Z", + "Web/API/HTMLInputElement/select": { + "modified": "2019-03-18T21:34:04.996Z", "contributors": [ - "Anibalismo", - "ssm", - "hugojavierduran9", - "marcorichetta" + "AlePerez92" ] }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.274Z", + "Web/API/HTMLLIElement": { + "modified": "2019-03-23T22:21:38.998Z", "contributors": [ - "mfluehr" + "elxris", + "bardcrack" ] }, - "Tools/Browser_Console": { - "modified": "2020-07-16T22:35:42.205Z", + "Web/API/HTMLLabelElement": { + "modified": "2020-10-15T22:11:47.827Z", "contributors": [ - "AldoSantiago", - "almozara" + "BubuAnabelas", + "mym2013" ] }, - "Tools/Browser_Toolbox": { - "modified": "2020-07-16T22:35:55.417Z", + "Web/API/HTMLMediaElement": { + "modified": "2020-10-15T22:13:56.798Z", "contributors": [ - "norwie" + "mannypinillo" ] }, - "Tools/Debugger": { - "modified": "2020-09-13T21:00:58.239Z", + "Web/API/HTMLMediaElement/canplay_event": { + "modified": "2019-03-18T20:49:26.430Z", "contributors": [ - "luuiizzaa9060", - "Juanchoib", - "jcmarcfloress", - "eroto", - "wbamberg", - "nacholereu", - "Pablo_Ivan", - "trevorh", - "cgsramirez", - "stephaniehobson", - "Jacqueline", - "C.E." + "estelle", + "ExE-Boss", + "fscholz", + "jjoselon" ] }, - "Tools/Debugger/How_to": { - "modified": "2020-07-16T22:35:07.255Z", + "Web/API/HTMLMediaElement/loadeddata_event": { + "modified": "2020-10-15T22:25:54.605Z", "contributors": [ - "wbamberg" + "NEVITS" ] }, - "Tools/Debugger/How_to/Disable_breakpoints": { - "modified": "2020-07-16T22:35:11.175Z", + "Web/API/HTMLMediaElement/pause": { + "modified": "2020-10-15T22:24:10.390Z", "contributors": [ - "drdavi7@hotmail.com" + "chekoNava" ] }, - "Tools/Debugger/How_to/Set_a_breakpoint": { - "modified": "2020-07-16T22:35:09.854Z", + "Web/API/HTMLMediaElement/paused": { + "modified": "2020-10-15T22:24:09.151Z", "contributors": [ - "erickton" + "chekoNava" ] }, - "Tools/Debugger/How_to/Uso_de_un_mapa_fuente": { - "modified": "2020-07-16T22:35:12.325Z", - "contributors": [ - "Makinita" + "Web/API/HTMLMediaElement/play": { + "modified": "2020-10-15T22:24:04.866Z", + "contributors": [ + "chekoNava" ] }, - "Tools/Debugger/Source_map_errors": { - "modified": "2020-07-16T22:35:19.165Z", + "Web/API/HTMLMediaElement/timeupdate_event": { + "modified": "2019-03-18T20:49:28.173Z", "contributors": [ - "Makinita" + "estelle", + "ExE-Boss", + "fscholz", + "baldore" ] }, - "Tools/Desempeño": { - "modified": "2020-07-16T22:36:12.530Z", + "Web/API/HTMLSelectElement": { + "modified": "2020-10-15T22:06:34.378Z", "contributors": [ - "LesterGuerra", - "juanmapiquero", - "PorcoMaledette" + "wbamberg" ] }, - "Tools/Desempeño/UI_Tour": { - "modified": "2020-07-16T22:36:14.726Z", + "Web/API/HTMLSelectElement/checkValidity": { + "modified": "2020-10-15T22:06:33.300Z", "contributors": [ - "kynu", - "calcerrada", - "ramferposadas" + "AlePerez92" ] }, - "Tools/Editor_Audio_Web": { - "modified": "2020-07-16T22:36:08.308Z", + "Web/API/HTMLSelectElement/setCustomValidity": { + "modified": "2020-10-15T22:21:29.656Z", "contributors": [ - "MPoli" + "raul-arias" ] }, - "Tools/Editor_Estilo": { - "modified": "2020-07-16T22:35:00.009Z", + "Web/API/HTMLShadowElement": { + "modified": "2019-03-23T22:10:24.059Z", "contributors": [ - "jwhitlock", - "cheline", - "SoftwareRVG", - "JosshuaCalixto1", - "maybe", - "padre629", - "CagsaBit" + "dkocho4", + "Sebastianz" ] }, - "Tools/Monitor_de_Red": { - "modified": "2020-07-16T22:35:29.709Z", + "Web/API/HTMLShadowElement/getDistributedNodes": { + "modified": "2019-03-23T22:10:23.317Z", "contributors": [ - "sevillacode", - "Makinita", - "_cuco_", - "Ivan-Perez", - "Dieg" + "dkocho4" ] }, - "Tools/Page_Inspector": { - "modified": "2020-07-16T22:34:27.363Z", + "Web/API/HTMLStyleElement": { + "modified": "2019-03-24T00:07:06.618Z", "contributors": [ - "amaiafilo", - "SoftwareRVG", - "maybe", - "webmaster", - "Jacqueline", - "MauricioGil" + "fscholz", + "lcamacho", + "DoctorRomi", + "HenryGR", + "Markens", + "Nathymig" ] }, - "Tools/Page_Inspector/3er-panel_modo": { - "modified": "2020-07-16T22:34:53.611Z", + "Web/API/HTMLTableElement": { + "modified": "2019-03-23T23:46:43.890Z", "contributors": [ - "welm" + "fscholz", + "khalid32", + "ethertank", + "DR", + "M3n3chm0", + "Nathymig" ] }, - "Tools/Page_Inspector/How_to": { - "modified": "2020-07-16T22:34:30.977Z", + "Web/API/HTMLTableElement/align": { + "modified": "2019-03-23T22:32:48.061Z", "contributors": [ - "sidgan" + "Grijander81" ] }, - "Tools/Page_Inspector/How_to/Abrir_el_Inspector": { - "modified": "2020-07-16T22:34:32.611Z", + "Web/API/HTMLTableElement/insertRow": { + "modified": "2019-03-23T22:32:47.103Z", "contributors": [ - "amaiafilo" + "lalo", + "Grijander81" ] }, - "Tools/Page_Inspector/How_to/Examinar_y_editar_HTML": { - "modified": "2020-07-16T22:34:40.440Z", + "Web/API/Headers": { + "modified": "2020-10-15T22:07:38.324Z", "contributors": [ - "amaiafilo" + "Estebanrg21" ] }, - "Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel": { - "modified": "2020-07-16T22:34:34.150Z", + "Web/API/History": { + "modified": "2020-10-15T22:28:24.964Z", "contributors": [ - "amaiafilo" + "alattalatta" ] }, - "Tools/Page_Inspector/How_to/Examine_and_edit_CSS": { - "modified": "2020-07-16T22:34:42.117Z", + "Web/API/History/length": { + "modified": "2020-10-15T22:34:59.646Z", "contributors": [ - "amaiafilo" + "cajotafer" ] }, - "Tools/Page_Inspector/How_to/Examine_grid_layouts": { - "modified": "2020-07-16T22:34:47.093Z", + "Web/API/History/pushState": { + "modified": "2020-10-15T22:28:26.373Z", "contributors": [ - "welm" + "cajotafer", + "arcaela" ] }, - "Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores": { - "modified": "2020-07-16T22:34:34.877Z", + "Web/API/IDBCursor": { + "modified": "2019-09-04T06:41:50.466Z", "contributors": [ - "amaiafilo" + "jambsik", + "fscholz", + "chrisdavidmills" ] }, - "Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina": { - "modified": "2020-07-16T22:34:45.756Z", + "Web/API/IDBCursor/continue": { + "modified": "2019-03-23T22:40:02.950Z", "contributors": [ - "alebarbaja" + "BubuAnabelas", + "Alfalfa01" ] }, - "Tools/Page_Inspector/How_to/Select_an_element": { - "modified": "2020-07-16T22:34:33.474Z", + "Web/API/IDBDatabase": { + "modified": "2019-03-23T22:23:43.090Z", "contributors": [ - "amaiafilo" + "jpmedley" ] }, - "Tools/Page_Inspector/How_to/Work_with_animations": { - "modified": "2020-07-16T22:34:36.333Z", + "Web/API/IDBDatabase/transaction": { + "modified": "2019-03-23T22:23:53.480Z", "contributors": [ - "lyono666", - "angelmillan", - "fmagrosoto" + "carlo.romero1991" ] }, - "Tools/Page_Inspector/UI_Tour": { - "modified": "2020-07-16T22:34:48.922Z", + "Web/API/IDBObjectStore": { + "modified": "2019-03-23T23:01:30.975Z", "contributors": [ - "maruskina", - "amaiafilo" + "fscholz" ] }, - "Tools/Profiler": { - "modified": "2020-07-16T22:35:28.621Z", + "Web/API/IDBObjectStore/add": { + "modified": "2019-03-23T23:05:57.547Z", "contributors": [ - "MrDaza" + "fscholz", + "AngelFQC" ] }, - "Tools/Remote_Debugging": { - "modified": "2020-07-16T22:35:37.186Z", + "Web/API/ImageBitmap": { + "modified": "2020-10-15T22:03:23.639Z", "contributors": [ - "sonidos", - "mando", - "Xorgius", - "CesarS", - "Fani100", - "Patriposa", - "awbruna190", - "aguntinito" + "necrobite" ] }, - "Tools/Remote_Debugging/Debugging_over_a_network": { - "modified": "2020-07-16T22:35:41.552Z", + "Web/API/ImageBitmapRenderingContext": { + "modified": "2020-10-15T22:03:23.985Z", "contributors": [ - "stephiemtz" + "teoli", + "necrobite" ] }, - "Tools/Remote_Debugging/Firefox_para_Android": { - "modified": "2020-07-16T22:35:38.980Z", + "Web/API/IndexedDB_API": { + "modified": "2020-01-13T04:48:11.727Z", "contributors": [ - "odelrio", - "pawer13", - "pacommozilla", - "StripTM" + "chrisdavidmills", + "thepianist2", + "GranRafa", + "semptrion", + "Fjaguero", + "MPoli" ] }, - "Tools/Responsive_Design_View": { - "modified": "2020-07-16T22:35:21.169Z", + "Web/API/Intersection_Observer_API": { + "modified": "2020-11-03T00:26:14.370Z", "contributors": [ - "adolfotc", - "HugoM1682", - "amaiafilo", - "walter.atg", - "maedca" + "juanfelipejg", + "kuntur-studio", + "maketas", + "sandromedina", + "lacf95", + "midudev", + "joanvasa", + "AshWilliams" ] }, - "Tools/Settings": { - "modified": "2020-07-16T22:36:34.818Z", + "Web/API/KeyboardEvent": { + "modified": "2019-03-18T21:08:57.551Z", "contributors": [ - "amaiafilo" + "fscholz", + "pdro-enrique", + "wbamberg", + "pablodonoso" ] }, - "Tools/Storage_Inspector": { - "modified": "2020-07-16T22:36:09.696Z", + "Web/API/KeyboardEvent/getModifierState": { + "modified": "2020-10-15T22:04:42.428Z", "contributors": [ - "Sebastianz" + "leoderja" ] }, - "Tools/Storage_Inspector/Cookies": { - "modified": "2020-07-16T22:36:11.000Z", + "Web/API/KeyboardEvent/key": { + "modified": "2020-10-15T22:10:09.653Z", "contributors": [ - "Enesimus" + "isaacanet", + "aleju92" ] }, - "Tools/Tomar_capturas_de_pantalla": { - "modified": "2020-07-16T22:36:38.280Z", + "Web/API/KeyboardEvent/metaKey": { + "modified": "2019-03-23T22:47:47.329Z", "contributors": [ - "picandocodigo" + "empirreamm" ] }, - "Tools/Tools_Toolbox": { - "modified": "2020-07-16T22:35:26.877Z", + "Web/API/KeyboardEvent/which": { + "modified": "2019-03-23T23:25:30.040Z", "contributors": [ - "amaiafilo", - "Papicorito", - "am.garcia" + "fscholz", + "jsx", + "arthusu" ] }, - "Tools/View_source": { - "modified": "2020-07-16T22:35:02.649Z", + "Web/API/Location": { + "modified": "2020-03-11T08:46:40.807Z", "contributors": [ - "StripTM" + "nverino", + "BrodaNoel" ] }, - "Tools/Web_Console": { - "modified": "2020-07-16T22:34:05.366Z", + "Web/API/Location/origin": { + "modified": "2020-11-17T12:52:42.607Z", "contributors": [ - "elias_ramirez_elriso", - "cgsramirez", - "bassam", - "wbamberg" + "AlePerez92" ] }, - "Tools/Web_Console/Console_messages": { - "modified": "2020-07-16T22:34:14.880Z", + "Web/API/Location/reload": { + "modified": "2020-10-30T03:50:17.206Z", "contributors": [ - "Enesimus", - "pacommozilla", - "JeidyVega" + "SphinxKnight", + "MiguelHG2351", + "PatoDeTuring" ] }, - "Tools/Web_Console/Iniciando_la_Consola_Web": { - "modified": "2020-07-16T22:34:17.075Z", + "Web/API/MediaDevices": { + "modified": "2019-03-23T22:36:21.378Z", "contributors": [ - "JonoyeMasuso" + "Sebastianz" ] }, - "Tools/Web_Console/La_línea_de_comandos_del_intérprete": { - "modified": "2020-08-27T20:06:30.290Z", + "Web/API/MediaDevices/getUserMedia": { + "modified": "2019-03-23T22:36:21.202Z", "contributors": [ - "Nachec" + "AdanPalacios", + "titosobabas", + "RSalgadoAtala", + "Cristhian", + "matajm" ] }, - "Tools/Working_with_iframes": { - "modified": "2020-07-16T22:36:11.768Z", + "Web/API/MediaQueryList": { + "modified": "2019-03-18T21:17:33.122Z", "contributors": [ - "carpasse" + "BubuAnabelas", + "PatoDeTuring" ] }, - "Tools/about:debugging": { - "modified": "2020-07-30T13:12:25.833Z", + "Web/API/MediaQueryList/addListener": { + "modified": "2019-03-18T21:16:20.430Z", "contributors": [ - "Anibalismo" + "PatoDeTuring" ] }, - "Traducir_las_descripciones_de_las_extensiones": { - "modified": "2019-03-23T23:53:33.332Z", + "Web/API/MediaQueryList/matches": { + "modified": "2019-03-23T22:05:29.020Z", "contributors": [ - "teoli", - "Nukeador", - "Sebastianzartner@gmx.de", - "D20v02d", - "Mgjbot" + "PatoDeTuring" ] }, - "Traducir_una_extensión": { - "modified": "2019-03-23T23:57:54.041Z", + "Web/API/MediaQueryList/removeListener": { + "modified": "2019-03-23T22:05:31.060Z", "contributors": [ - "Sebastianz", - "teoli", - "Sheppy", - "gironlievanos", - "Mgjbot", - "Superruzafa" + "PatoDeTuring" ] }, - "Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM": { - "modified": "2019-03-23T23:20:26.633Z", + "Web/API/MediaSource": { + "modified": "2019-03-23T22:38:20.191Z", "contributors": [ - "lajaso", - "jucazam", - "pablo.turati" + "Lazaro" ] }, - "Usando_archivos_desde_aplicaciones_web": { - "modified": "2019-03-24T00:07:10.927Z", + "Web/API/MediaStreamAudioSourceNode": { + "modified": "2019-03-18T20:35:52.439Z", "contributors": [ - "SphinxKnight", - "AngelFQC", - "StripTM", - "Izel", - "deimidis", - "maedca" + "davidtorroija", + "AndresMendozaOrozco" ] }, - "Usar_XPInstall_para_instalar_plugins": { - "modified": "2019-01-16T16:11:23.781Z", + "Web/API/MediaStreamTrack": { + "modified": "2019-03-23T23:10:18.897Z", "contributors": [ - "Superruzafa", - "Fedora-core", - "Floot" + "matajm", + "maedca" ] }, - "Usar_código_de_Mozilla_en_otros_proyectos": { - "modified": "2019-03-24T00:09:00.370Z", + "Web/API/MessageEvent": { + "modified": "2019-03-18T21:44:05.386Z", "contributors": [ - "maedca", - "inma_610" + "jpmontoya182" ] }, - "Usar_web_workers": { - "modified": "2019-03-24T00:07:32.918Z", + "Web/API/MimeType": { + "modified": "2019-03-18T21:36:36.016Z", "contributors": [ - "teoli", - "ajimix", - "inma_610" + "daniel.duarte" ] }, - "Using_the_W3C_DOM_Level_1_Core": { - "modified": "2019-12-13T21:06:41.403Z", + "Web/API/MouseEvent": { + "modified": "2019-03-23T23:01:32.904Z", "contributors": [ - "wbamberg", - "jswisher" + "fscholz" ] }, - "Uso_del_núcleo_del_nivel_1_del_DOM": { - "modified": "2019-12-13T21:10:23.918Z", + "Web/API/MouseEvent/initMouseEvent": { + "modified": "2019-03-23T23:50:24.977Z", "contributors": [ - "wbamberg", - "broxmgs", - "Superruzafa", - "Jorolo" + "SphinxKnight", + "vectorderivative", + "jorgecasar", + "fscholz", + "khalid32", + "teoli", + "HenryGR", + "Mgjbot" ] }, - "Vigilar_plugins": { - "modified": "2019-01-16T15:35:57.481Z", + "Web/API/MouseEvent/shiftKey": { + "modified": "2019-03-23T22:05:24.832Z", "contributors": [ - "HenryGR" + "evaferreira" ] }, - "Web": { - "modified": "2020-11-28T21:26:15.631Z", + "Web/API/MutationObserver": { + "modified": "2019-05-13T04:27:12.587Z", "contributors": [ - "gabrielazambrano307", - "Nachec", - "Enesimus", - "blanchart", - "SoftwareRVG", - "danieldelvillar", - "raecillacastellana", - "jcbp", - "BubuAnabelas", - "Jacqueline", - "igualar.com", - "atlas7jean", - "luisgm76", - "Sheppy" + "mllambias", + "cesaruve", + "aeroxmotion", + "JordiCruells", + "alvaropinot" ] }, - "Web/API": { - "modified": "2020-08-08T02:17:57.801Z", + "Web/API/MutationObserver/MutationObserver": { + "modified": "2020-10-15T22:18:30.706Z", "contributors": [ - "Nachec", - "Enesimus", - "fscholz", - "AJMG", - "tecniloco", - "teoli", - "maedca", - "ethertank", - "Sheppy" + "mllambias" ] }, - "Web/API/API_de_almacenamiento_web": { - "modified": "2019-03-23T22:46:51.819Z", + "Web/API/MutationObserver/observe": { + "modified": "2020-10-15T22:18:29.107Z", "contributors": [ - "fherce", - "AlePerez92", - "VictorAbdon" + "mllambias" ] }, - "Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web": { - "modified": "2020-08-14T20:09:18.391Z", + "Web/API/Navigator": { + "modified": "2019-03-23T23:20:36.282Z", "contributors": [ - "Enesimus", - "fherce" + "israel-munoz", + "khalid32", + "tpb" ] }, - "Web/API/API_del_portapapeles": { - "modified": "2020-10-15T22:31:40.101Z", + "Web/API/Navigator/doNotTrack": { + "modified": "2019-03-18T21:35:42.847Z", "contributors": [ - "gato" + "AlePerez92" ] }, - "Web/API/AbstractWorker": { - "modified": "2019-12-20T01:50:52.328Z", + "Web/API/Navigator/getUserMedia": { + "modified": "2019-03-23T23:27:03.284Z", "contributors": [ - "Kaliu", - "Gustavo_Armoa", - "AshWilliams" + "Jib", + "AlePerez92", + "fscholz", + "cm_rocanroll", + "franverona", + "py_crash", + "maedca" ] }, - "Web/API/Ambient_Light_Events": { - "modified": "2019-03-23T22:33:31.225Z", + "Web/API/Navigator/mediaDevices": { + "modified": "2020-12-11T22:18:56.380Z", "contributors": [ - "BubuAnabelas", - "RockoDev", - "guiller1998" + "daniellimabel" ] }, - "Web/API/AnalyserNode": { - "modified": "2019-03-23T22:51:59.371Z", + "Web/API/Navigator/registerProtocolHandler": { + "modified": "2019-03-23T23:53:04.318Z", "contributors": [ - "teoli", - "CarlosLinares" + "fscholz", + "khalid32", + "Nukeador", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Animation": { - "modified": "2020-10-15T21:57:43.283Z", + "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": { + "modified": "2019-03-23T22:06:43.969Z", "contributors": [ - "AlePerez92", - "evaferreira", - "IngoBongo" + "chrisdavidmills", + "AngelFQC" ] }, - "Web/API/Animation/Animación": { - "modified": "2019-03-23T22:05:09.399Z", + "Web/API/Navigator/vibrate": { + "modified": "2019-03-23T23:32:23.651Z", "contributors": [ - "IngoBongo" + "fscholz", + "jsx", + "mmednik" ] }, - "Web/API/Animation/cancel": { - "modified": "2019-03-23T22:04:37.170Z", + "Web/API/NavigatorConcurrentHardware": { + "modified": "2020-10-15T22:25:58.692Z" + }, + "Web/API/NavigatorConcurrentHardware/hardwareConcurrency": { + "modified": "2020-10-15T22:26:06.271Z", "contributors": [ - "IngoBongo" + "Gnuxdar" ] }, - "Web/API/Animation/effect": { - "modified": "2019-03-18T21:15:31.270Z", + "Web/API/NavigatorLanguage": { + "modified": "2019-03-23T22:46:20.556Z", "contributors": [ - "IngoBongo" + "teoli" ] }, - "Web/API/Animation/finish": { - "modified": "2019-03-23T22:04:33.125Z", + "Web/API/NavigatorLanguage/language": { + "modified": "2019-03-23T22:46:24.341Z", "contributors": [ - "IngoBongo" + "cesiztel", + "jesus9ias" ] }, - "Web/API/Animation/id": { - "modified": "2019-03-18T21:15:30.202Z", + "Web/API/NavigatorOnLine": { + "modified": "2019-03-23T22:07:33.991Z", "contributors": [ - "IngoBongo" + "abbycar" ] }, - "Web/API/Animation/oncancel": { - "modified": "2019-03-23T22:05:09.237Z", + "Web/API/NavigatorOnLine/onLine": { + "modified": "2019-03-23T22:07:34.200Z", "contributors": [ - "IngoBongo" + "MarkelCuesta" ] }, - "Web/API/Animation/onfinish": { - "modified": "2019-03-23T22:05:11.188Z", + "Web/API/Network_Information_API": { + "modified": "2020-11-17T00:17:37.419Z", "contributors": [ - "IngoBongo" + "tobiasalbirosa" ] }, - "Web/API/Animation/pause": { - "modified": "2020-10-15T21:58:07.078Z", + "Web/API/Node": { + "modified": "2019-05-06T01:19:55.862Z", "contributors": [ - "AlePerez92", - "IngoBongo" + "robinHurtado", + "fscholz" ] }, - "Web/API/Animation/play": { - "modified": "2019-03-23T22:04:30.047Z", + "Web/API/Node/appendChild": { + "modified": "2020-10-15T21:22:57.221Z", "contributors": [ - "IngoBongo" + "AlePerez92", + "IsaacAaron", + "fscholz", + "jsx", + "AzulCz" ] }, - "Web/API/Animation/playState": { - "modified": "2019-03-23T22:05:06.415Z", + "Web/API/Node/childNodes": { + "modified": "2020-10-15T22:02:15.961Z", "contributors": [ - "IngoBongo" + "AlePerez92", + "presercomp" ] }, - "Web/API/Animation/playbackRate": { - "modified": "2019-03-23T22:05:12.184Z", + "Web/API/Node/cloneNode": { + "modified": "2020-10-15T21:49:33.676Z", "contributors": [ - "IngoBongo" + "AlePerez92", + "jyorch2", + "fewrare" ] }, - "Web/API/Animation/ready": { - "modified": "2019-03-23T22:04:55.912Z", + "Web/API/Node/contains": { + "modified": "2020-10-15T22:00:52.714Z", "contributors": [ - "IngoBongo" + "AlePerez92" ] }, - "Web/API/Animation/reverse": { - "modified": "2019-03-23T22:04:31.837Z", + "Web/API/Node/hasChildNodes": { + "modified": "2020-10-15T22:08:41.278Z", "contributors": [ - "IngoBongo" + "AlePerez92" ] }, - "Web/API/Animation/startTime": { - "modified": "2019-03-23T22:04:36.769Z", + "Web/API/Node/isSameNode": { + "modified": "2019-03-23T22:49:05.364Z", "contributors": [ - "IngoBongo" + "JordiCruells" ] }, - "Web/API/Animation/terminado": { - "modified": "2019-03-23T22:05:06.573Z", + "Web/API/Node/lastChild": { + "modified": "2020-10-15T21:55:48.810Z", "contributors": [ - "IngoBongo" + "fscholz", + "AlePerez92", + "tureey" ] }, - "Web/API/Animation/tiempoActual": { - "modified": "2019-03-23T22:05:12.506Z", + "Web/API/Node/namespaceURI": { + "modified": "2019-03-23T22:08:52.990Z", "contributors": [ - "IngoBongo" + "tureey" ] }, - "Web/API/Animation/timeline": { - "modified": "2019-03-23T22:04:30.790Z", + "Web/API/Node/nextSibling": { + "modified": "2020-10-15T21:27:47.909Z", "contributors": [ - "IngoBongo" + "wbamberg", + "AlePerez92", + "fscholz", + "Alexis88" ] }, - "Web/API/AnimationEvent": { - "modified": "2019-03-23T22:31:58.545Z", + "Web/API/Node/nodeName": { + "modified": "2019-03-23T23:50:40.382Z", "contributors": [ + "SphinxKnight", "fscholz", - "jzatarain", - "Vanessa85" + "Hasilt", + "HenryGR", + "Mgjbot" ] }, - "Web/API/AnimationEvent/animationName": { - "modified": "2019-03-23T22:29:49.749Z", + "Web/API/Node/nodeType": { + "modified": "2019-03-23T22:58:04.685Z", "contributors": [ - "jzatarain" + "minrock" ] }, - "Web/API/Attr": { - "modified": "2020-04-04T11:16:16.397Z", + "Web/API/Node/nodeValue": { + "modified": "2019-08-30T02:00:09.176Z", "contributors": [ - "MiguelHG2351", - "rayrojas", - "AlePerez92" + "Jamel-Seyek", + "tureey" ] }, - "Web/API/AudioBuffer": { - "modified": "2020-10-15T22:15:24.740Z", + "Web/API/Node/ownerDocument": { + "modified": "2019-10-09T11:24:36.349Z", "contributors": [ - "rayrojas" + "ogallagher", + "tureey" ] }, - "Web/API/AudioNode": { - "modified": "2020-10-15T22:15:25.198Z", + "Web/API/Node/parentNode": { + "modified": "2019-03-23T22:08:56.619Z", "contributors": [ - "rayrojas" + "IsmaOrdas", + "tureey" ] }, - "Web/API/BaseAudioContext": { - "modified": "2019-03-18T21:00:34.809Z", + "Web/API/Node/previousSibling": { + "modified": "2020-10-15T22:05:25.453Z", "contributors": [ - "SphinxKnight", - "miguelonce", - "chrisdavidmills" + "wbamberg", + "AlePerez92" ] }, - "Web/API/BaseAudioContext/createBiquadFilter": { - "modified": "2019-03-23T22:04:57.563Z", + "Web/API/Node/removeChild": { + "modified": "2019-03-23T22:51:59.032Z", "contributors": [ - "GersonRosales" + "IsaacAaron", + "jcmunioz" ] }, - "Web/API/BatteryManager": { - "modified": "2019-03-23T23:24:54.302Z", + "Web/API/Node/replaceChild": { + "modified": "2019-03-23T22:46:30.428Z", "contributors": [ - "David_Marcos", - "maedca", - "sinfallas" + "pakitometal" ] }, - "Web/API/BatteryManager/charging": { - "modified": "2019-03-23T23:27:11.890Z", + "Web/API/Node/textContent": { + "modified": "2020-10-15T21:21:16.429Z", "contributors": [ + "yohanolmedo", + "AlePerez92", + "IsaacAaron", "fscholz", - "Hasilt", - "LuisE" + "another_sam" ] }, - "Web/API/BatteryManager/chargingTime": { - "modified": "2019-03-23T23:25:12.194Z", + "Web/API/NodeList": { + "modified": "2020-10-15T22:00:48.268Z", "contributors": [ - "fscholz", - "palfrei" + "AlePerez92", + "padrecedano" ] }, - "Web/API/BatteryManager/dischargingTime": { - "modified": "2019-03-23T23:27:15.312Z", + "Web/API/NodeList/forEach": { + "modified": "2020-10-15T22:08:20.485Z", "contributors": [ - "fscholz", - "khalid32", - "LuisE" + "SphinxKnight", + "InfaSysKey", + "jesumv" ] }, - "Web/API/BatteryManager/level": { - "modified": "2019-03-23T23:25:16.177Z", + "Web/API/NonDocumentTypeChildNode": { + "modified": "2019-03-23T22:32:46.517Z", "contributors": [ - "fscholz", - "eliezerb", - "maedca", - "David_Marcos", - "sinfallas", - "voylinux" + "fscholz" ] }, - "Web/API/BatteryManager/onchargingchange": { - "modified": "2019-03-23T23:25:06.308Z", + "Web/API/NonDocumentTypeChildNode/nextElementSibling": { + "modified": "2020-10-15T21:46:25.502Z", "contributors": [ - "fscholz", - "Pau_Ilargia", - "voylinux" + "AlePerez92", + "Grijander81" ] }, - "Web/API/BatteryManager/onlevelchange": { - "modified": "2019-03-23T23:25:08.174Z", + "Web/API/NonDocumentTypeChildNode/previousElementSibling": { + "modified": "2019-03-23T22:32:40.718Z", "contributors": [ - "fscholz", - "teoli", - "eliezerb", - "robertoasq", - "voylinux" + "Grijander81" ] }, - "Web/API/BeforeUnloadEvent": { - "modified": "2020-10-15T22:19:49.552Z", + "Web/API/Notifications_API": { + "modified": "2019-03-23T22:07:39.198Z", "contributors": [ - "tuamigoxavi", - "matias981" + "david_ross" ] }, - "Web/API/Blob": { - "modified": "2019-03-23T23:07:07.610Z", + "Web/API/ParentNode": { + "modified": "2019-03-23T22:43:20.773Z", "contributors": [ - "parzibyte", - "japho", - "fscholz", - "degrammer" + "Sebastianz" ] }, - "Web/API/Blob/Blob": { - "modified": "2020-10-15T21:31:45.424Z", + "Web/API/ParentNode/append": { + "modified": "2020-10-15T22:24:28.452Z", "contributors": [ - "IsraelFloresDGA", - "BrodaNoel", - "fscholz", - "matajm" + "Kyuoraku" ] }, - "Web/API/Blob/type": { - "modified": "2019-03-23T22:06:34.982Z", + "Web/API/ParentNode/childElementCount": { + "modified": "2019-03-23T22:43:24.721Z", "contributors": [ - "BrodaNoel" + "joselix" ] }, - "Web/API/BlobBuilder": { - "modified": "2019-03-23T22:49:30.131Z", + "Web/API/ParentNode/children": { + "modified": "2019-03-23T22:32:44.383Z", "contributors": [ - "BrodaNoel", - "japho" + "AlePerez92", + "aeroxmotion", + "Grijander81" ] }, - "Web/API/Body": { - "modified": "2020-10-15T22:17:35.545Z", + "Web/API/ParentNode/firstElementChild": { + "modified": "2019-03-23T22:32:44.779Z", "contributors": [ - "SphinxKnight", - "bigblair81" + "Grijander81" ] }, - "Web/API/Body/formData": { - "modified": "2020-10-15T22:17:33.164Z", + "Web/API/ParentNode/lastElementChild": { + "modified": "2019-03-23T22:32:39.974Z", "contributors": [ - "brauni800" + "Grijander81" ] }, - "Web/API/Body/json": { - "modified": "2020-10-15T22:29:20.361Z", + "Web/API/Payment_Request_API": { + "modified": "2020-10-15T22:33:12.666Z", "contributors": [ - "camsa" + "cjguajardo" ] }, - "Web/API/CSSRule": { - "modified": "2019-03-23T23:58:11.498Z", + "Web/API/Performance": { + "modified": "2020-10-15T21:53:40.885Z", "contributors": [ - "SphinxKnight", + "wachunei", + "juanarbol", "fscholz", - "khalid32", - "teoli", - "HenryGR" + "jpmedley" ] }, - "Web/API/CSSRule/cssText": { - "modified": "2019-03-23T23:58:05.630Z", + "Web/API/Performance/clearMarks": { + "modified": "2020-10-15T22:22:33.810Z", "contributors": [ - "fscholz", - "arunpandianp", - "teoli", - "HenryGR" + "juanarbol" ] }, - "Web/API/CSSRule/parentStyleSheet": { - "modified": "2019-03-23T23:58:10.522Z", + "Web/API/Performance/clearMeasures": { + "modified": "2020-10-15T22:22:45.763Z", "contributors": [ - "fscholz", - "arunpandianp", - "teoli", - "HenryGR" + "juanarbol" ] }, - "Web/API/CSSStyleDeclaration": { - "modified": "2019-03-23T22:44:46.721Z", + "Web/API/Performance/memory": { + "modified": "2020-10-15T22:22:31.707Z", "contributors": [ - "guerratron" + "juanarbol" ] }, - "Web/API/CSSStyleRule": { - "modified": "2019-03-23T23:01:37.512Z", + "Web/API/Performance/navigation": { + "modified": "2020-10-15T22:22:32.714Z", "contributors": [ - "darioperez", - "fscholz" + "juanarbol" ] }, - "Web/API/CSSStyleRule/selectorText": { - "modified": "2019-03-23T23:58:12.055Z", + "Web/API/Performance/now": { + "modified": "2019-03-23T22:13:15.954Z", "contributors": [ - "fscholz", - "jsx", - "teoli", - "HenryGR" + "AlePerez92" ] }, - "Web/API/CSSStyleSheet": { - "modified": "2019-03-23T23:58:09.423Z", + "Web/API/Performance/timeOrigin": { + "modified": "2020-10-15T22:22:32.944Z", "contributors": [ - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "juanarbol" ] }, - "Web/API/CSSStyleSheet/deleteRule": { - "modified": "2019-03-23T23:58:10.847Z", + "Web/API/Performance/timing": { + "modified": "2020-10-15T22:22:30.788Z", "contributors": [ - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "juanarbol" ] }, - "Web/API/CSSStyleSheet/insertRule": { - "modified": "2019-03-23T23:16:46.847Z", + "Web/API/PerformanceNavigation": { + "modified": "2020-10-15T22:22:46.223Z", "contributors": [ - "fscholz", - "LeoHirsch" + "juanarbol" ] }, - "Web/API/CSSStyleSheet/ownerRule": { - "modified": "2019-03-23T23:58:08.873Z", + "Web/API/PositionOptions": { + "modified": "2019-03-23T23:16:28.831Z", "contributors": [ "fscholz", - "khalid32", - "HenryGR" + "LeoHirsch", + "lupomontero" ] }, - "Web/API/CSS_Object_Model": { - "modified": "2019-03-23T22:01:23.472Z", + "Web/API/PushManager": { + "modified": "2019-03-23T22:40:00.540Z", "contributors": [ - "dmelian" + "chrisdavidmills" ] }, - "Web/API/CacheStorage": { - "modified": "2020-10-15T22:30:42.396Z", + "Web/API/PushManager/permissionState": { + "modified": "2019-03-23T22:39:59.979Z", "contributors": [ - "AprilSylph" + "maedca" ] }, - "Web/API/CacheStorage/keys": { - "modified": "2020-10-15T22:30:42.056Z", + "Web/API/PushManager/supportedContentEncodings": { + "modified": "2020-10-15T22:03:55.545Z", "contributors": [ - "duduindo", - "ph4538157" + "Erto" ] }, - "Web/API/CanvasImageSource": { - "modified": "2019-03-23T22:09:10.185Z", + "Web/API/Push_API": { + "modified": "2019-03-23T22:44:48.332Z", "contributors": [ - "alinarezrangel" + "gimco", + "omar10594", + "Erto", + "FMRonin", + "YulianD", + "mautematico" ] }, - "Web/API/CanvasRenderingContext2D": { - "modified": "2019-03-23T22:54:41.294Z", + "Web/API/RTCPeerConnection": { + "modified": "2019-03-18T21:43:02.717Z", "contributors": [ - "rrodrigo", - "JoSaGuDu", - "iamwao", - "geodracs" + "jgalvezsoax", + "maomuriel" ] }, - "Web/API/CanvasRenderingContext2D/arc": { - "modified": "2019-04-15T00:25:11.182Z", + "Web/API/RTCPeerConnection/canTrickleIceCandidates": { + "modified": "2020-10-15T22:33:02.442Z", "contributors": [ - "Rodrigo-Sanchez", - "Mancux2" + "JaderLuisDiaz" ] }, - "Web/API/CanvasRenderingContext2D/beginPath": { - "modified": "2019-03-23T22:47:39.451Z", + "Web/API/RTCRtpReceiver": { + "modified": "2020-10-15T22:27:25.068Z", "contributors": [ - "PepeBeat" + "qwerty726" ] }, - "Web/API/CanvasRenderingContext2D/clearRect": { - "modified": "2019-03-23T22:19:13.064Z", + "Web/API/Range": { + "modified": "2019-03-23T23:47:18.258Z", "contributors": [ - "andrpueb" + "wbamberg", + "maiky", + "fscholz", + "Markens", + "DR", + "Nathymig" ] }, - "Web/API/CanvasRenderingContext2D/drawImage": { - "modified": "2019-03-23T22:47:09.124Z", + "Web/API/Range/collapsed": { + "modified": "2019-03-23T23:47:00.550Z", "contributors": [ - "iamwao" + "fscholz", + "DR" ] }, - "Web/API/CanvasRenderingContext2D/fillRect": { - "modified": "2019-03-23T22:32:43.881Z", + "Web/API/Range/commonAncestorContainer": { + "modified": "2019-03-23T23:53:54.038Z", "contributors": [ - "eljonims" + "fscholz", + "DR" ] }, - "Web/API/CanvasRenderingContext2D/getImageData": { - "modified": "2020-10-15T22:03:53.553Z", + "Web/API/Range/getClientRects": { + "modified": "2019-03-23T22:10:01.541Z", "contributors": [ - "LEUGIM99" + "edhzsz" ] }, - "Web/API/CanvasRenderingContext2D/lineCap": { - "modified": "2020-10-15T22:18:19.205Z", + "Web/API/Range/intersectsNode": { + "modified": "2019-03-23T23:53:59.214Z", "contributors": [ - "Ricardo_F." + "fscholz", + "khalid32", + "Mgjbot", + "DR" ] }, - "Web/API/CanvasRenderingContext2D/rotate": { - "modified": "2020-10-15T22:12:15.546Z", + "Web/API/Range/setStart": { + "modified": "2019-03-23T22:13:01.685Z", "contributors": [ - "albertor21" + "Vincetroid" ] }, - "Web/API/CanvasRenderingContext2D/save": { - "modified": "2020-10-15T22:23:30.799Z", + "Web/API/Request": { + "modified": "2020-10-15T22:02:13.323Z", "contributors": [ - "feiss" + "DiegoFT", + "fscholz" ] }, - "Web/API/Canvas_API/Tutorial/Compositing": { - "modified": "2020-08-27T21:09:19.590Z", + "Web/API/Request/headers": { + "modified": "2020-10-15T22:02:12.572Z", "contributors": [ - "mastertrooper", - "stephaniehobson" + "carojaspaz" ] }, - "Web/API/Canvas_API/Tutorial/Compositing/Ejemplo": { - "modified": "2019-03-18T21:36:04.043Z", + "Web/API/Response": { + "modified": "2020-11-13T19:18:52.099Z", "contributors": [ - "lajaso" + "chux", + "kant", + "ignatius73", + "crrlos" ] }, - "Web/API/ChildNode": { - "modified": "2019-03-29T14:12:39.589Z", + "Web/API/Response/Response": { + "modified": "2020-10-15T22:15:43.532Z", "contributors": [ - "jpmedley" + "AzazelN28" ] }, - "Web/API/ChildNode/after": { - "modified": "2020-10-15T21:50:39.528Z", + "Web/API/Response/ok": { + "modified": "2020-10-15T22:22:31.771Z", "contributors": [ - "AlePerez92", - "SoftwareRVG" + "juanarbol" ] }, - "Web/API/ChildNode/before": { - "modified": "2019-03-23T22:23:28.772Z", + "Web/API/Response/status": { + "modified": "2020-10-15T22:24:09.432Z", "contributors": [ - "SoftwareRVG" + "FDSoil" ] }, - "Web/API/ChildNode/remove": { - "modified": "2020-10-15T21:50:43.901Z", + "Web/API/SVGPoint": { + "modified": "2019-03-23T23:03:09.725Z", "contributors": [ - "daniel.arango", - "teffcode", - "AlePerez92", - "SoftwareRVG" + "fscholz", + "hasAngel" ] }, - "Web/API/ChildNode/replaceWith": { - "modified": "2019-03-23T22:23:34.633Z", + "Web/API/Screen": { + "modified": "2019-10-10T16:45:22.609Z", "contributors": [ - "SoftwareRVG" + "jazdian", + "Grijander81" ] }, - "Web/API/ClipboardEvent": { - "modified": "2020-10-15T22:14:15.464Z", + "Web/API/Selection": { + "modified": "2019-03-23T23:54:01.018Z", "contributors": [ - "fscholz" - ] - }, - "Web/API/ClipboardEvent/clipboardData": { - "modified": "2020-10-15T22:14:15.340Z", - "contributors": [ - "Bumxu" - ] - }, - "Web/API/CloseEvent": { - "modified": "2020-11-24T05:35:48.408Z", - "contributors": [ - "netizen", - "jpmontoya182" + "CxRxExO", + "fscholz", + "DR", + "Juandavaus", + "Kroatan", + "Mgjbot", + "LaRy", + "Nathymig" ] }, - "Web/API/Comment": { - "modified": "2020-10-15T22:24:21.833Z", + "Web/API/Selection/addRange": { + "modified": "2019-03-23T23:46:53.374Z", "contributors": [ - "pablorebora" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console": { - "modified": "2019-08-30T08:42:12.082Z", + "Web/API/Selection/anchorNode": { + "modified": "2019-03-23T23:46:46.912Z", "contributors": [ - "ajuanjojjj", - "fcanellas", - "vlguerrero", - "chrisdavidmills" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console/count": { - "modified": "2019-03-23T22:07:26.644Z", + "Web/API/Selection/anchorOffset": { + "modified": "2019-03-23T23:46:55.279Z", "contributors": [ - "deluxury", - "roberbnd" + "fscholz", + "DR", + "Mgjbot" ] }, - "Web/API/Console/dir": { - "modified": "2020-11-11T11:46:41.122Z", + "Web/API/Selection/collapse": { + "modified": "2019-03-23T23:46:57.541Z", "contributors": [ - "jomoji", - "laloptk" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console/dirxml": { - "modified": "2019-03-23T22:18:03.809Z", + "Web/API/Selection/collapseToEnd": { + "modified": "2019-03-23T23:47:01.187Z", "contributors": [ - "aeroxmotion" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console/error": { - "modified": "2019-03-23T22:06:32.134Z", + "Web/API/Selection/collapseToStart": { + "modified": "2019-03-23T23:46:59.744Z", "contributors": [ - "BrodaNoel" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console/info": { - "modified": "2019-03-23T22:12:32.604Z", + "Web/API/Selection/containsNode": { + "modified": "2019-03-23T23:46:51.997Z", "contributors": [ - "Lwissitoon" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console/log": { - "modified": "2019-03-23T22:19:48.741Z", + "Web/API/Selection/deleteFromDocument": { + "modified": "2019-03-23T23:46:47.857Z", "contributors": [ - "BrodaNoel", - "fcanellas" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Console/tabla": { - "modified": "2019-03-23T22:20:30.589Z", + "Web/API/Selection/extend": { + "modified": "2019-03-23T23:46:54.795Z", "contributors": [ - "AlePerez92" + "fscholz", + "DR", + "Mgjbot" ] }, - "Web/API/Console/time": { - "modified": "2019-03-18T21:42:22.745Z", + "Web/API/Selection/focusNode": { + "modified": "2019-03-23T23:46:46.574Z", "contributors": [ - "jotaoncode" + "fscholz", + "DR" ] }, - "Web/API/Console/timeEnd": { - "modified": "2020-10-15T22:13:11.825Z", + "Web/API/Selection/focusOffset": { + "modified": "2019-03-23T23:46:54.969Z", "contributors": [ - "xlhector10" + "fscholz", + "DR", + "Mgjbot" ] }, - "Web/API/Console/trace": { - "modified": "2019-03-23T22:22:51.545Z", + "Web/API/Selection/getRangeAt": { + "modified": "2019-03-23T23:46:55.195Z", "contributors": [ - "Axl-Nolasco" + "fscholz", + "DR" ] }, - "Web/API/Console/warn": { - "modified": "2020-10-15T21:53:36.780Z", + "Web/API/Selection/isCollapsed": { + "modified": "2019-03-23T23:46:52.080Z", "contributors": [ - "juanluisrp", - "oderflaj" + "fscholz", + "DR" ] }, - "Web/API/Constraint_validation": { - "modified": "2019-04-22T15:33:44.796Z" - }, - "Web/API/Crypto": { - "modified": "2020-10-15T22:27:12.417Z", + "Web/API/Selection/rangeCount": { + "modified": "2019-03-23T23:46:50.030Z", "contributors": [ - "joseluisq" + "fscholz", + "DR" ] }, - "Web/API/Crypto/subtle": { - "modified": "2020-10-15T22:27:11.548Z", + "Web/API/Selection/removeAllRanges": { + "modified": "2019-03-23T23:46:54.883Z", "contributors": [ - "joseluisq" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/CustomElementRegistry": { - "modified": "2020-10-15T22:29:44.444Z", + "Web/API/Selection/removeRange": { + "modified": "2019-03-23T23:46:55.069Z", "contributors": [ - "alattalatta" + "fscholz", + "DR", + "Mgjbot" ] }, - "Web/API/CustomElementRegistry/define": { - "modified": "2020-10-15T22:29:45.200Z", + "Web/API/Selection/selectAllChildren": { + "modified": "2019-03-23T23:46:50.124Z", "contributors": [ - "aguilerajl" + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/CustomEvent": { - "modified": "2020-10-15T21:56:03.240Z", + "Web/API/Selection/toString": { + "modified": "2019-03-23T23:47:28.897Z", "contributors": [ "fscholz", - "AlePerez92", - "daniville" + "Mgjbot", + "DR" ] }, - "Web/API/DOMError": { - "modified": "2020-10-15T21:34:32.594Z", + "Web/API/ServiceWorkerContainer": { + "modified": "2020-10-15T22:03:12.673Z", "contributors": [ - "fscholz", - "MauroEldritch" + "fscholz" ] }, - "Web/API/DOMParser": { - "modified": "2019-03-23T22:20:06.466Z", + "Web/API/ServiceWorkerContainer/register": { + "modified": "2020-10-15T22:03:11.889Z", "contributors": [ - "rferraris" + "LuisOlive", + "marc2684" ] }, - "Web/API/DOMString": { - "modified": "2019-03-18T21:41:05.316Z", + "Web/API/ServiceWorkerRegistration": { + "modified": "2020-10-15T22:05:45.607Z", "contributors": [ - "jagomf" + "ExE-Boss" ] }, - "Web/API/DOMString/Cadenas_binarias": { - "modified": "2020-08-29T03:33:22.030Z", + "Web/API/Service_Worker_API": { + "modified": "2019-03-23T22:09:38.478Z", "contributors": [ - "Nachec" + "Fedapamo", + "andrpueb", + "ibanlopez", + "eltioico", + "chrisdavidmills" ] }, - "Web/API/DataTransfer": { - "modified": "2019-03-23T23:17:03.398Z", + "Web/API/Service_Worker_API/Using_Service_Workers": { + "modified": "2019-03-23T22:09:43.848Z", "contributors": [ - "wbamberg", - "nmarmon", - "vmv", - "fscholz", - "yonatanalexis22" + "JasonGlez", + "Vergara", + "GabrielSchlomo", + "Anibalismo", + "darioperez" ] }, - "Web/API/Detecting_device_orientation": { - "modified": "2020-08-11T08:30:00.189Z", + "Web/API/Storage": { + "modified": "2019-03-23T22:37:04.835Z", "contributors": [ - "juancarlos.rmr", - "rayrojas", - "jairopezlo" + "puma", + "Sebastianz" ] }, - "Web/API/DeviceMotionEvent": { - "modified": "2020-10-15T22:22:26.832Z", + "Web/API/Storage/clear": { + "modified": "2019-03-23T22:26:00.358Z", "contributors": [ - "miguelaup" + "edwarfuentes97", + "theguitxo" ] }, - "Web/API/Document": { - "modified": "2019-10-10T16:52:49.015Z", + "Web/API/Storage/getItem": { + "modified": "2019-03-23T22:33:04.286Z", "contributors": [ - "luis.iglesias", - "AlejandroCordova", - "fscholz", - "Crash", - "DoctorRomi", - "Mgjbot", - "DR", - "Carlosds", - "Nathymig" + "devconcept", + "aminguez" ] }, - "Web/API/Document/URL": { - "modified": "2020-10-15T21:18:01.820Z", + "Web/API/Storage/length": { + "modified": "2019-03-23T22:25:49.492Z", "contributors": [ - "AlePerez92", - "fscholz", - "DR" + "Guitxo" ] }, - "Web/API/Document/abrir": { - "modified": "2020-10-15T22:31:23.051Z", + "Web/API/Storage/removeItem": { + "modified": "2020-06-16T13:11:43.937Z", "contributors": [ - "WillieMensa" + "jorgeCaster", + "aminguez" ] }, - "Web/API/Document/adoptNode": { - "modified": "2020-10-15T22:06:16.900Z", + "Web/API/Storage/setItem": { + "modified": "2019-03-23T22:37:01.770Z", "contributors": [ - "AlePerez92", - "InfaSysKey", - "ANDRUS74" + "aminguez", + "spideep" ] }, - "Web/API/Document/alinkColor": { - "modified": "2019-03-23T23:46:52.743Z", + "Web/API/StorageManager": { + "modified": "2020-10-15T22:18:18.423Z" + }, + "Web/API/StorageManager/estimate": { + "modified": "2020-10-15T22:18:17.461Z", "contributors": [ - "fscholz", - "DR" + "AlePerez92" ] }, - "Web/API/Document/anchors": { - "modified": "2020-10-15T21:18:02.380Z", + "Web/API/StorageManager/persist": { + "modified": "2020-10-15T22:18:17.848Z", "contributors": [ - "roocce", - "fscholz", - "DR" + "AlePerez92" ] }, - "Web/API/Document/applets": { - "modified": "2019-03-23T23:46:53.464Z", + "Web/API/StorageManager/persisted": { + "modified": "2020-10-15T22:18:17.733Z", "contributors": [ - "fscholz", - "DR" + "AlePerez92" ] }, - "Web/API/Document/async": { - "modified": "2019-03-23T22:57:43.989Z", + "Web/API/StyleSheet": { + "modified": "2019-03-18T21:12:49.649Z", "contributors": [ - "MauroEldritch" + "diegovinie", + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/API/Document/bgColor": { - "modified": "2019-03-23T23:46:48.550Z", + "Web/API/StyleSheet/disabled": { + "modified": "2019-03-23T23:58:08.612Z", "contributors": [ "fscholz", - "DR" + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/API/Document/body": { - "modified": "2019-03-23T23:47:18.556Z", + "Web/API/StyleSheet/href": { + "modified": "2019-03-23T23:58:07.932Z", "contributors": [ - "MauroEldritch", "fscholz", - "Markens", - "DR" + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/API/Document/characterSet": { - "modified": "2019-03-23T23:46:47.961Z", + "Web/API/StyleSheet/media": { + "modified": "2019-03-23T23:58:05.417Z", "contributors": [ "fscholz", - "Mgjbot", - "DR" + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/API/Document/clear": { - "modified": "2019-03-23T22:27:12.101Z", + "Web/API/StyleSheet/ownerNode": { + "modified": "2019-03-23T23:58:23.239Z", "contributors": [ - "pekechis" + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/API/Document/close": { - "modified": "2019-03-23T22:33:21.768Z", + "Web/API/StyleSheet/parentStyleSheet": { + "modified": "2019-03-23T23:58:09.687Z", "contributors": [ - "AitorRodriguez990" + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/API/Document/contentType": { - "modified": "2019-03-23T22:57:42.530Z", + "Web/API/StyleSheet/title": { + "modified": "2019-03-23T23:58:12.135Z", "contributors": [ - "MauroEldritch" + "fscholz", + "xuancanh", + "teoli", + "HenryGR" ] }, - "Web/API/Document/crearAtributo": { - "modified": "2020-10-15T21:55:08.825Z", + "Web/API/StyleSheet/type": { + "modified": "2019-03-23T23:58:05.312Z", "contributors": [ - "rodririobo", - "juanseromo12", - "FenixAlive" + "fscholz", + "jsx", + "teoli", + "HenryGR" ] }, - "Web/API/Document/createDocumentFragment": { - "modified": "2020-08-12T01:13:43.917Z", + "Web/API/SubtleCrypto": { + "modified": "2020-10-15T22:27:14.356Z", "contributors": [ - "zgreco2000", - "msaglietto" + "joseluisq" ] }, - "Web/API/Document/createElement": { - "modified": "2019-09-19T04:18:24.578Z", + "Web/API/SubtleCrypto/digest": { + "modified": "2020-10-15T22:27:30.018Z", "contributors": [ - "AlePerez92", - "Juandresyn", - "aitorllj93", - "BrodaNoel", - "McSonk", - "malonson", - "AlejandroBlanco", - "daesnorey_xy", - "JoaquinGonzalez" + "joseluisq" ] }, - "Web/API/Document/createElementNS": { - "modified": "2019-03-23T22:23:11.141Z", + "Web/API/TextTrack": { + "modified": "2020-10-15T22:33:08.345Z", "contributors": [ - "ErikMj69" + "joeyparrish" ] }, - "Web/API/Document/createRange": { - "modified": "2019-08-27T15:00:09.804Z", + "Web/API/TextTrack/cuechange_event": { + "modified": "2020-10-15T22:33:09.063Z", "contributors": [ - "iarah", - "fscholz", - "jsx", - "Mgjbot", - "DR" + "Pablo-No" ] }, - "Web/API/Document/createTextNode": { - "modified": "2020-10-15T22:17:21.251Z", + "Web/API/TouchEvent": { + "modified": "2019-03-23T22:32:05.809Z", "contributors": [ + "ulisestrujillo", "AlePerez92" ] }, - "Web/API/Document/defaultView": { - "modified": "2019-03-23T22:54:20.024Z", + "Web/API/UIEvent": { + "modified": "2019-03-23T23:01:34.700Z", "contributors": [ - "ArcangelZith" + "fscholz" ] }, - "Web/API/Document/designMode": { - "modified": "2020-10-15T21:40:52.052Z", + "Web/API/UIEvent/pageX": { + "modified": "2019-03-23T23:12:56.756Z", "contributors": [ - "AlePerez92", - "sohereitcomes" + "fscholz", + "khalid32", + "Nathymig", + "Julgon" ] }, - "Web/API/Document/dir": { - "modified": "2019-03-23T22:57:39.171Z", + "Web/API/URL": { + "modified": "2019-03-23T22:19:12.735Z", "contributors": [ - "MauroEldritch" + "zayle", + "wstaelens" ] }, - "Web/API/Document/doctype": { - "modified": "2019-03-23T22:43:25.055Z", + "Web/API/URL/Host": { + "modified": "2020-10-15T22:28:58.726Z", "contributors": [ - "joselix" + "diegovlopez587" ] }, - "Web/API/Document/documentElement": { - "modified": "2019-03-23T23:50:27.852Z", + "Web/API/URL/URL": { + "modified": "2020-10-15T22:21:36.171Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "HenryGR", - "Mgjbot" + "roberth_dev" ] }, - "Web/API/Document/documentURI": { - "modified": "2019-03-23T22:39:59.389Z", + "Web/API/URL/createObjectURL": { + "modified": "2019-03-23T22:19:19.805Z", "contributors": [ - "Zholary" + "OrlandoDeJesusCuxinYama", + "isafrus5", + "AzazelN28" ] }, - "Web/API/Document/documentURIObject": { - "modified": "2019-03-23T23:50:26.462Z", + "Web/API/URL/port": { + "modified": "2020-10-15T22:21:35.297Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "HenryGR", - "Mgjbot" + "roberth_dev" ] }, - "Web/API/Document/dragover_event": { - "modified": "2019-04-30T14:24:25.773Z", + "Web/API/URLSearchParams": { + "modified": "2019-03-23T22:08:25.598Z", "contributors": [ - "wbamberg", - "fscholz", - "ExE-Boss", - "Vickysolo" + "aliveghost04" ] }, - "Web/API/Document/embeds": { - "modified": "2020-10-15T22:22:17.171Z", + "Web/API/URLSearchParams/URLSearchParams": { + "modified": "2020-10-15T22:28:05.327Z", "contributors": [ - "iarah" + "daniel.duarte" ] }, - "Web/API/Document/evaluate": { - "modified": "2019-03-23T22:10:41.891Z", + "Web/API/WebGL_API": { + "modified": "2019-03-24T00:07:50.182Z", "contributors": [ - "bryan3561" + "fscholz", + "teoli", + "inma_610" ] }, - "Web/API/Document/execCommand": { - "modified": "2019-03-23T22:59:11.227Z", + "Web/API/WebGL_API/Tutorial": { + "modified": "2019-03-23T22:48:50.519Z", "contributors": [ - "MarkelCuesta", - "asero82", - "javatlacati" + "SphinxKnight", + "lrlimon", + "fscholz" ] }, - "Web/API/Document/exitFullscreen": { - "modified": "2020-10-15T22:23:56.627Z", + "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": { + "modified": "2019-03-18T21:16:52.110Z", "contributors": [ - "davidmartinezfl" + "Nekete", + "Erik12Ixec", + "WHK102", + "COBRILL4" ] }, - "Web/API/Document/getElementById": { - "modified": "2019-03-23T23:46:23.291Z", + "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": { + "modified": "2019-03-23T23:20:38.388Z", "contributors": [ - "Enesimus", - "jlpindado", - "pclifecl", - "OLiiver", "fscholz", "teoli", - "tuxisma", - "Juan c c q" + "luziiann" ] }, - "Web/API/Document/getElementsByClassName": { - "modified": "2019-03-23T22:48:57.077Z", + "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": { + "modified": "2019-03-23T22:34:48.400Z", "contributors": [ - "JuanMacias", - "JungkookScript", - "ncaracci" + "pixelements" ] }, - "Web/API/Document/getElementsByName": { - "modified": "2019-03-18T21:37:32.461Z", + "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": { + "modified": "2019-03-23T23:06:04.656Z", "contributors": [ - "MikeGsus" + "fcanellas", + "Pablo_Bangueses", + "CarlosLinares", + "Inheritech", + "CandelarioGomez", + "fscholz", + "joeljose", + "Jorge0309" ] }, - "Web/API/Document/getElementsByTagName": { - "modified": "2019-03-23T23:50:32.110Z", + "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": { + "modified": "2020-05-29T05:02:06.384Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "teoli", - "HenryGR", - "Mgjbot" + "jmlocke1", + "Giovan" ] }, - "Web/API/Document/getElementsByTagNameNS": { - "modified": "2019-03-23T23:50:38.494Z", + "Web/API/WebRTC_API": { + "modified": "2020-05-01T03:28:58.714Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "AlejandroSilva", - "leopic", - "HenryGR", - "Mgjbot" + "erito73", + "miguelsp" ] }, - "Web/API/Document/getSelection": { - "modified": "2019-03-23T22:54:50.239Z", + "Web/API/WebRTC_API/Protocols": { + "modified": "2020-05-01T03:41:11.993Z", "contributors": [ - "Diferno" + "erito73", + "ValeriaRamos" ] }, - "Web/API/Document/hasFocus": { - "modified": "2019-03-23T23:53:13.498Z", + "Web/API/WebSocket": { + "modified": "2019-03-18T20:53:48.099Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "Mgjbot", - "Talisker", - "HenryGR" + "benja90", + "spachecojimenez", + "aranondo", + "dpineiden" ] }, - "Web/API/Document/head": { - "modified": "2019-03-23T22:55:43.504Z", + "Web/API/WebSocket/close_event": { + "modified": "2019-03-23T21:59:50.486Z", "contributors": [ - "federicobond" + "irenesmith", + "ExE-Boss", + "FLAVIOALFA" ] }, - "Web/API/Document/height": { - "modified": "2019-03-23T22:09:21.631Z", + "Web/API/WebSocket/onerror": { + "modified": "2020-10-15T22:13:54.439Z", "contributors": [ - "HarleySG" + "Bumxu" ] }, - "Web/API/Document/hidden": { - "modified": "2020-10-15T22:14:24.023Z", + "Web/API/WebSockets_API": { + "modified": "2019-05-21T02:54:41.622Z", "contributors": [ - "Elenito93" + "SphinxKnight", + "tpb", + "petisocarambanal", + "CesarBustios", + "mserracaldentey" ] }, - "Web/API/Document/importNode": { - "modified": "2020-10-15T21:52:00.631Z", + "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { + "modified": "2019-05-21T02:54:42.026Z", "contributors": [ - "fscholz", - "wbamberg", - "AsLogd" + "SphinxKnight", + "neopablix", + "jevvilla", + "jvilla8a", + "AzazelN28", + "Unbrained", + "gabryk", + "MauroEldritch", + "frankzen" ] }, - "Web/API/Document/keydown_event": { - "modified": "2020-04-03T23:31:41.800Z", + "Web/API/WebVR_API": { + "modified": "2019-03-23T22:07:07.755Z", "contributors": [ - "camsa", - "irenesmith", - "ExE-Boss", - "fscholz", - "juan-ferrer-toribio" + "Alphaeolo", + "chrisdavidmills" ] }, - "Web/API/Document/keyup_event": { - "modified": "2019-04-18T03:50:20.204Z", + "Web/API/WebVR_API/Using_the_WebVR_API": { + "modified": "2020-10-12T08:06:57.683Z", "contributors": [ - "irenesmith", - "ExE-Boss", - "fscholz", - "gabojkz" + "SphinxKnight", + "MarioA19", + "geryescalier", + "karlalhdz" ] }, - "Web/API/Document/pointerLockElement": { - "modified": "2019-03-23T22:05:31.350Z", + "Web/API/WebVTT_API": { + "modified": "2020-10-15T22:33:07.538Z", "contributors": [ - "arquigames" + "Pablo-No" ] }, - "Web/API/Document/querySelector": { - "modified": "2019-03-23T22:58:51.923Z", + "Web/API/Web_Crypto_API": { + "modified": "2020-02-12T20:20:09.829Z", "contributors": [ - "BrodaNoel", - "Luis_Calvo", - "dannysalazar90" + "joseluisq", + "anfuca", + "haxdai" ] }, - "Web/API/Document/querySelectorAll": { - "modified": "2020-10-15T21:34:24.234Z", + "Web/API/Web_Speech_API": { + "modified": "2020-10-15T22:29:46.339Z", "contributors": [ - "chrisdavidmills", - "AlePerez92", - "padrecedano", - "lfottaviano", - "joeljose" + "dianarryanti707" ] }, - "Web/API/Document/readyState": { - "modified": "2019-03-23T22:46:17.268Z", + "Web/API/Web_Workers_API": { + "modified": "2020-04-14T23:36:47.242Z", "contributors": [ - "Codejobs" + "krebking", + "thepianist2", + "jsanmor" ] }, - "Web/API/Document/registerElement": { - "modified": "2019-03-23T22:58:15.536Z", + "Web/API/WheelEvent": { + "modified": "2019-03-23T22:40:53.687Z", "contributors": [ - "SphinxKnight", - "AlePerez92", - "mclo", - "chrisdavidmills" + "StripTM" ] }, - "Web/API/Document/scripts": { - "modified": "2019-03-23T22:57:42.662Z", + "Web/API/WheelEvent/deltaY": { + "modified": "2019-03-23T22:26:41.848Z", "contributors": [ - "MauroEldritch" + "Thargelion" ] }, - "Web/API/Document/scroll_event": { - "modified": "2020-04-13T22:20:51.709Z", + "Web/API/Window": { + "modified": "2020-08-14T20:26:23.156Z", "contributors": [ - "camsa", - "irenesmith", - "ExE-Boss", - "arkgast", + "Enesimus", + "Michelangeur", + "antoiba86", + "jjoselon", + "vggallego", "fscholz", - "PatoDeTuring", - "Thargelion" + "Crash", + "Monty", + "Markens", + "DR", + "Nathymig", + "Mgjbot" ] }, - "Web/API/Document/styleSheets": { - "modified": "2019-03-23T23:58:05.224Z", + "Web/API/Window/alert": { + "modified": "2019-03-23T22:27:29.008Z", "contributors": [ - "fscholz", - "jsx", - "teoli", - "HenryGR" + "israel-munoz" ] }, - "Web/API/Document/write": { - "modified": "2019-03-23T22:26:37.503Z", + "Web/API/Window/applicationCache": { + "modified": "2019-03-23T23:52:56.666Z", "contributors": [ - "JohnnyKB", - "bastiantowers" + "SphinxKnight", + "fscholz", + "AshfaqHossain", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Document/writeln": { - "modified": "2019-03-23T22:21:05.956Z", + "Web/API/Window/cancelAnimationFrame": { + "modified": "2019-03-23T22:30:46.211Z", "contributors": [ - "mauroc8" + "khrizenriquez" ] }, - "Web/API/DocumentFragment": { - "modified": "2020-10-15T22:29:37.426Z", + "Web/API/Window/close": { + "modified": "2020-10-15T21:37:07.614Z", "contributors": [ - "JooseNavarro" + "SphinxKnight", + "dgrizzla", + "Siro_Diaz" ] }, - "Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example": { - "modified": "2019-03-23T22:06:28.946Z", + "Web/API/Window/closed": { + "modified": "2019-03-18T20:59:11.710Z", "contributors": [ - "BrodaNoel" + "SphinxKnight", + "developingo" ] }, - "Web/API/DragEvent": { - "modified": "2020-11-04T23:21:08.729Z", + "Web/API/Window/confirm": { + "modified": "2019-03-23T22:45:47.266Z", "contributors": [ - "AngelFQC" + "julian3xl" ] }, - "Web/API/Element": { - "modified": "2019-03-24T00:06:42.464Z", + "Web/API/Window/crypto": { + "modified": "2020-02-12T20:26:38.795Z", "contributors": [ - "carllewisc", - "JuanMacias", - "SphinxKnight", - "fscholz", - "teoli", - "webmaster", - "AshfaqHossain", - "MARCASTELEON", - "Markens", - "Mgjbot", - "Nathymig" - ] - }, - "Web/API/Element/accessKey": { - "modified": "2019-03-23T22:26:12.172Z", - "contributors": [ - "SoftwareRVG" + "joseluisq", + "AlePerez92", + "victorjavierss" ] }, - "Web/API/Element/animate": { - "modified": "2019-03-23T22:26:03.841Z", + "Web/API/Window/devicePixelRatio": { + "modified": "2019-03-23T22:33:20.853Z", "contributors": [ - "SoftwareRVG" + "Grijander81" ] }, - "Web/API/Element/attachShadow": { - "modified": "2020-10-15T22:29:44.635Z", + "Web/API/Window/dialogArguments": { + "modified": "2019-03-23T22:33:21.065Z", "contributors": [ - "aguilerajl" + "Grijander81" ] }, - "Web/API/Element/attributes": { - "modified": "2019-03-23T22:32:35.186Z", + "Web/API/Window/document": { + "modified": "2019-03-18T21:17:09.045Z", "contributors": [ "Grijander81" ] }, - "Web/API/Element/classList": { - "modified": "2019-08-07T11:56:45.170Z", + "Web/API/Window/frameElement": { + "modified": "2019-03-23T22:33:19.039Z", "contributors": [ - "AlePerez92", - "alkaithil", - "luispuchades" + "edmon1024", + "Grijander81" ] }, - "Web/API/Element/className": { - "modified": "2019-03-23T22:32:39.589Z", + "Web/API/Window/fullScreen": { + "modified": "2019-03-23T23:50:19.968Z", "contributors": [ - "AlePerez92", - "Grijander81" + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Element/click_event": { - "modified": "2019-03-18T20:47:32.813Z", + "Web/API/Window/getComputedStyle": { + "modified": "2019-03-23T23:58:07.622Z", "contributors": [ - "irenesmith", - "ExE-Boss", "fscholz", - "jvas28" + "jsx", + "teoli", + "HenryGR" ] }, - "Web/API/Element/clientHeight": { - "modified": "2019-03-18T20:59:01.264Z", + "Web/API/Window/getSelection": { + "modified": "2019-09-18T11:51:48.070Z", "contributors": [ - "SphinxKnight", - "maxijb", - "germanfr" + "AlePerez92", + "LittleSanti", + "fscholz", + "Mgjbot", + "DR" ] }, - "Web/API/Element/clientLeft": { - "modified": "2019-03-23T23:50:22.640Z", + "Web/API/Window/hashchange_event": { + "modified": "2019-04-01T11:56:33.015Z", "contributors": [ - "SphinxKnight", "fscholz", - "khalid32", - "HenryGR", - "Mgjbot" + "ExE-Boss", + "jorgerenteral" ] }, - "Web/API/Element/clientTop": { - "modified": "2019-03-23T23:50:18.628Z", + "Web/API/Window/history": { + "modified": "2020-10-15T21:43:45.922Z", "contributors": [ "SphinxKnight", - "fscholz", - "AshfaqHossain", - "HenryGR", - "Mgjbot" + "khrizenriquez" ] }, - "Web/API/Element/clientWidth": { - "modified": "2020-10-15T21:46:17.283Z", + "Web/API/Window/innerHeight": { + "modified": "2020-07-23T18:50:37.998Z", "contributors": [ - "SphinxKnight", - "Grijander81" + "dongerardor", + "alfredoWs" ] }, - "Web/API/Element/closest": { - "modified": "2020-10-15T21:51:29.500Z", + "Web/API/Window/localStorage": { + "modified": "2019-06-04T06:54:12.078Z", "contributors": [ - "AlePerez92" + "taumartin", + "nazarioa", + "McSonk", + "faliure", + "tinchosrok", + "DragShot", + "ianaya89" ] }, - "Web/API/Element/computedStyleMap": { - "modified": "2020-11-20T23:32:12.573Z", + "Web/API/Window/location": { + "modified": "2019-03-23T22:52:04.798Z", "contributors": [ - "mrkadium" + "khrizenriquez", + "MaFranceschi" ] }, - "Web/API/Element/currentStyle": { - "modified": "2019-03-23T22:26:01.738Z", + "Web/API/Window/locationbar": { + "modified": "2019-03-23T22:16:35.650Z", "contributors": [ - "SoftwareRVG" + "ivannieto" ] }, - "Web/API/Element/getAttribute": { - "modified": "2019-03-23T22:55:05.590Z", + "Web/API/Window/matchMedia": { + "modified": "2020-10-15T21:54:30.059Z", "contributors": [ - "germanfr", - "hawkins" + "AlePerez92", + "tipoqueno", + "tavo379" ] }, - "Web/API/Element/getAttributeNodeNS": { - "modified": "2019-03-18T21:40:41.705Z", + "Web/API/Window/menubar": { + "modified": "2019-03-23T22:33:13.331Z", "contributors": [ - "FcoJavierEsc" + "Grijander81" ] }, - "Web/API/Element/getBoundingClientRect": { - "modified": "2020-10-15T21:16:26.376Z", + "Web/API/Window/moveBy": { + "modified": "2020-10-15T22:08:26.636Z", "contributors": [ - "AlePerez92", - "slam", - "cristianmartinez", - "SphinxKnight", - "joseanpg", - "jzatarain", - "fscholz", - "jsx", - "HenryGR", - "Mgjbot" + "pedrofmb" ] }, - "Web/API/Element/getClientRects": { - "modified": "2019-03-23T23:50:31.325Z", + "Web/API/Window/navigator": { + "modified": "2019-03-23T23:20:37.914Z", "contributors": [ - "SphinxKnight", - "edhzsz", "fscholz", "khalid32", - "HenryGR", - "Mgjbot" + "tpb" ] }, - "Web/API/Element/getElementsByClassName": { - "modified": "2019-03-23T22:32:46.843Z", + "Web/API/Window/offline_event": { + "modified": "2019-04-30T14:21:22.454Z", "contributors": [ - "Grijander81" + "wbamberg", + "irenesmith", + "Daniel-VQ" ] }, - "Web/API/Element/getElementsByTagName": { - "modified": "2019-03-23T23:53:30.735Z", + "Web/API/Window/open": { + "modified": "2020-04-13T14:31:02.220Z", "contributors": [ + "fj-ramirez", + "BubuAnabelas", + "jccharlie90", "SphinxKnight", - "fscholz", - "khalid32", - "Mgjbot", - "HenryGR" + "VictorAbdon", + "jjoselon" ] }, - "Web/API/Element/getElementsByTagNameNS": { - "modified": "2019-03-18T21:15:33.018Z", + "Web/API/Window/opener": { + "modified": "2019-03-23T22:46:00.877Z", "contributors": [ - "cguimaraenz" + "carlosmunozrodriguez", + "f3rbarraza" ] }, - "Web/API/Element/hasAttribute": { - "modified": "2019-03-23T22:12:50.721Z", + "Web/API/Window/outerHeight": { + "modified": "2019-03-18T21:15:44.722Z", "contributors": [ - "ElChiniNet" + "rlopezAyala", + "GianlucaBobbio" ] }, - "Web/API/Element/id": { - "modified": "2019-03-23T22:26:11.048Z", + "Web/API/Window/outerWidth": { + "modified": "2019-03-23T22:04:23.293Z", "contributors": [ - "SoftwareRVG" + "shadairafael" ] }, - "Web/API/Element/innerHTML": { - "modified": "2019-03-18T20:58:51.922Z", + "Web/API/Window/print": { + "modified": "2019-07-11T23:43:54.339Z", "contributors": [ - "SphinxKnight", - "IsaacAaron", - "BrodaNoel", - "CristhianLora1", - "fscholz", - "teoli", - "JAparici" + "EstebanDalelR", + "ErikMj69" ] }, - "Web/API/Element/insertAdjacentElement": { - "modified": "2020-12-03T10:36:12.400Z", + "Web/API/Window/prompt": { + "modified": "2019-03-23T22:20:58.413Z", "contributors": [ - "AlePerez92", - "alexlndn", - "AgustinPrieto" + "israel-munoz" ] }, - "Web/API/Element/insertAdjacentHTML": { - "modified": "2020-10-15T21:56:01.516Z", + "Web/API/Window/requestAnimationFrame": { + "modified": "2020-07-05T08:38:54.640Z", "contributors": [ "AlePerez92", - "mikekrn" + "mauriciabad", + "fortil", + "andrpueb", + "fscholz", + "jbalsas" ] }, - "Web/API/Element/localName": { - "modified": "2019-03-23T22:26:08.984Z", + "Web/API/Window/requestIdleCallback": { + "modified": "2020-12-05T00:33:07.625Z", "contributors": [ - "SoftwareRVG" + "gnunezr", + "jsolana" ] }, - "Web/API/Element/matches": { - "modified": "2020-12-06T16:23:07.481Z", + "Web/API/Window/scroll": { + "modified": "2020-10-15T21:54:58.717Z", "contributors": [ "AlePerez92", - "amIsmael", - "nbouvrette", - "Grijander81" + "patoezequiel" ] }, - "Web/API/Element/mousedown_event": { - "modified": "2019-03-18T20:41:57.554Z", + "Web/API/Window/scrollBy": { + "modified": "2019-03-23T22:40:05.334Z", "contributors": [ - "irenesmith", - "ExE-Boss", - "fscholz", - "marydn" - ] - }, - "Web/API/Element/name": { - "modified": "2019-03-23T22:26:11.317Z", - "contributors": [ - "SoftwareRVG" + "plaso", + "Bcd" ] }, - "Web/API/Element/namespaceURI": { - "modified": "2019-03-23T22:25:51.573Z", + "Web/API/Window/scrollTo": { + "modified": "2019-03-23T22:05:41.259Z", "contributors": [ - "SoftwareRVG" + "gyroscopico" ] }, - "Web/API/Element/ongotpointercapture": { - "modified": "2019-03-23T22:25:49.346Z", + "Web/API/Window/scrollX": { + "modified": "2019-03-18T21:15:11.745Z", "contributors": [ - "SoftwareRVG" + "Grijander81" ] }, - "Web/API/Element/onlostpointercapture": { - "modified": "2019-03-23T22:25:49.190Z", + "Web/API/Window/scrollY": { + "modified": "2019-03-23T22:53:30.651Z", "contributors": [ - "SoftwareRVG" + "MaFranceschi" ] }, - "Web/API/Element/onwheel": { - "modified": "2019-03-18T21:09:09.483Z", + "Web/API/Window/sessionStorage": { + "modified": "2019-03-23T22:57:50.655Z", "contributors": [ - "fscholz", - "SoftwareRVG" + "svera", + "pedromagnus", + "develasquez" ] }, - "Web/API/Element/outerHTML": { - "modified": "2019-03-23T22:32:38.203Z", + "Web/API/Window/showModalDialog": { + "modified": "2019-03-18T20:58:55.311Z", "contributors": [ + "SphinxKnight", + "BubuAnabelas", "Grijander81" ] }, - "Web/API/Element/prefix": { - "modified": "2019-03-23T22:25:56.753Z", + "Web/API/Window/sidebar": { + "modified": "2019-03-23T22:02:56.395Z", "contributors": [ - "SoftwareRVG" + "IsaacSchemm" ] }, - "Web/API/Element/querySelector": { - "modified": "2020-10-01T13:45:10.425Z", + "Web/API/Window/statusbar": { + "modified": "2019-03-23T22:14:36.556Z", "contributors": [ - "Augusto-Ruiz", - "Luis_Calvo", - "Fx-Enlcxx" + "UshioSan" ] }, - "Web/API/Element/removeAttribute": { - "modified": "2019-03-23T22:32:43.147Z", + "Web/API/WindowEventHandlers": { + "modified": "2019-03-23T23:01:29.892Z", "contributors": [ - "AlePerez92", - "Grijander81" + "fscholz" ] }, - "Web/API/Element/requestFullScreen": { - "modified": "2019-03-23T22:46:59.466Z", + "Web/API/WindowEventHandlers/onbeforeunload": { + "modified": "2019-03-23T23:22:06.132Z", "contributors": [ - "joseamn1" + "fscholz", + "AshfaqHossain", + "jota1410" ] }, - "Web/API/Element/runtimeStyle": { - "modified": "2019-03-23T22:25:35.378Z", + "Web/API/WindowEventHandlers/onhashchange": { + "modified": "2019-03-23T22:49:36.790Z", "contributors": [ - "SoftwareRVG" + "AlePerez92", + "daesnorey" ] }, - "Web/API/Element/scrollHeight": { - "modified": "2020-09-19T11:38:52.843Z", + "Web/API/WindowEventHandlers/onpopstate": { + "modified": "2020-10-15T22:19:35.746Z", "contributors": [ - "amfolgar", - "SphinxKnight", - "SoftwareRVG" + "borxdev", + "jccuevas" ] }, - "Web/API/Element/scrollIntoView": { - "modified": "2020-08-02T20:51:14.523Z", + "Web/API/WindowOrWorkerGlobalScope": { + "modified": "2019-03-23T22:16:40.400Z", "contributors": [ - "maketas", - "avaleriani", - "magorismagor", - "germanfr" + "ivannieto", + "chrisdavidmills" ] }, - "Web/API/Element/scrollLeft": { - "modified": "2019-03-18T20:59:11.327Z", + "Web/API/WindowOrWorkerGlobalScope/caches": { + "modified": "2019-03-23T22:16:45.016Z", "contributors": [ - "SphinxKnight", - "SoftwareRVG" + "ivannieto" ] }, - "Web/API/Element/scrollTop": { - "modified": "2019-03-23T22:32:41.577Z", + "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": { + "modified": "2020-10-15T22:14:17.553Z", "contributors": [ - "Grijander81" + "Bumxu" ] }, - "Web/API/Element/scrollTopMax": { - "modified": "2019-03-23T22:16:03.156Z", + "Web/API/WindowOrWorkerGlobalScope/fetch": { + "modified": "2020-10-15T22:01:57.457Z", "contributors": [ - "lizzie136" + "fscholz", + "jagomf" ] }, - "Web/API/Element/scrollWidth": { - "modified": "2020-10-15T21:46:17.244Z", + "Web/API/WindowOrWorkerGlobalScope/indexedDB": { + "modified": "2019-03-23T22:16:36.537Z", "contributors": [ - "SphinxKnight", - "Grijander81" + "ivannieto" ] }, - "Web/API/Element/setAttribute": { - "modified": "2019-03-23T23:58:09.577Z", + "Web/API/WindowOrWorkerGlobalScope/isSecureContext": { + "modified": "2019-03-23T22:16:45.834Z", "contributors": [ - "AlePerez92", - "fscholz", - "AshfaqHossain", - "teoli", - "HenryGR" + "ivannieto" ] }, - "Web/API/Element/setAttributeNS": { - "modified": "2019-03-23T22:29:35.252Z", + "Web/API/Worker": { + "modified": "2019-03-23T22:48:01.797Z", "contributors": [ - "developersoul" + "benjroy" ] }, - "Web/API/Element/setCapture": { - "modified": "2019-03-23T22:23:40.163Z", + "Web/API/Worker/postMessage": { + "modified": "2020-04-23T06:46:10.302Z", "contributors": [ - "wbamberg", - "SoftwareRVG" + "aguilahorus", + "cristyansv", + "mar777" ] }, - "Web/API/Element/shadowRoot": { - "modified": "2020-10-15T22:21:04.049Z", + "Web/API/Worker/terminate": { + "modified": "2019-03-23T22:19:14.265Z", "contributors": [ - "quintero_japon" + "AzazelN28" ] }, - "Web/API/Element/tagName": { - "modified": "2019-03-23T23:53:26.081Z", + "Web/API/XMLHttpRequest": { + "modified": "2019-05-02T19:52:03.482Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", + "wbamberg", + "Juvenal-yescas", + "ojgarciab", + "Sheppy", + "dgrcode", + "HadesDX", + "StripTM", + "mitogh", + "deimidis", "Mgjbot", - "HenryGR" + "Jorolo" ] }, - "Web/API/Element/wheel_event": { - "modified": "2019-04-08T07:24:47.493Z", + "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": { + "modified": "2019-03-23T22:05:30.902Z", "contributors": [ - "irenesmith", - "fscholz", - "ExE-Boss", - "dimuziop", - "Thargelion", - "PRDeving" + "Juvenal-yescas" ] }, - "Web/API/ElementosHTMLparaVideo": { - "modified": "2019-06-22T13:44:40.927Z", + "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { + "modified": "2020-03-17T04:09:47.273Z", "contributors": [ - "Santi72Alc", - "myrnafig" + "jccuevas", + "camsa", + "david_ru", + "cesaruve", + "Sheppy", + "Sebastianz", + "iiegor", + "javierdp", + "bardackx", + "teoli", + "inma_610" ] }, - "Web/API/Event": { - "modified": "2019-03-24T00:00:03.889Z", + "Web/API/XMLHttpRequest/abort": { + "modified": "2019-03-23T22:12:16.683Z", "contributors": [ - "wbamberg", - "jesmarquez", - "fscholz", - "cesardelahoz", - "Mgjbot", - "Markens", - "DR", - "Nathymig" + "Sheppy", + "todomagichere" ] }, - "Web/API/Event/Event": { - "modified": "2020-10-15T21:51:25.582Z", + "Web/API/XMLHttpRequest/onreadystatechange": { + "modified": "2019-03-23T22:20:14.868Z", "contributors": [ - "fscholz", - "malonson" + "Sheppy", + "theUncanny" ] }, - "Web/API/Event/bubbles": { - "modified": "2019-03-23T23:50:25.843Z", + "Web/API/XMLHttpRequest/responseText": { + "modified": "2019-03-23T22:09:05.708Z", "contributors": [ - "SphinxKnight", - "DeiberChacon", - "fscholz", - "khalid32", - "HenryGR", - "Mgjbot" + "midnight25" ] }, - "Web/API/Event/cancelable": { - "modified": "2019-03-23T23:53:29.694Z", + "Web/API/XMLHttpRequest/timeout": { + "modified": "2020-10-15T22:26:49.508Z", "contributors": [ - "fscholz", - "hardhik", - "AshfaqHossain", - "Mgjbot", - "HenryGR" + "mmednik" ] }, - "Web/API/Event/createEvent": { - "modified": "2019-03-23T22:01:26.841Z", + "Web/API/XMLHttpRequestEventTarget": { + "modified": "2020-10-15T22:26:08.879Z" + }, + "Web/API/XMLHttpRequestEventTarget/onload": { + "modified": "2020-10-15T22:26:03.172Z", "contributors": [ - "AlePerez92" + "Akafadam" ] }, - "Web/API/Event/currentTarget": { - "modified": "2020-10-15T21:56:21.779Z", + "Web/API/console/assert": { + "modified": "2019-03-23T22:47:53.587Z", "contributors": [ + "Takumakun", "AlePerez92", - "KacosPro", - "roberbnd" + "danycoro" ] }, - "Web/API/Event/defaultPrevented": { - "modified": "2019-03-23T23:06:29.767Z", + "Web/API/notification": { + "modified": "2019-06-28T05:54:12.854Z", "contributors": [ - "AlePerez92", + "paumoreno", + "hhcarmenate", + "RockLee-BC", + "francotalarico93", + "frossi933", + "Irvandoval", + "LuyisiMiger", "fscholz", - "matajm" + "elfoxero" ] }, - "Web/API/Event/initEvent": { - "modified": "2019-03-23T23:53:14.885Z", + "Web/API/notification/body": { + "modified": "2019-03-23T22:59:34.974Z", "contributors": [ - "SphinxKnight", - "fscholz", - "AndresSaa", - "AshfaqHossain", - "Mgjbot", - "HenryGR" + "joxhker" ] }, - "Web/API/Event/preventDefault": { - "modified": "2019-03-23T23:53:27.022Z", + "Web/API/notification/dir": { + "modified": "2019-03-23T22:59:36.852Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "Mgjbot", - "HenryGR" + "joxhker" ] }, - "Web/API/Event/stopPropagation": { - "modified": "2019-03-18T20:37:26.213Z", + "Web/API/notification/icon": { + "modified": "2019-03-23T22:59:32.492Z", "contributors": [ - "sebaLinares", - "theskear", - "AlePerez92" + "joxhker" ] }, - "Web/API/Event/target": { - "modified": "2020-11-21T17:52:42.977Z", + "Web/API/notification/onclick": { + "modified": "2019-03-23T22:11:55.774Z", "contributors": [ - "fernandoarmonellifiedler", - "luchosr", - "Eyurivilc", - "roberbnd" + "AndresTonello" ] }, - "Web/API/Event/type": { - "modified": "2020-10-15T21:21:03.258Z", + "Web/API/notification/permission": { + "modified": "2019-03-23T22:07:38.974Z", "contributors": [ - "AlePerez92", - "javier1nc", - "fscholz", - "Chacho" + "alanmacgowan", + "IXTRUnai" ] }, - "Web/API/EventListener": { - "modified": "2019-03-23T22:49:37.176Z", + "Web/API/notification/requestPermission": { + "modified": "2019-03-23T22:50:37.341Z", "contributors": [ - "gdlm91", - "japho" + "MarkelCuesta", + "jezdez", + "Davdriver" ] }, - "Web/API/EventSource": { - "modified": "2019-03-23T22:10:23.912Z", + "Web/Accessibility/ARIA": { + "modified": "2019-03-23T22:32:50.943Z", "contributors": [ - "Jabi" + "AlejandroC92", + "megatux", + "guumo", + "VNWK", + "imelenchon", + "teoli" ] }, - "Web/API/EventSource/onopen": { - "modified": "2019-03-23T22:03:59.180Z", + "Web/Accessibility/ARIA/ARIA_Techniques": { + "modified": "2019-03-23T22:46:27.954Z", "contributors": [ - "Hoosep" + "chrisdavidmills" ] }, - "Web/API/EventTarget": { - "modified": "2020-10-26T17:08:31.808Z", + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { + "modified": "2019-03-18T21:31:32.978Z", "contributors": [ - "Ktoxcon", - "diazpolanco13", - "jorgeherrera9103", - "fscholz" + "IsraelFloresDGA", + "mayrars" ] }, - "Web/API/EventTarget/addEventListener": { - "modified": "2020-10-24T17:14:12.317Z", + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute": { + "modified": "2020-12-02T07:09:06.472Z", "contributors": [ - "codesandtags", - "wbamberg", - "padrecedano", - "LuxDie", - "juanbrujo", - "StripTM", - "fscholz", - "samurai-code", - "Josias", - "edulon", - "Chacho" + "AlePerez92", + "mitsurugi", + "fraboto", + "blanchart", + "ErikMj69", + "NelsonWF" ] }, - "Web/API/EventTarget/dispatchEvent": { - "modified": "2020-05-25T14:53:28.357Z", + "Web/Accessibility/ARIA/forms": { + "modified": "2020-08-13T01:50:29.740Z", + "contributors": [ + "Nachec", + "IsraelFloresDGA", + "malonson" + ] + }, + "Web/CSS": { + "modified": "2020-10-25T05:19:47.416Z", "contributors": [ - "OneLoneFox", "SphinxKnight", - "fscholz", - "jsx", + "redondomoralesmelanny", + "Dolacres", + "boualidev", + "Enesimus", + "chrisdavidmills", + "NavetsArev", + "alazzuri", + "IsraelFloresDGA", + "lajaso", + "arturoblack", + "rogeliomtx", + "anecto", "teoli", + "Luis_Calvo", + "alex_dm", + "ethertank", + "StripTM", + "inma_610", + "another_sam", + "fscholz", + "Wrongloop", + "Nathymig", "Mgjbot", - "HenryGR" + "Nukeador", + "Jorolo", + "Lopez", + "Takenbot", + "Manu", + "Elrohir" ] }, - "Web/API/EventTarget/removeEventListener": { - "modified": "2020-10-15T21:33:28.829Z", + "Web/CSS/--*": { + "modified": "2020-11-18T17:43:24.329Z", "contributors": [ - "IsraelFloresDGA", - "everblut", - "cmadrono" + "jemilionautoch" ] }, - "Web/API/FetchEvent": { - "modified": "2020-11-15T12:19:50.961Z", + "Web/CSS/-moz-context-properties": { + "modified": "2020-10-15T22:13:14.061Z", "contributors": [ - "kuntur-studio", - "pavilion", - "fasalgad" + "Adorta4" ] }, - "Web/API/Fetch_API": { - "modified": "2020-10-15T21:38:02.526Z", + "Web/CSS/-moz-float-edge": { + "modified": "2019-03-23T22:36:02.702Z", "contributors": [ - "PacoVela", - "SSantiago90", - "erpheus", - "AlePerez92", - "robermorales", - "jmcarnero", - "enlinea777" + "pekechis" ] }, - "Web/API/Fetch_API/Conceptos_basicos": { - "modified": "2019-03-18T21:24:00.327Z", + "Web/CSS/-moz-force-broken-image-icon": { + "modified": "2019-03-23T23:21:21.736Z", "contributors": [ - "IsraelFloresDGA" + "Sebastianz", + "teoli", + "jota1410" ] }, - "Web/API/Fetch_API/Utilizando_Fetch": { - "modified": "2020-12-08T11:29:15.934Z", + "Web/CSS/-moz-image-rect": { + "modified": "2019-03-23T22:35:59.460Z", "contributors": [ - "mondeja", - "arturojimenezmedia", - "camsa", - "jccuevas", - "MateoVelilla", - "crimoniv", - "danielM9521", - "SphinxKnight", - "Ruluk", - "jpuerto", - "baumannzone", - "anjerago", - "icedrek", - "royexr", - "AlePerez92" + "pekechis" ] }, - "Web/API/File": { - "modified": "2020-10-15T21:37:53.420Z", + "Web/CSS/-moz-image-region": { + "modified": "2019-03-23T22:35:58.872Z", "contributors": [ - "IsraelFloresDGA", - "mattkgross", - "AshWilliams" + "pekechis" ] }, - "Web/API/File/Using_files_from_web_applications": { - "modified": "2019-03-24T00:06:11.527Z", + "Web/CSS/-moz-orient": { + "modified": "2019-03-23T22:38:38.798Z", "contributors": [ - "chrisdavidmills", - "israelfl", - "pacommozilla", "teoli", - "mare", - "Izel" + "anytameleiro" ] }, - "Web/API/File/fileName": { - "modified": "2020-02-09T09:40:59.258Z", + "Web/CSS/-moz-outline-radius": { + "modified": "2019-03-23T22:35:49.017Z", "contributors": [ - "blanchart", - "IsraelFloresDGA", - "BrodaNoel" + "BubuAnabelas", + "teoli", + "Simplexible", + "Prinz_Rana", + "pekechis" ] }, - "Web/API/File/lastModifiedDate": { - "modified": "2019-03-23T22:06:34.338Z", + "Web/CSS/-moz-outline-radius-bottomleft": { + "modified": "2019-03-23T22:35:52.557Z", "contributors": [ - "BrodaNoel" + "pekechis" ] }, - "Web/API/File/name": { - "modified": "2020-10-15T21:56:43.088Z", + "Web/CSS/-moz-outline-radius-bottomright": { + "modified": "2019-03-23T22:35:53.397Z", "contributors": [ - "IsraelFloresDGA", - "BrodaNoel" + "pekechis" ] }, - "Web/API/File/type": { - "modified": "2020-10-15T22:26:46.640Z", + "Web/CSS/-moz-outline-radius-topleft": { + "modified": "2019-03-23T22:35:51.509Z", "contributors": [ - "IsraelFloresDGA" + "pekechis" ] }, - "Web/API/File/webkitRelativePath": { - "modified": "2019-03-23T22:06:35.128Z", + "Web/CSS/-moz-outline-radius-topright": { + "modified": "2019-03-23T22:35:44.264Z", "contributors": [ - "BrodaNoel" + "pekechis" ] }, - "Web/API/FileError": { - "modified": "2019-03-23T22:51:12.244Z", + "Web/CSS/-moz-user-focus": { + "modified": "2019-03-23T22:35:52.089Z", "contributors": [ - "Jarvanux" + "teoli", + "pekechis" ] }, - "Web/API/FileReader": { - "modified": "2019-03-23T23:04:14.656Z", + "Web/CSS/-moz-user-input": { + "modified": "2019-03-23T22:35:52.458Z", "contributors": [ - "JuanjoVlado", - "V.Morantes", - "israelfl", - "Carlos-T", - "Clunaenc", - "fscholz", - "cm_rocanroll" + "pekechis" ] }, - "Web/API/FileReader/onload": { - "modified": "2019-03-23T22:18:25.451Z", + "Web/CSS/-webkit-border-before": { + "modified": "2019-03-23T22:35:46.245Z", "contributors": [ - "DaniMartiRamirez" + "teoli", + "pekechis" ] }, - "Web/API/FileReader/readAsArrayBuffer": { - "modified": "2019-03-23T22:49:37.062Z", + "Web/CSS/-webkit-box-reflect": { + "modified": "2019-03-23T22:35:45.474Z", "contributors": [ - "MarcoZepeda" + "teoli", + "pekechis" ] }, - "Web/API/FileReader/readAsDataURL": { - "modified": "2019-03-23T22:48:53.339Z", + "Web/CSS/-webkit-mask-attachment": { + "modified": "2019-03-23T22:35:53.127Z", "contributors": [ - "teoli", - "empirreamm", - "developersoul" + "pekechis" ] }, - "Web/API/FileReader/readAsText": { - "modified": "2019-03-23T22:11:54.836Z", + "Web/CSS/-webkit-mask-box-image": { + "modified": "2019-03-23T22:35:44.795Z", "contributors": [ - "owaremx" + "Sebastianz", + "Prinz_Rana", + "pekechis" ] }, - "Web/API/FileReader/result": { - "modified": "2020-10-15T22:16:53.945Z", + "Web/CSS/-webkit-mask-composite": { + "modified": "2019-03-23T22:35:49.602Z", "contributors": [ - "carlosbulnes" + "pekechis" ] }, - "Web/API/FileSystem": { - "modified": "2019-07-04T14:31:32.136Z", + "Web/CSS/-webkit-mask-position-x": { + "modified": "2019-03-23T22:34:17.919Z", "contributors": [ - "lperezp", - "jpmontoya182" + "teoli", + "pekechis" ] }, - "Web/API/Fullscreen_API": { - "modified": "2019-03-23T22:19:43.566Z", + "Web/CSS/-webkit-mask-position-y": { + "modified": "2019-03-23T22:34:11.674Z", "contributors": [ - "wbamberg", - "israel-munoz" + "teoli", + "pekechis" ] }, - "Web/API/GamepadButton": { - "modified": "2020-10-15T22:31:36.770Z", + "Web/CSS/-webkit-mask-repeat-x": { + "modified": "2019-03-23T22:34:04.348Z", "contributors": [ - "kenliten" + "pekechis" ] }, - "Web/API/Gamepad_API": { - "modified": "2020-10-15T22:24:50.048Z", + "Web/CSS/-webkit-mask-repeat-y": { + "modified": "2019-03-23T22:34:06.535Z", "contributors": [ - "LeonEmil" + "pekechis" ] }, - "Web/API/Geolocation": { - "modified": "2019-03-23T23:21:41.383Z", + "Web/CSS/-webkit-overflow-scrolling": { + "modified": "2020-10-15T21:44:50.401Z", "contributors": [ "AlePerez92", - "fscholz", - "AJMG" + "teoli", + "natav", + "pekechis" ] }, - "Web/API/Geolocation/clearWatch": { - "modified": "2019-03-23T23:21:31.757Z", + "Web/CSS/-webkit-print-color-adjust": { + "modified": "2019-03-23T22:35:50.908Z", "contributors": [ - "franklevel", - "fscholz", - "AJMG" + "teoli", + "pekechis" ] }, - "Web/API/Geolocation/getCurrentPosition": { - "modified": "2019-03-23T23:21:46.266Z", + "Web/CSS/-webkit-tap-highlight-color": { + "modified": "2019-03-23T22:35:33.059Z", "contributors": [ - "AlePerez92", - "fscholz", - "lupomontero", - "AJMG" + "pekechis" ] }, - "Web/API/Geolocation/watchPosition": { - "modified": "2019-03-23T23:21:44.720Z", + "Web/CSS/-webkit-text-fill-color": { + "modified": "2019-03-23T22:35:41.363Z", "contributors": [ - "AlePerez92", - "fscholz", - "AJMG" + "pekechis" ] }, - "Web/API/GeolocationCoordinates": { - "modified": "2019-12-10T09:34:21.214Z", + "Web/CSS/-webkit-text-stroke": { + "modified": "2020-11-09T04:49:08.502Z", "contributors": [ - "chrisdavidmills", - "AlePerez92" + "sideshowbarker", + "codingdudecom", + "NachoNav", + "pekechis" ] }, - "Web/API/GeolocationCoordinates/latitude": { - "modified": "2019-12-10T09:34:21.409Z", + "Web/CSS/-webkit-text-stroke-color": { + "modified": "2019-03-23T22:35:34.688Z", "contributors": [ - "chrisdavidmills", - "elxris" + "teoli", + "pekechis" ] }, - "Web/API/GeolocationPosition": { - "modified": "2020-10-15T22:10:48.604Z", + "Web/CSS/-webkit-text-stroke-width": { + "modified": "2019-03-23T22:35:36.221Z", "contributors": [ - "chrisdavidmills", - "sergitxu" + "pekechis" ] }, - "Web/API/GlobalEventHandlers": { - "modified": "2020-10-15T21:33:09.443Z", + "Web/CSS/-webkit-touch-callout": { + "modified": "2019-03-23T22:35:37.578Z", "contributors": [ - "Nachec", - "fscholz" + "teoli", + "rankill", + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onblur": { - "modified": "2019-03-23T22:33:17.308Z", + "Web/CSS/:-moz-broken": { + "modified": "2019-03-23T22:34:12.269Z", "contributors": [ - "Grijander81" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onchange": { - "modified": "2019-03-23T22:18:11.571Z", + "Web/CSS/:-moz-drag-over": { + "modified": "2019-03-23T22:34:06.375Z", "contributors": [ - "gama" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onclick": { - "modified": "2019-08-28T11:37:06.287Z", + "Web/CSS/:-moz-first-node": { + "modified": "2019-03-23T22:34:12.741Z", "contributors": [ - "J-Lobo", - "Noreen", - "gama" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onclose": { - "modified": "2020-10-15T22:12:16.407Z", + "Web/CSS/:-moz-focusring": { + "modified": "2019-03-23T22:34:12.588Z", "contributors": [ - "alexisrazok" + "teoli", + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onerror": { - "modified": "2019-03-23T22:53:42.268Z", + "Web/CSS/:-moz-handler-blocked": { + "modified": "2019-03-23T22:33:34.259Z", "contributors": [ - "wbamberg", - "galegosimpatico" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onfocus": { - "modified": "2019-03-18T21:31:41.059Z", + "Web/CSS/:-moz-handler-crashed": { + "modified": "2019-03-23T22:33:27.000Z", "contributors": [ - "ANDRUS74" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/oninput": { - "modified": "2019-03-23T22:55:01.733Z", + "Web/CSS/:-moz-handler-disabled": { + "modified": "2019-03-23T22:33:35.339Z", "contributors": [ - "Diegosolo" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onkeydown": { - "modified": "2019-03-18T21:31:44.954Z", + "Web/CSS/:-moz-last-node": { + "modified": "2019-03-18T21:15:45.566Z", "contributors": [ - "ANDRUS74" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onkeyup": { - "modified": "2019-03-18T21:31:50.304Z", + "Web/CSS/:-moz-list-bullet": { + "modified": "2019-03-23T22:29:23.137Z", "contributors": [ - "ANDRUS74" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onload": { - "modified": "2019-03-23T23:33:14.527Z", + "Web/CSS/:-moz-list-number": { + "modified": "2019-03-23T22:29:22.603Z", "contributors": [ - "fscholz", - "khalid32", - "ehecatl" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onloadedmetadata": { - "modified": "2020-10-15T22:34:40.071Z", + "Web/CSS/:-moz-loading": { + "modified": "2019-03-23T22:33:38.436Z", "contributors": [ - "winxde" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onresize": { - "modified": "2019-03-23T22:38:35.801Z", + "Web/CSS/:-moz-locale-dir(ltr)": { + "modified": "2019-03-23T22:33:43.908Z", "contributors": [ - "NevinSantana" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onscroll": { - "modified": "2019-03-23T22:33:14.134Z", + "Web/CSS/:-moz-locale-dir(rtl)": { + "modified": "2019-03-23T22:33:44.356Z", "contributors": [ - "Grijander81" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onselect": { - "modified": "2019-03-23T22:33:14.413Z", + "Web/CSS/:-moz-only-whitespace": { + "modified": "2019-03-23T22:33:33.786Z", "contributors": [ - "Grijander81" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onselectstart": { - "modified": "2019-03-18T21:23:16.974Z", + "Web/CSS/:-moz-submit-invalid": { + "modified": "2019-03-23T22:33:36.639Z", "contributors": [ - "Grijander81" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onsubmit": { - "modified": "2019-03-18T21:31:41.533Z", + "Web/CSS/:-moz-suppressed": { + "modified": "2019-03-23T22:33:37.212Z", "contributors": [ - "ANDRUS74" + "pekechis" ] }, - "Web/API/GlobalEventHandlers/ontouchstart": { - "modified": "2019-03-23T22:32:02.059Z", + "Web/CSS/:-moz-ui-valid": { + "modified": "2019-03-23T22:29:23.305Z", "contributors": [ - "AlePerez92" + "teoli", + "pekechis" ] }, - "Web/API/GlobalEventHandlers/onunload": { - "modified": "2019-03-23T23:39:28.498Z", + "Web/CSS/:-moz-user-disabled": { + "modified": "2019-03-23T22:30:53.713Z", "contributors": [ - "fscholz", - "khalid32", - "Sheppy" + "pekechis" ] }, - "Web/API/HTMLAnchorElement": { - "modified": "2019-03-18T21:42:27.257Z", + "Web/CSS/:-moz-window-inactive": { + "modified": "2019-03-23T22:30:43.777Z", "contributors": [ - "BubuAnabelas", - "LUISTGMDN" + "teoli", + "pekechis" ] }, - "Web/API/HTMLAudioElement": { - "modified": "2019-03-24T00:05:48.645Z", + "Web/CSS/::-moz-color-swatch": { + "modified": "2020-10-15T22:13:15.247Z", "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "inma_610" + "Adorta4" ] }, - "Web/API/HTMLCanvasElement": { - "modified": "2019-03-23T22:50:27.840Z", + "Web/CSS/::-moz-page": { + "modified": "2019-03-23T22:29:23.000Z", "contributors": [ - "AshWilliams" + "teoli", + "pekechis" ] }, - "Web/API/HTMLCanvasElement/getContext": { - "modified": "2019-03-23T22:18:36.564Z", + "Web/CSS/::-moz-page-sequence": { + "modified": "2019-03-23T22:29:18.734Z", "contributors": [ - "OrlandoIsay" + "teoli", + "pekechis" ] }, - "Web/API/HTMLCanvasElement/height": { - "modified": "2019-03-23T22:47:48.394Z", + "Web/CSS/::-moz-progress-bar": { + "modified": "2019-03-23T22:29:21.640Z", "contributors": [ - "empirreamm" + "lajaso", + "pekechis" ] }, - "Web/API/HTMLCanvasElement/toBlob": { - "modified": "2019-03-23T22:44:55.955Z", + "Web/CSS/::-moz-range-progress": { + "modified": "2019-03-23T22:28:49.325Z", "contributors": [ - "kodamirmo" + "teoli", + "pekechis" ] }, - "Web/API/HTMLCanvasElement/toDataURL": { - "modified": "2020-10-15T21:38:42.950Z", + "Web/CSS/::-moz-range-thumb": { + "modified": "2019-03-23T22:28:56.558Z", "contributors": [ - "jagomf", - "calmsz", - "genuinefafa", - "empirreamm" + "teoli", + "pekechis" ] }, - "Web/API/HTMLCanvasElement/width": { - "modified": "2019-03-23T22:47:52.236Z", + "Web/CSS/::-moz-range-track": { + "modified": "2019-03-23T22:27:41.835Z", "contributors": [ - "empirreamm" + "teoli", + "pekechis" ] }, - "Web/API/HTMLCollection": { - "modified": "2020-10-15T21:37:48.821Z", + "Web/CSS/::-moz-scrolled-page-sequence": { + "modified": "2019-03-23T22:27:47.385Z", "contributors": [ - "AlePerez92", - "diego_bardelas", - "kromsoft", - "djrm" + "teoli", + "pekechis" ] }, - "Web/API/HTMLContentElement": { - "modified": "2019-03-23T22:10:28.345Z", + "Web/CSS/::-webkit-inner-spin-button": { + "modified": "2019-03-18T21:17:13.569Z", "contributors": [ - "dkocho4" + "teoli", + "pekechis" ] }, - "Web/API/HTMLContentElement/getDistributedNodes": { - "modified": "2019-03-23T22:10:26.488Z", + "Web/CSS/::-webkit-meter-bar": { + "modified": "2019-03-23T22:27:21.551Z", "contributors": [ - "dkocho4" + "teoli", + "pekechis" ] }, - "Web/API/HTMLContentElement/select": { - "modified": "2019-03-23T22:10:36.116Z", + "Web/CSS/::-webkit-meter-even-less-good-value": { + "modified": "2019-03-18T21:15:16.586Z", "contributors": [ - "dkocho4" + "teoli", + "pekechis" ] }, - "Web/API/HTMLDivElement": { - "modified": "2019-03-23T22:03:41.348Z", + "Web/CSS/::-webkit-meter-inner-element": { + "modified": "2019-03-23T22:27:02.054Z", "contributors": [ - "jonvadillo" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement": { - "modified": "2020-06-20T19:45:51.700Z", + "Web/CSS/::-webkit-meter-optimum-value": { + "modified": "2019-03-23T22:27:09.428Z", "contributors": [ - "hernandoh", - "hpintos", - "fscholz" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/change_event": { - "modified": "2020-10-15T22:17:42.425Z", + "Web/CSS/::-webkit-meter-suboptimum-value": { + "modified": "2019-03-23T22:27:08.613Z", "contributors": [ - "IsraelFloresDGA", - "AlePerez92" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/click": { - "modified": "2020-10-15T21:59:51.355Z", + "Web/CSS/::-webkit-outer-spin-button": { + "modified": "2019-03-23T22:27:04.174Z", "contributors": [ - "hecaxmmx", - "mtnalonso" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/contentEditable": { - "modified": "2020-10-15T22:23:54.889Z", + "Web/CSS/::-webkit-progress-bar": { + "modified": "2019-03-23T22:26:48.592Z", "contributors": [ - "lauramacdaleno" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/dataset": { - "modified": "2020-10-15T22:06:35.887Z", + "Web/CSS/::-webkit-progress-inner-element": { + "modified": "2019-03-23T22:27:11.051Z", "contributors": [ - "OneLoneFox", - "PacoVela", - "ultraklon", - "pipepico", - "AlePerez92" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/focus": { - "modified": "2020-10-15T21:51:27.517Z", + "Web/CSS/::-webkit-progress-value": { + "modified": "2019-03-23T22:26:54.483Z", "contributors": [ - "IsraelFloresDGA", - "AlePerez92", - "jesumv" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/innerText": { - "modified": "2020-10-15T22:31:46.481Z", + "Web/CSS/::-webkit-scrollbar": { + "modified": "2019-03-23T22:26:50.519Z", "contributors": [ - "hugojavierduran9" + "pekechis" ] }, - "Web/API/HTMLElement/input_event": { - "modified": "2020-10-15T22:17:41.989Z", + "Web/CSS/::-webkit-slider-runnable-track": { + "modified": "2019-03-23T22:26:41.971Z", "contributors": [ - "mariomoreno", - "IsraelFloresDGA" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/offsetHeight": { - "modified": "2019-04-30T12:33:07.062Z", + "Web/CSS/::-webkit-slider-thumb": { + "modified": "2019-03-23T22:26:41.006Z", "contributors": [ - "AlePerez92", - "SphinxKnight", - "germanfr" + "teoli", + "pekechis" ] }, - "Web/API/HTMLElement/offsetLeft": { - "modified": "2019-03-18T20:59:09.140Z", + "Web/CSS/::after": { + "modified": "2020-10-15T21:15:55.871Z", "contributors": [ - "SphinxKnight", - "gama" + "JFOG", + "IsraelFloresDGA", + "israel-munoz", + "Lorenzoygata", + "teoli", + "Nathymig" ] }, - "Web/API/HTMLElement/offsetParent": { - "modified": "2020-10-15T22:11:55.510Z", + "Web/CSS/::backdrop": { + "modified": "2019-03-23T22:30:49.892Z", "contributors": [ - "Vincetroid" + "pekechis" ] }, - "Web/API/HTMLElement/offsetTop": { - "modified": "2020-10-15T21:46:16.171Z", + "Web/CSS/::before": { + "modified": "2020-11-24T07:28:22.113Z", "contributors": [ - "SphinxKnight", - "santinogue", - "Grijander81" + "chrisdavidmills", + "maketas", + "IsraelFloresDGA", + "israel-munoz", + "Yisus777", + "teoli", + "Nathymig" ] }, - "Web/API/HTMLElement/offsetWidth": { - "modified": "2020-10-15T21:50:38.562Z", + "Web/CSS/::cue": { + "modified": "2020-10-15T22:33:08.581Z", "contributors": [ - "SphinxKnight", - "Facu50196", - "jvas28" + "Pablo-No" ] }, - "Web/API/HTMLElement/style": { - "modified": "2019-03-23T23:58:09.934Z", + "Web/CSS/::first-letter": { + "modified": "2020-10-15T22:24:50.087Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "Plumas", + "adrymrtnz" ] }, - "Web/API/HTMLFormElement": { - "modified": "2019-03-23T23:46:38.218Z", + "Web/CSS/::first-line": { + "modified": "2020-10-15T22:24:51.827Z", "contributors": [ - "SphinxKnight", - "fscholz", - "khalid32", - "DR", - "Nathymig" + "Plumas", + "ivanenoriega", + "adrymrtnz" ] }, - "Web/API/HTMLFormElement/reset": { - "modified": "2020-11-28T13:27:49.559Z", + "Web/CSS/::marker": { + "modified": "2020-10-15T22:22:16.686Z", "contributors": [ - "hiperion" + "qwerty726" ] }, - "Web/API/HTMLHeadElement": { - "modified": "2020-10-15T22:31:07.133Z", + "Web/CSS/::placeholder": { + "modified": "2020-10-15T22:26:50.005Z", "contributors": [ - "jhonarielgj" + "IsraelFloresDGA" ] }, - "Web/API/HTMLHtmlElement": { - "modified": "2019-03-23T22:27:47.579Z", + "Web/CSS/::selection": { + "modified": "2019-03-23T23:33:09.211Z", "contributors": [ - "raecillacastellana" + "canobius", + "arroutado", + "jesu_abner", + "teoli", + "pepeheron" ] }, - "Web/API/HTMLImageElement": { - "modified": "2019-03-23T22:42:00.195Z", + "Web/CSS/::spelling-error": { + "modified": "2020-10-15T22:03:59.841Z", "contributors": [ - "thzunder" + "lajaso" ] }, - "Web/API/HTMLImageElement/Image": { - "modified": "2019-03-23T22:12:14.962Z", + "Web/CSS/:active": { + "modified": "2020-10-15T21:21:49.325Z", "contributors": [ - "gabo32", - "Jhandrox" + "pollirrata", + "lajaso", + "teoli", + "MrBlogger" ] }, - "Web/API/HTMLInputElement": { - "modified": "2020-08-25T19:55:45.034Z", + "Web/CSS/:any-link": { + "modified": "2020-10-15T21:52:30.387Z", "contributors": [ - "duduindo", - "Enesimus", - "chrisdavidmills" + "JFOG", + "lajaso", + "israel-munoz" ] }, - "Web/API/HTMLInputElement/invalid_event": { - "modified": "2019-04-30T13:47:32.409Z", + "Web/CSS/:blank": { + "modified": "2020-10-15T22:26:47.961Z", "contributors": [ - "wbamberg", - "estelle", "IsraelFloresDGA" ] }, - "Web/API/HTMLInputElement/select": { - "modified": "2019-03-18T21:34:04.996Z", + "Web/CSS/:checked": { + "modified": "2020-10-15T21:32:04.510Z", "contributors": [ - "AlePerez92" + "lajaso", + "zxhadow" ] }, - "Web/API/HTMLLIElement": { - "modified": "2019-03-23T22:21:38.998Z", + "Web/CSS/:default": { + "modified": "2020-10-15T21:15:24.516Z", "contributors": [ - "elxris", - "bardcrack" + "lajaso", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" ] }, - "Web/API/HTMLLabelElement": { - "modified": "2020-10-15T22:11:47.827Z", + "Web/CSS/:defined": { + "modified": "2020-10-15T22:03:59.600Z", "contributors": [ - "BubuAnabelas", - "mym2013" + "JFOG", + "lajaso" ] }, - "Web/API/HTMLMediaElement": { - "modified": "2020-10-15T22:13:56.798Z", + "Web/CSS/:dir": { + "modified": "2020-10-15T21:44:46.376Z", "contributors": [ - "mannypinillo" + "lajaso", + "pekechis" ] }, - "Web/API/HTMLMediaElement/canplay_event": { - "modified": "2019-03-18T20:49:26.430Z", + "Web/CSS/:disabled": { + "modified": "2020-10-15T21:43:53.936Z", "contributors": [ - "estelle", - "ExE-Boss", - "fscholz", - "jjoselon" + "lajaso", + "pekechis" ] }, - "Web/API/HTMLMediaElement/loadeddata_event": { - "modified": "2020-10-15T22:25:54.605Z", + "Web/CSS/:empty": { + "modified": "2020-10-15T21:16:01.534Z", "contributors": [ - "NEVITS" + "IsraelFloresDGA", + "lajaso", + "teoli", + "Nathymig" ] }, - "Web/API/HTMLMediaElement/pause": { - "modified": "2020-10-15T22:24:10.390Z", + "Web/CSS/:enabled": { + "modified": "2020-10-15T21:44:29.292Z", "contributors": [ - "chekoNava" + "lajaso", + "pekechis" ] }, - "Web/API/HTMLMediaElement/paused": { - "modified": "2020-10-15T22:24:09.151Z", + "Web/CSS/:first": { + "modified": "2020-10-15T21:43:42.281Z", "contributors": [ - "chekoNava" + "lajaso", + "pekechis" ] }, - "Web/API/HTMLMediaElement/play": { - "modified": "2020-10-15T22:24:04.866Z", + "Web/CSS/:first-child": { + "modified": "2020-10-15T21:19:55.452Z", "contributors": [ - "chekoNava" + "lajaso", + "teoli", + "percy@mozilla.pe", + "jsalinas" ] }, - "Web/API/HTMLMediaElement/timeupdate_event": { - "modified": "2019-03-18T20:49:28.173Z", + "Web/CSS/:first-of-type": { + "modified": "2020-10-15T21:44:49.790Z", "contributors": [ - "estelle", - "ExE-Boss", - "fscholz", - "baldore" + "lajaso", + "pekechis" ] }, - "Web/API/HTMLSelectElement": { - "modified": "2020-10-15T22:06:34.378Z", + "Web/CSS/:focus": { + "modified": "2020-10-15T21:43:30.779Z", "contributors": [ - "wbamberg" + "evaferreira", + "lajaso", + "pekechis" ] }, - "Web/API/HTMLSelectElement/checkValidity": { - "modified": "2020-10-15T22:06:33.300Z", + "Web/CSS/:focus-visible": { + "modified": "2020-10-15T22:33:54.482Z", "contributors": [ - "AlePerez92" + "arauz.gus" ] }, - "Web/API/HTMLSelectElement/setCustomValidity": { - "modified": "2020-10-15T22:21:29.656Z", + "Web/CSS/:focus-within": { + "modified": "2020-12-03T05:40:25.197Z", "contributors": [ - "raul-arias" + "AlePerez92", + "carlosviteri", + "lajaso", + "AntonioNavajasOjeda" ] }, - "Web/API/HTMLShadowElement": { - "modified": "2019-03-23T22:10:24.059Z", + "Web/CSS/:fullscreen": { + "modified": "2020-10-15T21:51:48.377Z", "contributors": [ - "dkocho4", - "Sebastianz" + "lajaso", + "israel-munoz" ] }, - "Web/API/HTMLShadowElement/getDistributedNodes": { - "modified": "2019-03-23T22:10:23.317Z", + "Web/CSS/:has": { + "modified": "2019-03-23T22:36:22.444Z", "contributors": [ - "dkocho4" + "pekechis" ] }, - "Web/API/HTMLStyleElement": { - "modified": "2019-03-24T00:07:06.618Z", + "Web/CSS/:host": { + "modified": "2020-10-15T22:04:25.470Z", "contributors": [ - "fscholz", - "lcamacho", - "DoctorRomi", - "HenryGR", - "Markens", - "Nathymig" + "rhssr", + "lajaso" ] }, - "Web/API/HTMLTableElement": { - "modified": "2019-03-23T23:46:43.890Z", + "Web/CSS/:hover": { + "modified": "2020-10-15T21:19:57.161Z", "contributors": [ - "fscholz", - "khalid32", - "ethertank", - "DR", - "M3n3chm0", - "Nathymig" + "lajaso", + "teoli", + "percy@mozilla.pe", + "ccarruitero" ] }, - "Web/API/HTMLTableElement/align": { - "modified": "2019-03-23T22:32:48.061Z", + "Web/CSS/:in-range": { + "modified": "2020-10-15T21:52:29.381Z", "contributors": [ - "Grijander81" + "lajaso", + "israel-munoz" ] }, - "Web/API/HTMLTableElement/insertRow": { - "modified": "2019-03-23T22:32:47.103Z", + "Web/CSS/:indeterminate": { + "modified": "2020-10-15T21:52:30.617Z", "contributors": [ - "lalo", - "Grijander81" + "lajaso", + "israel-munoz" ] }, - "Web/API/Headers": { - "modified": "2020-10-15T22:07:38.324Z", + "Web/CSS/:invalid": { + "modified": "2020-10-15T21:25:32.434Z", "contributors": [ - "Estebanrg21" + "lajaso", + "teoli", + "ccastillos" ] }, - "Web/API/History": { - "modified": "2020-10-15T22:28:24.964Z", + "Web/CSS/:lang": { + "modified": "2020-10-15T21:49:25.234Z", "contributors": [ - "alattalatta" + "lajaso", + "sapox" ] }, - "Web/API/History/length": { - "modified": "2020-10-15T22:34:59.646Z", + "Web/CSS/:last-child": { + "modified": "2020-10-15T21:19:56.585Z", "contributors": [ - "cajotafer" + "lajaso", + "MarkelCuesta", + "carloque", + "teoli", + "ccarruitero", + "percy@mozilla.pe" ] }, - "Web/API/History/pushState": { - "modified": "2020-10-15T22:28:26.373Z", + "Web/CSS/:last-of-type": { + "modified": "2020-10-15T21:19:57.770Z", "contributors": [ - "cajotafer", - "arcaela" - ] - }, - "Web/API/IDBCursor": { - "modified": "2019-09-04T06:41:50.466Z", - "contributors": [ - "jambsik", - "fscholz", - "chrisdavidmills" + "lajaso", + "teoli", + "jesanchez", + "jsalinas" ] }, - "Web/API/IDBCursor/continue": { - "modified": "2019-03-23T22:40:02.950Z", + "Web/CSS/:left": { + "modified": "2020-10-15T22:03:35.116Z", "contributors": [ - "BubuAnabelas", - "Alfalfa01" + "Tartarin2018", + "lajaso", + "Skrinch" ] }, - "Web/API/IDBDatabase": { - "modified": "2019-03-23T22:23:43.090Z", + "Web/CSS/:link": { + "modified": "2020-10-15T21:54:15.946Z", "contributors": [ - "jpmedley" + "lajaso", + "Jhonatangiraldo" ] }, - "Web/API/IDBDatabase/transaction": { - "modified": "2019-03-23T22:23:53.480Z", + "Web/CSS/:nth-child": { + "modified": "2020-10-15T21:20:38.559Z", "contributors": [ - "carlo.romero1991" + "ulisestrujillo", + "lajaso", + "teoli", + "tuxtitlan" ] }, - "Web/API/IDBObjectStore": { - "modified": "2019-03-23T23:01:30.975Z", + "Web/CSS/:nth-last-child": { + "modified": "2020-10-15T21:42:40.958Z", "contributors": [ - "fscholz" + "lajaso", + "alkaithil" ] }, - "Web/API/IDBObjectStore/add": { - "modified": "2019-03-23T23:05:57.547Z", + "Web/CSS/:nth-last-of-type": { + "modified": "2020-10-15T22:04:20.811Z", "contributors": [ - "fscholz", - "AngelFQC" + "AltheaE", + "lajaso" ] }, - "Web/API/ImageBitmap": { - "modified": "2020-10-15T22:03:23.639Z", + "Web/CSS/:nth-of-type": { + "modified": "2020-10-15T21:43:57.823Z", "contributors": [ - "necrobite" + "lajaso", + "edkalel" ] }, - "Web/API/ImageBitmapRenderingContext": { - "modified": "2020-10-15T22:03:23.985Z", + "Web/CSS/:only-child": { + "modified": "2020-10-15T21:42:38.914Z", "contributors": [ - "teoli", - "necrobite" + "lajaso", + "alkaithil" ] }, - "Web/API/IndexedDB_API": { - "modified": "2020-01-13T04:48:11.727Z", + "Web/CSS/:only-of-type": { + "modified": "2020-10-15T22:04:23.870Z", "contributors": [ - "chrisdavidmills", - "thepianist2", - "GranRafa", - "semptrion", - "Fjaguero", - "MPoli" + "lajaso" ] }, - "Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB": { - "modified": "2020-01-13T04:48:11.759Z", + "Web/CSS/:optional": { + "modified": "2020-10-15T22:03:59.272Z", "contributors": [ - "chrisdavidmills", - "fscholz", - "elin3t", - "sebasmagri" + "lajaso" ] }, - "Web/API/IndexedDB_API/Usando_IndexedDB": { - "modified": "2020-01-13T04:48:12.209Z", + "Web/CSS/:out-of-range": { + "modified": "2020-10-15T21:52:29.356Z", "contributors": [ - "chrisdavidmills", - "gama", - "Pcost8300", - "franvalmo", - "frank-orellana", - "otif11", - "urbanogb", - "AlePerez92", - "beatriz-merino", - "matajm", - "elin3t", - "maparrar" + "lajaso", + "israel-munoz" ] }, - "Web/API/Intersection_Observer_API": { - "modified": "2020-11-03T00:26:14.370Z", + "Web/CSS/:placeholder-shown": { + "modified": "2020-10-15T22:04:23.723Z", "contributors": [ - "juanfelipejg", - "kuntur-studio", - "maketas", - "sandromedina", - "lacf95", - "midudev", - "joanvasa", - "AshWilliams" + "lajaso" ] }, - "Web/API/KeyboardEvent": { - "modified": "2019-03-18T21:08:57.551Z", + "Web/CSS/:read-only": { + "modified": "2020-10-15T21:58:16.699Z", "contributors": [ - "fscholz", - "pdro-enrique", - "wbamberg", - "pablodonoso" + "lajaso", + "j-light" ] }, - "Web/API/KeyboardEvent/getModifierState": { - "modified": "2020-10-15T22:04:42.428Z", + "Web/CSS/:read-write": { + "modified": "2020-10-15T22:04:19.084Z", "contributors": [ - "leoderja" + "lajaso" ] }, - "Web/API/KeyboardEvent/key": { - "modified": "2020-10-15T22:10:09.653Z", + "Web/CSS/:required": { + "modified": "2020-10-15T21:44:28.186Z", "contributors": [ - "isaacanet", - "aleju92" + "lajaso", + "pekechis" ] }, - "Web/API/KeyboardEvent/metaKey": { - "modified": "2019-03-23T22:47:47.329Z", + "Web/CSS/:right": { + "modified": "2020-10-15T22:04:16.818Z", "contributors": [ - "empirreamm" + "lajaso" ] }, - "Web/API/KeyboardEvent/which": { - "modified": "2019-03-23T23:25:30.040Z", + "Web/CSS/:root": { + "modified": "2020-10-15T21:34:17.481Z", "contributors": [ - "fscholz", - "jsx", - "arthusu" + "lajaso", + "JavierPeris", + "Xaviju" ] }, - "Web/API/Location": { - "modified": "2020-03-11T08:46:40.807Z", + "Web/CSS/:target": { + "modified": "2020-10-15T21:44:29.225Z", "contributors": [ - "nverino", - "BrodaNoel" + "lajaso", + "moisesalmonte", + "pekechis" ] }, - "Web/API/Location/origin": { - "modified": "2020-11-17T12:52:42.607Z", + "Web/CSS/:valid": { + "modified": "2020-10-15T21:45:32.621Z", "contributors": [ - "AlePerez92" + "lajaso", + "jorgesancheznet" ] }, - "Web/API/Location/reload": { - "modified": "2020-10-30T03:50:17.206Z", + "Web/CSS/:visited": { + "modified": "2020-10-15T22:04:02.908Z", "contributors": [ - "SphinxKnight", - "MiguelHG2351", - "PatoDeTuring" + "lajaso" ] }, - "Web/API/MediaDevices": { - "modified": "2019-03-23T22:36:21.378Z", + "Web/CSS/@charset": { + "modified": "2019-03-23T22:29:53.691Z", "contributors": [ - "Sebastianz" + "israel-munoz" ] }, - "Web/API/MediaDevices/getUserMedia": { - "modified": "2019-03-23T22:36:21.202Z", + "Web/CSS/@counter-style": { + "modified": "2019-03-18T21:16:44.974Z", "contributors": [ - "AdanPalacios", - "titosobabas", - "RSalgadoAtala", - "Cristhian", - "matajm" + "jamesbrown0" ] }, - "Web/API/MediaQueryList": { - "modified": "2019-03-18T21:17:33.122Z", + "Web/CSS/@counter-style/additive-symbols": { + "modified": "2019-03-23T22:18:02.836Z", "contributors": [ - "BubuAnabelas", - "PatoDeTuring" + "israel-munoz" ] }, - "Web/API/MediaQueryList/addListener": { - "modified": "2019-03-18T21:16:20.430Z", + "Web/CSS/@counter-style/symbols": { + "modified": "2019-03-18T21:15:43.336Z", "contributors": [ - "PatoDeTuring" + "israel-munoz" ] }, - "Web/API/MediaQueryList/matches": { - "modified": "2019-03-23T22:05:29.020Z", + "Web/CSS/@document": { + "modified": "2020-10-15T22:01:34.650Z", "contributors": [ - "PatoDeTuring" + "SphinxKnight", + "lsosa81" ] }, - "Web/API/MediaQueryList/removeListener": { - "modified": "2019-03-23T22:05:31.060Z", + "Web/CSS/@font-face": { + "modified": "2019-09-26T12:01:00.515Z", "contributors": [ - "PatoDeTuring" + "ZodiacFireworks", + "fscholz", + "rtunon", + "ozkxr", + "teoli", + "ccarruitero", + "Nuc134rB0t", + "inma_610" ] }, - "Web/API/MediaSource": { - "modified": "2019-03-23T22:38:20.191Z", + "Web/CSS/@font-face/font-display": { + "modified": "2020-10-15T21:59:11.206Z", "contributors": [ - "Lazaro" + "AlePerez92", + "nuwanda555" ] }, - "Web/API/MediaStreamAudioSourceNode": { - "modified": "2019-03-18T20:35:52.439Z", + "Web/CSS/@font-face/font-family": { + "modified": "2019-03-23T22:37:47.693Z", "contributors": [ - "davidtorroija", - "AndresMendozaOrozco" + "pekechis" ] }, - "Web/API/MediaStreamTrack": { - "modified": "2019-03-23T23:10:18.897Z", + "Web/CSS/@font-face/font-style": { + "modified": "2019-03-23T22:38:47.174Z", "contributors": [ - "matajm", - "maedca" + "danielfdez" ] }, - "Web/API/MessageEvent": { - "modified": "2019-03-18T21:44:05.386Z", + "Web/CSS/@font-face/src": { + "modified": "2019-03-23T22:17:51.245Z", "contributors": [ - "jpmontoya182" + "israel-munoz" ] }, - "Web/API/MimeType": { - "modified": "2019-03-18T21:36:36.016Z", + "Web/CSS/@font-face/unicode-range": { + "modified": "2020-10-15T21:50:47.753Z", "contributors": [ - "daniel.duarte" + "SphinxKnight", + "giobeatle1794" ] }, - "Web/API/MouseEvent": { - "modified": "2019-03-23T23:01:32.904Z", + "Web/CSS/@font-feature-values": { + "modified": "2019-03-23T22:22:14.476Z", "contributors": [ - "fscholz" + "israel-munoz" ] }, - "Web/API/MouseEvent/initMouseEvent": { - "modified": "2019-03-23T23:50:24.977Z", + "Web/CSS/@import": { + "modified": "2019-03-23T23:38:27.735Z", "contributors": [ - "SphinxKnight", - "vectorderivative", - "jorgecasar", + "JorgeCapillo", + "Guillaume-Heras", + "mrstork", "fscholz", - "khalid32", "teoli", - "HenryGR", - "Mgjbot" + "jsalinas", + "kamel.araujo" ] }, - "Web/API/MouseEvent/shiftKey": { - "modified": "2019-03-23T22:05:24.832Z", + "Web/CSS/@keyframes": { + "modified": "2019-03-23T23:36:20.944Z", "contributors": [ - "evaferreira" + "Sebastianz", + "fscholz", + "Sheppy", + "teoli", + "jesanchez", + "Velociraktor" ] }, - "Web/API/MutationObserver": { - "modified": "2019-05-13T04:27:12.587Z", + "Web/CSS/@media": { + "modified": "2019-03-23T23:16:54.490Z", "contributors": [ - "mllambias", - "cesaruve", - "aeroxmotion", - "JordiCruells", - "alvaropinot" + "israel-munoz", + "fscholz", + "teoli", + "sanathy" ] }, - "Web/API/MutationObserver/MutationObserver": { - "modified": "2020-10-15T22:18:30.706Z", + "Web/CSS/@media/color": { + "modified": "2019-03-18T21:15:44.481Z", "contributors": [ - "mllambias" + "pekechis" ] }, - "Web/API/MutationObserver/observe": { - "modified": "2020-10-15T22:18:29.107Z", + "Web/CSS/@media/display-mode": { + "modified": "2020-10-15T22:23:39.088Z", "contributors": [ - "mllambias" + "IsraelFloresDGA" ] }, - "Web/API/Navigator": { - "modified": "2019-03-23T23:20:36.282Z", + "Web/CSS/@media/hover": { + "modified": "2020-10-15T22:23:44.104Z", "contributors": [ - "israel-munoz", - "khalid32", - "tpb" + "IsraelFloresDGA" ] }, - "Web/API/Navigator/doNotTrack": { - "modified": "2019-03-18T21:35:42.847Z", + "Web/CSS/@media/pointer": { + "modified": "2020-10-15T22:27:26.867Z", "contributors": [ - "AlePerez92" + "qwerty726" ] }, - "Web/API/Navigator/getUserMedia": { - "modified": "2019-03-23T23:27:03.284Z", + "Web/CSS/@media/width": { + "modified": "2019-03-23T22:04:44.569Z", "contributors": [ - "Jib", - "AlePerez92", - "fscholz", - "cm_rocanroll", - "franverona", - "py_crash", - "maedca" + "jswisher", + "wilton-cruz" ] }, - "Web/API/Navigator/mediaDevices": { - "modified": "2020-12-11T22:18:56.380Z", + "Web/CSS/@namespace": { + "modified": "2020-10-15T22:29:21.901Z", "contributors": [ - "daniellimabel" + "qwerty726" ] }, - "Web/API/Navigator/registerProtocolHandler": { - "modified": "2019-03-23T23:53:04.318Z", + "Web/CSS/@page": { + "modified": "2019-03-18T21:35:50.476Z", "contributors": [ - "fscholz", - "khalid32", - "Nukeador", - "HenryGR", - "Mgjbot" + "luismj" ] }, - "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": { - "modified": "2019-03-23T22:06:43.969Z", + "Web/CSS/@supports": { + "modified": "2020-10-15T21:43:18.021Z", "contributors": [ - "chrisdavidmills", - "AngelFQC" + "SJW", + "angelf", + "MilkSnake" ] }, - "Web/API/Navigator/vibrate": { - "modified": "2019-03-23T23:32:23.651Z", + "Web/CSS/@viewport": { + "modified": "2019-03-18T21:16:54.012Z", "contributors": [ - "fscholz", - "jsx", - "mmednik" + "cvrebert" ] }, - "Web/API/NavigatorConcurrentHardware": { - "modified": "2020-10-15T22:25:58.692Z" - }, - "Web/API/NavigatorConcurrentHardware/hardwareConcurrency": { - "modified": "2020-10-15T22:26:06.271Z", + "Web/CSS/At-rule": { + "modified": "2019-03-23T22:29:55.371Z", "contributors": [ - "Gnuxdar" + "Legioinvicta", + "israel-munoz" ] }, - "Web/API/NavigatorGeolocation": { - "modified": "2019-03-23T23:01:31.642Z", + "Web/CSS/CSS_Animations": { + "modified": "2019-03-23T22:43:48.247Z", "contributors": [ - "fscholz" + "teoli" ] }, - "Web/API/NavigatorGeolocation/geolocation": { - "modified": "2019-03-23T23:31:55.176Z", + "Web/CSS/CSS_Animations/Tips": { + "modified": "2020-08-16T13:05:40.057Z", "contributors": [ - "jabarrioss", - "AlePerez92", - "fscholz", - "jsx", - "lfentanes" + "CamilaAchury", + "SphinxKnight", + "AlbertoVargasMoreno" ] }, - "Web/API/NavigatorLanguage": { - "modified": "2019-03-23T22:46:20.556Z", + "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "modified": "2019-03-18T21:15:42.476Z", "contributors": [ - "teoli" + "israel-munoz" ] }, - "Web/API/NavigatorLanguage/language": { - "modified": "2019-03-23T22:46:24.341Z", + "Web/CSS/CSS_Containment": { + "modified": "2020-10-21T02:39:25.867Z", "contributors": [ - "cesiztel", - "jesus9ias" + "SphinxKnight", + "RoqueAlonso" ] }, - "Web/API/NavigatorOnLine": { - "modified": "2019-03-23T22:07:33.991Z", + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-03-23T22:43:42.897Z", "contributors": [ - "abbycar" + "danpaltor", + "tipoqueno", + "pepe2016", + "fscholz" ] }, - "Web/API/NavigatorOnLine/Eventos_online_y_offline": { - "modified": "2019-01-16T15:46:38.836Z", + "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": { + "modified": "2020-09-12T08:36:23.473Z", "contributors": [ - "chrisdavidmills", - "Mgjbot", - "Nukeador", - "RickieesES", - "Unixcoder" + "x-N0", + "FrankGalanB", + "JulianCGG", + "PauloColorado", + "Irvandoval", + "turuto" ] }, - "Web/API/NavigatorOnLine/onLine": { - "modified": "2019-03-23T22:07:34.200Z", + "Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": { + "modified": "2019-11-06T19:10:32.985Z", "contributors": [ - "MarkelCuesta" + "tonyrodz" ] }, - "Web/API/Network_Information_API": { - "modified": "2020-11-17T00:17:37.419Z", + "Web/CSS/CSS_Flow_Layout": { + "modified": "2019-03-18T21:21:28.417Z", "contributors": [ - "tobiasalbirosa" + "ariasfernando" ] }, - "Web/API/Node": { - "modified": "2019-05-06T01:19:55.862Z", + "Web/CSS/CSS_Fonts": { + "modified": "2019-03-23T22:18:19.285Z", "contributors": [ - "robinHurtado", - "fscholz" + "Squirrel18" ] }, - "Web/API/Node/appendChild": { - "modified": "2020-10-15T21:22:57.221Z", + "Web/CSS/CSS_Grid_Layout": { + "modified": "2020-08-21T18:16:34.348Z", "contributors": [ + "dongerardor", + "yomar-dev", + "amaiafilo", "AlePerez92", - "IsaacAaron", - "fscholz", - "jsx", - "AzulCz" + "aribet", + "StripTM" ] }, - "Web/API/Node/childNodes": { - "modified": "2020-10-15T22:02:15.961Z", + "Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout": { + "modified": "2019-11-06T13:46:19.795Z", "contributors": [ - "AlePerez92", - "presercomp" + "tonyrodz" ] }, - "Web/API/Node/cloneNode": { - "modified": "2020-10-15T21:49:33.676Z", + "Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout": { + "modified": "2019-05-30T17:37:47.442Z", "contributors": [ - "AlePerez92", - "jyorch2", - "fewrare" + "narvmtz", + "ocamachor" ] }, - "Web/API/Node/contains": { - "modified": "2020-10-15T22:00:52.714Z", + "Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility": { + "modified": "2019-06-05T03:51:45.202Z", "contributors": [ - "AlePerez92" + "blanchart" ] }, - "Web/API/Node/elementoPadre": { - "modified": "2020-10-15T21:55:42.512Z", + "Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout": { + "modified": "2019-03-18T21:34:10.349Z", "contributors": [ - "AlePerez92", - "LRojas", - "tureey" + "amaiafilo" ] }, - "Web/API/Node/hasChildNodes": { - "modified": "2020-10-15T22:08:41.278Z", + "Web/CSS/CSS_Logical_Properties": { + "modified": "2019-03-18T21:11:22.321Z", "contributors": [ - "AlePerez92" + "teffcode" ] }, - "Web/API/Node/insertarAntes": { - "modified": "2020-10-15T21:36:49.326Z", + "Web/CSS/CSS_Logical_Properties/Basic_concepts": { + "modified": "2019-10-17T05:37:57.001Z", "contributors": [ - "AlePerez92", - "danvao", - "Sedoy", - "carpasse" + "blanchart", + "teffcode" ] }, - "Web/API/Node/isSameNode": { - "modified": "2019-03-23T22:49:05.364Z", + "Web/CSS/CSS_Logical_Properties/Floating_and_positioning": { + "modified": "2019-03-18T20:35:38.553Z", "contributors": [ - "JordiCruells" + "teffcode" ] }, - "Web/API/Node/lastChild": { - "modified": "2020-10-15T21:55:48.810Z", + "Web/CSS/CSS_Logical_Properties/Margins_borders_padding": { + "modified": "2019-03-19T13:30:41.950Z", "contributors": [ - "fscholz", - "AlePerez92", - "tureey" + "teffcode" ] }, - "Web/API/Node/namespaceURI": { - "modified": "2019-03-23T22:08:52.990Z", + "Web/CSS/CSS_Motion_Path": { + "modified": "2020-10-15T22:26:49.512Z", "contributors": [ - "tureey" + "josegarciamanez" ] }, - "Web/API/Node/nextSibling": { - "modified": "2020-10-15T21:27:47.909Z", + "Web/CSS/CSS_Positioning": { + "modified": "2019-03-23T22:32:36.509Z", "contributors": [ - "wbamberg", - "AlePerez92", - "fscholz", - "Alexis88" + "javichito", + "davidhbrown" ] }, - "Web/API/Node/nodeName": { - "modified": "2019-03-23T23:50:40.382Z", + "Web/CSS/CSS_Properties_Reference": { + "modified": "2019-03-18T21:24:27.305Z", "contributors": [ - "SphinxKnight", - "fscholz", - "Hasilt", - "HenryGR", - "Mgjbot" + "pekechis" ] }, - "Web/API/Node/nodeType": { - "modified": "2019-03-23T22:58:04.685Z", + "Web/CSS/CSS_Transforms": { + "modified": "2019-03-23T22:43:47.978Z", "contributors": [ - "minrock" + "Sebastianz", + "fscholz" ] }, - "Web/API/Node/nodeValue": { - "modified": "2019-08-30T02:00:09.176Z", + "Web/CSS/CSS_Transforms/Using_CSS_transforms": { + "modified": "2019-03-24T00:05:10.570Z", "contributors": [ - "Jamel-Seyek", - "tureey" + "recortes", + "fscholz", + "teoli", + "cristianjav", + "ajimix", + "another_sam" ] }, - "Web/API/Node/nodoPrincipal": { - "modified": "2019-03-23T22:08:57.260Z", + "Web/CSS/CSS_Transitions": { + "modified": "2019-07-24T08:01:48.708Z", "contributors": [ - "tureey" + "SphinxKnight", + "FedericoMarmo", + "crojasf", + "pekechis" ] }, - "Web/API/Node/ownerDocument": { - "modified": "2019-10-09T11:24:36.349Z", + "Web/CSS/CSS_Types": { + "modified": "2019-03-18T21:35:39.343Z", "contributors": [ - "ogallagher", - "tureey" + "lajaso" ] }, - "Web/API/Node/parentNode": { - "modified": "2019-03-23T22:08:56.619Z", + "Web/CSS/CSS_Writing_Modes": { + "modified": "2019-04-10T10:27:10.380Z", "contributors": [ - "IsmaOrdas", - "tureey" + "cristianmartinez" ] }, - "Web/API/Node/previousSibling": { - "modified": "2020-10-15T22:05:25.453Z", + "Web/CSS/Cascade": { + "modified": "2020-04-20T15:19:07.785Z", "contributors": [ - "wbamberg", - "AlePerez92" + "arjusgit", + "tw1ttt3r" ] }, - "Web/API/Node/removeChild": { - "modified": "2019-03-23T22:51:59.032Z", + "Web/CSS/Child_combinator": { + "modified": "2019-03-23T22:17:17.663Z", "contributors": [ - "IsaacAaron", - "jcmunioz" + "ExE-Boss", + "maguz727", + "israel-munoz" ] }, - "Web/API/Node/replaceChild": { - "modified": "2019-03-23T22:46:30.428Z", + "Web/CSS/Class_selectors": { + "modified": "2019-03-23T22:17:19.977Z", "contributors": [ - "pakitometal" + "israel-munoz" ] }, - "Web/API/Node/textContent": { - "modified": "2020-10-15T21:21:16.429Z", + "Web/CSS/Descendant_combinator": { + "modified": "2019-03-23T23:13:24.480Z", "contributors": [ - "yohanolmedo", - "AlePerez92", - "IsaacAaron", - "fscholz", - "another_sam" + "ExE-Boss", + "Makiber" ] }, - "Web/API/NodeList": { - "modified": "2020-10-15T22:00:48.268Z", + "Web/CSS/ID_selectors": { + "modified": "2020-10-15T21:52:30.474Z", "contributors": [ - "AlePerez92", - "padrecedano" + "lajaso", + "israel-munoz" ] }, - "Web/API/NodeList/forEach": { - "modified": "2020-10-15T22:08:20.485Z", + "Web/CSS/Layout_cookbook": { + "modified": "2019-03-18T21:22:35.394Z", "contributors": [ - "SphinxKnight", - "InfaSysKey", - "jesumv" + "StripTM" ] }, - "Web/API/NonDocumentTypeChildNode": { - "modified": "2019-03-23T22:32:46.517Z", + "Web/CSS/Layout_mode": { + "modified": "2019-03-18T21:44:15.658Z", "contributors": [ - "fscholz" + "NeXuZZ-SCM" ] }, - "Web/API/NonDocumentTypeChildNode/nextElementSibling": { - "modified": "2020-10-15T21:46:25.502Z", + "Web/CSS/Media_Queries": { + "modified": "2020-10-15T22:13:20.096Z", "contributors": [ - "AlePerez92", - "Grijander81" + "mikelmg" ] }, - "Web/API/NonDocumentTypeChildNode/previousElementSibling": { - "modified": "2019-03-23T22:32:40.718Z", + "Web/CSS/Mozilla_Extensions": { + "modified": "2019-03-23T23:21:23.902Z", "contributors": [ - "Grijander81" + "ExE-Boss", + "Sebastianz", + "teoli", + "jota1410" ] }, - "Web/API/Notifications_API": { - "modified": "2019-03-23T22:07:39.198Z", + "Web/CSS/Pseudo-classes": { + "modified": "2020-02-22T08:04:35.419Z", "contributors": [ - "david_ross" + "BraisOliveira", + "MrEscape54", + "MrCoffey", + "alkaithil", + "viro" ] }, - "Web/API/Notifications_API/Usando_la_API_de_Notificaciones": { - "modified": "2020-04-11T06:35:05.696Z", + "Web/CSS/Shorthand_properties": { + "modified": "2019-08-11T12:52:52.844Z", "contributors": [ - "davidelx", - "IXTRUnai" + "blanchart", + "EstebanRK", + "IsraelFloresDGA", + "huichops" ] }, - "Web/API/ParentNode": { - "modified": "2019-03-23T22:43:20.773Z", + "Web/CSS/Syntax": { + "modified": "2020-09-29T20:54:10.526Z", "contributors": [ - "Sebastianz" + "lucasmmaidana", + "joseanpg", + "mili01gm", + "Derhks" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T22:24:28.452Z", + "Web/CSS/Tutorials": { + "modified": "2019-03-23T22:52:34.225Z", "contributors": [ - "Kyuoraku" + "mariolugo" ] }, - "Web/API/ParentNode/childElementCount": { - "modified": "2019-03-23T22:43:24.721Z", + "Web/CSS/Type_selectors": { + "modified": "2020-10-15T21:52:26.603Z", "contributors": [ - "joselix" + "lajaso", + "israel-munoz" ] }, - "Web/API/ParentNode/children": { - "modified": "2019-03-23T22:32:44.383Z", + "Web/CSS/Universal_selectors": { + "modified": "2020-10-15T21:52:26.325Z", "contributors": [ - "AlePerez92", - "aeroxmotion", - "Grijander81" + "lajaso", + "israel-munoz" ] }, - "Web/API/ParentNode/firstElementChild": { - "modified": "2019-03-23T22:32:44.779Z", + "Web/CSS/Using_CSS_custom_properties": { + "modified": "2020-11-26T20:11:21.130Z", "contributors": [ - "Grijander81" + "lupomontero", + "betocantu93", + "sokaluis", + "chrisdavidmills", + "BubuAnabelas", + "Creasick", + "Maseria38", + "FlorTello" ] }, - "Web/API/ParentNode/lastElementChild": { - "modified": "2019-03-23T22:32:39.974Z", + "Web/CSS/actual_value": { + "modified": "2019-03-23T22:16:54.955Z", "contributors": [ - "Grijander81" + "israel-munoz" ] }, - "Web/API/Payment_Request_API": { - "modified": "2020-10-15T22:33:12.666Z", + "Web/CSS/align-content": { + "modified": "2019-06-23T02:54:26.562Z", "contributors": [ - "cjguajardo" + "d0naldo", + "israel-munoz" ] }, - "Web/API/Performance": { - "modified": "2020-10-15T21:53:40.885Z", + "Web/CSS/align-items": { + "modified": "2020-08-01T23:15:43.277Z", "contributors": [ - "wachunei", - "juanarbol", - "fscholz", - "jpmedley" + "LorenzoSandoval", + "vanesa", + "AlePerez92", + "LuisJorgeLozano", + "israel-munoz" ] }, - "Web/API/Performance/clearMarks": { - "modified": "2020-10-15T22:22:33.810Z", + "Web/CSS/align-self": { + "modified": "2019-03-18T21:17:16.430Z", "contributors": [ - "juanarbol" + "israel-munoz" ] }, - "Web/API/Performance/clearMeasures": { - "modified": "2020-10-15T22:22:45.763Z", - "contributors": [ - "juanarbol" - ] - }, - "Web/API/Performance/memory": { - "modified": "2020-10-15T22:22:31.707Z", - "contributors": [ - "juanarbol" - ] - }, - "Web/API/Performance/navigation": { - "modified": "2020-10-15T22:22:32.714Z", - "contributors": [ - "juanarbol" - ] - }, - "Web/API/Performance/now": { - "modified": "2019-03-23T22:13:15.954Z", + "Web/CSS/all": { + "modified": "2019-03-18T21:16:29.697Z", "contributors": [ - "AlePerez92" + "israel-munoz" ] }, - "Web/API/Performance/timeOrigin": { - "modified": "2020-10-15T22:22:32.944Z", + "Web/CSS/angle": { + "modified": "2019-03-23T22:28:51.690Z", "contributors": [ - "juanarbol" + "israel-munoz" ] }, - "Web/API/Performance/timing": { - "modified": "2020-10-15T22:22:30.788Z", + "Web/CSS/animation": { + "modified": "2019-03-23T23:38:13.777Z", "contributors": [ - "juanarbol" + "evaferreira", + "teoli", + "Luis_Calvo", + "jesanchez", + "ccarruitero" ] }, - "Web/API/PerformanceNavigation": { - "modified": "2020-10-15T22:22:46.223Z", + "Web/CSS/animation-delay": { + "modified": "2019-03-23T23:38:13.594Z", "contributors": [ - "juanarbol" + "Maletil", + "teoli", + "Luis_Calvo", + "jesanchez", + "jsalinas" ] }, - "Web/API/PositionOptions": { - "modified": "2019-03-23T23:16:28.831Z", + "Web/CSS/animation-direction": { + "modified": "2019-03-23T23:38:14.261Z", "contributors": [ - "fscholz", - "LeoHirsch", - "lupomontero" + "teoli", + "Luis_Calvo", + "jesanchez", + "jsalinas" ] }, - "Web/API/PushManager": { - "modified": "2019-03-23T22:40:00.540Z", + "Web/CSS/animation-duration": { + "modified": "2019-03-23T23:31:43.672Z", "contributors": [ - "chrisdavidmills" + "teoli", + "Sebastianz", + "Luis_Calvo" ] }, - "Web/API/PushManager/permissionState": { - "modified": "2019-03-23T22:39:59.979Z", + "Web/CSS/animation-fill-mode": { + "modified": "2019-03-23T23:03:51.180Z", "contributors": [ - "maedca" + "teoli", + "Sebastianz", + "luigli", + "jesusr" ] }, - "Web/API/PushManager/supportedContentEncodings": { - "modified": "2020-10-15T22:03:55.545Z", + "Web/CSS/animation-iteration-count": { + "modified": "2019-03-23T22:59:21.919Z", "contributors": [ - "Erto" + "teoli", + "Sebastianz", + "maiky" ] }, - "Web/API/Push_API": { - "modified": "2019-03-23T22:44:48.332Z", + "Web/CSS/animation-name": { + "modified": "2019-03-23T22:59:26.717Z", "contributors": [ - "gimco", - "omar10594", - "Erto", - "FMRonin", - "YulianD", - "mautematico" + "teoli", + "Sebastianz", + "maiky" ] }, - "Web/API/Push_API/Using_the_Push_API": { - "modified": "2019-03-23T22:19:10.252Z", + "Web/CSS/animation-play-state": { + "modified": "2019-03-23T22:44:18.177Z", "contributors": [ - "YulianD" + "Boton" ] }, - "Web/API/RTCPeerConnection": { - "modified": "2019-03-18T21:43:02.717Z", + "Web/CSS/animation-timing-function": { + "modified": "2019-03-23T22:44:11.502Z", "contributors": [ - "jgalvezsoax", - "maomuriel" + "ndeniche", + "mrstork", + "Boton" ] }, - "Web/API/RTCPeerConnection/canTrickleIceCandidates": { - "modified": "2020-10-15T22:33:02.442Z", + "Web/CSS/appearance": { + "modified": "2019-03-23T22:44:40.090Z", "contributors": [ - "JaderLuisDiaz" + "ExE-Boss", + "teoli", + "wbamberg", + "guerratron" ] }, - "Web/API/RTCRtpReceiver": { - "modified": "2020-10-15T22:27:25.068Z", + "Web/CSS/attr()": { + "modified": "2020-11-04T08:51:33.506Z", "contributors": [ - "qwerty726" + "chrisdavidmills", + "mrstork", + "prayash", + "ismachine" ] }, - "Web/API/RandomSource": { - "modified": "2019-03-23T22:25:15.548Z", + "Web/CSS/backdrop-filter": { + "modified": "2020-10-15T22:05:06.351Z", "contributors": [ - "Jeremie" + "lajaso" ] }, - "Web/API/RandomSource/Obtenervaloresaleatorios": { - "modified": "2020-10-15T21:49:57.084Z", + "Web/CSS/backface-visibility": { + "modified": "2019-03-23T22:18:09.464Z", "contributors": [ - "hecmonter", - "joseluisq", - "julianmoji" + "israel-munoz" ] }, - "Web/API/Range": { - "modified": "2019-03-23T23:47:18.258Z", + "Web/CSS/background": { + "modified": "2020-04-23T17:42:59.807Z", "contributors": [ - "wbamberg", - "maiky", + "JAMC", + "MMariscal", + "SphinxKnight", "fscholz", - "Markens", - "DR", + "teoli", + "sebasmagri", + "Yuichiro", "Nathymig" ] }, - "Web/API/Range/collapsed": { - "modified": "2019-03-23T23:47:00.550Z", + "Web/CSS/background-attachment": { + "modified": "2020-12-12T11:33:06.443Z", "contributors": [ + "ejcarreno", + "blanchart", + "smltalavera95", + "SphinxKnight", "fscholz", - "DR" + "teoli", + "Nathymig" ] }, - "Web/API/Range/commonAncestorContainer": { - "modified": "2019-03-23T23:53:54.038Z", + "Web/CSS/background-blend-mode": { + "modified": "2019-03-23T22:59:28.908Z", "contributors": [ - "fscholz", - "DR" + "ExE-Boss", + "israel-munoz", + "mrstork", + "teoli", + "Sebastianz", + "maiky" ] }, - "Web/API/Range/getClientRects": { - "modified": "2019-03-23T22:10:01.541Z", + "Web/CSS/background-clip": { + "modified": "2019-03-18T20:52:42.788Z", "contributors": [ - "edhzsz" + "Beatriz_Ortega_Valdes", + "Carlos_Gutierrez", + "teoli", + "Sebastianz", + "rurigk" ] }, - "Web/API/Range/intersectsNode": { - "modified": "2019-03-23T23:53:59.214Z", + "Web/CSS/background-color": { + "modified": "2019-10-10T16:45:24.871Z", "contributors": [ - "fscholz", - "khalid32", - "Mgjbot", - "DR" + "SphinxKnight", + "danielfdez", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/Range/setStart": { - "modified": "2019-03-23T22:13:01.685Z", + "Web/CSS/background-image": { + "modified": "2020-05-06T04:02:29.611Z", "contributors": [ - "Vincetroid" + "blanchart", + "evaferreira", + "SphinxKnight", + "alexisCan", + "andrpueb", + "teoli", + "Rayber", + "Nathymig", + "ethertank" ] }, - "Web/API/Request": { - "modified": "2020-10-15T22:02:13.323Z", + "Web/CSS/background-origin": { + "modified": "2019-03-24T00:15:00.605Z", "contributors": [ - "DiegoFT", - "fscholz" + "teoli", + "Seanwalker" ] }, - "Web/API/Request/headers": { - "modified": "2020-10-15T22:02:12.572Z", + "Web/CSS/background-position": { + "modified": "2020-05-06T06:30:15.110Z", "contributors": [ - "carojaspaz" + "blanchart", + "SphinxKnight", + "teoli", + "FredB", + "Nathymig", + "ethertank" ] }, - "Web/API/Response": { - "modified": "2020-11-13T19:18:52.099Z", + "Web/CSS/background-position-x": { + "modified": "2020-10-15T22:33:04.718Z", "contributors": [ - "chux", - "kant", - "ignatius73", - "crrlos" + "Ismael_Diaz" ] }, - "Web/API/Response/Response": { - "modified": "2020-10-15T22:15:43.532Z", + "Web/CSS/background-repeat": { + "modified": "2020-10-15T21:16:00.953Z", "contributors": [ - "AzazelN28" + "itxuixdev", + "SphinxKnight", + "teoli", + "Nathymig" ] }, - "Web/API/Response/ok": { - "modified": "2020-10-15T22:22:31.771Z", + "Web/CSS/background-size": { + "modified": "2019-03-23T23:38:13.094Z", "contributors": [ - "juanarbol" + "blanchart", + "samuelrb", + "Simplexible", + "Sebastianz", + "Prinz_Rana", + "fscholz", + "teoli", + "chux", + "aguztinrs" ] }, - "Web/API/Response/status": { - "modified": "2020-10-15T22:24:09.432Z", + "Web/CSS/basic-shape": { + "modified": "2019-03-23T22:21:44.895Z", "contributors": [ - "FDSoil" + "israel-munoz" ] }, - "Web/API/SVGPoint": { - "modified": "2019-03-23T23:03:09.725Z", + "Web/CSS/blend-mode": { + "modified": "2020-12-04T10:45:45.837Z", "contributors": [ - "fscholz", - "hasAngel" + "israel-munoz" ] }, - "Web/API/Screen": { - "modified": "2019-10-10T16:45:22.609Z", + "Web/CSS/block-size": { + "modified": "2019-03-25T00:21:59.271Z", "contributors": [ - "jazdian", - "Grijander81" + "teffcode", + "israel-munoz" ] }, - "Web/API/Selection": { - "modified": "2019-03-23T23:54:01.018Z", + "Web/CSS/border": { + "modified": "2020-09-27T22:17:02.248Z", "contributors": [ - "CxRxExO", - "fscholz", - "DR", - "Juandavaus", - "Kroatan", - "Mgjbot", - "LaRy", + "usuarioMan", + "cgosorio", + "wbamberg", + "SphinxKnight", + "teoli", + "Yuichiro", "Nathymig" ] }, - "Web/API/Selection/addRange": { - "modified": "2019-03-23T23:46:53.374Z", + "Web/CSS/border-block": { + "modified": "2020-10-15T22:16:25.322Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "teffcode" ] }, - "Web/API/Selection/anchorNode": { - "modified": "2019-03-23T23:46:46.912Z", + "Web/CSS/border-block-color": { + "modified": "2020-10-15T22:16:29.172Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "teffcode" ] }, - "Web/API/Selection/anchorOffset": { - "modified": "2019-03-23T23:46:55.279Z", + "Web/CSS/border-block-end": { + "modified": "2019-03-23T00:00:36.213Z", "contributors": [ - "fscholz", - "DR", - "Mgjbot" + "teffcode", + "israel-munoz" ] }, - "Web/API/Selection/collapse": { - "modified": "2019-03-23T23:46:57.541Z", + "Web/CSS/border-block-end-color": { + "modified": "2019-03-24T11:12:10.336Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "teffcode", + "israel-munoz" ] }, - "Web/API/Selection/collapseToEnd": { - "modified": "2019-03-23T23:47:01.187Z", + "Web/CSS/border-block-end-style": { + "modified": "2019-03-23T22:11:28.819Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "israel-munoz" ] }, - "Web/API/Selection/collapseToStart": { - "modified": "2019-03-23T23:46:59.744Z", + "Web/CSS/border-block-end-width": { + "modified": "2020-10-15T22:16:29.514Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "teffcode" ] }, - "Web/API/Selection/containsNode": { - "modified": "2019-03-23T23:46:51.997Z", + "Web/CSS/border-block-start": { + "modified": "2020-10-15T22:16:31.641Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "teffcode" ] }, - "Web/API/Selection/deleteFromDocument": { - "modified": "2019-03-23T23:46:47.857Z", + "Web/CSS/border-block-start-color": { + "modified": "2020-10-15T22:16:30.534Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "teffcode" ] }, - "Web/API/Selection/extend": { - "modified": "2019-03-23T23:46:54.795Z", + "Web/CSS/border-block-start-style": { + "modified": "2020-10-15T22:16:32.074Z", "contributors": [ - "fscholz", - "DR", - "Mgjbot" + "teffcode" ] }, - "Web/API/Selection/focusNode": { - "modified": "2019-03-23T23:46:46.574Z", + "Web/CSS/border-block-start-width": { + "modified": "2020-10-15T22:16:36.793Z", "contributors": [ - "fscholz", - "DR" + "teffcode" ] }, - "Web/API/Selection/focusOffset": { - "modified": "2019-03-23T23:46:54.969Z", + "Web/CSS/border-block-style": { + "modified": "2020-10-15T22:16:36.371Z", "contributors": [ - "fscholz", - "DR", - "Mgjbot" + "teffcode" ] }, - "Web/API/Selection/getRangeAt": { - "modified": "2019-03-23T23:46:55.195Z", + "Web/CSS/border-block-width": { + "modified": "2020-10-15T22:16:39.535Z", "contributors": [ - "fscholz", - "DR" + "teffcode" ] }, - "Web/API/Selection/isCollapsed": { - "modified": "2019-03-23T23:46:52.080Z", + "Web/CSS/border-bottom": { + "modified": "2019-03-24T00:08:41.510Z", "contributors": [ - "fscholz", - "DR" + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/Selection/rangeCount": { - "modified": "2019-03-23T23:46:50.030Z", + "Web/CSS/border-bottom-color": { + "modified": "2019-03-24T00:08:33.937Z", "contributors": [ - "fscholz", - "DR" + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/Selection/removeAllRanges": { - "modified": "2019-03-23T23:46:54.883Z", + "Web/CSS/border-bottom-left-radius": { + "modified": "2019-03-18T21:16:45.497Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "israel-munoz" ] }, - "Web/API/Selection/removeRange": { - "modified": "2019-03-23T23:46:55.069Z", + "Web/CSS/border-bottom-right-radius": { + "modified": "2019-03-18T21:15:46.042Z", "contributors": [ - "fscholz", - "DR", - "Mgjbot" + "israel-munoz" ] }, - "Web/API/Selection/selectAllChildren": { - "modified": "2019-03-23T23:46:50.124Z", + "Web/CSS/border-bottom-style": { + "modified": "2019-03-24T00:08:38.365Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/Selection/toString": { - "modified": "2019-03-23T23:47:28.897Z", + "Web/CSS/border-bottom-width": { + "modified": "2019-03-24T00:12:49.342Z", "contributors": [ - "fscholz", - "Mgjbot", - "DR" + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/ServiceWorkerContainer": { - "modified": "2020-10-15T22:03:12.673Z", + "Web/CSS/border-collapse": { + "modified": "2019-03-23T23:52:09.803Z", "contributors": [ - "fscholz" + "wbamberg", + "teoli", + "Mgjbot", + "Nathymig" ] }, - "Web/API/ServiceWorkerContainer/register": { - "modified": "2020-10-15T22:03:11.889Z", + "Web/CSS/border-color": { + "modified": "2019-03-24T00:08:40.211Z", "contributors": [ - "LuisOlive", - "marc2684" + "wbamberg", + "SphinxKnight", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/ServiceWorkerRegistration": { - "modified": "2020-10-15T22:05:45.607Z", + "Web/CSS/border-end-end-radius": { + "modified": "2020-10-15T22:16:36.075Z", "contributors": [ - "ExE-Boss" + "teffcode" ] }, - "Web/API/Service_Worker_API": { - "modified": "2019-03-23T22:09:38.478Z", + "Web/CSS/border-end-start-radius": { + "modified": "2020-10-15T22:16:41.715Z", "contributors": [ - "Fedapamo", - "andrpueb", - "ibanlopez", - "eltioico", - "chrisdavidmills" + "teffcode" ] }, - "Web/API/Service_Worker_API/Using_Service_Workers": { - "modified": "2019-03-23T22:09:43.848Z", + "Web/CSS/border-image": { + "modified": "2019-03-23T23:21:15.962Z", "contributors": [ - "JasonGlez", - "Vergara", - "GabrielSchlomo", - "Anibalismo", - "darioperez" + "teoli", + "Sebastianz", + "JuanCastela", + "yeyxav" ] }, - "Web/API/Storage": { - "modified": "2019-03-23T22:37:04.835Z", + "Web/CSS/border-image-outset": { + "modified": "2019-03-23T22:22:10.809Z", "contributors": [ - "puma", - "Sebastianz" + "israel-munoz" ] }, - "Web/API/Storage/LocalStorage": { - "modified": "2020-07-20T09:10:56.525Z", + "Web/CSS/border-image-repeat": { + "modified": "2020-10-15T21:51:01.640Z", "contributors": [ - "LucasMaciasAtala", - "moniqaveiga", - "Andresrodart", - "lsphantom" + "SphinxKnight", + "israel-munoz" ] }, - "Web/API/Storage/clear": { - "modified": "2019-03-23T22:26:00.358Z", + "Web/CSS/border-image-slice": { + "modified": "2019-03-23T22:22:00.674Z", "contributors": [ - "edwarfuentes97", - "theguitxo" + "israel-munoz" ] }, - "Web/API/Storage/getItem": { - "modified": "2019-03-23T22:33:04.286Z", + "Web/CSS/border-inline": { + "modified": "2020-10-15T22:16:39.413Z", "contributors": [ - "devconcept", - "aminguez" + "teffcode" ] }, - "Web/API/Storage/length": { - "modified": "2019-03-23T22:25:49.492Z", + "Web/CSS/border-inline-color": { + "modified": "2020-10-15T22:16:39.129Z", "contributors": [ - "Guitxo" + "teffcode" ] }, - "Web/API/Storage/removeItem": { - "modified": "2020-06-16T13:11:43.937Z", + "Web/CSS/border-inline-end": { + "modified": "2020-10-15T22:16:35.919Z", "contributors": [ - "jorgeCaster", - "aminguez" + "teffcode" ] }, - "Web/API/Storage/setItem": { - "modified": "2019-03-23T22:37:01.770Z", + "Web/CSS/border-inline-end-color": { + "modified": "2020-10-15T22:16:44.169Z", "contributors": [ - "aminguez", - "spideep" + "teffcode" ] }, - "Web/API/StorageManager": { - "modified": "2020-10-15T22:18:18.423Z" - }, - "Web/API/StorageManager/estimate": { - "modified": "2020-10-15T22:18:17.461Z", + "Web/CSS/border-inline-end-style": { + "modified": "2020-10-15T22:16:36.354Z", "contributors": [ - "AlePerez92" + "teffcode" ] }, - "Web/API/StorageManager/persist": { - "modified": "2020-10-15T22:18:17.848Z", + "Web/CSS/border-inline-end-width": { + "modified": "2020-10-15T22:16:36.837Z", "contributors": [ - "AlePerez92" + "teffcode" ] }, - "Web/API/StorageManager/persisted": { - "modified": "2020-10-15T22:18:17.733Z", + "Web/CSS/border-inline-start": { + "modified": "2020-10-15T22:16:44.782Z", "contributors": [ - "AlePerez92" + "teffcode" ] }, - "Web/API/StyleSheet": { - "modified": "2019-03-18T21:12:49.649Z", + "Web/CSS/border-inline-start-color": { + "modified": "2020-10-15T22:16:35.643Z", "contributors": [ - "diegovinie", - "SphinxKnight", - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "teffcode" ] }, - "Web/API/StyleSheet/disabled": { - "modified": "2019-03-23T23:58:08.612Z", + "Web/CSS/border-inline-start-style": { + "modified": "2020-10-15T22:16:41.098Z", "contributors": [ - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "teffcode" ] }, - "Web/API/StyleSheet/href": { - "modified": "2019-03-23T23:58:07.932Z", + "Web/CSS/border-inline-start-width": { + "modified": "2020-10-15T22:16:33.765Z", "contributors": [ - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "teffcode" ] }, - "Web/API/StyleSheet/media": { - "modified": "2019-03-23T23:58:05.417Z", + "Web/CSS/border-inline-style": { + "modified": "2020-10-15T22:16:43.176Z", "contributors": [ - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "teffcode" ] }, - "Web/API/StyleSheet/ownerNode": { - "modified": "2019-03-23T23:58:23.239Z", + "Web/CSS/border-inline-width": { + "modified": "2020-10-15T22:16:39.409Z", "contributors": [ - "fscholz", - "khalid32", - "teoli", - "HenryGR" + "teffcode" ] }, - "Web/API/StyleSheet/parentStyleSheet": { - "modified": "2019-03-23T23:58:09.687Z", + "Web/CSS/border-left": { + "modified": "2019-03-24T00:08:37.376Z", "contributors": [ "fscholz", - "khalid32", "teoli", - "HenryGR" + "Yuichiro", + "Mgjbot", + "Wrongloop" ] }, - "Web/API/StyleSheet/title": { - "modified": "2019-03-23T23:58:12.135Z", + "Web/CSS/border-left-color": { + "modified": "2019-03-23T23:52:28.495Z", "contributors": [ - "fscholz", - "xuancanh", + "wbamberg", + "d8vjork", "teoli", - "HenryGR" + "Wrongloop" ] }, - "Web/API/StyleSheet/type": { - "modified": "2019-03-23T23:58:05.312Z", + "Web/CSS/border-radius": { + "modified": "2019-03-23T23:37:30.234Z", "contributors": [ - "fscholz", - "jsx", + "Barleby", + "Simplexible", + "Sebastianz", + "Prinz_Rana", "teoli", - "HenryGR" + "bytx", + "wilo" ] }, - "Web/API/SubtleCrypto": { - "modified": "2020-10-15T22:27:14.356Z", + "Web/CSS/border-right": { + "modified": "2020-10-15T22:17:02.534Z", "contributors": [ - "joseluisq" + "dlopez525", + "osperi" ] }, - "Web/API/SubtleCrypto/digest": { - "modified": "2020-10-15T22:27:30.018Z", + "Web/CSS/border-spacing": { + "modified": "2019-03-23T23:52:00.961Z", "contributors": [ - "joseluisq" + "wbamberg", + "teoli", + "Nathymig" ] }, - "Web/API/SubtleCrypto/encrypt": { - "modified": "2020-10-15T22:27:29.781Z", + "Web/CSS/border-start-end-radius": { + "modified": "2020-10-15T22:16:40.778Z", "contributors": [ - "joseluisq" + "teffcode" ] }, - "Web/API/TextTrack": { - "modified": "2020-10-15T22:33:08.345Z", + "Web/CSS/border-start-start-radius": { + "modified": "2020-10-15T22:16:40.498Z", "contributors": [ - "joeyparrish" + "teffcode" ] }, - "Web/API/TextTrack/cuechange_event": { - "modified": "2020-10-15T22:33:09.063Z", + "Web/CSS/border-style": { + "modified": "2020-10-22T00:09:31.436Z", "contributors": [ - "Pablo-No" + "YairCaptain", + "SphinxKnight", + "javierpolit", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/TouchEvent": { - "modified": "2019-03-23T22:32:05.809Z", + "Web/CSS/border-top": { + "modified": "2019-03-23T22:41:47.976Z", "contributors": [ - "ulisestrujillo", - "AlePerez92" + "cgosorio", + "mcclone2001" ] }, - "Web/API/UIEvent": { - "modified": "2019-03-23T23:01:34.700Z", + "Web/CSS/border-top-color": { + "modified": "2020-10-15T21:59:59.493Z", "contributors": [ - "fscholz" + "jpmontoya182" ] }, - "Web/API/UIEvent/pageX": { - "modified": "2019-03-23T23:12:56.756Z", + "Web/CSS/border-top-left-radius": { + "modified": "2019-03-23T22:27:25.384Z", "contributors": [ - "fscholz", - "khalid32", - "Nathymig", - "Julgon" + "israel-munoz" ] }, - "Web/API/URL": { - "modified": "2019-03-23T22:19:12.735Z", + "Web/CSS/border-top-right-radius": { + "modified": "2019-03-23T22:27:24.905Z", "contributors": [ - "zayle", - "wstaelens" + "israel-munoz" ] }, - "Web/API/URL/Host": { - "modified": "2020-10-15T22:28:58.726Z", + "Web/CSS/border-width": { + "modified": "2020-12-03T13:55:01.337Z", "contributors": [ - "diegovlopez587" + "rc925e", + "davisorb95", + "wbamberg", + "SphinxKnight", + "Yisus777", + "teoli", + "Yuichiro", + "Nathymig" ] }, - "Web/API/URL/URL": { - "modified": "2020-10-15T22:21:36.171Z", + "Web/CSS/bottom": { + "modified": "2019-01-16T15:42:01.210Z", "contributors": [ - "roberth_dev" + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/API/URL/createObjectURL": { - "modified": "2019-03-23T22:19:19.805Z", + "Web/CSS/box-shadow": { + "modified": "2020-10-15T21:19:58.329Z", "contributors": [ - "OrlandoDeJesusCuxinYama", - "isafrus5", - "AzazelN28" + "davidpala.dev", + "IsraelFloresDGA", + "Sebastianz", + "Prinz_Rana", + "teoli", + "carloshs92" ] }, - "Web/API/URL/port": { - "modified": "2020-10-15T22:21:35.297Z", + "Web/CSS/box-sizing": { + "modified": "2020-10-15T21:37:29.482Z", "contributors": [ - "roberth_dev" - ] - }, - "Web/API/URLSearchParams": { - "modified": "2019-03-23T22:08:25.598Z", - "contributors": [ - "aliveghost04" + "amazing79", + "Soyaine", + "manuelizo", + "IsraelFloresDGA", + "GiioBass", + "Derhks", + "Sebastianz", + "juandiegoles" ] }, - "Web/API/URLSearchParams/URLSearchParams": { - "modified": "2020-10-15T22:28:05.327Z", + "Web/CSS/calc()": { + "modified": "2020-11-04T09:08:00.719Z", "contributors": [ - "daniel.duarte" + "chrisdavidmills", + "blanchart", + "mrstork", + "prayash", + "teoli", + "MrBlogger" ] }, - "Web/API/WebGL_API": { - "modified": "2019-03-24T00:07:50.182Z", + "Web/CSS/caret-color": { + "modified": "2019-03-23T22:08:56.287Z", "contributors": [ - "fscholz", - "teoli", - "inma_610" + "israel-munoz" ] }, - "Web/API/WebGL_API/Tutorial": { - "modified": "2019-03-23T22:48:50.519Z", + "Web/CSS/clear": { + "modified": "2020-10-30T03:42:19.832Z", "contributors": [ "SphinxKnight", - "lrlimon", - "fscholz" + "Alxbrz19", + "javichito" ] }, - "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": { - "modified": "2019-03-18T21:16:52.110Z", + "Web/CSS/clip": { + "modified": "2019-03-23T23:33:36.877Z", "contributors": [ - "Nekete", - "Erik12Ixec", - "WHK102", - "COBRILL4" + "Sebastianz", + "teoli", + "nadiafaya" ] }, - "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": { - "modified": "2019-03-23T23:20:38.388Z", + "Web/CSS/clip-path": { + "modified": "2020-10-15T21:54:58.750Z", "contributors": [ "fscholz", - "teoli", - "luziiann" + "jorgeherrera9103", + "david-velilla", + "CarlosLinares" ] }, - "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": { - "modified": "2019-03-23T22:34:48.400Z", + "Web/CSS/color": { + "modified": "2020-10-15T21:15:23.982Z", "contributors": [ - "pixelements" + "rhssr", + "SphinxKnight", + "teoli", + "trada", + "Mgjbot", + "HenryGR" ] }, - "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": { - "modified": "2019-03-23T23:06:04.656Z", + "Web/CSS/color_value": { + "modified": "2019-03-23T22:37:22.211Z", "contributors": [ - "fcanellas", - "Pablo_Bangueses", - "CarlosLinares", - "Inheritech", - "CandelarioGomez", - "fscholz", - "joeljose", - "Jorge0309" + "blanchart", + "Sebastianz", + "Simplexible", + "pekechis" ] }, - "Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL": { - "modified": "2019-03-23T22:37:32.127Z", + "Web/CSS/column-count": { + "modified": "2020-10-15T21:40:29.448Z", "contributors": [ - "asarch", - "Giovan" + "AlePerez92", + "Anonymous", + "Sebastianz", + "Davier182" ] }, - "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": { - "modified": "2020-05-29T05:02:06.384Z", + "Web/CSS/column-span": { + "modified": "2020-10-15T22:21:55.127Z", "contributors": [ - "jmlocke1", - "Giovan" + "AlePerez92" ] }, - "Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL": { - "modified": "2019-03-23T22:15:44.225Z", + "Web/CSS/content": { + "modified": "2019-03-23T23:51:59.928Z", "contributors": [ - "BubuAnabelas", - "marce_1994" + "teoli", + "Nathymig", + "HenryGR" ] }, - "Web/API/WebRTC_API": { - "modified": "2020-05-01T03:28:58.714Z", + "Web/CSS/cursor": { + "modified": "2019-03-23T23:52:22.554Z", "contributors": [ - "erito73", - "miguelsp" + "wbamberg", + "teoli", + "Wrongloop" ] }, - "Web/API/WebRTC_API/Protocols": { - "modified": "2020-05-01T03:41:11.993Z", + "Web/CSS/direction": { + "modified": "2019-01-16T15:40:27.790Z", "contributors": [ - "erito73", - "ValeriaRamos" + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/API/WebSocket": { - "modified": "2019-03-18T20:53:48.099Z", + "Web/CSS/display": { + "modified": "2020-10-21T14:14:21.533Z", "contributors": [ - "benja90", - "spachecojimenez", - "aranondo", - "dpineiden" + "johanfvn", + "davidpala.dev", + "NeoFl3x", + "wbamberg", + "evaferreira", + "SphinxKnight", + "devCaso", + "FranciscoCastle" ] }, - "Web/API/WebSocket/close_event": { - "modified": "2019-03-23T21:59:50.486Z", + "Web/CSS/env()": { + "modified": "2020-11-10T11:09:30.133Z", "contributors": [ - "irenesmith", - "ExE-Boss", - "FLAVIOALFA" + "chrisdavidmills", + "severo" ] }, - "Web/API/WebSocket/onerror": { - "modified": "2020-10-15T22:13:54.439Z", + "Web/CSS/filter": { + "modified": "2019-03-23T22:59:24.815Z", "contributors": [ - "Bumxu" + "israel-munoz", + "Sebastianz", + "teoli", + "maiky" ] }, - "Web/API/WebSockets_API": { - "modified": "2019-05-21T02:54:41.622Z", + "Web/CSS/filter-function": { + "modified": "2019-03-18T21:34:50.284Z", "contributors": [ - "SphinxKnight", - "tpb", - "petisocarambanal", - "CesarBustios", - "mserracaldentey" + "lajaso", + "mfluehr" ] }, - "Web/API/WebSockets_API/Escribiendo_servidor_WebSocket": { - "modified": "2019-05-21T02:54:42.354Z", + "Web/CSS/filter-function/blur()": { + "modified": "2020-11-05T09:45:32.642Z", "contributors": [ - "SphinxKnight", - "manueljrs", - "Yantup", - "jjmontes" + "chrisdavidmills", + "lajaso" ] }, - "Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket": { - "modified": "2019-06-21T20:55:28.443Z", + "Web/CSS/filter-function/brightness()": { + "modified": "2020-11-05T09:57:09.596Z", "contributors": [ - "alesalva", - "SphinxKnight", - "juanmanuelramallo", - "8manuel", - "llekn", - "jjmontes", - "augus1990" + "chrisdavidmills", + "mjsorribas" ] }, - "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { - "modified": "2019-05-21T02:54:42.026Z", + "Web/CSS/fit-content": { + "modified": "2020-10-15T22:06:18.387Z", "contributors": [ - "SphinxKnight", - "neopablix", - "jevvilla", - "jvilla8a", - "AzazelN28", - "Unbrained", - "gabryk", - "MauroEldritch", - "frankzen" + "ocamachor" ] }, - "Web/API/WebVR_API": { - "modified": "2019-03-23T22:07:07.755Z", + "Web/CSS/flex": { + "modified": "2019-03-23T22:31:42.324Z", "contributors": [ - "Alphaeolo", - "chrisdavidmills" + "Luis_Calvo", + "joshitobuba", + "Enfokat" ] }, - "Web/API/WebVR_API/Using_the_WebVR_API": { - "modified": "2020-10-12T08:06:57.683Z", + "Web/CSS/flex-basis": { + "modified": "2020-08-16T18:24:46.422Z", "contributors": [ - "SphinxKnight", - "MarioA19", - "geryescalier", - "karlalhdz" + "metrapach", + "joshitobuba", + "jandrade" ] }, - "Web/API/WebVTT_API": { - "modified": "2020-10-15T22:33:07.538Z", + "Web/CSS/flex-direction": { + "modified": "2020-10-15T21:29:59.011Z", "contributors": [ - "Pablo-No" + "Alex_Figueroa", + "evaferreira", + "Manuel-Kas", + "joshitobuba", + "fscholz", + "Sebastianz", + "elkinbernal" ] }, - "Web/API/Web_Crypto_API": { - "modified": "2020-02-12T20:20:09.829Z", + "Web/CSS/flex-flow": { + "modified": "2019-03-18T21:15:12.282Z", "contributors": [ - "joseluisq", - "anfuca", - "haxdai" + "carlos.millan3", + "abaracedo" ] }, - "Web/API/Web_Crypto_API/Checking_authenticity_with_password": { - "modified": "2019-03-23T22:10:43.026Z", + "Web/CSS/flex-grow": { + "modified": "2020-05-06T21:30:31.507Z", "contributors": [ - "haxdai" + "soniarecher", + "joshitobuba" ] }, - "Web/API/Web_Speech_API": { - "modified": "2020-10-15T22:29:46.339Z", + "Web/CSS/flex-shrink": { + "modified": "2020-10-15T22:00:16.924Z", "contributors": [ - "dianarryanti707" + "deluxury", + "Facundo-Corradini" ] }, - "Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API": { - "modified": "2020-05-10T18:32:28.954Z", + "Web/CSS/flex-wrap": { + "modified": "2019-03-23T23:02:38.556Z", "contributors": [ - "mcarou" + "joshitobuba", + "fscholz", + "Sebastianz", + "Rober84" ] }, - "Web/API/Web_Workers_API": { - "modified": "2020-04-14T23:36:47.242Z", + "Web/CSS/float": { + "modified": "2020-11-07T16:01:06.351Z", "contributors": [ - "krebking", - "thepianist2", - "jsanmor" + "ppalma1963", + "melisb3", + "wbamberg", + "SphinxKnight", + "teoli", + "fscholz", + "Mgjbot", + "Nathymig", + "HenryGR" ] }, - "Web/API/WheelEvent": { - "modified": "2019-03-23T22:40:53.687Z", + "Web/CSS/font": { + "modified": "2019-03-23T23:53:27.791Z", "contributors": [ - "StripTM" + "wbamberg", + "fscholz", + "teoli", + "Mgjbot", + "Nathymig", + "Nukeador", + "RickieesES", + "HenryGR" ] }, - "Web/API/WheelEvent/deltaY": { - "modified": "2019-03-23T22:26:41.848Z", + "Web/CSS/font-family": { + "modified": "2019-03-23T23:52:00.350Z", "contributors": [ - "Thargelion" + "wbamberg", + "fscholz", + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Window": { - "modified": "2020-08-14T20:26:23.156Z", + "Web/CSS/font-size": { + "modified": "2019-03-23T23:52:02.387Z", "contributors": [ - "Enesimus", - "Michelangeur", - "antoiba86", - "jjoselon", - "vggallego", + "wbamberg", "fscholz", - "Crash", - "Monty", - "Markens", - "DR", + "teoli", "Nathymig", + "RickieesES", + "HenryGR", "Mgjbot" ] }, - "Web/API/Window/URL": { - "modified": "2019-03-23T22:38:17.598Z", + "Web/CSS/font-size-adjust": { + "modified": "2019-03-23T23:53:20.314Z", "contributors": [ - "israelfl" + "wbamberg", + "ivangrimaldo", + "fscholz", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" ] }, - "Web/API/Window/alert": { - "modified": "2019-03-23T22:27:29.008Z", + "Web/CSS/font-style": { + "modified": "2019-03-23T23:54:11.290Z", "contributors": [ - "israel-munoz" + "gustavodibasson", + "ivyixbvp", + "teoli", + "Mgjbot", + "Nathymig", + "RickieesES", + "HenryGR" ] }, - "Web/API/Window/applicationCache": { - "modified": "2019-03-23T23:52:56.666Z", + "Web/CSS/font-variant": { + "modified": "2019-03-23T23:54:15.244Z", "contributors": [ - "SphinxKnight", + "wbamberg", "fscholz", - "AshfaqHossain", - "HenryGR", - "Mgjbot" - ] - }, - "Web/API/Window/cancelAnimationFrame": { - "modified": "2019-03-23T22:30:46.211Z", - "contributors": [ - "khrizenriquez" + "teoli", + "Mgjbot", + "Nathymig", + "RickieesES", + "HenryGR" ] }, - "Web/API/Window/close": { - "modified": "2020-10-15T21:37:07.614Z", + "Web/CSS/font-variant-alternates": { + "modified": "2019-03-23T22:18:05.471Z", "contributors": [ - "SphinxKnight", - "dgrizzla", - "Siro_Diaz" + "israel-munoz" ] }, - "Web/API/Window/closed": { - "modified": "2019-03-18T20:59:11.710Z", + "Web/CSS/font-weight": { + "modified": "2020-10-08T18:46:18.623Z", "contributors": [ + "jorgetoloza", + "EzeRamirez84", + "UbaldoRosas", + "ivyixbvp", "SphinxKnight", - "developingo" + "fscholz", + "teoli", + "Mgjbot", + "ethertank", + "Nathymig", + "RickieesES", + "HenryGR" ] }, - "Web/API/Window/confirm": { - "modified": "2019-03-23T22:45:47.266Z", + "Web/CSS/frequency": { + "modified": "2019-03-23T22:22:14.267Z", "contributors": [ - "julian3xl" + "israel-munoz" ] }, - "Web/API/Window/crypto": { - "modified": "2020-02-12T20:26:38.795Z", + "Web/CSS/grid": { + "modified": "2019-03-23T22:08:26.115Z", "contributors": [ - "joseluisq", - "AlePerez92", - "victorjavierss" + "macagua", + "andresrisso" ] }, - "Web/API/Window/devicePixelRatio": { - "modified": "2019-03-23T22:33:20.853Z", + "Web/CSS/grid-auto-columns": { + "modified": "2020-10-15T22:07:00.570Z", "contributors": [ - "Grijander81" + "melisb3", + "robyirloreto" ] }, - "Web/API/Window/dialogArguments": { - "modified": "2019-03-23T22:33:21.065Z", + "Web/CSS/grid-auto-rows": { + "modified": "2020-10-15T22:00:41.266Z", "contributors": [ - "Grijander81" + "chulesoft", + "deimidis2" ] }, - "Web/API/Window/document": { - "modified": "2019-03-18T21:17:09.045Z", + "Web/CSS/grid-template-areas": { + "modified": "2019-03-23T22:11:49.454Z", "contributors": [ - "Grijander81" + "diroco" ] }, - "Web/API/Window/frameElement": { - "modified": "2019-03-23T22:33:19.039Z", + "Web/CSS/grid-template-columns": { + "modified": "2020-10-15T21:57:16.414Z", "contributors": [ - "edmon1024", - "Grijander81" + "fscholz", + "IsraelFloresDGA" ] }, - "Web/API/Window/fullScreen": { - "modified": "2019-03-23T23:50:19.968Z", + "Web/CSS/grid-template-rows": { + "modified": "2020-10-15T21:57:11.635Z", "contributors": [ - "SphinxKnight", + "AlePerez92", "fscholz", - "khalid32", - "HenryGR", - "Mgjbot" + "IsraelFloresDGA" ] }, - "Web/API/Window/getComputedStyle": { - "modified": "2019-03-23T23:58:07.622Z", + "Web/CSS/height": { + "modified": "2019-03-23T23:54:05.630Z", "contributors": [ - "fscholz", - "jsx", + "israel-munoz", "teoli", + "Mgjbot", + "Nathymig", "HenryGR" ] }, - "Web/API/Window/getSelection": { - "modified": "2019-09-18T11:51:48.070Z", + "Web/CSS/hyphens": { + "modified": "2020-10-15T22:02:23.515Z", "contributors": [ - "AlePerez92", - "LittleSanti", - "fscholz", - "Mgjbot", - "DR" + "blanchart", + "AntonioNavajasOjeda" ] }, - "Web/API/Window/hashchange_event": { - "modified": "2019-04-01T11:56:33.015Z", + "Web/CSS/image": { + "modified": "2019-03-23T22:28:08.883Z", "contributors": [ - "fscholz", - "ExE-Boss", - "jorgerenteral" + "israel-munoz" ] }, - "Web/API/Window/history": { - "modified": "2020-10-15T21:43:45.922Z", + "Web/CSS/image-rendering": { + "modified": "2020-10-15T22:02:06.401Z", "contributors": [ - "SphinxKnight", - "khrizenriquez" + "rodrigorila" ] }, - "Web/API/Window/innerHeight": { - "modified": "2020-07-23T18:50:37.998Z", + "Web/CSS/ime-mode": { + "modified": "2019-01-16T14:38:44.597Z", "contributors": [ - "dongerardor", - "alfredoWs" + "teoli", + "fscholz", + "Mgjbot", + "Nathymig", + "HenryGR" ] }, - "Web/API/Window/localStorage": { - "modified": "2019-06-04T06:54:12.078Z", + "Web/CSS/inherit": { + "modified": "2019-07-27T06:34:31.498Z", "contributors": [ - "taumartin", - "nazarioa", - "McSonk", - "faliure", - "tinchosrok", - "DragShot", - "ianaya89" + "josepaternina", + "AlejandroJSR7", + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Window/location": { - "modified": "2019-03-23T22:52:04.798Z", - "contributors": [ - "khrizenriquez", - "MaFranceschi" - ] - }, - "Web/API/Window/locationbar": { - "modified": "2019-03-23T22:16:35.650Z", - "contributors": [ - "ivannieto" - ] - }, - "Web/API/Window/matchMedia": { - "modified": "2020-10-15T21:54:30.059Z", + "Web/CSS/inheritance": { + "modified": "2019-03-23T23:53:04.499Z", "contributors": [ - "AlePerez92", - "tipoqueno", - "tavo379" + "joseanpg", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" ] }, - "Web/API/Window/menubar": { - "modified": "2019-03-23T22:33:13.331Z", + "Web/CSS/initial": { + "modified": "2019-01-16T15:42:24.130Z", "contributors": [ - "Grijander81" + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Window/moveBy": { - "modified": "2020-10-15T22:08:26.636Z", + "Web/CSS/inline-size": { + "modified": "2020-10-15T22:16:34.800Z", "contributors": [ - "pedrofmb" + "teffcode" ] }, - "Web/API/Window/navigator": { - "modified": "2019-03-23T23:20:37.914Z", + "Web/CSS/inset": { + "modified": "2020-10-15T22:16:40.193Z", "contributors": [ - "fscholz", - "khalid32", - "tpb" + "teffcode" ] }, - "Web/API/Window/offline_event": { - "modified": "2019-04-30T14:21:22.454Z", + "Web/CSS/inset-block": { + "modified": "2020-10-15T22:16:40.204Z", "contributors": [ - "wbamberg", - "irenesmith", - "Daniel-VQ" + "teffcode" ] }, - "Web/API/Window/open": { - "modified": "2020-04-13T14:31:02.220Z", + "Web/CSS/inset-block-end": { + "modified": "2020-10-15T22:16:39.037Z", "contributors": [ - "fj-ramirez", - "BubuAnabelas", - "jccharlie90", - "SphinxKnight", - "VictorAbdon", - "jjoselon" + "teffcode" ] }, - "Web/API/Window/opener": { - "modified": "2019-03-23T22:46:00.877Z", + "Web/CSS/inset-block-start": { + "modified": "2020-10-15T22:16:44.127Z", "contributors": [ - "carlosmunozrodriguez", - "f3rbarraza" + "teffcode" ] }, - "Web/API/Window/outerHeight": { - "modified": "2019-03-18T21:15:44.722Z", + "Web/CSS/inset-inline": { + "modified": "2020-10-15T22:16:43.251Z", "contributors": [ - "rlopezAyala", - "GianlucaBobbio" + "teffcode" ] }, - "Web/API/Window/outerWidth": { - "modified": "2019-03-23T22:04:23.293Z", + "Web/CSS/inset-inline-end": { + "modified": "2020-10-15T22:16:39.864Z", "contributors": [ - "shadairafael" + "teffcode" ] }, - "Web/API/Window/print": { - "modified": "2019-07-11T23:43:54.339Z", + "Web/CSS/inset-inline-start": { + "modified": "2020-10-15T22:16:43.418Z", "contributors": [ - "EstebanDalelR", - "ErikMj69" + "teffcode" ] }, - "Web/API/Window/prompt": { - "modified": "2019-03-23T22:20:58.413Z", + "Web/CSS/integer": { + "modified": "2019-03-23T23:50:21.071Z", "contributors": [ - "israel-munoz" + "fscholz", + "teoli", + "HenryGR", + "Mgjbot" ] }, - "Web/API/Window/requestAnimationFrame": { - "modified": "2020-07-05T08:38:54.640Z", + "Web/CSS/isolation": { + "modified": "2019-03-23T22:32:29.363Z", "contributors": [ - "AlePerez92", - "mauriciabad", - "fortil", - "andrpueb", - "fscholz", - "jbalsas" + "SoftwareRVG", + "javichito" ] }, - "Web/API/Window/requestIdleCallback": { - "modified": "2020-12-05T00:33:07.625Z", + "Web/CSS/justify-content": { + "modified": "2019-03-23T22:48:18.861Z", "contributors": [ - "gnunezr", - "jsolana" + "amaiafilo", + "angelfeliz", + "teoli", + "Sebastianz", + "JoaquinBedoian" ] }, - "Web/API/Window/scroll": { - "modified": "2020-10-15T21:54:58.717Z", + "Web/CSS/left": { + "modified": "2020-10-15T21:15:23.699Z", "contributors": [ - "AlePerez92", - "patoezequiel" + "SphinxKnight", + "miltonjosuerivascastro100", + "Sebastianz", + "teoli", + "ethertank", + "Mgjbot", + "fiorella", + "HenryGR" ] }, - "Web/API/Window/scrollBy": { - "modified": "2019-03-23T22:40:05.334Z", + "Web/CSS/length": { + "modified": "2019-03-23T23:54:15.791Z", "contributors": [ - "plaso", - "Bcd" + "israel-munoz", + "fscholz", + "teoli", + "deibyod", + "Mgjbot", + "HenryGR" ] }, - "Web/API/Window/scrollTo": { - "modified": "2019-03-23T22:05:41.259Z", + "Web/CSS/line-height": { + "modified": "2019-06-20T19:43:18.097Z", "contributors": [ - "gyroscopico" + "jalonnun", + "Daniel_Martin", + "wbamberg", + "IsaacAaron", + "SphinxKnight", + "garolard", + "teoli", + "Mgjbot", + "Nathymig", + "RickieesES", + "HenryGR" ] }, - "Web/API/Window/scrollX": { - "modified": "2019-03-18T21:15:11.745Z", + "Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:56:55.739Z", "contributors": [ - "Grijander81" + "chrisdavidmills", + "efrenmartinez", + "rgomez", + "Miguelslo27", + "Sebastianz", + "prayash", + "scarnagot" ] }, - "Web/API/Window/scrollY": { - "modified": "2019-03-23T22:53:30.651Z", + "Web/CSS/list-style": { + "modified": "2019-03-23T23:52:08.020Z", "contributors": [ - "MaFranceschi" + "SphinxKnight", + "teoli", + "Nathymig" ] }, - "Web/API/Window/sessionStorage": { - "modified": "2019-03-23T22:57:50.655Z", + "Web/CSS/list-style-image": { + "modified": "2019-03-23T23:52:12.640Z", "contributors": [ - "svera", - "pedromagnus", - "develasquez" + "SphinxKnight", + "teoli", + "Nathymig" ] }, - "Web/API/Window/showModalDialog": { - "modified": "2019-03-18T20:58:55.311Z", + "Web/CSS/list-style-position": { + "modified": "2019-03-23T23:52:11.106Z", "contributors": [ + "magdic", "SphinxKnight", - "BubuAnabelas", - "Grijander81" + "teoli", + "Nathymig" ] }, - "Web/API/Window/sidebar": { - "modified": "2019-03-23T22:02:56.395Z", + "Web/CSS/list-style-type": { + "modified": "2019-03-23T23:52:09.967Z", "contributors": [ - "IsaacSchemm" + "SphinxKnight", + "teoli", + "Nathymig", + "ethertank" ] }, - "Web/API/Window/statusbar": { - "modified": "2019-03-23T22:14:36.556Z", + "Web/CSS/margin": { + "modified": "2019-03-23T22:26:03.547Z", "contributors": [ - "UshioSan" + "Limbian" ] }, - "Web/API/WindowBase64": { - "modified": "2019-03-23T23:03:15.466Z", + "Web/CSS/margin-block": { + "modified": "2020-10-15T22:16:43.806Z", "contributors": [ - "teoli" + "mariadelrosario98", + "teffcode" ] }, - "Web/API/WindowBase64/Base64_codificando_y_decodificando": { - "modified": "2020-10-08T22:36:13.676Z", + "Web/CSS/margin-block-start": { + "modified": "2020-10-15T22:16:40.788Z", "contributors": [ - "kevinandresviedmanlopez", - "carloscasalar", - "Arukantara", - "sathyasanles" + "teffcode" ] }, - "Web/API/WindowBase64/atob": { - "modified": "2019-03-23T23:03:12.715Z", + "Web/CSS/margin-bottom": { + "modified": "2019-03-23T23:13:38.811Z", "contributors": [ + "wbamberg", + "Sebastianz", "fscholz", - "sathyasanles" + "damesa" ] }, - "Web/API/WindowEventHandlers": { - "modified": "2019-03-23T23:01:29.892Z", + "Web/CSS/margin-inline": { + "modified": "2020-10-15T22:16:41.777Z", "contributors": [ - "fscholz" + "karen-pal", + "teffcode" ] }, - "Web/API/WindowEventHandlers/onbeforeunload": { - "modified": "2019-03-23T23:22:06.132Z", + "Web/CSS/margin-inline-end": { + "modified": "2020-10-15T22:16:40.105Z", "contributors": [ - "fscholz", - "AshfaqHossain", - "jota1410" + "teffcode" ] }, - "Web/API/WindowEventHandlers/onhashchange": { - "modified": "2019-03-23T22:49:36.790Z", + "Web/CSS/margin-inline-start": { + "modified": "2020-10-15T22:16:38.735Z", "contributors": [ - "AlePerez92", - "daesnorey" + "teffcode" ] }, - "Web/API/WindowEventHandlers/onpopstate": { - "modified": "2020-10-15T22:19:35.746Z", + "Web/CSS/margin-right": { + "modified": "2019-03-23T23:54:10.369Z", "contributors": [ - "borxdev", - "jccuevas" + "teoli", + "Marti1125" ] }, - "Web/API/WindowOrWorkerGlobalScope": { - "modified": "2019-03-23T22:16:40.400Z", + "Web/CSS/max-block-size": { + "modified": "2020-10-15T22:16:39.543Z", "contributors": [ - "ivannieto", - "chrisdavidmills" + "teffcode" ] }, - "Web/API/WindowOrWorkerGlobalScope/caches": { - "modified": "2019-03-23T22:16:45.016Z", + "Web/CSS/max-height": { + "modified": "2019-03-23T23:52:01.295Z", "contributors": [ - "ivannieto" + "wbamberg", + "marc31bilbao", + "teoli", + "Mgjbot", + "Nathymig" ] }, - "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": { - "modified": "2020-10-15T22:14:17.553Z", + "Web/CSS/max-inline-size": { + "modified": "2020-10-15T22:16:37.228Z", "contributors": [ - "Bumxu" + "teffcode" ] }, - "Web/API/WindowOrWorkerGlobalScope/fetch": { - "modified": "2020-10-15T22:01:57.457Z", + "Web/CSS/max-width": { + "modified": "2020-10-15T21:16:38.209Z", "contributors": [ - "fscholz", - "jagomf" + "SphinxKnight", + "teoli", + "HenryGR", + "Mgjbot" ] }, - "Web/API/WindowOrWorkerGlobalScope/indexedDB": { - "modified": "2019-03-23T22:16:36.537Z", + "Web/CSS/min()": { + "modified": "2020-12-03T10:19:50.144Z", "contributors": [ - "ivannieto" + "AlePerez92", + "chrisdavidmills", + "meolivares06" ] }, - "Web/API/WindowOrWorkerGlobalScope/isSecureContext": { - "modified": "2019-03-23T22:16:45.834Z", + "Web/CSS/min-block-size": { + "modified": "2020-10-15T22:16:39.045Z", "contributors": [ - "ivannieto" + "teffcode" ] }, - "Web/API/WindowTimers": { - "modified": "2019-03-23T23:01:30.065Z", + "Web/CSS/min-height": { + "modified": "2019-03-23T23:51:59.533Z", "contributors": [ - "fscholz" + "wbamberg", + "Sebastianz", + "teoli", + "Nathymig" ] }, - "Web/API/WindowTimers/clearInterval": { - "modified": "2019-03-23T22:56:16.485Z", + "Web/CSS/min-inline-size": { + "modified": "2020-10-15T22:16:37.579Z", "contributors": [ - "Guitxo" + "teffcode" ] }, - "Web/API/WindowTimers/clearTimeout": { - "modified": "2019-06-18T10:20:27.972Z", + "Web/CSS/min-width": { + "modified": "2019-03-23T23:50:19.370Z", "contributors": [ - "AlePerez92", - "fscholz", - "basemnassar11", - "VictorArias" + "wbamberg", + "SphinxKnight", + "teoli", + "HenryGR", + "Mgjbot" ] }, - "Web/API/WindowTimers/setInterval": { - "modified": "2020-08-24T18:02:23.092Z", + "Web/CSS/minmax()": { + "modified": "2020-11-16T09:05:45.467Z", "contributors": [ - "mastertrooper", - "Makinita", - "Klius", - "claudionebbia" + "chrisdavidmills", + "jorgemontoyab" ] }, - "Web/API/WindowTimers/setTimeout": { - "modified": "2019-03-23T23:17:29.378Z", + "Web/CSS/number": { + "modified": "2019-03-23T23:53:45.345Z", "contributors": [ - "BubuAnabelas", - "vltamara", - "nauj27", "fscholz", - "AshfaqHossain", - "VictorArias" + "teoli", + "Mgjbot", + "HenryGR" ] }, - "Web/API/Worker": { - "modified": "2019-03-23T22:48:01.797Z", + "Web/CSS/object-fit": { + "modified": "2020-10-15T21:53:59.281Z", "contributors": [ - "benjroy" + "AlePerez92", + "BubuAnabelas", + "Cristhian-Medina", + "fernandozarco", + "chrisvpr", + "cristianeph" ] }, - "Web/API/Worker/postMessage": { - "modified": "2020-04-23T06:46:10.302Z", + "Web/CSS/object-position": { + "modified": "2019-03-23T22:31:02.066Z", "contributors": [ - "aguilahorus", - "cristyansv", - "mar777" + "thezeeck" ] }, - "Web/API/Worker/terminate": { - "modified": "2019-03-23T22:19:14.265Z", + "Web/CSS/opacity": { + "modified": "2019-08-20T11:36:11.809Z", "contributors": [ - "AzazelN28" + "Armando-Cruz", + "blanchart", + "Manten19", + "UlisesGascon", + "teoli" ] }, - "Web/API/XMLHttpRequest": { - "modified": "2019-05-02T19:52:03.482Z", + "Web/CSS/order": { + "modified": "2019-03-23T22:28:06.551Z", "contributors": [ - "wbamberg", - "Juvenal-yescas", - "ojgarciab", - "Sheppy", - "dgrcode", - "HadesDX", - "StripTM", - "mitogh", - "deimidis", - "Mgjbot", - "Jorolo" + "evaferreira", + "joshitobuba" ] }, - "Web/API/XMLHttpRequest/FormData": { - "modified": "2020-10-15T21:22:58.694Z", + "Web/CSS/outline": { + "modified": "2020-10-15T21:49:07.223Z", "contributors": [ - "AlePerez92", - "vladimirbat", - "alvaromorenomorales", - "ojgarciab", - "Sheppy", - "AngelFQC", - "wilo", - "marco_mucino" + "danielblazquez", + "IsaacAaron", + "israel-munoz" ] }, - "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": { - "modified": "2019-03-23T22:05:30.902Z", + "Web/CSS/outline-color": { + "modified": "2019-03-18T21:15:39.790Z", "contributors": [ - "Juvenal-yescas" + "israel-munoz" ] }, - "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { - "modified": "2020-03-17T04:09:47.273Z", + "Web/CSS/outline-offset": { + "modified": "2019-03-23T22:27:28.876Z", "contributors": [ - "jccuevas", - "camsa", - "david_ru", - "cesaruve", - "Sheppy", - "Sebastianz", - "iiegor", - "javierdp", - "bardackx", - "teoli", - "inma_610" + "israel-munoz" ] }, - "Web/API/XMLHttpRequest/abort": { - "modified": "2019-03-23T22:12:16.683Z", + "Web/CSS/outline-style": { + "modified": "2019-03-18T21:45:18.063Z", "contributors": [ - "Sheppy", - "todomagichere" + "israel-munoz" ] }, - "Web/API/XMLHttpRequest/onreadystatechange": { - "modified": "2019-03-23T22:20:14.868Z", + "Web/CSS/outline-width": { + "modified": "2019-03-18T21:16:50.488Z", "contributors": [ - "Sheppy", - "theUncanny" + "israel-munoz" ] }, - "Web/API/XMLHttpRequest/responseText": { - "modified": "2019-03-23T22:09:05.708Z", + "Web/CSS/overflow": { + "modified": "2020-10-15T21:22:11.063Z", "contributors": [ - "midnight25" + "manuelizo", + "SJW", + "marc-ferrer", + "developingo", + "Sebastianz", + "Sheppy", + "teoli", + "_0x" ] }, - "Web/API/XMLHttpRequest/timeout": { - "modified": "2020-10-15T22:26:49.508Z", + "Web/CSS/overflow-y": { + "modified": "2020-10-15T21:37:11.176Z", "contributors": [ - "mmednik" + "_deiberchacon", + "Silly-and_Clever", + "teoli", + "Sebastianz", + "yvesmh" ] }, - "Web/API/XMLHttpRequestEventTarget": { - "modified": "2020-10-15T22:26:08.879Z" + "Web/CSS/padding": { + "modified": "2020-07-02T20:44:00.780Z", + "contributors": [ + "kren.funes17", + "arielnoname", + "Sebastianz", + "fscholz", + "teoli", + "maiky" + ] }, - "Web/API/XMLHttpRequestEventTarget/onload": { - "modified": "2020-10-15T22:26:03.172Z", + "Web/CSS/padding-block": { + "modified": "2020-10-15T22:16:40.169Z", "contributors": [ - "Akafadam" + "teffcode" ] }, - "Web/API/console/assert": { - "modified": "2019-03-23T22:47:53.587Z", + "Web/CSS/padding-block-end": { + "modified": "2020-10-15T22:16:44.832Z", "contributors": [ - "Takumakun", - "AlePerez92", - "danycoro" + "teffcode" ] }, - "Web/API/notification": { - "modified": "2019-06-28T05:54:12.854Z", + "Web/CSS/padding-block-start": { + "modified": "2020-10-15T22:16:44.371Z", "contributors": [ - "paumoreno", - "hhcarmenate", - "RockLee-BC", - "francotalarico93", - "frossi933", - "Irvandoval", - "LuyisiMiger", - "fscholz", - "elfoxero" + "teffcode" ] }, - "Web/API/notification/body": { - "modified": "2019-03-23T22:59:34.974Z", + "Web/CSS/padding-bottom": { + "modified": "2019-03-23T22:12:06.885Z", "contributors": [ - "joxhker" + "qsanabria" ] }, - "Web/API/notification/dir": { - "modified": "2019-03-23T22:59:36.852Z", + "Web/CSS/padding-inline": { + "modified": "2020-10-15T22:16:45.046Z", "contributors": [ - "joxhker" + "teffcode" ] }, - "Web/API/notification/icon": { - "modified": "2019-03-23T22:59:32.492Z", + "Web/CSS/padding-inline-end": { + "modified": "2020-10-15T22:16:39.998Z", "contributors": [ - "joxhker" + "teffcode" ] }, - "Web/API/notification/onclick": { - "modified": "2019-03-23T22:11:55.774Z", + "Web/CSS/padding-inline-start": { + "modified": "2020-10-15T22:16:41.877Z", "contributors": [ - "AndresTonello" + "teffcode" ] }, - "Web/API/notification/permission": { - "modified": "2019-03-23T22:07:38.974Z", + "Web/CSS/padding-top": { + "modified": "2019-03-23T22:12:05.180Z", "contributors": [ - "alanmacgowan", - "IXTRUnai" + "qsanabria" ] }, - "Web/API/notification/requestPermission": { - "modified": "2019-03-23T22:50:37.341Z", + "Web/CSS/perspective": { + "modified": "2019-03-23T23:23:10.717Z", "contributors": [ - "MarkelCuesta", - "jezdez", - "Davdriver" + "Sebastianz", + "Prinz_Rana", + "fscholz", + "teoli", + "AngelFQC" ] }, - "Web/Accesibilidad": { - "modified": "2020-09-22T14:24:03.363Z", + "Web/CSS/position": { + "modified": "2020-10-15T21:15:59.180Z", "contributors": [ - "FranciscoImanolSuarez", - "Gummox", - "Mediavilladiezj", - "cisval", - "monserratcallejaalmazan", - "chmutoff", + "mollzilla", + "ismamz", + "mauriciopaterninar", + "phurtado1112", + "sejas", + "OttoChamo", + "plaso", + "Aleks07m", + "welm", + "SphinxKnight", + "CarmenCamacho", + "enriqueabsurdum", + "killoblanco", "teoli", - "DoctorRomi", "Mgjbot", - "Jorolo", - "Lowprofile", - "Wikier", - "Nukeador", - "Gonzobonzoo" + "HenryGR" ] }, - "Web/Accesibilidad/Comunidad": { - "modified": "2019-03-23T23:41:25.430Z", + "Web/CSS/quotes": { + "modified": "2020-10-15T21:46:00.335Z", "contributors": [ - "teoli", - "Jorolo" + "SJW", + "arroutado" ] }, - "Web/Accesibilidad/Understanding_WCAG": { - "modified": "2019-03-18T21:25:29.001Z", + "Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:09.252Z", "contributors": [ - "evaferreira" + "chrisdavidmills", + "hectorcano", + "israel-munoz" ] }, - "Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres": { - "modified": "2020-05-21T19:43:48.950Z", + "Web/CSS/repeat()": { + "modified": "2020-11-18T14:44:16.857Z", "contributors": [ - "giioaj", + "chrisdavidmills", + "CrlsMrls", "IsraelFloresDGA" ] }, - "Web/Accesibilidad/Understanding_WCAG/Perceivable": { - "modified": "2019-03-18T21:25:19.991Z", - "contributors": [ - "evaferreira" - ] - }, - "Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste": { - "modified": "2020-06-09T06:15:36.471Z", + "Web/CSS/resize": { + "modified": "2019-03-23T22:49:42.378Z", "contributors": [ - "11bits", - "apenab" + "SphinxKnight", + "Sebastianz", + "gonzalec" ] }, - "Web/Accesibilidad/Understanding_WCAG/Teclado": { - "modified": "2020-09-28T17:32:58.697Z", + "Web/CSS/resolved_value": { + "modified": "2019-03-23T22:16:57.498Z", "contributors": [ - "megatux", - "IsraelFloresDGA" + "israel-munoz" ] }, - "Web/Accessibility/ARIA": { - "modified": "2019-03-23T22:32:50.943Z", + "Web/CSS/right": { + "modified": "2019-03-24T00:13:54.957Z", "contributors": [ - "AlejandroC92", - "megatux", - "guumo", - "VNWK", - "imelenchon", - "teoli" + "wbamberg", + "SphinxKnight", + "Sebastianz", + "teoli", + "FredB", + "HenryGR", + "Mgjbot" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques": { - "modified": "2019-03-23T22:46:27.954Z", + "Web/CSS/scroll-behavior": { + "modified": "2019-03-23T22:07:41.439Z", "contributors": [ - "chrisdavidmills" + "pantuflo" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required": { - "modified": "2019-08-28T11:54:04.515Z", + "Web/CSS/specified_value": { + "modified": "2019-03-23T22:16:53.752Z", "contributors": [ - "IsraelFloresDGA", - "Karla_Glez" + "israel-munoz" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog": { - "modified": "2019-08-28T12:48:39.532Z", + "Web/CSS/text-decoration": { + "modified": "2019-03-23T22:21:38.548Z", "contributors": [ - "IsraelFloresDGA" + "fitojb", + "israel-munoz" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { - "modified": "2019-03-18T21:31:32.978Z", + "Web/CSS/text-decoration-color": { + "modified": "2019-03-23T22:27:00.164Z", "contributors": [ - "IsraelFloresDGA", - "mayrars" + "israel-munoz" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute": { - "modified": "2020-12-02T07:09:06.472Z", + "Web/CSS/text-decoration-line": { + "modified": "2020-10-15T21:49:07.335Z", "contributors": [ "AlePerez92", - "mitsurugi", - "fraboto", - "blanchart", - "ErikMj69", - "NelsonWF" + "israel-munoz" ] }, - "Web/Accessibility/ARIA/forms": { - "modified": "2020-08-13T01:50:29.740Z", + "Web/CSS/text-decoration-style": { + "modified": "2019-03-18T21:17:28.073Z", "contributors": [ - "Nachec", - "IsraelFloresDGA", - "malonson" + "JimP99", + "israel-munoz" ] }, - "Web/Accessibility/ARIA/forms/Etiquetas_complejas": { - "modified": "2019-11-27T15:16:55.571Z", + "Web/CSS/text-emphasis": { + "modified": "2019-03-23T22:09:46.786Z", "contributors": [ - "IsaacAaron", - "IsraelFloresDGA" + "studioArtbliss" ] }, - "Web/Accessibility/ARIA/forms/alertas": { - "modified": "2020-08-13T01:22:34.331Z", + "Web/CSS/text-emphasis-color": { + "modified": "2020-10-15T21:57:48.189Z", "contributors": [ - "Nachec" + "BubuAnabelas", + "mym2013" ] }, - "Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios": { - "modified": "2019-03-18T21:22:07.007Z", + "Web/CSS/text-orientation": { + "modified": "2020-10-15T22:02:16.878Z", "contributors": [ - "IsraelFloresDGA" + "MikeOrtizTrivino" ] }, - "Web/CSS": { - "modified": "2020-10-25T05:19:47.416Z", + "Web/CSS/text-overflow": { + "modified": "2020-10-15T21:59:14.245Z", "contributors": [ - "SphinxKnight", - "redondomoralesmelanny", - "Dolacres", - "boualidev", - "Enesimus", - "chrisdavidmills", - "NavetsArev", - "alazzuri", - "IsraelFloresDGA", - "lajaso", - "arturoblack", - "rogeliomtx", - "anecto", - "teoli", - "Luis_Calvo", - "alex_dm", - "ethertank", - "StripTM", - "inma_610", - "another_sam", - "fscholz", - "Wrongloop", - "Nathymig", - "Mgjbot", - "Nukeador", - "Jorolo", - "Lopez", - "Takenbot", - "Manu", - "Elrohir" + "davidelx", + "xpdv", + "plagasul", + "camilobuitrago" ] }, - "Web/CSS/--*": { - "modified": "2020-11-18T17:43:24.329Z", + "Web/CSS/text-shadow": { + "modified": "2019-03-23T22:27:32.186Z", "contributors": [ - "jemilionautoch" + "israel-munoz" ] }, - "Web/CSS/-moz-box-flex": { - "modified": "2019-03-23T22:36:18.128Z", + "Web/CSS/text-transform": { + "modified": "2019-10-10T16:32:05.528Z", "contributors": [ - "teoli", - "pekechis" + "Makinita", + "evaferreira", + "israel-munoz" ] }, - "Web/CSS/-moz-box-ordinal-group": { - "modified": "2019-03-23T22:36:12.257Z", + "Web/CSS/time": { + "modified": "2020-10-15T21:50:52.581Z", "contributors": [ - "pekechis" + "lajaso", + "israel-munoz" ] }, - "Web/CSS/-moz-box-pack": { - "modified": "2019-03-23T22:36:13.348Z", + "Web/CSS/top": { + "modified": "2020-07-29T21:08:45.361Z", "contributors": [ + "clancastor05", + "SphinxKnight", + "davidgg", + "solemoris", "teoli", - "pekechis" + "lcamacho", + "jaumesvdevelopers", + "HenryGR", + "Mgjbot" ] }, - "Web/CSS/-moz-cell": { - "modified": "2019-03-23T22:35:57.612Z", + "Web/CSS/transform": { + "modified": "2020-11-12T03:08:37.391Z", "contributors": [ - "pekechis" + "SphinxKnight", + "rolivo288", + "SoftwareRVG", + "Sebastianz", + "GersonLazaro", + "fscholz", + "bicentenario", + "Xaviju", + "teoli", + "limonada_prototype" ] }, - "Web/CSS/-moz-context-properties": { - "modified": "2020-10-15T22:13:14.061Z", + "Web/CSS/transform-function": { + "modified": "2019-03-23T23:10:41.562Z", "contributors": [ - "Adorta4" + "israel-munoz", + "mrstork", + "prayash", + "limbus" ] }, - "Web/CSS/-moz-float-edge": { - "modified": "2019-03-23T22:36:02.702Z", + "Web/CSS/transform-function/rotate()": { + "modified": "2020-11-19T16:05:17.901Z", "contributors": [ + "chrisdavidmills", + "danielblazquez", "pekechis" ] }, - "Web/CSS/-moz-font-language-override": { - "modified": "2019-03-23T23:13:49.521Z", + "Web/CSS/transform-function/rotate3d()": { + "modified": "2020-11-19T16:07:08.348Z", "contributors": [ - "martinezdario55" + "chrisdavidmills", + "jeronimonunez", + "jjyepez" ] }, - "Web/CSS/-moz-force-broken-image-icon": { - "modified": "2019-03-23T23:21:21.736Z", + "Web/CSS/transform-function/scale()": { + "modified": "2020-11-30T10:15:28.610Z", "contributors": [ - "Sebastianz", - "teoli", - "jota1410" + "chrisdavidmills", + "ileonpxsp", + "BubuAnabelas", + "lizbethrojano", + "yomar-dev", + "quiqueciria", + "maramal" ] }, - "Web/CSS/-moz-image-rect": { - "modified": "2019-03-23T22:35:59.460Z", + "Web/CSS/transform-function/translate()": { + "modified": "2020-11-30T10:30:15.561Z", "contributors": [ - "pekechis" + "chrisdavidmills", + "AlePerez92", + "hectoraldairah", + "Esteban26", + "murielsan", + "ShakMR" ] }, - "Web/CSS/-moz-image-region": { - "modified": "2019-03-23T22:35:58.872Z", + "Web/CSS/transform-function/translateY()": { + "modified": "2020-11-30T13:00:51.105Z", "contributors": [ - "pekechis" + "chrisdavidmills", + "israel-munoz" ] }, - "Web/CSS/-moz-orient": { - "modified": "2019-03-23T22:38:38.798Z", + "Web/CSS/transform-function/translateZ()": { + "modified": "2020-11-30T13:02:44.123Z", "contributors": [ - "teoli", - "anytameleiro" + "chrisdavidmills", + "luisdev-works" ] }, - "Web/CSS/-moz-outline-radius": { - "modified": "2019-03-23T22:35:49.017Z", + "Web/CSS/transform-origin": { + "modified": "2019-03-23T23:20:59.497Z", "contributors": [ - "BubuAnabelas", + "Sebastianz", + "fscholz", "teoli", - "Simplexible", - "Prinz_Rana", - "pekechis" + "limonada_prototype" ] }, - "Web/CSS/-moz-outline-radius-bottomleft": { - "modified": "2019-03-23T22:35:52.557Z", + "Web/CSS/transform-style": { + "modified": "2020-10-15T22:31:22.949Z", "contributors": [ - "pekechis" + "luisdev-works" ] }, - "Web/CSS/-moz-outline-radius-bottomright": { - "modified": "2019-03-23T22:35:53.397Z", + "Web/CSS/transition": { + "modified": "2019-03-23T22:53:01.094Z", "contributors": [ - "pekechis" + "FedericoMarmo", + "fscholz", + "adlr", + "Sebastianz", + "yvesmh" ] }, - "Web/CSS/-moz-outline-radius-topleft": { - "modified": "2019-03-23T22:35:51.509Z", + "Web/CSS/transition-delay": { + "modified": "2019-03-23T23:21:44.912Z", "contributors": [ - "pekechis" + "mrstork", + "fscholz", + "Sebastianz", + "teoli", + "alcuinodeyork" ] }, - "Web/CSS/-moz-outline-radius-topright": { - "modified": "2019-03-23T22:35:44.264Z", + "Web/CSS/transition-duration": { + "modified": "2020-10-15T22:27:34.821Z", "contributors": [ - "pekechis" + "luisafvaca" ] }, - "Web/CSS/-moz-user-focus": { - "modified": "2019-03-23T22:35:52.089Z", + "Web/CSS/transition-property": { + "modified": "2020-10-15T21:58:20.034Z", "contributors": [ - "teoli", - "pekechis" + "juan-ferrer-toribio" ] }, - "Web/CSS/-moz-user-input": { - "modified": "2019-03-23T22:35:52.458Z", + "Web/CSS/user-select": { + "modified": "2020-10-15T22:22:14.480Z", "contributors": [ - "pekechis" + "qwerty726" ] }, - "Web/CSS/-moz-user-modify": { - "modified": "2019-03-23T22:35:48.381Z", + "Web/CSS/var()": { + "modified": "2020-11-04T09:10:15.439Z", "contributors": [ - "teoli", - "pekechis" + "chrisdavidmills", + "jroji" ] }, - "Web/CSS/-webkit-border-before": { - "modified": "2019-03-23T22:35:46.245Z", + "Web/CSS/vertical-align": { + "modified": "2019-03-23T23:36:07.945Z", "contributors": [ + "Sebastianz", "teoli", - "pekechis" + "riledhel" ] }, - "Web/CSS/-webkit-box-reflect": { - "modified": "2019-03-23T22:35:45.474Z", + "Web/CSS/visibility": { + "modified": "2019-03-23T23:52:08.163Z", "contributors": [ + "wbamberg", "teoli", - "pekechis" + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/CSS/-webkit-mask": { - "modified": "2019-03-23T22:35:50.079Z", + "Web/CSS/white-space": { + "modified": "2019-06-12T21:57:59.855Z", "contributors": [ - "pekechis" + "jdaison", + "missmakita" ] }, - "Web/CSS/-webkit-mask-attachment": { - "modified": "2019-03-23T22:35:53.127Z", + "Web/CSS/widows": { + "modified": "2020-10-15T21:59:52.045Z", "contributors": [ - "pekechis" + "jpmontoya182" ] }, - "Web/CSS/-webkit-mask-box-image": { - "modified": "2019-03-23T22:35:44.795Z", + "Web/CSS/width": { + "modified": "2019-03-23T23:50:07.221Z", "contributors": [ - "Sebastianz", - "Prinz_Rana", - "pekechis" + "israel-munoz", + "diegocanal", + "teoli", + "HenryGR", + "Mgjbot" ] }, - "Web/CSS/-webkit-mask-clip": { - "modified": "2019-03-23T22:35:47.057Z", + "Web/CSS/writing-mode": { + "modified": "2019-03-23T22:28:35.899Z", "contributors": [ - "pekechis" + "fitojb" ] }, - "Web/CSS/-webkit-mask-composite": { - "modified": "2019-03-23T22:35:49.602Z", + "Web/CSS/z-index": { + "modified": "2020-03-20T18:20:08.966Z", "contributors": [ - "pekechis" + "camsa", + "javichito", + "teoli", + "AntonioNavajas" ] }, - "Web/CSS/-webkit-mask-image": { - "modified": "2019-03-23T22:35:45.973Z", + "Web/CSS/zoom": { + "modified": "2019-03-23T22:35:36.401Z", "contributors": [ - "hectorcano", + "carloque", + "Sebastianz", "pekechis" ] }, - "Web/CSS/-webkit-mask-origin": { - "modified": "2019-03-23T22:35:46.533Z", + "Web/Demos_of_open_web_technologies": { + "modified": "2019-03-23T22:33:45.097Z", "contributors": [ - "pekechis" + "SoftwareRVG", + "elfoxero" ] }, - "Web/CSS/-webkit-mask-position": { - "modified": "2019-03-23T22:38:37.922Z", + "Web/EXSLT": { + "modified": "2019-03-18T20:59:19.473Z", "contributors": [ - "teoli", - "Simplexible", - "Prinz_Rana", - "pekechis", - "Kuiki" + "SphinxKnight", + "ExE-Boss", + "Mgjbot", + "Talisker" ] }, - "Web/CSS/-webkit-mask-position-x": { - "modified": "2019-03-23T22:34:17.919Z", + "Web/EXSLT/exsl": { + "modified": "2019-01-16T15:21:39.795Z", "contributors": [ + "ExE-Boss", "teoli", - "pekechis" + "Anonymous" ] }, - "Web/CSS/-webkit-mask-position-y": { - "modified": "2019-03-23T22:34:11.674Z", + "Web/EXSLT/exsl/node-set": { + "modified": "2019-03-18T20:59:21.647Z", "contributors": [ - "teoli", - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Mgjbot", + "Talisker" ] }, - "Web/CSS/-webkit-mask-repeat": { - "modified": "2019-03-23T22:35:46.401Z", + "Web/EXSLT/exsl/object-type": { + "modified": "2019-03-23T23:51:27.324Z", "contributors": [ - "pekechis" + "ExE-Boss", + "lajaso", + "Mgjbot", + "Talisker" ] }, - "Web/CSS/-webkit-mask-repeat-x": { - "modified": "2019-03-23T22:34:04.348Z", + "Web/EXSLT/math": { + "modified": "2019-01-16T15:25:29.279Z", "contributors": [ - "pekechis" + "ExE-Boss", + "teoli", + "Anonymous" ] }, - "Web/CSS/-webkit-mask-repeat-y": { - "modified": "2019-03-23T22:34:06.535Z", + "Web/EXSLT/math/highest": { + "modified": "2019-03-18T20:59:18.500Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Mgjbot", + "Talisker" ] }, - "Web/CSS/-webkit-overflow-scrolling": { - "modified": "2020-10-15T21:44:50.401Z", + "Web/EXSLT/math/lowest": { + "modified": "2019-03-18T20:59:17.805Z", "contributors": [ - "AlePerez92", - "teoli", - "natav", - "pekechis" + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Mgjbot", + "Talisker" ] }, - "Web/CSS/-webkit-print-color-adjust": { - "modified": "2019-03-23T22:35:50.908Z", + "Web/EXSLT/math/max": { + "modified": "2019-03-18T20:59:18.804Z", "contributors": [ - "teoli", - "pekechis" + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Talisker" ] }, - "Web/CSS/-webkit-tap-highlight-color": { - "modified": "2019-03-23T22:35:33.059Z", + "Web/EXSLT/math/min": { + "modified": "2019-03-18T20:59:20.254Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Talisker" ] }, - "Web/CSS/-webkit-text-fill-color": { - "modified": "2019-03-23T22:35:41.363Z", + "Web/EXSLT/regexp": { + "modified": "2019-01-16T15:23:22.952Z", "contributors": [ - "pekechis" + "ExE-Boss", + "teoli", + "Anonymous" ] }, - "Web/CSS/-webkit-text-stroke": { - "modified": "2020-11-09T04:49:08.502Z", + "Web/EXSLT/regexp/match": { + "modified": "2019-03-18T20:59:21.504Z", "contributors": [ - "sideshowbarker", - "codingdudecom", - "NachoNav", - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/-webkit-text-stroke-color": { - "modified": "2019-03-23T22:35:34.688Z", + "Web/EXSLT/regexp/replace": { + "modified": "2019-03-18T20:59:20.093Z", "contributors": [ - "teoli", - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/-webkit-text-stroke-width": { - "modified": "2019-03-23T22:35:36.221Z", + "Web/EXSLT/regexp/test": { + "modified": "2019-03-18T20:59:20.575Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/-webkit-touch-callout": { - "modified": "2019-03-23T22:35:37.578Z", + "Web/EXSLT/set": { + "modified": "2019-01-16T15:23:27.004Z", "contributors": [ + "ExE-Boss", "teoli", - "rankill", - "pekechis" + "Anonymous" ] }, - "Web/CSS/:-moz-broken": { - "modified": "2019-03-23T22:34:12.269Z", + "Web/EXSLT/set/difference": { + "modified": "2019-03-18T20:59:18.953Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-drag-over": { - "modified": "2019-03-23T22:34:06.375Z", + "Web/EXSLT/set/distinct": { + "modified": "2019-03-18T20:59:22.067Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-first-node": { - "modified": "2019-03-23T22:34:12.741Z", + "Web/EXSLT/set/has-same-node": { + "modified": "2019-03-18T20:59:20.421Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-focusring": { - "modified": "2019-03-23T22:34:12.588Z", + "Web/EXSLT/set/intersection": { + "modified": "2019-03-18T20:59:18.660Z", "contributors": [ - "teoli", - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-handler-blocked": { - "modified": "2019-03-23T22:33:34.259Z", + "Web/EXSLT/set/leading": { + "modified": "2019-03-18T20:59:17.662Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "teoli", + "Talisker" ] }, - "Web/CSS/:-moz-handler-crashed": { - "modified": "2019-03-23T22:33:27.000Z", + "Web/EXSLT/set/trailing": { + "modified": "2019-03-18T20:59:19.267Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "teoli", + "Talisker" ] }, - "Web/CSS/:-moz-handler-disabled": { - "modified": "2019-03-23T22:33:35.339Z", + "Web/EXSLT/str": { + "modified": "2019-01-16T15:24:51.477Z", "contributors": [ - "pekechis" + "ExE-Boss", + "teoli", + "Anonymous" ] }, - "Web/CSS/:-moz-last-node": { - "modified": "2019-03-18T21:15:45.566Z", + "Web/EXSLT/str/concat": { + "modified": "2019-03-18T20:59:20.717Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-list-bullet": { - "modified": "2019-03-23T22:29:23.137Z", + "Web/EXSLT/str/split": { + "modified": "2019-03-18T20:59:17.504Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-list-number": { - "modified": "2019-03-23T22:29:22.603Z", + "Web/EXSLT/str/tokenize": { + "modified": "2019-03-18T20:59:19.116Z", "contributors": [ - "pekechis" + "SphinxKnight", + "ExE-Boss", + "Talisker" ] }, - "Web/CSS/:-moz-loading": { - "modified": "2019-03-23T22:33:38.436Z", + "Web/Events": { + "modified": "2019-03-23T23:21:27.399Z", "contributors": [ - "pekechis" + "ExE-Boss", + "wbamberg", + "gabo8611" ] }, - "Web/CSS/:-moz-locale-dir(ltr)": { - "modified": "2019-03-23T22:33:43.908Z", + "Web/Guide": { + "modified": "2019-07-18T20:35:32.528Z", "contributors": [ - "pekechis" + "clarii", + "D3Portillo", + "Breaking Pitt", + "VictorAbdon", + "n2nand", + "Puchoti", + "DrTrucho", + "DanielCarron", + "daroswing", + "osodi", + "LeoHirsch", + "hjaguen", + "ethertank", + "Sheppy" ] }, - "Web/CSS/:-moz-locale-dir(rtl)": { - "modified": "2019-03-23T22:33:44.356Z", + "Web/Guide/AJAX": { + "modified": "2019-03-18T21:14:54.246Z", "contributors": [ - "pekechis" + "AlePerez92", + "chrisdavidmills", + "ccarruitero", + "chukito", + "Mgjbot", + "Nukeador", + "Summit677", + "Pascalc", + "Jorolo", + "Marianov", + "Takenbot", + "Baluart", + "Breaking Pitt", + "Seres" ] }, - "Web/CSS/:-moz-only-whitespace": { - "modified": "2019-03-23T22:33:33.786Z", + "Web/Guide/API": { + "modified": "2019-09-11T09:31:45.916Z", "contributors": [ - "pekechis" + "SphinxKnight", + "VictorAbdon", + "Sheppy" ] }, - "Web/CSS/:-moz-placeholder": { - "modified": "2019-03-23T22:33:30.015Z", + "Web/Guide/CSS/Block_formatting_context": { + "modified": "2019-03-23T22:32:27.340Z", "contributors": [ - "teoli", - "pekechis" + "Enesimus", + "javichito" ] }, - "Web/CSS/:-moz-submit-invalid": { - "modified": "2019-03-23T22:33:36.639Z", + "Web/Guide/Graphics": { + "modified": "2020-05-19T14:31:25.384Z", "contributors": [ - "pekechis" + ".bkjop0", + "lassergraf", + "CarlosEduardoEncinas", + "pescadito.2007", + "rogeliomtx", + "CarlosQuijano", + "lalo2013" ] }, - "Web/CSS/:-moz-suppressed": { - "modified": "2019-03-23T22:33:37.212Z", + "Web/Guide/HTML/Editable_content": { + "modified": "2019-03-23T22:09:49.599Z", "contributors": [ - "pekechis" + "vinyetcg", + "JoaquinGiordano", + "V.Morantes" ] }, - "Web/CSS/:-moz-ui-invalid": { - "modified": "2019-03-23T22:30:48.940Z", + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2019-03-23T22:10:22.365Z", "contributors": [ - "teoli", - "pekechis" + "FenixAlive" ] }, - "Web/CSS/:-moz-ui-valid": { - "modified": "2019-03-23T22:29:23.305Z", + "Web/Guide/Performance": { + "modified": "2019-03-23T23:21:17.984Z", "contributors": [ - "teoli", - "pekechis" + "DeiberChacon", + "Sheppy" ] }, - "Web/CSS/:-moz-user-disabled": { - "modified": "2019-03-23T22:30:53.713Z", + "Web/HTML": { + "modified": "2020-12-10T12:38:08.697Z", "contributors": [ - "pekechis" + "ojgarciab", + "SphinxKnight", + "cesarmerino.ec71", + "barriosines07", + "Nachec", + "Enesimus", + "Neto503", + "hackertj", + "chrisdavidmills", + "blanchart", + "roocce", + "titox", + "donpaginasweboficial", + "Kenikser", + "RayPL", + "YeseniaMariela", + "gabriel-ar", + "PabloLajarin", + "JoseBarakat", + "raecillacastellana", + "israel-munoz", + "jsx", + "Hteemo", + "eduMXM", + "enesimo", + "MARVINFLORENTINO", + "pekechis", + "monserratcallejaalmazan", + "thzunder", + "roheru", + "vltamara", + "ArcangelZith", + "ronyworld", + "LeoHirsch", + "CarlosQuijano", + "AngelFQC" ] }, - "Web/CSS/:-moz-window-inactive": { - "modified": "2019-03-23T22:30:43.777Z", + "Web/HTML/Block-level_elements": { + "modified": "2019-03-18T20:44:10.775Z", "contributors": [ + "ManuelPalominochirote", + "raecillacastellana", + "dinael", + "pekechis", + "erdavo", + "vltamara", "teoli", - "pekechis" + "MILTON.AGUILAR" ] }, - "Web/CSS/:-ms-input-placeholder": { - "modified": "2019-03-23T22:29:24.542Z", + "Web/HTML/Quirks_Mode_and_Standards_Mode": { + "modified": "2019-03-23T22:00:35.023Z", "contributors": [ - "teoli", - "pekechis" + "chrisdavidmills", + "alvaromontoro", + "mamptecnocrata", + "ungatoquecomesushi" ] }, - "Web/CSS/:-webkit-autofill": { - "modified": "2019-03-23T22:29:31.809Z", + "Web/HTTP": { + "modified": "2019-03-18T20:34:58.542Z", "contributors": [ - "teoli", - "pekechis" + "IsraelFloresDGA", + "MarioECU", + "locolauty97", + "Sergio_Gonzalez_Collado", + "Ferrmolina", + "raecillacastellana", + "migdonio1", + "Erto", + "teoli" ] }, - "Web/CSS/::-moz-color-swatch": { - "modified": "2020-10-15T22:13:15.247Z", + "Web/HTTP/Authentication": { + "modified": "2019-10-24T13:52:25.126Z", "contributors": [ - "Adorta4" + "bood-dev", + "Gochip", + "fcanellas", + "diegorec", + "kraneok", + "JuanMacias", + "_deiberchacon", + "DavidPeniafiel" ] }, - "Web/CSS/::-moz-page": { - "modified": "2019-03-23T22:29:23.000Z", + "Web/HTTP/Basics_of_HTTP": { + "modified": "2020-04-20T02:59:31.392Z", "contributors": [ - "teoli", - "pekechis" + "obed3113", + "sanxofon", + "Sergio_Gonzalez_Collado", + "cissoid" ] }, - "Web/CSS/::-moz-page-sequence": { - "modified": "2019-03-23T22:29:18.734Z", + "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": { + "modified": "2019-03-18T21:22:07.450Z", "contributors": [ - "teoli", - "pekechis" + "Adorta4", + "carlosgocereceda" ] }, - "Web/CSS/::-moz-placeholder": { - "modified": "2019-03-23T22:29:22.118Z", + "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { + "modified": "2019-03-23T22:10:11.567Z", "contributors": [ - "teoli", - "pekechis" + "Sergio_Gonzalez_Collado", + "ChrisMHM" ] }, - "Web/CSS/::-moz-progress-bar": { - "modified": "2019-03-23T22:29:21.640Z", + "Web/HTTP/Basics_of_HTTP/MIME_types": { + "modified": "2019-11-18T08:03:54.325Z", "contributors": [ - "lajaso", - "pekechis" + "IsaacAaron", + "sanxofon", + "Sergio_Gonzalez_Collado", + "kevinmont", + "juanrarodriguez18", + "strattadb" ] }, - "Web/CSS/::-moz-range-progress": { - "modified": "2019-03-23T22:28:49.325Z", + "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { + "modified": "2020-02-28T13:10:45.613Z", "contributors": [ - "teoli", - "pekechis" + "chrisdavidmills", + "sanxofon", + "franklevel", + "gabrielnoe" ] }, - "Web/CSS/::-moz-range-thumb": { - "modified": "2019-03-23T22:28:56.558Z", + "Web/HTTP/CORS/Errors": { + "modified": "2019-03-18T21:26:43.815Z", "contributors": [ - "teoli", - "pekechis" + "nchevobbe" ] }, - "Web/CSS/::-moz-range-track": { - "modified": "2019-03-23T22:27:41.835Z", + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2020-03-20T09:22:59.137Z", "contributors": [ - "teoli", - "pekechis" + "javier.camus", + "rotcl", + "MarianoRDZ" ] }, - "Web/CSS/::-moz-scrolled-page-sequence": { - "modified": "2019-03-23T22:27:47.385Z", + "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { + "modified": "2020-03-10T05:27:13.697Z", "contributors": [ - "teoli", - "pekechis" + "HermosinNunez", + "danhiel98", + "pyumbillo", + "rewin23" ] }, - "Web/CSS/::-webkit-file-upload-button": { - "modified": "2019-03-18T21:21:36.190Z", + "Web/HTTP/CORS/Errors/CORSNotSupportingCredentials": { + "modified": "2020-03-25T19:41:08.379Z", "contributors": [ - "teoli", - "pekechis" + "pablogalvezfotografiadeportiva" ] }, - "Web/CSS/::-webkit-inner-spin-button": { - "modified": "2019-03-18T21:17:13.569Z", + "Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed": { + "modified": "2019-10-08T04:58:57.176Z", "contributors": [ - "teoli", - "pekechis" + "Concatenacion" ] }, - "Web/CSS/::-webkit-input-placeholder": { - "modified": "2019-03-18T21:16:20.006Z", + "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { + "modified": "2020-07-09T00:32:19.159Z", "contributors": [ - "teoli", - "pekechis" + "agf0710", + "advica2016", + "BubuAnabelas", + "Juan_Pablo" ] }, - "Web/CSS/::-webkit-meter-bar": { - "modified": "2019-03-23T22:27:21.551Z", + "Web/HTTP/CSP": { + "modified": "2020-10-15T22:03:58.031Z", "contributors": [ - "teoli", - "pekechis" + "lautaropaske", + "herleym", + "BubuAnabelas", + "vk496", + "CarlosRomeroVera" ] }, - "Web/CSS/::-webkit-meter-even-less-good-value": { - "modified": "2019-03-18T21:15:16.586Z", + "Web/HTTP/Caching": { + "modified": "2019-03-18T21:21:15.259Z", "contributors": [ - "teoli", - "pekechis" + "WilsonIsAliveClone", + "serarroy", + "ulisestrujillo" ] }, - "Web/CSS/::-webkit-meter-inner-element": { - "modified": "2019-03-23T22:27:02.054Z", + "Web/HTTP/Cookies": { + "modified": "2020-06-27T19:11:54.360Z", "contributors": [ - "teoli", - "pekechis" + "vinjatovix", + "SphinxKnight", + "g.baldemar.77", + "alexlndn", + "rayrojas", + "jesuscampos", + "nachoperassi", + "cguimaraenz", + "eortizromero", + "omertafox" ] }, - "Web/CSS/::-webkit-meter-optimum-value": { - "modified": "2019-03-23T22:27:09.428Z", + "Web/HTTP/Headers": { + "modified": "2019-12-10T13:29:15.931Z", "contributors": [ - "teoli", - "pekechis" + "OneLoneFox", + "hamethassaf", + "darianbenito", + "MrcRjs", + "Watermelonnable", + "JurgenBlitz", + "ampersand89", + "fjuarez", + "fscholz" ] }, - "Web/CSS/::-webkit-meter-suboptimum-value": { - "modified": "2019-03-23T22:27:08.613Z", + "Web/HTTP/Headers/Accept": { + "modified": "2020-10-15T21:55:42.853Z", "contributors": [ - "teoli", - "pekechis" + "gabriel-ar" ] }, - "Web/CSS/::-webkit-outer-spin-button": { - "modified": "2019-03-23T22:27:04.174Z", - "contributors": [ - "teoli", - "pekechis" - ] - }, - "Web/CSS/::-webkit-progress-bar": { - "modified": "2019-03-23T22:26:48.592Z", - "contributors": [ - "teoli", - "pekechis" - ] - }, - "Web/CSS/::-webkit-progress-inner-element": { - "modified": "2019-03-23T22:27:11.051Z", + "Web/HTTP/Headers/Accept-Charset": { + "modified": "2020-10-15T22:13:56.858Z", "contributors": [ - "teoli", - "pekechis" + "ArnoldFZ" ] }, - "Web/CSS/::-webkit-progress-value": { - "modified": "2019-03-23T22:26:54.483Z", + "Web/HTTP/Headers/Accept-Ranges": { + "modified": "2020-10-15T21:52:24.088Z", "contributors": [ - "teoli", - "pekechis" + "gerardo1sanchez" ] }, - "Web/CSS/::-webkit-scrollbar": { - "modified": "2019-03-23T22:26:50.519Z", + "Web/HTTP/Headers/Access-Control-Allow-Credentials": { + "modified": "2020-10-15T22:29:00.518Z", "contributors": [ - "pekechis" + "BubuAnabelas", + "IsraelFloresDGA" ] }, - "Web/CSS/::-webkit-slider-runnable-track": { - "modified": "2019-03-23T22:26:41.971Z", + "Web/HTTP/Headers/Access-Control-Allow-Headers": { + "modified": "2020-10-15T22:07:25.027Z", "contributors": [ - "teoli", - "pekechis" + "_deiberchacon" ] }, - "Web/CSS/::-webkit-slider-thumb": { - "modified": "2019-03-23T22:26:41.006Z", + "Web/HTTP/Headers/Access-Control-Allow-Methods": { + "modified": "2020-10-15T21:54:50.843Z", "contributors": [ - "teoli", - "pekechis" + "irsequisious" ] }, - "Web/CSS/::after": { - "modified": "2020-10-15T21:15:55.871Z", + "Web/HTTP/Headers/Access-Control-Allow-Origin": { + "modified": "2020-10-15T21:56:44.483Z", "contributors": [ - "JFOG", + "estrelow", "IsraelFloresDGA", - "israel-munoz", - "Lorenzoygata", - "teoli", - "Nathymig" + "aranzuze35", + "_deiberchacon", + "anxobotana", + "JhonAguiar" ] }, - "Web/CSS/::backdrop": { - "modified": "2019-03-23T22:30:49.892Z", + "Web/HTTP/Headers/Access-Control-Expose-Headers": { + "modified": "2020-10-15T22:06:29.086Z", "contributors": [ - "pekechis" + "jorgeCaster", + "kraneok" ] }, - "Web/CSS/::before": { - "modified": "2020-11-24T07:28:22.113Z", + "Web/HTTP/Headers/Age": { + "modified": "2020-10-15T22:10:53.345Z", "contributors": [ - "chrisdavidmills", - "maketas", - "IsraelFloresDGA", - "israel-munoz", - "Yisus777", - "teoli", - "Nathymig" + "0xCGonzalo" ] }, - "Web/CSS/::cue": { - "modified": "2020-10-15T22:33:08.581Z", + "Web/HTTP/Headers/Allow": { + "modified": "2019-03-18T21:23:10.971Z", "contributors": [ - "Pablo-No" + "ogaston" ] }, - "Web/CSS/::first-letter": { - "modified": "2020-10-15T22:24:50.087Z", + "Web/HTTP/Headers/Authorization": { + "modified": "2019-03-18T21:34:28.554Z", "contributors": [ - "Plumas", - "adrymrtnz" + "kraneok", + "Watermelonnable" ] }, - "Web/CSS/::first-line": { - "modified": "2020-10-15T22:24:51.827Z", + "Web/HTTP/Headers/Cache-Control": { + "modified": "2020-10-28T14:39:35.644Z", "contributors": [ - "Plumas", - "ivanenoriega", - "adrymrtnz" + "noksenberg", + "IsraelFloresDGA", + "ervin_santos" ] }, - "Web/CSS/::marker": { - "modified": "2020-10-15T22:22:16.686Z", + "Web/HTTP/Headers/Content-Disposition": { + "modified": "2020-10-15T21:58:39.489Z", "contributors": [ - "qwerty726" + "kbono", + "lagwy" ] }, - "Web/CSS/::placeholder": { - "modified": "2020-10-15T22:26:50.005Z", + "Web/HTTP/Headers/Content-Encoding": { + "modified": "2020-10-15T21:53:14.848Z", "contributors": [ - "IsraelFloresDGA" + "IT-Rafa", + "sevillacode" ] }, - "Web/CSS/::selection": { - "modified": "2019-03-23T23:33:09.211Z", + "Web/HTTP/Headers/Content-Length": { + "modified": "2020-10-15T22:07:26.889Z", "contributors": [ - "canobius", - "arroutado", - "jesu_abner", - "teoli", - "pepeheron" + "aliciava00", + "efrencruz" ] }, - "Web/CSS/::spelling-error": { - "modified": "2020-10-15T22:03:59.841Z", + "Web/HTTP/Headers/Content-Location": { + "modified": "2020-10-15T22:29:48.071Z", "contributors": [ - "lajaso" + "hecmonter" ] }, - "Web/CSS/:active": { - "modified": "2020-10-15T21:21:49.325Z", + "Web/HTTP/Headers/Content-Security-Policy": { + "modified": "2020-10-15T22:18:45.176Z", "contributors": [ - "pollirrata", - "lajaso", - "teoli", - "MrBlogger" + "rayrojas", + "mauril26", + "27z" ] }, - "Web/CSS/:any": { - "modified": "2019-03-23T22:17:18.601Z", + "Web/HTTP/Headers/Content-Type": { + "modified": "2020-10-15T21:58:35.257Z", "contributors": [ - "israel-munoz" + "ivanfretes", + "omertafox", + "ValeriaRamos" ] }, - "Web/CSS/:any-link": { - "modified": "2020-10-15T21:52:30.387Z", + "Web/HTTP/Headers/Cookie": { + "modified": "2020-10-15T21:55:41.792Z", "contributors": [ - "JFOG", - "lajaso", - "israel-munoz" + "SSantiago90" ] }, - "Web/CSS/:blank": { - "modified": "2020-10-15T22:26:47.961Z", + "Web/HTTP/Headers/Cross-Origin-Resource-Policy": { + "modified": "2020-10-15T22:29:00.325Z", "contributors": [ "IsraelFloresDGA" ] }, - "Web/CSS/:checked": { - "modified": "2020-10-15T21:32:04.510Z", + "Web/HTTP/Headers/ETag": { + "modified": "2020-10-15T21:57:09.273Z", "contributors": [ - "lajaso", - "zxhadow" + "zechworld", + "evalenzuela", + "stwilberth", + "edgarrod71" ] }, - "Web/CSS/:default": { - "modified": "2020-10-15T21:15:24.516Z", + "Web/HTTP/Headers/Expires": { + "modified": "2020-10-15T21:56:44.738Z", "contributors": [ - "lajaso", - "teoli", - "Mgjbot", - "Nathymig", - "HenryGR" + "ernesto.palafox" ] }, - "Web/CSS/:defined": { - "modified": "2020-10-15T22:03:59.600Z", + "Web/HTTP/Headers/Host": { + "modified": "2020-10-15T22:24:56.306Z", "contributors": [ - "JFOG", - "lajaso" + "escatel.bernal10", + "Alvarito-056" ] }, - "Web/CSS/:dir": { - "modified": "2020-10-15T21:44:46.376Z", + "Web/HTTP/Headers/Keep-Alive": { + "modified": "2020-10-15T22:02:52.123Z", "contributors": [ - "lajaso", - "pekechis" + "fernomenoide" ] }, - "Web/CSS/:disabled": { - "modified": "2020-10-15T21:43:53.936Z", + "Web/HTTP/Headers/Link": { + "modified": "2020-10-15T22:28:59.441Z", "contributors": [ - "lajaso", - "pekechis" + "threevanny" ] }, - "Web/CSS/:empty": { - "modified": "2020-10-15T21:16:01.534Z", + "Web/HTTP/Headers/Origin": { + "modified": "2020-10-15T22:00:47.248Z", "contributors": [ "IsraelFloresDGA", - "lajaso", - "teoli", - "Nathymig" + "Abelhg" ] }, - "Web/CSS/:enabled": { - "modified": "2020-10-15T21:44:29.292Z", + "Web/HTTP/Headers/Pragma": { + "modified": "2020-10-15T22:09:54.700Z", "contributors": [ - "lajaso", - "pekechis" + "ervin_santos" ] }, - "Web/CSS/:first": { - "modified": "2020-10-15T21:43:42.281Z", + "Web/HTTP/Headers/Referer": { + "modified": "2020-10-15T21:53:10.093Z", "contributors": [ - "lajaso", - "pekechis" + "LastCyborg", + "fitojb", + "UltimoOrejonDelTarro" ] }, - "Web/CSS/:first-child": { - "modified": "2020-10-15T21:19:55.452Z", + "Web/HTTP/Headers/Referrer-Policy": { + "modified": "2020-10-15T22:01:34.403Z", "contributors": [ - "lajaso", - "teoli", - "percy@mozilla.pe", - "jsalinas" + "fitojb" ] }, - "Web/CSS/:first-of-type": { - "modified": "2020-10-15T21:44:49.790Z", + "Web/HTTP/Headers/Server": { + "modified": "2020-10-15T21:55:40.335Z", "contributors": [ - "lajaso", - "pekechis" + "sevillacode", + "TheSgtPepper23", + "irsequisious" ] }, - "Web/CSS/:focus": { - "modified": "2020-10-15T21:43:30.779Z", + "Web/HTTP/Headers/Set-Cookie": { + "modified": "2020-10-26T12:24:29.884Z", "contributors": [ - "evaferreira", - "lajaso", - "pekechis" + "ignacio-ifm", + "IsraelFloresDGA", + "rayrojas", + "ramonserrano", + "garolard" ] }, - "Web/CSS/:focus-visible": { - "modified": "2020-10-15T22:33:54.482Z", + "Web/HTTP/Headers/Strict-Transport-Security": { + "modified": "2020-10-15T21:54:14.546Z", "contributors": [ - "arauz.gus" + "AmadPS", + "pipe01", + "heilop", + "JulianSoto", + "pablolopezmera", + "Oxicode" ] }, - "Web/CSS/:focus-within": { - "modified": "2020-12-03T05:40:25.197Z", + "Web/HTTP/Headers/Transfer-Encoding": { + "modified": "2020-10-15T22:24:54.193Z", "contributors": [ - "AlePerez92", - "carlosviteri", - "lajaso", - "AntonioNavajasOjeda" + "0xCGonzalo" ] }, - "Web/CSS/:fullscreen": { - "modified": "2020-10-15T21:51:48.377Z", + "Web/HTTP/Headers/User-Agent": { + "modified": "2020-10-15T22:00:44.883Z", "contributors": [ - "lajaso", - "israel-munoz" + "LeoOliva", + "Imvi10" ] }, - "Web/CSS/:has": { - "modified": "2019-03-23T22:36:22.444Z", + "Web/HTTP/Headers/Vary": { + "modified": "2020-10-15T21:56:44.020Z", "contributors": [ - "pekechis" + "JhonAguiar" ] }, - "Web/CSS/:host": { - "modified": "2020-10-15T22:04:25.470Z", + "Web/HTTP/Headers/WWW-Authenticate": { + "modified": "2020-10-15T22:19:30.337Z", "contributors": [ - "rhssr", - "lajaso" + "malonso", + "Gytree" ] }, - "Web/CSS/:hover": { - "modified": "2020-10-15T21:19:57.161Z", + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T21:59:06.832Z", "contributors": [ - "lajaso", - "teoli", - "percy@mozilla.pe", - "ccarruitero" + "clbustos", + "tonialfaro" ] }, - "Web/CSS/:in-range": { - "modified": "2020-10-15T21:52:29.381Z", + "Web/HTTP/Headers/X-Forwarded-For": { + "modified": "2020-10-15T22:16:47.635Z", "contributors": [ - "lajaso", - "israel-munoz" + "choadev", + "martinfrad", + "camsa" ] }, - "Web/CSS/:indeterminate": { - "modified": "2020-10-15T21:52:30.617Z", + "Web/HTTP/Headers/X-Frame-Options": { + "modified": "2020-10-15T21:57:01.709Z", "contributors": [ - "lajaso", - "israel-munoz" + "ervin_santos", + "Luiggy", + "setlord" ] }, - "Web/CSS/:invalid": { - "modified": "2020-10-15T21:25:32.434Z", + "Web/HTTP/Headers/X-XSS-Protection": { + "modified": "2020-10-15T21:59:06.897Z", "contributors": [ - "lajaso", - "teoli", - "ccastillos" + "JulioMoreyra", + "francinysalles", + "tonialfaro" ] }, - "Web/CSS/:lang": { - "modified": "2020-10-15T21:49:25.234Z", + "Web/HTTP/Messages": { + "modified": "2019-11-12T11:40:26.816Z", "contributors": [ - "lajaso", - "sapox" + "emiedes", + "jose89gp", + "anibalortegap", + "Sergio_Gonzalez_Collado" ] }, - "Web/CSS/:last-child": { - "modified": "2020-10-15T21:19:56.585Z", + "Web/HTTP/Methods": { + "modified": "2020-10-15T21:51:09.574Z", "contributors": [ - "lajaso", - "MarkelCuesta", - "carloque", - "teoli", - "ccarruitero", - "percy@mozilla.pe" + "andrpueb", + "eddydeath", + "JRaiden", + "JulianSoto", + "RamsesMartinez" ] }, - "Web/CSS/:last-of-type": { - "modified": "2020-10-15T21:19:57.770Z", + "Web/HTTP/Methods/CONNECT": { + "modified": "2020-10-15T22:09:12.273Z", "contributors": [ - "lajaso", - "teoli", - "jesanchez", - "jsalinas" + "jadiosc" ] }, - "Web/CSS/:left": { - "modified": "2020-10-15T22:03:35.116Z", + "Web/HTTP/Methods/GET": { + "modified": "2020-12-13T00:32:42.441Z", "contributors": [ - "Tartarin2018", - "lajaso", - "Skrinch" + "victorgabardini", + "SphinxKnight", + "sercorc.12", + "oespino", + "RetelboP" ] }, - "Web/CSS/:link": { - "modified": "2020-10-15T21:54:15.946Z", + "Web/HTTP/Methods/PATCH": { + "modified": "2020-10-04T20:15:30.024Z", "contributors": [ - "lajaso", - "Jhonatangiraldo" + "hamishwillee", + "cnietoc", + "SackmannDV", + "noecende" ] }, - "Web/CSS/:not()": { - "modified": "2020-11-30T09:54:17.195Z", + "Web/HTTP/Methods/POST": { + "modified": "2020-11-06T16:08:25.707Z", "contributors": [ - "blanchart", - "lajaso", - "teoli", - "jotadeaa", - "luisgagocasas" + "Max_Gremory", + "JGarnica", + "qmarquez", + "DavidGalvis", + "sammye70", + "Sheppy", + "mtnalonso", + "Juenesis" + ] + }, + "Web/HTTP/Methods/PUT": { + "modified": "2020-10-15T21:58:39.134Z", + "contributors": [ + "mtnalonso" + ] + }, + "Web/HTTP/Methods/TRACE": { + "modified": "2020-10-15T22:12:36.763Z", + "contributors": [ + "pablobiedma" + ] + }, + "Web/HTTP/Overview": { + "modified": "2020-08-07T11:46:49.430Z", + "contributors": [ + "marcusdesantis", + "Enesimus", + "Rafasu", + "ChrisMHM", + "LuisGalicia", + "jose89gp", + "DaniNz", + "cabaag", + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-10-01T02:41:07.109Z", + "contributors": [ + "SphinxKnight", + "gonzalestino924", + "manuelguido", + "juliocesardeveloper", + "ismanapa", + "santiago.lator", + "leticia-acib", + "josecarbajalbolbot", + "StarViruZ", + "amircp", + "SebastianBar", + "serivt", + "Jens.B" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:56:53.445Z", + "contributors": [ + "serivt" + ] + }, + "Web/HTTP/Status/101": { + "modified": "2019-03-18T21:22:02.098Z", + "contributors": [ + "jlamasfripp" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T22:05:24.611Z", + "contributors": [ + "SphinxKnight", + "alexibarra55", + "jlamasfripp", + "gbarriosf", + "snaven10", + "Adriel_from_Nav" + ] + }, + "Web/HTTP/Status/201": { + "modified": "2020-10-15T22:08:02.661Z", + "contributors": [ + "WriestTavo" + ] + }, + "Web/HTTP/Status/202": { + "modified": "2019-04-19T16:13:12.876Z", + "contributors": [ + "Hibot12" + ] + }, + "Web/HTTP/Status/203": { + "modified": "2020-06-14T20:53:26.311Z", + "contributors": [ + "rayrojas" + ] + }, + "Web/HTTP/Status/206": { + "modified": "2020-10-15T22:02:08.111Z", + "contributors": [ + "qpdian" + ] + }, + "Web/HTTP/Status/301": { + "modified": "2020-10-15T22:24:06.781Z", + "contributors": [ + "nullxx" + ] + }, + "Web/HTTP/Status/302": { + "modified": "2020-10-15T21:59:00.277Z", + "contributors": [ + "B1tF8er", + "kraptor", + "astrapotro" + ] + }, + "Web/HTTP/Status/304": { + "modified": "2020-10-15T22:12:46.751Z", + "contributors": [ + "jairoFg12" + ] + }, + "Web/HTTP/Status/400": { + "modified": "2019-08-03T10:06:53.857Z", + "contributors": [ + "molavec", + "Hibot12" + ] + }, + "Web/HTTP/Status/401": { + "modified": "2020-10-15T21:55:15.004Z", + "contributors": [ + "Clipi", + "JuanMacias", + "mjaque", + "andreximo" + ] + }, + "Web/HTTP/Status/403": { + "modified": "2020-10-15T21:58:50.466Z", + "contributors": [ + "JuanMacias" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T21:56:47.503Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/HTTP/Status/408": { + "modified": "2019-03-18T21:30:00.279Z", + "contributors": [ + "juusechec" + ] + }, + "Web/HTTP/Status/418": { + "modified": "2020-10-15T22:21:28.070Z", + "contributors": [ + "joseluisq", + "paolo667" + ] + }, + "Web/HTTP/Status/500": { + "modified": "2020-12-07T12:32:25.820Z", + "contributors": [ + "dayanhernandez353", + "karenonaly", + "duduindo", + "marcelokruk", + "Viejofon" + ] + }, + "Web/HTTP/Status/502": { + "modified": "2020-10-15T21:56:55.208Z", + "contributors": [ + "josecarbajalbolbot", + "AlePerez92", + "josmelnoel" + ] + }, + "Web/HTTP/Status/503": { + "modified": "2020-10-15T22:10:17.555Z", + "contributors": [ + "Parodper", + "ajuni880", + "diego-bustamante" + ] + }, + "Web/HTTP/Status/504": { + "modified": "2020-10-15T22:08:08.336Z", + "contributors": [ + "ojeanicolas" + ] + }, + "Web/HTTP/Status/505": { + "modified": "2020-04-03T20:59:26.896Z", + "contributors": [ + "lp4749791" + ] + }, + "Web/JavaScript": { + "modified": "2020-11-23T12:49:37.646Z", + "contributors": [ + "SphinxKnight", + "kramosr68", + "ivanfernandez5209", + "Tonatew", + "alejogomes944", + "Nachec", + "victitor800", + "Enesimus", + "franchesco182001", + "pauli.rodriguez.c", + "jhonarielgj", + "Fegaan", + "OOJuanferOO", + "nicolas25ramirez", + "andreamv2807", + "tomasvillarragaperez", + "Yel-Martinez-Consultor-Seo", + "rodririobo", + "isabelsvelasquezv", + "fedegianni04", + "jaomix1", + "TheJarX", + "clarii", + "NataliaCba", + "NicoleCleto1998", + "JavScars", + "untilbit", + "AlePerez92", + "aluxito", + "luisNavasArg", + "jsx", + "carlossuarez", + "Pablo_Ivan", + "teoli", + "LeoHirsch", + "smarchioni", + "ricardo777", + "CarlosQuijano", + "Scipion", + "alquimista", + "Nukeador", + "ethertank", + "Jorge.villalobos", + "arleytriana", + "arpunk", + "inma_610", + "StripTM", + "Mgjbot", + "Superruzafa", + "Verruckt", + "Jorolo", + "Vyk", + "Takenbot", + "RJacinto" + ] + }, + "Web/JavaScript/Closures": { + "modified": "2020-04-08T19:26:44.700Z", + "contributors": [ + "camsa", + "wbamberg", + "AzazelN28", + "JonasBrandel", + "fscholz", + "guty", + "Siro_Diaz", + "luigli", + "teoli", + "FNK", + "juanc.jara", + "Josias", + "neosergio", + "hjoaco" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-08-30T02:21:59.996Z", + "contributors": [ + "Nachec", + "edwinmunguia", + "arzr", + "rayrojas", + "melgard", + "mmngreco", + "AngryDev", + "Gorzas", + "alejandrochung", + "IXTRUnai", + "damnyorch", + "devconcept", + "sancospi" + ] + }, + "Web/JavaScript/Equality_comparisons_and_sameness": { + "modified": "2020-03-24T18:47:23.011Z", + "contributors": [ + "camsa", + "abestrad1", + "EduardoCasanova", + "pekechis" + ] + }, + "Web/JavaScript/EventLoop": { + "modified": "2020-03-12T19:43:05.672Z", + "contributors": [ + "AzazelN28", + "omonteon", + "guillermojmc", + "eljonims", + "MrCoffey", + "Anonymous" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-09-12T21:03:22.983Z", + "contributors": [ + "Nachec", + "AmazonianCodeGuy", + "tezece", + "MarcyG1", + "nhuamani", + "manuhdez", + "e.g.m.g.", + "Pablo_Ivan", + "nelson6e65", + "walterpaoli", + "joanvasa", + "fscholz", + "Benjalorc", + "teoli", + "mitogh", + "xavo7" + ] + }, + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-08-17T15:38:30.288Z", + "contributors": [ + "Nachec", + "MariaBarros", + "AmazonianCodeGuy", + "wbamberg", + "fherce", + "SphinxKnight", + "ObsoleteHuman", + "ValentinTapiaTorti", + "brodriguezs", + "DiegoA1114", + "montogeek", + "fscholz", + "teoli", + "pheras" + ] + }, + "Web/JavaScript/Guide/Expressions_and_Operators": { + "modified": "2020-09-13T21:58:37.783Z", + "contributors": [ + "Nachec", + "gcjuan", + "Orlando-Flores-Huanca", + "wajari", + "anglozm", + "recortes", + "Ernesto385291", + "Jkierem", + "gsalinase", + "abestrad1", + "milouri23", + "Odol", + "victorsanchezm", + "ElChiniNet", + "UshioSan", + "siluvana", + "juanbrujo", + "01luisrene", + "gustavgil", + "Jaston", + "Alexis88", + "smarquez1", + "ricardochavarri", + "fscholz", + "spachecojimenez" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-09-12T23:09:43.446Z", + "contributors": [ + "Nachec", + "luis-al-merino", + "AmazonianCodeGuy", + "teknotica", + "feliperomero3", + "nullx5", + "abelosky", + "jlopezfdez", + "enriqueabsurdum", + "Ayman", + "AnthonyGareca", + "chuyinEF", + "estebancito", + "bytx", + "Pablo_Ivan", + "cgsramirez", + "eugenioNovas", + "marioalvazquez", + "joanvasa", + "fscholz", + "Cleon", + "angelnajera", + "vinixio", + "diegogaysaez", + "teoli", + "Amatos" + ] + }, + "Web/JavaScript/Guide/Iterators_and_Generators": { + "modified": "2020-03-12T19:42:41.976Z", + "contributors": [ + "camsa", + "DJphilomath", + "mjaque", + "lassmann", + "eycopia", + "nefter", + "dieguezz", + "Breaking_Pitt" + ] + }, + "Web/JavaScript/Guide/Keyed_collections": { + "modified": "2020-09-02T02:09:58.803Z", + "contributors": [ + "Nachec", + "MariaBarros", + "jesus92gz", + "eljonims" + ] + }, + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-08-18T02:34:39.284Z", + "contributors": [ + "Nachec", + "asamajamasa", + "jaomix1", + "jzatarain" + ] + }, + "Web/JavaScript/Guide/Numbers_and_dates": { + "modified": "2020-09-14T23:27:03.154Z", + "contributors": [ + "Nachec", + "ds-developer1", + "la-syl", + "IsraelFloresDGA", + "ingcarlosperez", + "georgenevets", + "yakashiro" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-10-15T21:29:34.015Z", + "contributors": [ + "Nachec", + "wilmer2000", + "Ricardo_F.", + "lebubic", + "franklevel", + "recortes", + "LuisSevillano", + "pangeasi", + "Jabi", + "bartolocarrasco", + "fortil", + "BoyFerruco", + "Lehmer", + "wffranco", + "eljonims", + "jpmontoya182", + "guillermomartinmarco", + "fscholz", + "eespitia.rea", + "jcvergar" ] }, - "Web/CSS/:nth-child": { - "modified": "2020-10-15T21:20:38.559Z", + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-09-15T10:00:50.941Z", "contributors": [ - "ulisestrujillo", - "lajaso", - "teoli", - "tuxtitlan" + "Nachec", + "surielmx", + "IsraelFloresDGA", + "diegarta", + "Enesimus", + "jalmeida" ] }, - "Web/CSS/:nth-last-child": { - "modified": "2020-10-15T21:42:40.958Z", + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:47:17.832Z", "contributors": [ "lajaso", - "alkaithil" - ] - }, - "Web/CSS/:nth-last-of-type": { - "modified": "2020-10-15T22:04:20.811Z", - "contributors": [ - "AltheaE", - "lajaso" + "jpmontoya182" ] }, - "Web/CSS/:nth-of-type": { - "modified": "2020-10-15T21:43:57.823Z", + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:45:01.208Z", "contributors": [ - "lajaso", - "edkalel" + "JavScars", + "Sheppy" ] }, - "Web/CSS/:only-child": { - "modified": "2020-10-15T21:42:38.914Z", + "Web/JavaScript/Reference/Errors/Bad_octal": { + "modified": "2020-03-12T19:45:41.442Z", "contributors": [ - "lajaso", - "alkaithil" + "HaroldV" ] }, - "Web/CSS/:only-of-type": { - "modified": "2020-10-15T22:04:23.870Z", + "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { + "modified": "2020-03-12T19:45:51.961Z", "contributors": [ - "lajaso" + "BubuAnabelas", + "Andres62", + "ingjosegarrido", + "JaimeNorato" ] }, - "Web/CSS/:optional": { - "modified": "2020-10-15T22:03:59.272Z", + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:46:48.651Z", "contributors": [ - "lajaso" + "Tlauipil" ] }, - "Web/CSS/:out-of-range": { - "modified": "2020-10-15T21:52:29.356Z", + "Web/JavaScript/Reference/Errors/Invalid_date": { + "modified": "2020-03-12T19:47:15.708Z", "contributors": [ - "lajaso", - "israel-munoz" + "untilbit" ] }, - "Web/CSS/:placeholder-shown": { - "modified": "2020-10-15T22:04:23.723Z", + "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { + "modified": "2019-10-12T12:26:22.919Z", "contributors": [ - "lajaso" + "JGmr5" ] }, - "Web/CSS/:read-only": { - "modified": "2020-10-15T21:58:16.699Z", + "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:46:53.938Z", "contributors": [ - "lajaso", - "j-light" + "DGun17" ] }, - "Web/CSS/:read-write": { - "modified": "2020-10-15T22:04:19.084Z", + "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { + "modified": "2020-03-12T19:47:16.712Z", "contributors": [ - "lajaso" + "TheEpicSimple" ] }, - "Web/CSS/:required": { - "modified": "2020-10-15T21:44:28.186Z", + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:46:54.683Z", "contributors": [ - "lajaso", - "pekechis" + "hiuxmaycry", + "ivandevp" ] }, - "Web/CSS/:right": { - "modified": "2020-10-15T22:04:16.818Z", + "Web/JavaScript/Reference/Errors/More_arguments_needed": { + "modified": "2020-03-12T19:49:21.407Z", "contributors": [ - "lajaso" + "dragonmenorka" ] }, - "Web/CSS/:root": { - "modified": "2020-10-15T21:34:17.481Z", + "Web/JavaScript/Reference/Errors/No_variable_name": { + "modified": "2020-03-12T19:48:33.901Z", "contributors": [ - "lajaso", - "JavierPeris", - "Xaviju" + "CatalinaCampos" ] }, - "Web/CSS/:target": { - "modified": "2020-10-15T21:44:29.225Z", + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:46:46.603Z", "contributors": [ - "lajaso", - "moisesalmonte", - "pekechis" + "DGun17" ] }, - "Web/CSS/:valid": { - "modified": "2020-10-15T21:45:32.621Z", + "Web/JavaScript/Reference/Errors/Not_a_function": { + "modified": "2020-03-12T19:45:06.322Z", "contributors": [ - "lajaso", - "jorgesancheznet" + "PatoDeTuring", + "untilbit", + "josegarciaclm95" ] }, - "Web/CSS/:visited": { - "modified": "2020-10-15T22:04:02.908Z", + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-10-08T09:22:13.757Z", "contributors": [ - "lajaso" + "ludoescribano.2016", + "FacuBustamaante", + "ozavala", + "ccorcoles", + "Heranibus", + "jsgaonac", + "Luis_Armando" ] }, - "Web/CSS/@charset": { - "modified": "2019-03-23T22:29:53.691Z", + "Web/JavaScript/Reference/Errors/Precision_range": { + "modified": "2020-08-10T12:14:52.122Z", "contributors": [ - "israel-munoz" + "Sgewux" ] }, - "Web/CSS/@counter-style": { - "modified": "2019-03-18T21:16:44.974Z", + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:46:35.795Z", "contributors": [ - "jamesbrown0" + "untilbit", + "Tlauipil" ] }, - "Web/CSS/@counter-style/additive-symbols": { - "modified": "2019-03-23T22:18:02.836Z", + "Web/JavaScript/Reference/Errors/Stmt_after_return": { + "modified": "2020-03-12T19:46:14.065Z", "contributors": [ - "israel-munoz" + "WCHARRIERE", + "NanoSpicer", + "marco_Lozano" ] }, - "Web/CSS/@counter-style/symbols": { - "modified": "2019-03-18T21:15:43.336Z", + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:45:04.878Z", "contributors": [ - "israel-munoz" + "josegarciaclm95" ] }, - "Web/CSS/@document": { - "modified": "2020-10-15T22:01:34.650Z", + "Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:47:46.684Z", "contributors": [ - "SphinxKnight", - "lsosa81" + "antixsuperstar" ] }, - "Web/CSS/@font-face": { - "modified": "2019-09-26T12:01:00.515Z", + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:46:40.968Z", "contributors": [ - "ZodiacFireworks", - "fscholz", - "rtunon", - "ozkxr", - "teoli", - "ccarruitero", - "Nuc134rB0t", - "inma_610" + "dariomaim" ] }, - "Web/CSS/@font-face/font-display": { - "modified": "2020-10-15T21:59:11.206Z", + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:45:53.118Z", "contributors": [ - "AlePerez92", - "nuwanda555" + "BubuAnabelas", + "JaimeNorato" ] }, - "Web/CSS/@font-face/font-family": { - "modified": "2019-03-23T22:37:47.693Z", + "Web/JavaScript/Reference/Errors/in_operator_no_object": { + "modified": "2020-03-12T19:47:18.421Z", "contributors": [ - "pekechis" + "presercomp" ] }, - "Web/CSS/@font-face/font-style": { - "modified": "2019-03-23T22:38:47.174Z", + "Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:47:01.907Z", "contributors": [ - "danielfdez" + "gfernandez", + "fscholz" ] }, - "Web/CSS/@font-face/src": { - "modified": "2019-03-23T22:17:51.245Z", + "Web/JavaScript/Reference/Global_Objects/Reflect": { + "modified": "2019-03-18T21:14:43.908Z", "contributors": [ - "israel-munoz" + "javierlopm", + "trofrigo", + "lecruz01", + "roberbnd", + "jameshkramer" ] }, - "Web/CSS/@font-face/unicode-range": { - "modified": "2020-10-15T21:50:47.753Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/set": { + "modified": "2019-03-23T22:08:25.189Z", "contributors": [ - "SphinxKnight", - "giobeatle1794" + "pedro-otero" ] }, - "Web/CSS/@font-feature-values": { - "modified": "2019-03-23T22:22:14.476Z", + "Web/JavaScript/Shells": { + "modified": "2020-03-12T19:44:40.392Z", "contributors": [ - "israel-munoz" + "davidenriq11", + "mamptecnocrata" ] }, - "Web/CSS/@import": { - "modified": "2019-03-23T23:38:27.735Z", + "Web/Manifest": { + "modified": "2020-07-18T01:40:57.131Z", "contributors": [ - "JorgeCapillo", - "Guillaume-Heras", - "mrstork", - "fscholz", - "teoli", - "jsalinas", - "kamel.araujo" + "angelmlucero", + "ardillan", + "Zellius", + "Pablo_Bangueses", + "luisabarca", + "malonson", + "AlePerez92" ] }, - "Web/CSS/@keyframes": { - "modified": "2019-03-23T23:36:20.944Z", + "Web/MathML": { + "modified": "2020-10-15T21:24:26.572Z", "contributors": [ - "Sebastianz", - "fscholz", - "Sheppy", + "Undigon", "teoli", - "jesanchez", - "Velociraktor" + "fred.wang", + "ChaitanyaGSNR" ] }, - "Web/CSS/@media": { - "modified": "2019-03-23T23:16:54.490Z", + "Web/MathML/Attribute": { + "modified": "2019-03-23T23:26:57.621Z", "contributors": [ - "israel-munoz", - "fscholz", - "teoli", - "sanathy" + "LuifeR", + "ccarruitero", + "maedca" ] }, - "Web/CSS/@media/altura": { - "modified": "2020-10-15T22:23:38.815Z", + "Web/MathML/Authoring": { + "modified": "2019-03-23T23:27:02.180Z", "contributors": [ - "IsraelFloresDGA" + "rafaqtro", + "fred.wang", + "voylinux", + "robertoasq", + "maedca" ] }, - "Web/CSS/@media/color": { - "modified": "2019-03-18T21:15:44.481Z", + "Web/MathML/Examples": { + "modified": "2019-03-23T23:25:26.042Z", "contributors": [ - "pekechis" + "nielsdg" ] }, - "Web/CSS/@media/display-mode": { - "modified": "2020-10-15T22:23:39.088Z", + "Web/MathML/Examples/MathML_Pythagorean_Theorem": { + "modified": "2019-03-23T23:25:28.102Z", "contributors": [ - "IsraelFloresDGA" + "osvaldobaeza" ] }, - "Web/CSS/@media/hover": { - "modified": "2020-10-15T22:23:44.104Z", + "Web/Media": { + "modified": "2020-07-15T09:47:41.711Z", "contributors": [ - "IsraelFloresDGA" + "Sheppy" ] }, - "Web/CSS/@media/pointer": { - "modified": "2020-10-15T22:27:26.867Z", + "Web/Media/Formats": { + "modified": "2020-07-15T09:47:42.018Z", "contributors": [ - "qwerty726" + "Sheppy" ] }, - "Web/CSS/@media/resolución": { - "modified": "2019-03-23T22:38:40.675Z", + "Web/Media/Formats/Containers": { + "modified": "2020-07-15T09:47:51.166Z", "contributors": [ - "Conradin88" + "hugojavierduran9" ] }, - "Web/CSS/@media/width": { - "modified": "2019-03-23T22:04:44.569Z", + "Web/Performance": { + "modified": "2019-04-04T19:28:41.844Z", "contributors": [ - "jswisher", - "wilton-cruz" + "arekucr", + "chrisdavidmills" ] }, - "Web/CSS/@namespace": { - "modified": "2020-10-15T22:29:21.901Z", + "Web/Performance/Fundamentals": { + "modified": "2019-05-05T06:54:02.458Z", "contributors": [ - "qwerty726" + "c-torres" ] }, - "Web/CSS/@page": { - "modified": "2019-03-18T21:35:50.476Z", + "Web/Performance/How_browsers_work": { + "modified": "2020-09-10T10:11:23.592Z", "contributors": [ - "luismj" + "sancarbar" ] }, - "Web/CSS/@supports": { - "modified": "2020-10-15T21:43:18.021Z", + "Web/Progressive_web_apps": { + "modified": "2020-09-20T04:18:55.064Z", "contributors": [ - "SJW", - "angelf", - "MilkSnake" + "Nachec", + "Enesimus", + "chrisdavidmills", + "hypnotic-frog", + "javichito" ] }, - "Web/CSS/@viewport": { - "modified": "2019-03-18T21:16:54.012Z", + "Web/Progressive_web_apps/App_structure": { + "modified": "2020-09-20T03:39:21.273Z", "contributors": [ - "cvrebert" + "Nachec", + "NicolasKuhn" ] }, - "Web/CSS/@viewport/height": { - "modified": "2019-03-18T21:38:59.253Z", + "Web/Progressive_web_apps/Developer_guide": { + "modified": "2020-09-20T03:25:40.381Z", "contributors": [ - "israel-munoz" + "Deng_C1" ] }, - "Web/CSS/@viewport/width": { - "modified": "2019-03-18T21:16:26.082Z", + "Web/Progressive_web_apps/Installable_PWAs": { + "modified": "2020-09-20T03:54:28.154Z", "contributors": [ - "israel-munoz" + "Nachec" ] }, - "Web/CSS/At-rule": { - "modified": "2019-03-23T22:29:55.371Z", + "Web/Progressive_web_apps/Introduction": { + "modified": "2020-09-20T03:34:06.424Z", "contributors": [ - "Legioinvicta", - "israel-munoz" + "Nachec", + "gastono.442", + "tw1ttt3r", + "santi324", + "chrisdavidmills" ] }, - "Web/CSS/CSS_Animations": { - "modified": "2019-03-23T22:43:48.247Z", + "Web/Progressive_web_apps/Loading": { + "modified": "2020-09-20T04:08:37.661Z", "contributors": [ - "teoli" + "Nachec" ] }, - "Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS": { - "modified": "2019-03-23T22:41:48.122Z", + "Web/Progressive_web_apps/Offline_Service_workers": { + "modified": "2020-09-20T03:45:55.671Z", "contributors": [ - "wbamberg", - "CristhianLora1", - "DracotMolver" + "Nachec" ] }, - "Web/CSS/CSS_Animations/Tips": { - "modified": "2020-08-16T13:05:40.057Z", + "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { + "modified": "2020-09-20T04:04:04.639Z", "contributors": [ - "CamilaAchury", - "SphinxKnight", - "AlbertoVargasMoreno" + "Nachec" ] }, - "Web/CSS/CSS_Animations/Usando_animaciones_CSS": { - "modified": "2020-07-06T16:16:21.887Z", + "Web/Reference": { + "modified": "2019-03-23T23:21:27.898Z", "contributors": [ - "Jazperist", - "miguelgilmartinez", - "fermelli", - "GasGen", - "KattyaCuevas", - "rod232", - "Jvalenz1982", - "SphinxKnight", - "teoli", - "onerbs", - "Luis_Calvo", - "ulisescab" + "raecillacastellana", + "vltamara", + "asero82", + "atlas7jean", + "Nickolay" ] }, - "Web/CSS/CSS_Background_and_Borders": { - "modified": "2019-03-23T22:41:48.399Z", + "Web/Reference/API": { + "modified": "2019-03-23T23:20:25.941Z", "contributors": [ - "teoli" + "AlePerez92", + "jhia", + "welm", + "vggallego", + "DeiberChacon", + "angmauricio", + "vitoco", + "CristianMar25", + "gesifred", + "cmeraz", + "davy.martinez" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generador": { - "modified": "2019-03-23T22:41:48.777Z", + "Web/SVG": { + "modified": "2019-03-23T23:44:20.243Z", "contributors": [ + "Undigon", + "Noradrex", "teoli", - "mcclone2001" + "Verruckt", + "Jorolo", + "Mgjbot", + "Josebagar" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { - "modified": "2019-03-18T21:15:42.476Z", + "Web/SVG/Attribute": { + "modified": "2019-08-04T03:46:23.452Z", "contributors": [ - "israel-munoz" + "jcortesa", + "chrisdavidmills" ] }, - "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": { - "modified": "2019-03-23T22:17:03.740Z", + "Web/SVG/Attribute/stop-color": { + "modified": "2020-10-15T22:06:34.292Z", "contributors": [ - "israel-munoz" + "andcal" ] }, - "Web/CSS/CSS_Colors": { - "modified": "2019-03-23T22:23:30.277Z", + "Web/SVG/Attribute/transform": { + "modified": "2019-03-23T22:07:32.328Z", "contributors": [ - "betelleclerc", - "Krenair" + "dimuziop" ] }, - "Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color": { - "modified": "2019-03-23T22:23:27.596Z", + "Web/SVG/Element": { + "modified": "2019-03-19T13:42:20.553Z", "contributors": [ - "elihro" + "borja", + "jmanquez", + "kscarfone" ] }, - "Web/CSS/CSS_Containment": { - "modified": "2020-10-21T02:39:25.867Z", + "Web/SVG/Element/a": { + "modified": "2020-10-15T22:16:15.979Z", "contributors": [ - "SphinxKnight", - "RoqueAlonso" + "borja" ] }, - "Web/CSS/CSS_Flexible_Box_Layout": { - "modified": "2019-03-23T22:43:42.897Z", + "Web/SVG/Element/animate": { + "modified": "2020-10-15T22:09:39.514Z", "contributors": [ - "danpaltor", - "tipoqueno", - "pepe2016", - "fscholz" + "evaferreira" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": { - "modified": "2020-09-12T08:36:23.473Z", + "Web/SVG/Element/circle": { + "modified": "2019-03-23T22:57:12.727Z", "contributors": [ - "x-N0", - "FrankGalanB", - "JulianCGG", - "PauloColorado", - "Irvandoval", - "turuto" + "wbamberg", + "Sebastianz", + "humbertaco" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": { - "modified": "2019-11-06T19:10:32.985Z", + "Web/SVG/Element/foreignObject": { + "modified": "2019-03-23T23:05:21.297Z", "contributors": [ - "tonyrodz" + "Sebastianz", + "THernandez03" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox.": { - "modified": "2019-03-18T21:18:33.523Z", + "Web/SVG/Element/g": { + "modified": "2019-03-23T22:54:18.875Z", "contributors": [ - "danpaltor" + "Sebastianz", + "teoli", + "FrankzWolf" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox": { - "modified": "2020-03-25T21:15:58.856Z", + "Web/SVG/Element/rect": { + "modified": "2019-03-23T23:02:06.920Z", "contributors": [ - "amazing79", - "otello1971", - "cwalternicolas" + "wbamberg", + "roadev", + "Sebastianz", + "jdgarrido" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web": { - "modified": "2019-03-23T22:31:07.427Z", + "Web/SVG/Element/style": { + "modified": "2019-03-23T22:54:27.955Z", "contributors": [ - "miguelsp" + "Sebastianz", + "teoli", + "rippe2hl" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS": { - "modified": "2019-05-15T19:01:41.614Z", + "Web/SVG/Element/svg": { + "modified": "2020-11-04T10:23:00.659Z", "contributors": [ - "luzbelmex", - "VictorSan45", - "NeXuZZ-SCM", - "Tonylu11", - "javier_junin", - "AlePerez92", - "MMariscal", - "fscholz", - "ArcangelZith", - "FNK", - "rippe2hl", - "StripTM", - "joan.leon", - "arturo_sanz" + "hardy.rafael17", + "Mcch", + "diegovinie", + "BubuAnabelas", + "mbenitez01" ] }, - "Web/CSS/CSS_Flow_Layout": { - "modified": "2019-03-18T21:21:28.417Z", + "Web/SVG/Element/text": { + "modified": "2020-05-14T06:42:53.448Z", "contributors": [ - "ariasfernando" + "danielhiguerasgoold", + "Sebastianz", + "emorc" ] }, - "Web/CSS/CSS_Fonts": { - "modified": "2019-03-23T22:18:19.285Z", + "Web/SVG/Element/use": { + "modified": "2019-03-23T22:58:09.476Z", "contributors": [ - "Squirrel18" + "andysierra", + "Sebastianz", + "jorge_castro" ] }, - "Web/CSS/CSS_Grid_Layout": { - "modified": "2020-08-21T18:16:34.348Z", + "Web/SVG/Index": { + "modified": "2019-01-16T22:36:49.773Z", "contributors": [ - "dongerardor", - "yomar-dev", - "amaiafilo", - "AlePerez92", - "aribet", - "StripTM" + "jwhitlock", + "ComplementosMozilla" ] }, - "Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout": { - "modified": "2019-11-06T13:46:19.795Z", + "Web/SVG/Tutorial": { + "modified": "2020-01-15T20:06:40.249Z", "contributors": [ - "tonyrodz" + "dago.d.havana", + "jpriet0", + "d-go", + "Npmada", + "teoli", + "Jeremie" ] }, - "Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout": { - "modified": "2019-05-30T17:37:47.442Z", + "Web/SVG/Tutorial/Getting_Started": { + "modified": "2019-03-23T23:19:26.348Z", "contributors": [ - "narvmtz", - "ocamachor" + "kevinricardojs", + "teoli", + "Alberpat" ] }, - "Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility": { - "modified": "2019-06-05T03:51:45.202Z", + "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { + "modified": "2019-03-23T23:21:05.945Z", "contributors": [ - "blanchart" + "chrisdavidmills", + "matrimonio", + "verma21", + "marelin" ] }, - "Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas": { - "modified": "2019-10-01T23:38:23.285Z", + "Web/SVG/Tutorial/Tools_for_SVG": { + "modified": "2019-03-20T13:46:46.393Z", "contributors": [ - "jcastillaingeniero", - "amaiafilo", - "IsraelFloresDGA", - "jorgemontoyab" + "James-Yaakov" ] }, - "Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout": { - "modified": "2019-03-18T21:34:10.349Z", + "Web/Security": { + "modified": "2019-09-10T16:32:01.356Z", "contributors": [ - "amaiafilo" + "SphinxKnight", + "npcsayfail", + "lejovaar7", + "fgcalderon", + "pablodonoso", + "marumari" ] }, - "Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout": { - "modified": "2019-12-18T12:24:17.824Z", + "Web/Security/Securing_your_site": { + "modified": "2019-03-23T22:04:13.465Z", "contributors": [ - "amazing79", - "natalygiraldo", - "amaiafilo", - "TavoTrash", - "aribet", - "jorgemontoyab" + "fgcalderon", + "mbm" ] }, - "Web/CSS/CSS_Logical_Properties": { - "modified": "2019-03-18T21:11:22.321Z", + "Web/Web_Components": { + "modified": "2020-05-21T13:06:07.299Z", "contributors": [ - "teffcode" + "aguilerajl", + "Ktoxcon", + "IsraelFloresDGA", + "mboo", + "Rodmore", + "maybe" ] }, - "Web/CSS/CSS_Logical_Properties/Basic_concepts": { - "modified": "2019-10-17T05:37:57.001Z", + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-06-28T18:39:06.239Z", "contributors": [ - "blanchart", - "teffcode" + "lupomontero", + "aguilerajl" ] }, - "Web/CSS/CSS_Logical_Properties/Dimensionamiento": { - "modified": "2019-03-19T19:17:23.927Z", + "Web/Web_Components/Using_shadow_DOM": { + "modified": "2020-10-24T17:36:39.409Z", "contributors": [ - "teffcode" + "jephsanchez", + "Charlemagnes", + "quintero_japon", + "DavidGalvis" ] }, - "Web/CSS/CSS_Logical_Properties/Floating_and_positioning": { - "modified": "2019-03-18T20:35:38.553Z", + "Web/Web_Components/Using_templates_and_slots": { + "modified": "2020-03-26T15:38:45.869Z", "contributors": [ - "teffcode" + "olalinv", + "quintero_japon", + "BrunoUY", + "ulisestrujillo" ] }, - "Web/CSS/CSS_Logical_Properties/Margins_borders_padding": { - "modified": "2019-03-19T13:30:41.950Z", + "Web/XML": { + "modified": "2019-03-18T21:18:03.528Z", "contributors": [ - "teffcode" + "ExE-Boss" ] }, - "Web/CSS/CSS_Modelo_Caja": { - "modified": "2019-03-23T22:37:33.458Z", + "Web/XPath": { + "modified": "2019-01-16T14:32:30.886Z", "contributors": [ - "tipoqueno", - "pekechis" + "ExE-Boss", + "fscholz", + "Mgjbot", + "Jorolo" ] }, - "Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS": { - "modified": "2019-08-28T10:35:24.055Z", + "Web/XSLT": { + "modified": "2019-03-23T23:44:23.657Z", "contributors": [ - "tipoqueno" + "chrisdavidmills", + "Verruckt", + "Mgjbot", + "Jorolo", + "Nukeador", + "Piltrafeta" ] }, - "Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing": { - "modified": "2019-03-23T22:32:15.462Z", + "Web/XSLT/Element": { + "modified": "2019-03-18T20:59:16.316Z", "contributors": [ - "amaiafilo", - "Ralexhx", - "javichito" + "SphinxKnight", + "ExE-Boss", + "chrisdavidmills", + "fscholz", + "Jorolo", + "ErickCastellanos" ] }, - "Web/CSS/CSS_Motion_Path": { - "modified": "2020-10-15T22:26:49.512Z", + "Web/XSLT/Element/element": { + "modified": "2019-03-18T20:59:21.788Z", "contributors": [ - "josegarciamanez" + "SphinxKnight", + "ExE-Boss", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/CSS/CSS_Positioning": { - "modified": "2019-03-23T22:32:36.509Z", + "WebAssembly": { + "modified": "2020-10-15T22:25:36.765Z", "contributors": [ - "javichito", - "davidhbrown" + "jonathan.reyes33" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index": { - "modified": "2019-03-18T20:42:17.583Z", + "WebAssembly/Concepts": { + "modified": "2020-12-06T14:14:45.486Z", "contributors": [ - "ChipTime", - "javichito" + "Sergio_Gonzalez_Collado", + "mastertrooper" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index": { - "modified": "2019-03-23T22:32:38.884Z", + "WebAssembly/Loading_and_running": { + "modified": "2020-09-15T19:19:35.117Z", "contributors": [ - "javichito" + "mastertrooper" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float": { - "modified": "2019-04-26T07:22:46.044Z", + "Mozilla/Firefox/Releases/3/Updating_web_applications": { + "modified": "2019-03-23T23:58:06.668Z", "contributors": [ + "wbamberg", "SphinxKnight", - "LaGallinaTuruleta", - "javichito" + "Sheppy", + "trada", + "manueljrs", + "flaviog", + "Rafavs", + "Marcomavil", + "Mgjbot" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento": { - "modified": "2019-03-23T22:32:44.958Z", + "orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3": { + "modified": "2019-12-13T20:34:57.052Z", "contributors": [ - "javichito" + "wbamberg", + "lajaso", + "teoli", + "Sheppy", + "Pgulijczuk", + "deimidis", + "Nukeador", + "Ffranz", + "HenryGR" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index": { - "modified": "2019-03-23T22:32:47.571Z", + "Mozilla/Firefox/Releases/3/Updating_extensions": { + "modified": "2019-03-23T23:58:10.215Z", "contributors": [ - "javichito" + "wbamberg", + "SphinxKnight", + "Pgulijczuk", + "deimidis", + "flaviog", + "Nukeador", + "Giovanisf13", + "Firewordy", + "Dfier", + "Rumont", + "Wrongloop", + "Mgjbot" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento": { - "modified": "2019-03-23T22:32:36.821Z", + "orphaned/Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla": { + "modified": "2019-01-16T14:53:56.551Z", "contributors": [ - "javichito" + "DoctorRomi", + "Superruzafa" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento": { - "modified": "2019-03-23T22:32:34.821Z", + "Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox": { + "modified": "2019-03-23T23:54:31.423Z", "contributors": [ - "javichito" + "wbamberg", + "Mgjbot", + "RickieesES", + "Nukeador", + "Anyulled" ] }, - "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento": { - "modified": "2019-03-23T22:32:30.208Z", + "Web/SVG/Applying_SVG_effects_to_HTML_content": { + "modified": "2019-03-24T00:09:04.196Z", "contributors": [ - "javichito" + "elPatox" ] }, - "Web/CSS/CSS_Properties_Reference": { - "modified": "2019-03-18T21:24:27.305Z", + "Mozilla/Firefox/Releases/3/Notable_bugs_fixed": { + "modified": "2019-03-23T23:53:21.447Z", "contributors": [ - "pekechis" + "wbamberg", + "Mgjbot", + "Nathymig", + "Nukeador", + "HenryGR", + "RickieesES", + "Ciberman osman" ] }, - "Web/CSS/CSS_Reglas_Condicionales": { - "modified": "2019-03-23T22:05:34.864Z", + "Web/HTTP/Headers/User-Agent/Firefox": { + "modified": "2019-03-23T23:45:27.069Z", "contributors": [ - "arnulfolg" + "teoli", + "Orestesleal13022" ] }, - "Web/CSS/CSS_Transforms": { - "modified": "2019-03-23T22:43:47.978Z", + "orphaned/Code_snippets": { + "modified": "2019-01-16T13:52:37.564Z", "contributors": [ - "Sebastianz", - "fscholz" + "ffox" ] }, - "Web/CSS/CSS_Transforms/Using_CSS_transforms": { - "modified": "2019-03-24T00:05:10.570Z", + "orphaned/Code_snippets/Pestañas_del_navegador": { + "modified": "2019-01-16T13:52:57.159Z", "contributors": [ - "recortes", - "fscholz", - "teoli", - "cristianjav", - "ajimix", - "another_sam" + "ffox" ] }, - "Web/CSS/CSS_Transitions": { - "modified": "2019-07-24T08:01:48.708Z", + "Web/CSS/CSS_Columns/Using_multi-column_layouts": { + "modified": "2019-03-23T23:43:23.940Z", "contributors": [ - "SphinxKnight", - "FedericoMarmo", - "crojasf", - "pekechis" + "Mgjbot", + "Jorolo", + "Nukeador" ] }, - "Web/CSS/CSS_Types": { - "modified": "2019-03-18T21:35:39.343Z", + "Learn/Server-side/Configuring_server_MIME_types": { + "modified": "2020-07-16T22:36:04.341Z", "contributors": [ - "lajaso" + "Nukeador", + "Kroatan", + "Mtiscordio", + "Hostar", + "Iwa1", + "Markens", + "Brayan Habid" ] }, - "Web/CSS/CSS_Writing_Modes": { - "modified": "2019-04-10T10:27:10.380Z", + "orphaned/Creación_de_Componentes_XPCOM/Interior_del_Componente": { + "modified": "2019-04-20T03:45:43.371Z", "contributors": [ - "cristianmartinez" + "wbamberg", + "Maharba" ] }, - "Web/CSS/Cascade": { - "modified": "2020-04-20T15:19:07.785Z", + "orphaned/Creación_de_Componentes_XPCOM/Prefacio": { + "modified": "2019-04-20T03:45:45.365Z", "contributors": [ - "arjusgit", - "tw1ttt3r" + "wbamberg", + "Maharba" ] }, - "Web/CSS/Child_combinator": { - "modified": "2019-03-23T22:17:17.663Z", + "Web/OpenSearch": { + "modified": "2019-03-24T00:00:08.096Z", "contributors": [ - "ExE-Boss", - "maguz727", - "israel-munoz" + "teoli", + "Etrigan", + "tbusca", + "Nukeador", + "Rodrigoknascimento", + "Citora", + "Mgjbot", + "Fenomeno" ] }, - "Web/CSS/Class_selectors": { - "modified": "2019-03-23T22:17:19.977Z", + "orphaned/Creando_una_extensión": { + "modified": "2019-03-24T00:13:16.401Z", "contributors": [ - "israel-munoz" + "teoli", + "ethertank", + "Sheppy", + "athesto", + "StripTM", + "myfcr", + "DoctorRomi", + "Mgjbot", + "M4ur170", + "Nukeador", + "Wayner", + "El Hacker", + "Arcangelhak", + "Psanz", + "Victor-27-", + "Arteadonis", + "Gadolinio", + "Opevelyn", + "Verruckt", + "Spg2006", + "Gbulfon", + "Damien", + "Peperoni", + "CD77", + "Ordep", + "Indigo", + "Jp1", + "GMG", + "Ateneo", + "Doctormanfer", + "A Morenazo", + "Trace2x", + "Odo", + "Hatch", + "Jorolo", + "Lastjuan", + "Ulntux" ] }, - "Web/CSS/Columnas_CSS": { - "modified": "2019-03-23T22:28:10.699Z", + "orphaned/Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System": { + "modified": "2019-04-26T15:53:18.603Z", "contributors": [ - "Anonymous" + "cantineoqueteveo", + "2stapps", + "teoli", + "DoctorRomi", + "Carok", + "Gustavo Ruiz", + "Nukeador", + "JuninhoBoy95", + "Kuriboh", + "Mgjbot", + "RickieesES", + "Geomorillo", + "Blank zero", + "Haelmx", + "Superruzafa" ] }, - "Web/CSS/Comentarios": { - "modified": "2019-03-23T22:16:58.806Z", + "orphaned/CSS_dinámico": { + "modified": "2019-01-16T14:14:46.881Z", "contributors": [ - "israel-munoz" + "RickieesES", + "Jorolo", + "Peperoni", + "Hande", + "Nukeador" ] }, - "Web/CSS/Comenzando_(tutorial_CSS)": { - "modified": "2019-03-23T23:39:37.048Z", + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-10-03T11:52:26.928Z", "contributors": [ - "teoli", - "jsalinas" + "danielblazquez", + "brunonra-dev", + "kitab15", + "Sebastianz", + "jsx", + "carlossuarez", + "mrstork", + "malayaleecoder", + "seeker8", + "Xaviju", + "sinfallas", + "maedca" ] }, - "Web/CSS/Como_iniciar": { - "modified": "2019-01-16T13:59:37.327Z", + "Web/CSS/CSS_Images/Using_CSS_gradients": { + "modified": "2019-06-03T20:30:31.836Z", "contributors": [ - "teoli", - "Izel" + "GasGen", + "undest", + "Sebastianz", + "Eneagrama" ] }, - "Web/CSS/Como_iniciar/Por_que_usar_CSS": { - "modified": "2019-03-23T23:39:38.906Z", + "orphaned/Desarrollando_Mozilla": { + "modified": "2019-01-16T14:32:31.515Z", "contributors": [ - "teoli", - "jsalinas" + "another_sam", + "Mgjbot", + "Jorolo", + "Nukeador", + "Turin" ] }, - "Web/CSS/Como_iniciar/Que_es_CSS": { - "modified": "2019-03-24T00:11:28.788Z", + "orphaned/Detectar_la_orientación_del_dispositivo": { + "modified": "2019-03-24T00:07:57.131Z", "contributors": [ - "fernandomoreno605", - "DavidWebcreate", - "aguilarcarlos", - "teoli", - "LeoHirsch", - "dusvilopez", - "turekon", - "Izel" + "inma_610" ] }, - "Web/CSS/Descendant_combinator": { - "modified": "2019-03-23T23:13:24.480Z", + "orphaned/DHTML_Demostraciones_del_uso_de_DOM_Style": { + "modified": "2019-01-16T16:07:51.712Z", "contributors": [ - "ExE-Boss", - "Makiber" + "Mgjbot", + "Superruzafa", + "Trace2x", + "Fedora-core", + "Nukeador" ] }, - "Web/CSS/Elemento_reemplazo": { - "modified": "2019-03-23T23:08:30.961Z", + "Glossary/DHTML": { + "modified": "2019-03-23T23:44:54.880Z", "contributors": [ - "jdbazagaruiz" + "Mgjbot", + "Jorolo", + "Jos" ] }, - "Web/CSS/Especificidad": { - "modified": "2020-11-14T17:11:45.294Z", + "orphaned/Dibujando_Gráficos_con_Canvas": { + "modified": "2019-01-16T20:01:59.575Z", "contributors": [ - "0neomar", - "fer", - "glrodasz", - "mariupereyra", - "arjusgit", - "DavidGalvis", - "gcjuan", - "LuisSevillano", - "deimidis2", - "aeroxmotion", - "padrecedano", - "Remohir" + "Firegooploer" ] }, - "Web/CSS/Gradiente": { - "modified": "2019-03-23T22:37:34.623Z", - "contributors": [ - "devilkillermc", - "mym2013", - "Sebastianz", - "wizAmit", - "slayslot", - "Conradin88" + "Web/API/Canvas_API/Tutorial/Drawing_text": { + "modified": "2019-01-16T15:31:41.845Z", + "contributors": [ + "Mgjbot", + "HenryGR", + "Nukeador", + "RickieesES", + "Debianpc" ] }, - "Web/CSS/Herramientas": { - "modified": "2019-03-23T22:28:04.142Z", + "orphaned/Tools/Add-ons/DOM_Inspector": { + "modified": "2020-07-16T22:36:24.191Z", "contributors": [ - "arturoblack" + "Mgjbot", + "Jorolo", + "Tatan", + "TETSUO" ] }, - "Web/CSS/Herramientas/Cubic_Bezier_Generator": { - "modified": "2019-03-18T21:20:03.429Z", + "Web/API/Document/cookie": { + "modified": "2020-04-15T13:31:17.928Z", "contributors": [ - "gsalinase" + "atiliopereira", + "Skattspa", + "aralvarez", + "SphinxKnight", + "khalid32", + "Ogquir", + "strongville", + "Ciencia Al Poder", + "Markens", + "DR" ] }, - "Web/CSS/ID_selectors": { - "modified": "2020-10-15T21:52:30.474Z", + "Web/API/History_API/Example": { + "modified": "2019-03-23T22:29:32.414Z", "contributors": [ - "lajaso", - "israel-munoz" + "maitret" ] }, - "Web/CSS/Introducción": { - "modified": "2019-03-24T00:09:12.368Z", + "Web/API/History_API": { + "modified": "2019-09-07T17:44:48.428Z", "contributors": [ - "luismj", - "javierdp", + "seaug", + "HerniHdez", + "AlePerez92", + "SphinxKnight", + "talo242", + "mauroc8", + "javiernunez", + "dongerardor", + "StripTM", + "Galsas", "teoli", - "inma_610" + "Izel", + "Sheppy", + "translatoon" ] }, - "Web/CSS/Introducción/Boxes": { - "modified": "2019-03-23T23:02:20.733Z", + "Web/API/Touch_events": { + "modified": "2019-03-23T23:35:01.361Z", "contributors": [ - "albaluna" + "wbamberg", + "wffranco", + "fscholz", + "teoli", + "Fjaguero", + "jvmjunior", + "maedca" ] }, - "Web/CSS/Introducción/Cascading_and_inheritance": { - "modified": "2019-03-23T23:02:26.342Z", + "Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop": { + "modified": "2020-11-01T11:34:07.543Z", "contributors": [ - "carlos.millan3", - "eljonims", - "mamptecnocrata", - "albaluna" + "juanrueda", + "davidpala.dev", + "brahAraya", + "ajuni880", + "israteneda", + "RVidalki", + "clarii", + "rgomez" ] }, - "Web/CSS/Introducción/Color": { - "modified": "2019-03-23T22:59:44.751Z", + "Web/API/HTML_Drag_and_Drop_API": { + "modified": "2019-03-24T00:07:57.845Z", "contributors": [ - "albaluna" + "ethertank", + "inma_610" ] }, - "Web/CSS/Introducción/How_CSS_works": { - "modified": "2019-03-23T23:02:23.335Z", + "Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types": { + "modified": "2019-03-23T23:18:24.597Z", "contributors": [ - "mamptecnocrata", - "albaluna" + "Evinton" ] }, - "Web/CSS/Introducción/Layout": { - "modified": "2019-03-23T22:20:39.961Z", + "orphaned/Estructura_de_directorios_de_código_fuente_de_Mozilla": { + "modified": "2019-03-24T00:17:11.569Z", "contributors": [ - "lavilofam1" + "ethertank", + "MiguelFRomeroR", + "Sheppy" ] }, - "Web/CSS/Introducción/Los:estilos_de_texto": { - "modified": "2019-03-23T23:02:09.062Z", + "orphaned/Etiquetas_audio_y_video_en_Firefox": { + "modified": "2019-03-23T23:59:36.294Z", "contributors": [ - "albaluna" + "Nukeador", + "deimidis" ] }, - "Web/CSS/Introducción/Media": { - "modified": "2019-03-18T21:15:11.297Z", + "orphaned/Extensiones/Actualización_de_extensiones_para_Firefox_4": { + "modified": "2019-03-24T00:05:58.390Z", "contributors": [ - "luismj" + "inma_610" ] }, - "Web/CSS/Introducción/Selectors": { - "modified": "2019-03-23T23:02:22.202Z", + "orphaned/FAQ_Incrustando_Mozilla": { + "modified": "2019-01-16T16:20:13.874Z", "contributors": [ - "albaluna" + "Lastjuan" ] }, - "Web/CSS/Layout_cookbook": { - "modified": "2019-03-18T21:22:35.394Z", + "Mozilla/Firefox/Releases/1.5": { + "modified": "2019-03-23T23:47:34.365Z", "contributors": [ - "StripTM" + "wbamberg", + "SphinxKnight", + "Rubenbae", + "Pachtonio", + "Sheppy", + "Mgjbot", + "Jorolo", + "Fedora-core", + "Nukeador", + "Takenbot", + "Willyaranda", + "Pasky", + "Angelr04", + "Epaclon" ] }, - "Web/CSS/Layout_mode": { - "modified": "2019-03-18T21:44:15.658Z", + "Mozilla/Firefox/Releases/19": { + "modified": "2019-03-18T20:54:04.568Z", "contributors": [ - "NeXuZZ-SCM" + "ulisestrujillo", + "wbamberg", + "Sebastianz", + "mannyatico" ] }, - "Web/CSS/Media_Queries": { - "modified": "2020-10-15T22:13:20.096Z", + "Mozilla/Firefox/Releases/2": { + "modified": "2019-03-23T23:58:56.168Z", "contributors": [ - "mikelmg" + "wbamberg", + "DoctorRomi", + "Markens", + "Mgjbot", + "Nukeador", + "Superruzafa", + "Guis", + "StripTM", + "Jorolo" ] }, - "Web/CSS/Mozilla_Extensions": { - "modified": "2019-03-23T23:21:23.902Z", + "Mozilla/Firefox/Releases/3": { + "modified": "2019-03-24T00:04:08.312Z", "contributors": [ - "ExE-Boss", - "Sebastianz", + "wbamberg", "teoli", - "jota1410" + "fscholz", + "Mgjbot", + "Nukeador", + "Surferosx", + "Nathymig", + "Dfier", + "Wrongloop", + "Garlock", + "Brahiam", + "Mariano", + "HenryGR", + "Jseldon" ] }, - "Web/CSS/Preguntas_frecuentes_sobre_CSS": { - "modified": "2020-07-16T22:25:44.798Z", + "Mozilla/Firefox/Releases/3.5": { + "modified": "2019-03-24T00:03:16.036Z", "contributors": [ - "teoli", - "inma_610" + "wbamberg", + "ethertank", + "another_sam", + "deimidis", + "Nukeador" ] }, - "Web/CSS/Primeros_pasos": { - "modified": "2019-03-24T00:05:34.862Z", + "orphaned/Firefox_addons_developer_guide/Introduction_to_Extensions": { + "modified": "2019-03-23T23:37:41.632Z", "contributors": [ - "teoli", - "deimidis" + "pacommozilla", + "AgustinAlvia" ] }, - "Web/CSS/Pseudo-classes": { - "modified": "2020-02-22T08:04:35.419Z", + "orphaned/Firefox_addons_developer_guide/Technologies_used_in_developing_extensions": { + "modified": "2019-03-18T21:16:06.336Z", "contributors": [ - "BraisOliveira", - "MrEscape54", - "MrCoffey", - "alkaithil", - "viro" + "AgustinAlvia" ] }, - "Web/CSS/Pseudoelementos": { - "modified": "2019-03-23T23:21:50.048Z", + "orphaned/Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio": { + "modified": "2019-01-16T14:22:48.165Z", "contributors": [ - "BubuAnabelas", - "VictorAbdon", - "teoli", - "jota1410" + "inma_610" ] }, - "Web/CSS/Referencia_CSS": { - "modified": "2019-03-24T00:14:13.384Z", + "orphaned/Fragmentos_de_código": { + "modified": "2019-01-16T13:52:44.049Z", "contributors": [ - "lajaso", - "israel-munoz", - "joshitobuba", - "mrstork", - "prayash", - "malayaleecoder", - "teoli", - "tregagnon", - "inma_610", - "fscholz", - "Nukeador" + "ffox" ] }, - "Web/CSS/Referencia_CSS/mix-blend-mode": { - "modified": "2020-10-15T21:37:53.265Z", + "orphaned/Funciones": { + "modified": "2019-01-16T16:18:04.260Z", "contributors": [ - "Undigon", - "mrstork", - "teoli", - "Sebastianz", - "msanz" + "Jorolo" ] }, - "Web/CSS/Selectores_CSS": { - "modified": "2019-07-09T01:16:13.123Z", + "Games/Tools/asm.js": { + "modified": "2019-03-18T21:21:31.919Z", "contributors": [ - "missmakita", - "blanchart", - "Benji1337", - "metal-gogo", - "kikolevante" + "WilsonIsAliveClone", + "serarroy" ] }, - "Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores": { - "modified": "2020-07-31T07:57:08.167Z", + "Games/Tools": { + "modified": "2019-01-16T19:29:51.696Z", "contributors": [ - "blanchart", - "israel-munoz" + "wbamberg", + "atlas7jean" ] }, - "Web/CSS/Selectores_atributo": { - "modified": "2020-10-15T21:26:03.862Z", + "Games/Introduction_to_HTML5_Game_Development": { + "modified": "2019-08-05T12:49:59.324Z", "contributors": [ - "blanchart", - "MoisesGuevara", - "lajaso", - "teoli", - "jota1410" + "WilsonIsAliveClone" ] }, - "Web/CSS/Selectores_hermanos_adyacentes": { - "modified": "2019-03-23T22:39:30.908Z", + "Games/Introduction": { + "modified": "2020-11-28T21:23:49.961Z", "contributors": [ - "alkaithil" + "rayrojas", + "titox", + "gauchoscript", + "wbamberg", + "Mancux2", + "Albizures", + "atlas7jean" ] }, - "Web/CSS/Selectores_hermanos_generales": { - "modified": "2019-03-23T22:39:33.429Z", + "Games/Publishing_games/Game_monetization": { + "modified": "2019-03-18T21:22:04.540Z", "contributors": [ - "alkaithil" + "mikelmg", + "carlosgocereceda", + "WilsonIsAliveClone" ] - }, - "Web/CSS/Shorthand_properties": { - "modified": "2019-08-11T12:52:52.844Z", + }, + "Games/Tutorials/2D_breakout_game_Phaser/Buttons": { + "modified": "2019-11-03T00:22:01.318Z", "contributors": [ - "blanchart", - "EstebanRK", - "IsraelFloresDGA", - "huichops" + "AdryDev92", + "carlosgocereceda", + "serarroy" ] }, - "Web/CSS/Sintaxis_definición_de_valor": { - "modified": "2019-03-23T22:38:52.899Z", + "Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls": { + "modified": "2019-03-18T21:18:55.239Z", "contributors": [ - "apazacoder", - "Sebastianz", - "Guillaume-Heras", - "VictorAbdon" + "WilsonIsAliveClone" ] }, - "Web/CSS/Syntax": { - "modified": "2020-09-29T20:54:10.526Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls": { + "modified": "2019-03-23T22:19:43.884Z", "contributors": [ - "lucasmmaidana", - "joseanpg", - "mili01gm", - "Derhks" + "wbamberg", + "regisdark", + "profesooooor", + "emolinerom" ] }, - "Web/CSS/Texto_CSS": { - "modified": "2019-03-23T22:36:23.444Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field": { + "modified": "2019-01-17T00:34:48.662Z", "contributors": [ - "pekechis" + "wbamberg", + "profesooooor", + "emolinerom" ] }, - "Web/CSS/Transiciones_de_CSS": { - "modified": "2019-08-01T05:58:17.579Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls": { + "modified": "2019-01-17T00:34:24.542Z", "contributors": [ - "chrisdavidmills", - "mrstork", - "alberdigital", - "teoli", - "inma_610", - "deimidis" + "wbamberg", + "profesooooor", + "emolinerom" ] }, - "Web/CSS/Tutorials": { - "modified": "2019-03-23T22:52:34.225Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls": { + "modified": "2019-01-17T00:34:40.600Z", "contributors": [ - "mariolugo" + "wbamberg", + "profesooooor", + "emolinerom" ] }, - "Web/CSS/Type_selectors": { - "modified": "2020-10-15T21:52:26.603Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it": { + "modified": "2019-01-17T00:33:08.752Z", "contributors": [ - "lajaso", - "israel-munoz" + "wbamberg", + "profesooooor", + "jolosan" ] }, - "Web/CSS/Universal_selectors": { - "modified": "2020-10-15T21:52:26.325Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection": { + "modified": "2019-03-18T20:48:38.662Z", "contributors": [ - "lajaso", - "israel-munoz" + "juanedsa", + "wbamberg", + "profesooooor", + "emolinerom" ] }, - "Web/CSS/Using_CSS_custom_properties": { - "modified": "2020-11-26T20:11:21.130Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over": { + "modified": "2019-03-23T22:17:05.460Z", "contributors": [ - "lupomontero", - "betocantu93", - "sokaluis", - "chrisdavidmills", - "BubuAnabelas", - "Creasick", - "Maseria38", - "FlorTello" + "wbamberg", + "regisdark", + "profesooooor", + "jolosan" ] }, - "Web/CSS/Valor_calculado": { - "modified": "2019-03-23T23:53:20.456Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript": { + "modified": "2019-03-23T22:19:39.385Z", "contributors": [ - "teoli", - "Mgjbot", - "Firewordy", - "HenryGR" + "wbamberg", + "profesooooor", + "emolinerom", + "jolosan" ] }, - "Web/CSS/Valor_inicial": { - "modified": "2019-01-16T15:32:31.295Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball": { + "modified": "2019-03-23T22:19:10.641Z", "contributors": [ - "teoli", - "Mgjbot", - "Nathymig", - "HenryGR" + "wbamberg", + "profesooooor", + "jolosan", + "emolinerom" ] }, - "Web/CSS/actual_value": { - "modified": "2019-03-23T22:16:54.955Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up": { + "modified": "2019-01-17T01:08:54.537Z", "contributors": [ - "israel-munoz" + "wbamberg", + "profesooooor" ] }, - "Web/CSS/align-content": { - "modified": "2019-06-23T02:54:26.562Z", + "Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win": { + "modified": "2019-01-17T01:08:23.453Z", "contributors": [ - "d0naldo", - "israel-munoz" + "wbamberg", + "profesooooor" ] }, - "Web/CSS/align-items": { - "modified": "2020-08-01T23:15:43.277Z", + "Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation": { + "modified": "2019-03-23T23:11:29.148Z", "contributors": [ - "LorenzoSandoval", - "vanesa", - "AlePerez92", - "LuisJorgeLozano", - "israel-munoz" + "wbamberg", + "lauttttaro", + "chebit" ] }, - "Web/CSS/align-self": { - "modified": "2019-03-18T21:17:16.430Z", + "Games/Tutorials": { + "modified": "2019-01-16T19:25:39.809Z", "contributors": [ - "israel-munoz" + "wbamberg", + "groovecoder" ] }, - "Web/CSS/all": { - "modified": "2019-03-18T21:16:29.697Z", + "orphaned/Generación_de_GUIDs": { + "modified": "2019-03-24T00:06:07.388Z", "contributors": [ - "israel-munoz" + "ibnkhaldun" ] }, - "Web/CSS/angle": { - "modified": "2019-03-23T22:28:51.690Z", + "Glossary/Algorithm": { + "modified": "2019-01-17T00:09:54.063Z", "contributors": [ - "israel-munoz" + "ekros" ] }, - "Web/CSS/animation": { - "modified": "2019-03-23T23:38:13.777Z", + "Glossary/Argument": { + "modified": "2019-03-23T22:15:34.303Z", "contributors": [ - "evaferreira", - "teoli", - "Luis_Calvo", - "jesanchez", - "ccarruitero" + "gparra989" ] }, - "Web/CSS/animation-delay": { - "modified": "2019-03-23T23:38:13.594Z", + "Glossary/Information_architecture": { + "modified": "2020-09-06T16:32:32.362Z", "contributors": [ - "Maletil", - "teoli", - "Luis_Calvo", - "jesanchez", - "jsalinas" + "Nachec" ] }, - "Web/CSS/animation-direction": { - "modified": "2019-03-23T23:38:14.261Z", + "Glossary/array": { + "modified": "2020-05-28T13:51:10.546Z", "contributors": [ - "teoli", - "Luis_Calvo", - "jesanchez", - "jsalinas" + "fedoroffs", + "BubuAnabelas", + "Davids-Devel", + "Daniel_Martin", + "gparra989" ] }, - "Web/CSS/animation-duration": { - "modified": "2019-03-23T23:31:43.672Z", + "Glossary/Asynchronous": { + "modified": "2020-05-04T10:40:03.360Z", "contributors": [ - "teoli", - "Sebastianz", - "Luis_Calvo" + "jorgeCaster", + "fjluengo", + "gparra989" ] }, - "Web/CSS/animation-fill-mode": { - "modified": "2019-03-23T23:03:51.180Z", + "Glossary/Attribute": { + "modified": "2019-03-23T22:15:46.319Z", "contributors": [ - "teoli", - "Sebastianz", - "luigli", - "jesusr" + "gparra989" ] }, - "Web/CSS/animation-iteration-count": { - "modified": "2019-03-23T22:59:21.919Z", + "Glossary/General_header": { + "modified": "2019-03-18T21:34:28.155Z", "contributors": [ - "teoli", - "Sebastianz", - "maiky" + "Watermelonnable" ] }, - "Web/CSS/animation-name": { - "modified": "2019-03-23T22:59:26.717Z", + "Glossary/Cache": { + "modified": "2019-03-18T21:19:00.217Z", "contributors": [ - "teoli", - "Sebastianz", - "maiky" + "diegorhs" ] }, - "Web/CSS/animation-play-state": { - "modified": "2019-03-23T22:44:18.177Z", + "Glossary/Character": { + "modified": "2020-08-23T05:27:25.056Z", "contributors": [ - "Boton" + "Nachec" ] }, - "Web/CSS/animation-timing-function": { - "modified": "2019-03-23T22:44:11.502Z", + "Glossary/CIA": { + "modified": "2019-03-18T21:19:22.724Z", "contributors": [ - "ndeniche", - "mrstork", - "Boton" + "PabloDeTorre", + "sergiomgm" ] }, - "Web/CSS/appearance": { - "modified": "2019-03-23T22:44:40.090Z", + "Glossary/Cipher": { + "modified": "2019-03-18T21:19:02.237Z", "contributors": [ - "ExE-Boss", - "teoli", - "wbamberg", - "guerratron" + "PabloDeTorre", + "sergiomgm" ] }, - "Web/CSS/attr()": { - "modified": "2020-11-04T08:51:33.506Z", + "Glossary/Card_sorting": { + "modified": "2019-03-18T21:19:20.709Z", "contributors": [ - "chrisdavidmills", - "mrstork", - "prayash", - "ismachine" + "PabloDeTorre" ] }, - "Web/CSS/auto": { - "modified": "2019-01-16T15:41:51.944Z", + "Glossary/Closure": { + "modified": "2020-08-12T18:07:27.330Z", "contributors": [ - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "l1oret" ] }, - "Web/CSS/backdrop-filter": { - "modified": "2020-10-15T22:05:06.351Z", + "Glossary/Key": { + "modified": "2020-02-18T06:49:22.148Z", "contributors": [ - "lajaso" + "joseluisq", + "sergiomgm", + "GCF7" ] }, - "Web/CSS/backface-visibility": { - "modified": "2019-03-23T22:18:09.464Z", + "Glossary/Type_coercion": { + "modified": "2020-02-29T16:57:08.213Z", "contributors": [ - "israel-munoz" + "frankynztein" ] }, - "Web/CSS/background": { - "modified": "2020-04-23T17:42:59.807Z", + "Glossary/character_set": { + "modified": "2020-08-28T18:09:05.836Z", "contributors": [ - "JAMC", - "MMariscal", - "SphinxKnight", - "fscholz", - "teoli", - "sebasmagri", - "Yuichiro", - "Nathymig" + "Nachec" ] }, - "Web/CSS/background-attachment": { - "modified": "2020-12-12T11:33:06.443Z", + "Glossary/Constant": { + "modified": "2019-03-18T21:19:15.794Z", "contributors": [ - "ejcarreno", - "blanchart", - "smltalavera95", - "SphinxKnight", - "fscholz", - "teoli", - "Nathymig" + "PabloDeTorre" ] }, - "Web/CSS/background-blend-mode": { - "modified": "2019-03-23T22:59:28.908Z", + "Glossary/Cryptanalysis": { + "modified": "2019-03-18T21:18:36.783Z", "contributors": [ - "ExE-Boss", - "israel-munoz", - "mrstork", - "teoli", - "Sebastianz", - "maiky" + "sergiomgm", + "GCF7" ] }, - "Web/CSS/background-clip": { - "modified": "2019-03-18T20:52:42.788Z", + "Glossary/Cryptography": { + "modified": "2019-03-23T22:02:58.447Z", "contributors": [ - "Beatriz_Ortega_Valdes", - "Carlos_Gutierrez", - "teoli", - "Sebastianz", - "rurigk" + "velizluisma" ] }, - "Web/CSS/background-color": { - "modified": "2019-10-10T16:45:24.871Z", + "Glossary/Decryption": { + "modified": "2019-03-18T21:19:11.476Z", "contributors": [ - "SphinxKnight", - "danielfdez", - "teoli", - "Yuichiro", - "Nathymig" + "sergiomgm", + "GCF7" ] }, - "Web/CSS/background-image": { - "modified": "2020-05-06T04:02:29.611Z", + "orphaned/Glossary/elemento": { + "modified": "2019-01-16T19:38:18.287Z", "contributors": [ - "blanchart", - "evaferreira", - "SphinxKnight", - "alexisCan", - "andrpueb", - "teoli", - "Rayber", - "Nathymig", - "ethertank" + "BubuAnabelas", + "HerberWest" ] }, - "Web/CSS/background-origin": { - "modified": "2019-03-24T00:15:00.605Z", + "Glossary/Encryption": { + "modified": "2019-03-18T21:19:07.209Z", "contributors": [ - "teoli", - "Seanwalker" + "PabloDeTorre", + "carlosCharlie", + "sergiomgm" ] }, - "Web/CSS/background-position": { - "modified": "2020-05-06T06:30:15.110Z", + "Glossary/Entity": { + "modified": "2020-07-08T14:34:06.256Z", "contributors": [ - "blanchart", - "SphinxKnight", - "teoli", - "FredB", - "Nathymig", - "ethertank" + "lucasreta" ] }, - "Web/CSS/background-position-x": { - "modified": "2020-10-15T22:33:04.718Z", + "Glossary/Whitespace": { + "modified": "2020-08-24T04:59:10.953Z", "contributors": [ - "Ismael_Diaz" + "Nachec" ] }, - "Web/CSS/background-repeat": { - "modified": "2020-10-15T21:16:00.953Z", + "Glossary/Data_structure": { + "modified": "2019-03-18T21:24:31.453Z", "contributors": [ - "itxuixdev", - "SphinxKnight", - "teoli", - "Nathymig" + "edsonv" ] }, - "Web/CSS/background-size": { - "modified": "2019-03-23T23:38:13.094Z", + "Glossary/First-class_Function": { + "modified": "2020-05-14T19:36:29.513Z", "contributors": [ - "blanchart", - "samuelrb", - "Simplexible", - "Sebastianz", - "Prinz_Rana", - "fscholz", - "teoli", - "chux", - "aguztinrs" + "l1oret", + "hmorv", + "LaloHao" ] }, - "Web/CSS/basic-shape": { - "modified": "2019-03-23T22:21:44.895Z", + "Glossary/Function": { + "modified": "2019-03-18T21:19:19.995Z", "contributors": [ - "israel-munoz" + "PabloDeTorre" ] }, - "Web/CSS/blend-mode": { - "modified": "2020-12-04T10:45:45.837Z", + "Glossary/Main_thread": { + "modified": "2020-03-12T06:05:36.693Z", "contributors": [ - "israel-munoz" + "elimperiodelaweb" ] }, - "Web/CSS/block-size": { - "modified": "2019-03-25T00:21:59.271Z", + "Glossary/Identifier": { + "modified": "2020-08-28T17:30:13.071Z", "contributors": [ - "teffcode", - "israel-munoz" + "Nachec" ] }, - "Web/CSS/border": { - "modified": "2020-09-27T22:17:02.248Z", + "Glossary/Immutable": { + "modified": "2019-03-18T21:19:12.385Z", "contributors": [ - "usuarioMan", - "cgosorio", - "wbamberg", - "SphinxKnight", - "teoli", - "Yuichiro", - "Nathymig" + "PabloDeTorre" ] }, - "Web/CSS/border-block": { - "modified": "2020-10-15T22:16:25.322Z", + "Glossary/UI": { + "modified": "2019-03-18T21:18:49.573Z", "contributors": [ - "teffcode" + "diegorhs" ] }, - "Web/CSS/border-block-color": { - "modified": "2020-10-15T22:16:29.172Z", + "Glossary/Metadata": { + "modified": "2019-03-18T21:19:04.572Z", "contributors": [ - "teffcode" + "PabloDeTorre" ] }, - "Web/CSS/border-block-end": { - "modified": "2019-03-23T00:00:36.213Z", + "Glossary/Method": { + "modified": "2020-07-21T21:37:11.109Z", "contributors": [ - "teffcode", - "israel-munoz" + "Assael02", + "Davids-Devel" ] }, - "Web/CSS/border-block-end-color": { - "modified": "2019-03-24T11:12:10.336Z", + "Glossary/Breadcrumb": { + "modified": "2020-02-02T10:51:21.098Z", "contributors": [ - "teffcode", - "israel-munoz" + "blanchart" ] }, - "Web/CSS/border-block-end-style": { - "modified": "2019-03-23T22:11:28.819Z", + "Glossary/Domain_name": { + "modified": "2019-03-18T21:19:21.120Z", "contributors": [ - "israel-munoz" + "PabloDeTorre" ] }, - "Web/CSS/border-block-end-width": { - "modified": "2020-10-15T22:16:29.514Z", + "Glossary/Forbidden_header_name": { + "modified": "2019-03-23T22:02:11.147Z", "contributors": [ - "teffcode" + "Luiggy", + "tonialfaro" ] }, - "Web/CSS/border-block-start": { - "modified": "2020-10-15T22:16:31.641Z", + "Glossary/Number": { + "modified": "2019-03-23T22:58:03.851Z", "contributors": [ - "teffcode" + "Cleon" ] }, - "Web/CSS/border-block-start-color": { - "modified": "2020-10-15T22:16:30.534Z", + "Glossary/Object": { + "modified": "2019-03-23T22:58:05.221Z", "contributors": [ - "teffcode" + "Cleon" ] }, - "Web/CSS/border-block-start-style": { - "modified": "2020-10-15T22:16:32.074Z", + "Glossary/Operator": { + "modified": "2019-03-23T22:53:20.989Z", "contributors": [ - "teffcode" + "germanfr" ] }, - "Web/CSS/border-block-start-width": { - "modified": "2020-10-15T22:16:36.793Z", + "Glossary/Operand": { + "modified": "2020-09-05T17:33:42.415Z", "contributors": [ - "teffcode" + "brayan-orellanos" ] }, - "Web/CSS/border-block-style": { - "modified": "2020-10-15T22:16:36.371Z", + "Glossary/Call_stack": { + "modified": "2020-04-26T12:00:35.332Z", "contributors": [ - "teffcode" + "l1oret" ] }, - "Web/CSS/border-block-width": { - "modified": "2020-10-15T22:16:39.535Z", + "Glossary/Preflight_request": { + "modified": "2019-03-18T21:29:47.773Z", "contributors": [ - "teffcode" + "daviddelamo" ] }, - "Web/CSS/border-bottom": { - "modified": "2019-03-24T00:08:41.510Z", + "Glossary/CSS_preprocessor": { + "modified": "2019-03-23T22:02:54.782Z", "contributors": [ - "wbamberg", - "teoli", - "Yuichiro", - "Nathymig" + "ealch", + "velizluisma" ] }, - "Web/CSS/border-bottom-color": { - "modified": "2019-03-24T00:08:33.937Z", + "Glossary/Primitive": { + "modified": "2020-09-17T22:06:17.504Z", "contributors": [ - "wbamberg", - "teoli", - "Yuichiro", - "Nathymig" + "Nachec", + "cocososo", + "abaracedo", + "Cleon" ] }, - "Web/CSS/border-bottom-left-radius": { - "modified": "2019-03-18T21:16:45.497Z", + "Glossary/property": { + "modified": "2020-08-28T18:32:40.804Z", "contributors": [ - "israel-munoz" + "Nachec" ] }, - "Web/CSS/border-bottom-right-radius": { - "modified": "2019-03-18T21:15:46.042Z", + "Glossary/Pseudo-class": { + "modified": "2019-03-23T22:38:49.143Z", "contributors": [ - "israel-munoz" + "VictorAbdon" ] }, - "Web/CSS/border-bottom-style": { - "modified": "2019-03-24T00:08:38.365Z", + "Glossary/Pseudocode": { + "modified": "2019-03-18T21:19:15.497Z", "contributors": [ - "wbamberg", - "teoli", - "Yuichiro", - "Nathymig" + "PabloDeTorre" ] }, - "Web/CSS/border-bottom-width": { - "modified": "2019-03-24T00:12:49.342Z", + "Glossary/Recursion": { + "modified": "2019-03-18T21:19:02.064Z", "contributors": [ - "wbamberg", - "teoli", - "Yuichiro", - "Nathymig" + "PabloDeTorre", + "sergiomgm" ] }, - "Web/CSS/border-collapse": { - "modified": "2019-03-23T23:52:09.803Z", + "Glossary/SCM": { + "modified": "2019-03-18T21:19:21.440Z", "contributors": [ - "wbamberg", - "teoli", - "Mgjbot", - "Nathymig" + "carlosCharlie", + "sergiomgm" ] }, - "Web/CSS/border-color": { - "modified": "2019-03-24T00:08:40.211Z", + "Glossary/safe": { + "modified": "2019-03-18T21:18:23.904Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "teoli", - "Yuichiro", - "Nathymig" + "SackmannDV" ] }, - "Web/CSS/border-end-end-radius": { - "modified": "2020-10-15T22:16:36.075Z", + "Glossary/Statement": { + "modified": "2019-03-23T22:57:58.260Z", "contributors": [ - "teffcode" + "abaracedo", + "Cleon" ] }, - "Web/CSS/border-end-start-radius": { - "modified": "2020-10-15T22:16:41.715Z", + "Glossary/Synchronous": { + "modified": "2020-11-14T06:15:42.366Z", "contributors": [ - "teffcode" + "Yuunichi" ] }, - "Web/CSS/border-image": { - "modified": "2019-03-23T23:21:15.962Z", + "Glossary/CMS": { + "modified": "2020-05-23T07:15:12.062Z", "contributors": [ - "teoli", - "Sebastianz", - "JuanCastela", - "yeyxav" + "l1oret" ] }, - "Web/CSS/border-image-outset": { - "modified": "2019-03-23T22:22:10.809Z", + "Glossary/Ciphertext": { + "modified": "2019-03-18T21:19:21.003Z", "contributors": [ - "israel-munoz" + "sergiomgm", + "GCF7" ] }, - "Web/CSS/border-image-repeat": { - "modified": "2020-10-15T21:51:01.640Z", + "Glossary/Plaintext": { + "modified": "2019-03-18T21:19:20.138Z", "contributors": [ - "SphinxKnight", - "israel-munoz" + "sergiomgm", + "GCF7" ] }, - "Web/CSS/border-image-slice": { - "modified": "2019-03-23T22:22:00.674Z", + "Glossary/Dynamic_typing": { + "modified": "2020-05-04T14:10:14.107Z", "contributors": [ - "israel-munoz" + "Caav98" ] }, - "Web/CSS/border-inline": { - "modified": "2020-10-15T22:16:39.413Z", + "Glossary/Static_typing": { + "modified": "2019-11-22T03:17:09.186Z", "contributors": [ - "teffcode" + "HugolJumex" ] }, - "Web/CSS/border-inline-color": { - "modified": "2020-10-15T22:16:39.129Z", + "Glossary/Validator": { + "modified": "2019-03-18T21:19:01.934Z", "contributors": [ - "teffcode" + "PabloDeTorre", + "carlosCharlie", + "sergiomgm" ] }, - "Web/CSS/border-inline-end": { - "modified": "2020-10-15T22:16:35.919Z", + "Glossary/Value": { + "modified": "2020-09-01T08:20:32.500Z", "contributors": [ - "teffcode" + "Nachec" ] }, - "Web/CSS/border-inline-end-color": { - "modified": "2020-10-15T22:16:44.169Z", + "Glossary/XForms": { + "modified": "2019-03-23T22:15:44.959Z", "contributors": [ - "teffcode" + "gparra989" ] }, - "Web/CSS/border-inline-end-style": { - "modified": "2020-10-15T22:16:36.354Z", + "orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox": { + "modified": "2019-01-16T14:29:03.747Z", "contributors": [ - "teffcode" + "teoli", + "Sheppy", + "Eloy" ] }, - "Web/CSS/border-inline-end-width": { - "modified": "2020-10-15T22:16:36.837Z", + "orphaned/Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones": { + "modified": "2019-03-24T00:04:44.724Z", "contributors": [ - "teffcode" + "christopherccg", + "Sheppy", + "Eloy" ] }, - "Web/CSS/border-inline-start": { - "modified": "2020-10-15T22:16:44.782Z", + "orphaned/Guía_para_la_migración_a_catálogo": { + "modified": "2019-01-16T15:34:19.890Z", "contributors": [ - "teffcode" + "HenryGR", + "Mgjbot" ] }, - "Web/CSS/border-inline-start-color": { - "modified": "2020-10-15T22:16:35.643Z", + "orphaned/Herramientas": { + "modified": "2019-01-16T13:52:37.109Z", "contributors": [ - "teffcode" + "teoli", + "StripTM", + "inma_610", + "camilourd" ] }, - "Web/CSS/border-inline-start-style": { - "modified": "2020-10-15T22:16:41.098Z", + "Web/API/Document_object_model/How_to_create_a_DOM_tree": { + "modified": "2019-03-23T23:22:26.711Z", "contributors": [ - "teffcode" + "carrillog.luis" ] }, - "Web/CSS/border-inline-start-width": { - "modified": "2020-10-15T22:16:33.765Z", + "orphaned/HTML/Elemento/datalist": { + "modified": "2019-01-16T19:13:20.868Z", "contributors": [ - "teffcode" + "Darkgyro", + "teoli" ] }, - "Web/CSS/border-inline-style": { - "modified": "2020-10-15T22:16:43.176Z", + "orphaned/HTML/Elemento/form": { + "modified": "2019-01-16T21:24:44.882Z", "contributors": [ - "teffcode" + "eincioch" ] }, - "Web/CSS/border-inline-width": { - "modified": "2020-10-15T22:16:39.409Z", + "orphaned/HTML/Elemento/section": { + "modified": "2019-03-23T23:08:59.333Z", "contributors": [ - "teffcode" + "Raulpascual2", + "carllewisc", + "GeorgeAviateur" ] }, - "Web/CSS/border-left": { - "modified": "2019-03-24T00:08:37.376Z", + "Learn/Forms": { + "modified": "2019-03-24T00:17:58.788Z", "contributors": [ - "fscholz", + "DGarCam", "teoli", - "Yuichiro", - "Mgjbot", - "Wrongloop" + "prieto.any", + "deibyod", + "Ces", + "hugohabel", + "deimidis" ] }, - "Web/CSS/border-left-color": { - "modified": "2019-03-23T23:52:28.495Z", + "orphaned/Learn/HTML/Forms/HTML5_updates": { + "modified": "2019-03-24T00:07:51.068Z", "contributors": [ - "wbamberg", - "d8vjork", - "teoli", - "Wrongloop" + "inma_610", + "Izel", + "StripTM", + "deimidis" ] }, - "Web/CSS/border-radius": { - "modified": "2019-03-23T23:37:30.234Z", + "Web/Guide/HTML/HTML5/HTML5_Parser": { + "modified": "2019-03-24T00:07:09.448Z", "contributors": [ - "Barleby", - "Simplexible", - "Sebastianz", - "Prinz_Rana", "teoli", - "bytx", - "wilo" + "RickieesES", + "inma_610", + "StripTM", + "juanb", + "Izel" ] }, - "Web/CSS/border-right": { - "modified": "2020-10-15T22:17:02.534Z", + "Web/Guide/HTML/HTML5": { + "modified": "2020-05-16T09:08:08.720Z", "contributors": [ - "dlopez525", - "osperi" + "jonasdamher", + "SphinxKnight", + "anibalymariacantantes60", + "AzulMartin", + "264531666", + "fracp", + "damianed", + "alfredotemiquel", + "rossettistone", + "carlossuarez", + "teoli", + "JosueMolina", + "Pablo_Ivan", + "welm", + "bicentenario", + "jesusruiz", + "pierre_alfonso", + "pitufo_cabron", + "cesar_ortiz_elPatox", + "inma_610", + "vigia122", + "StripTM", + "deimidis", + "Izel" ] }, - "Web/CSS/border-spacing": { - "modified": "2019-03-23T23:52:00.961Z", + "Web/Guide/HTML/HTML5/Introduction_to_HTML5": { + "modified": "2019-03-24T00:05:36.058Z", "contributors": [ - "wbamberg", "teoli", - "Nathymig" + "inma_610" ] }, - "Web/CSS/border-start-end-radius": { - "modified": "2020-10-15T22:16:40.778Z", + "Web/Guide/HTML/HTML5/Constraint_validation": { + "modified": "2020-08-11T08:06:04.309Z", "contributors": [ - "teffcode" + "gerardo750711", + "israel-munoz" ] }, - "Web/CSS/border-start-start-radius": { - "modified": "2020-10-15T22:16:40.498Z", + "orphaned/Incrustando_Mozilla/Comunidad": { + "modified": "2019-03-23T22:39:14.279Z", "contributors": [ - "teffcode" + "vamm1981" ] }, - "Web/CSS/border-style": { - "modified": "2020-10-22T00:09:31.436Z", + "conflicting/Web/API/IndexedDB_API": { + "modified": "2019-03-18T21:11:08.379Z", "contributors": [ - "YairCaptain", - "SphinxKnight", - "javierpolit", + "duduindo", "teoli", - "Yuichiro", - "Nathymig" + "semptrion", + "CHORVAT", + "inma_610" ] }, - "Web/CSS/border-top": { - "modified": "2019-03-23T22:41:47.976Z", + "orphaned/Instalación_de_motores_de_búsqueda_desde_páginas_web": { + "modified": "2019-01-16T16:13:53.798Z", "contributors": [ - "cgosorio", - "mcclone2001" + "teoli", + "Nukeador", + "Jorolo" ] }, - "Web/CSS/border-top-color": { - "modified": "2020-10-15T21:59:59.493Z", + "Learn/Accessibility/What_is_accessibility": { + "modified": "2020-07-16T22:40:03.734Z", "contributors": [ - "jpmontoya182" + "editorUOC" ] }, - "Web/CSS/border-top-left-radius": { - "modified": "2019-03-23T22:27:25.384Z", + "Learn/Learning_and_getting_help": { + "modified": "2020-09-02T21:15:54.167Z", "contributors": [ - "israel-munoz" + "Nachec" ] }, - "Web/CSS/border-top-right-radius": { - "modified": "2019-03-23T22:27:24.905Z", + "Learn/Common_questions/How_much_does_it_cost": { + "modified": "2020-07-16T22:35:45.385Z", "contributors": [ - "israel-munoz" + "Beatriz_Ortega_Valdes" ] }, - "Web/CSS/border-width": { - "modified": "2020-12-03T13:55:01.337Z", + "Learn/Common_questions/Common_web_layouts": { + "modified": "2020-07-16T22:35:42.298Z", "contributors": [ - "rc925e", - "davisorb95", - "wbamberg", - "SphinxKnight", - "Yisus777", - "teoli", - "Yuichiro", - "Nathymig" + "Beatriz_Ortega_Valdes" + ] + }, + "Learn/Common_questions/What_is_a_web_server": { + "modified": "2020-10-27T18:34:43.608Z", + "contributors": [ + "noksenberg", + "Yel-Martinez-Consultor-Seo", + "Spectrum369", + "Luisk955", + "Sebaspaco", + "flaki53", + "welm" ] }, - "Web/CSS/bottom": { - "modified": "2019-01-16T15:42:01.210Z", + "Learn/Common_questions/What_is_a_URL": { + "modified": "2020-07-16T22:35:29.126Z", "contributors": [ - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "ezzep66", + "BubuAnabelas" ] }, - "Web/CSS/box-shadow": { - "modified": "2020-10-15T21:19:58.329Z", + "Learn/Common_questions/What_software_do_I_need": { + "modified": "2020-07-16T22:35:32.855Z", "contributors": [ - "davidpala.dev", - "IsraelFloresDGA", - "Sebastianz", - "Prinz_Rana", - "teoli", - "carloshs92" + "Beatriz_Ortega_Valdes" ] }, - "Web/CSS/box-sizing": { - "modified": "2020-10-15T21:37:29.482Z", + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:43.206Z", "contributors": [ - "amazing79", - "Soyaine", - "manuelizo", - "IsraelFloresDGA", - "GiioBass", - "Derhks", - "Sebastianz", - "juandiegoles" + "SphinxKnight", + "Code118", + "dervys19", + "javierdelpino", + "axgeon", + "Leonardo_Valdez", + "cgsramirez" ] }, - "Web/CSS/calc()": { - "modified": "2020-11-04T09:08:00.719Z", + "Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2020-09-10T08:32:11.848Z", "contributors": [ - "chrisdavidmills", - "blanchart", - "mrstork", - "prayash", - "teoli", - "MrBlogger" + "renatico", + "UOCccorcoles", + "Enesimus", + "editorUOC" ] }, - "Web/CSS/caret-color": { - "modified": "2019-03-23T22:08:56.287Z", + "Learn/CSS/Building_blocks/Overflowing_content": { + "modified": "2020-09-07T07:36:40.422Z", "contributors": [ - "israel-munoz" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/clear": { - "modified": "2020-10-30T03:42:19.832Z", + "Learn/CSS/Building_blocks/Debugging_CSS": { + "modified": "2020-10-15T22:26:23.448Z", "contributors": [ - "SphinxKnight", - "Alxbrz19", - "javichito" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/clip": { - "modified": "2019-03-23T23:33:36.877Z", + "Learn/CSS/Building_blocks/Sizing_items_in_CSS": { + "modified": "2020-07-16T22:29:20.704Z", "contributors": [ - "Sebastianz", - "teoli", - "nadiafaya" + "editorUOC" ] }, - "Web/CSS/clip-path": { - "modified": "2020-10-15T21:54:58.750Z", + "Learn/CSS/Building_blocks/The_box_model": { + "modified": "2020-09-06T15:07:38.107Z", "contributors": [ - "fscholz", - "jorgeherrera9103", - "david-velilla", - "CarlosLinares" + "UOCccorcoles", + "capitanzealot", + "editorUOC" ] }, - "Web/CSS/color": { - "modified": "2020-10-15T21:15:23.982Z", + "Learn/CSS/Building_blocks/Backgrounds_and_borders": { + "modified": "2020-09-06T17:26:53.330Z", "contributors": [ - "rhssr", - "SphinxKnight", - "teoli", - "trada", - "Mgjbot", - "HenryGR" + "UOCccorcoles", + "psotresc", + "editorUOC" ] }, - "Web/CSS/color_value": { - "modified": "2019-03-23T22:37:22.211Z", + "Learn/CSS/Building_blocks/Images_media_form_elements": { + "modified": "2020-07-16T22:29:24.707Z", "contributors": [ - "blanchart", - "Sebastianz", - "Simplexible", - "pekechis" + "editorUOC" ] }, - "Web/CSS/column-count": { - "modified": "2020-10-15T21:40:29.448Z", + "Learn/CSS/Building_blocks/Handling_different_text_directions": { + "modified": "2020-07-31T14:48:40.359Z", "contributors": [ - "AlePerez92", - "Anonymous", - "Sebastianz", - "Davier182" + "AndrewSKV", + "Enesimus" ] }, - "Web/CSS/column-span": { - "modified": "2020-10-15T22:21:55.127Z", + "Learn/CSS/Building_blocks/Selectors/Combinators": { + "modified": "2020-09-06T14:09:26.839Z", "contributors": [ - "AlePerez92" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/content": { - "modified": "2019-03-23T23:51:59.928Z", + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2020-09-06T12:41:53.412Z", "contributors": [ - "teoli", - "Nathymig", - "HenryGR" + "UOCccorcoles", + "VichoReyes", + "editorUOC" ] }, - "Web/CSS/cursor": { - "modified": "2019-03-23T23:52:22.554Z", + "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements": { + "modified": "2020-09-06T13:58:30.411Z", "contributors": [ - "wbamberg", - "teoli", - "Wrongloop" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor": { - "modified": "2019-03-24T00:04:04.275Z", + "Learn/CSS/Building_blocks/Selectors/Attribute_selectors": { + "modified": "2020-09-06T13:34:27.599Z", "contributors": [ - "teoli", - "fscholz", - "Mgjbot", - "Jorolo" + "UOCccorcoles", + "psotresc", + "editorUOC" ] }, - "Web/CSS/direction": { - "modified": "2019-01-16T15:40:27.790Z", + "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors": { + "modified": "2020-09-06T13:13:47.580Z", "contributors": [ - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/display": { - "modified": "2020-10-21T14:14:21.533Z", + "Learn/CSS/Building_blocks/Values_and_units": { + "modified": "2020-09-07T09:35:00.652Z", "contributors": [ - "johanfvn", - "davidpala.dev", - "NeoFl3x", - "wbamberg", - "evaferreira", - "SphinxKnight", - "devCaso", - "FranciscoCastle" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/env()": { - "modified": "2020-11-10T11:09:30.133Z", + "Learn/CSS/CSS_layout/Responsive_Design": { + "modified": "2020-07-16T22:27:27.257Z", "contributors": [ - "chrisdavidmills", - "severo" + "editorUOC" ] }, - "Web/CSS/filter": { - "modified": "2019-03-23T22:59:24.815Z", + "Learn/CSS/CSS_layout/Normal_Flow": { + "modified": "2020-07-16T22:27:20.728Z", "contributors": [ - "israel-munoz", - "Sebastianz", - "teoli", - "maiky" + "editorUOC" ] }, - "Web/CSS/filter-function": { - "modified": "2019-03-18T21:34:50.284Z", + "Learn/CSS/CSS_layout/Introduction": { + "modified": "2020-09-15T13:39:37.384Z", "contributors": [ - "lajaso", - "mfluehr" + "UOCccorcoles", + "AndrewSKV", + "editorUOC", + "Jhonaz" ] }, - "Web/CSS/filter-function/blur()": { - "modified": "2020-11-05T09:45:32.642Z", + "Learn/CSS/CSS_layout/Supporting_Older_Browsers": { + "modified": "2020-07-16T22:27:17.501Z", "contributors": [ - "chrisdavidmills", - "lajaso" + "editorUOC" ] }, - "Web/CSS/filter-function/brightness()": { - "modified": "2020-11-05T09:57:09.596Z", + "Learn/CSS/First_steps/Getting_started": { + "modified": "2020-08-31T14:16:45.193Z", "contributors": [ - "chrisdavidmills", - "mjsorribas" + "UOCccorcoles", + "AndrewSKV", + "tito-ramirez", + "editorUOC" ] }, - "Web/CSS/filter-function/url": { - "modified": "2020-01-10T13:46:46.404Z", + "Learn/CSS/First_steps/How_CSS_works": { + "modified": "2020-09-18T07:47:46.630Z", "contributors": [ - "roocce" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/fit-content": { - "modified": "2020-10-15T22:06:18.387Z", + "Learn/CSS/First_steps/How_CSS_is_structured": { + "modified": "2020-08-31T16:55:37.346Z", "contributors": [ - "ocamachor" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/flex": { - "modified": "2019-03-23T22:31:42.324Z", + "Learn/CSS/First_steps/What_is_CSS": { + "modified": "2020-10-15T22:25:30.119Z", "contributors": [ - "Luis_Calvo", - "joshitobuba", - "Enfokat" + "UOCccorcoles", + "Enesimus", + "editorUOC" ] }, - "Web/CSS/flex-basis": { - "modified": "2020-08-16T18:24:46.422Z", + "Learn/CSS/First_steps/Using_your_new_knowledge": { + "modified": "2020-08-23T19:45:30.596Z", "contributors": [ - "metrapach", - "joshitobuba", - "jandrade" + "capitanzealot", + "AndrewSKV", + "Enesimus" ] }, - "Web/CSS/flex-direction": { - "modified": "2020-10-15T21:29:59.011Z", + "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension": { + "modified": "2020-07-16T22:28:11.693Z", "contributors": [ - "Alex_Figueroa", - "evaferreira", - "Manuel-Kas", - "joshitobuba", - "fscholz", - "Sebastianz", - "elkinbernal" + "Creasick", + "Enesimus", + "javierpolit", + "DennisM" ] }, - "Web/CSS/flex-flow": { - "modified": "2019-03-18T21:15:12.282Z", + "Learn/CSS/Howto/Generated_content": { + "modified": "2020-07-16T22:25:47.515Z", "contributors": [ - "carlos.millan3", - "abaracedo" + "chrisdavidmills", + "Juansereina", + "lavilofam1" ] }, - "Web/CSS/flex-grow": { - "modified": "2020-05-06T21:30:31.507Z", + "Learn/CSS/Howto": { + "modified": "2020-07-16T22:25:42.139Z", "contributors": [ - "soniarecher", - "joshitobuba" + "alebarbaja", + "abestrad1" ] }, - "Web/CSS/flex-shrink": { - "modified": "2020-10-15T22:00:16.924Z", + "Learn/CSS/Styling_text/Web_fonts": { + "modified": "2020-09-01T07:26:18.054Z", "contributors": [ - "deluxury", - "Facundo-Corradini" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/flex-wrap": { - "modified": "2019-03-23T23:02:38.556Z", + "Learn/Front-end_web_developer": { + "modified": "2020-11-18T03:33:37.370Z", "contributors": [ - "joshitobuba", - "fscholz", - "Sebastianz", - "Rober84" + "SphinxKnight", + "marquezpedro151", + "andresf.duran", + "Nachec" ] }, - "Web/CSS/float": { - "modified": "2020-11-07T16:01:06.351Z", + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-16T22:33:59.672Z", "contributors": [ - "ppalma1963", - "melisb3", - "wbamberg", - "SphinxKnight", - "teoli", - "fscholz", - "Mgjbot", - "Nathymig", - "HenryGR" + "Enesimus", + "Maose", + "rulo_diaz", + "SphinxKnight" ] }, - "Web/CSS/font": { - "modified": "2019-03-23T23:53:27.791Z", + "Learn/Getting_started_with_the_web/Installing_basic_software": { + "modified": "2020-11-10T01:28:22.294Z", "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "Mgjbot", - "Nathymig", - "Nukeador", - "RickieesES", - "HenryGR" + "rockoldo", + "Nachec", + "Maose", + "Anyito", + "ingridc", + "Enesimus", + "israel-munoz", + "Neto2412", + "AngelFQC", + "mads0306", + "Da_igual", + "Chrixos", + "darbalma" ] }, - "Web/CSS/font-family": { - "modified": "2019-03-23T23:52:00.350Z", + "Learn/Getting_started_with_the_web/The_web_and_web_standards": { + "modified": "2020-09-03T04:02:22.375Z", "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "Nachec" ] }, - "Web/CSS/font-size": { - "modified": "2019-03-23T23:52:02.387Z", + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-09-23T03:12:43.364Z", "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "Nathymig", - "RickieesES", - "HenryGR", - "Mgjbot" + "Nachec", + "chrisdavidmills", + "NavetsArev", + "Maose", + "airmind97", + "hamfree", + "israel-munoz", + "GuilleMiranda", + "merol-dad", + "samshara1", + "mads0306", + "mamptecnocrata", + "Huarseral", + "diazwatson" ] }, - "Web/CSS/font-size-adjust": { - "modified": "2019-03-23T23:53:20.314Z", + "Learn/Tools_and_testing/Cross_browser_testing": { + "modified": "2020-07-16T22:38:59.665Z", "contributors": [ - "wbamberg", - "ivangrimaldo", - "fscholz", - "teoli", - "Mgjbot", - "Nathymig", - "HenryGR" + "arnoldobr" ] }, - "Web/CSS/font-style": { - "modified": "2019-03-23T23:54:11.290Z", + "Learn/Tools_and_testing/GitHub": { + "modified": "2020-10-01T17:01:32.394Z", "contributors": [ - "gustavodibasson", - "ivyixbvp", - "teoli", - "Mgjbot", - "Nathymig", - "RickieesES", - "HenryGR" + "IsraFloores", + "Nachec" ] }, - "Web/CSS/font-variant": { - "modified": "2019-03-23T23:54:15.244Z", + "Learn/Tools_and_testing": { + "modified": "2020-07-16T22:38:54.378Z", "contributors": [ - "wbamberg", - "fscholz", - "teoli", - "Mgjbot", - "Nathymig", - "RickieesES", - "HenryGR" + "WilsonIsAliveClone", + "carlosgocereceda", + "mikelmg" ] }, - "Web/CSS/font-variant-alternates": { - "modified": "2019-03-23T22:18:05.471Z", + "Learn/Tools_and_testing/Client-side_JavaScript_frameworks": { + "modified": "2020-08-22T19:34:32.519Z", "contributors": [ - "israel-munoz" + "spaceinvadev", + "jhonarielgj" ] }, - "Web/CSS/font-weight": { - "modified": "2020-10-08T18:46:18.623Z", + "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started": { + "modified": "2020-08-22T19:52:35.580Z", "contributors": [ - "jorgetoloza", - "EzeRamirez84", - "UbaldoRosas", - "ivyixbvp", - "SphinxKnight", - "fscholz", - "teoli", - "Mgjbot", - "ethertank", - "Nathymig", - "RickieesES", - "HenryGR" + "spaceinvadev" ] }, - "Web/CSS/frequency": { - "modified": "2019-03-23T22:22:14.267Z", + "Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started": { + "modified": "2020-09-17T18:53:24.146Z", "contributors": [ - "israel-munoz" + "Faem0220" ] }, - "Web/CSS/grid": { - "modified": "2019-03-23T22:08:26.115Z", + "Learn/Tools_and_testing/Understanding_client-side_tools": { + "modified": "2020-07-28T15:51:57.413Z", "contributors": [ - "macagua", - "andresrisso" + "b3m3bi" ] }, - "Web/CSS/grid-auto-columns": { - "modified": "2020-10-15T22:07:00.570Z", + "Learn/HTML/Howto": { + "modified": "2020-07-16T22:22:28.075Z", "contributors": [ - "melisb3", - "robyirloreto" + "Loba25", + "blanchart", + "welm" ] }, - "Web/CSS/grid-auto-rows": { - "modified": "2020-10-15T22:00:41.266Z", + "Learn/HTML/Howto/Use_data_attributes": { + "modified": "2020-10-29T15:52:03.444Z", "contributors": [ - "chulesoft", - "deimidis2" + "angeljpa95", + "camsa", + "laatcode" ] }, - "Web/CSS/grid-column-gap": { - "modified": "2020-10-15T22:01:06.788Z", + "Learn/Forms/How_to_build_custom_form_controls": { + "modified": "2020-07-16T22:21:55.231Z", "contributors": [ - "agarcilazo", - "klaufel" + "laatcode" ] }, - "Web/CSS/grid-gap": { - "modified": "2019-03-23T22:13:30.250Z", + "Learn/Forms/How_to_structure_a_web_form": { + "modified": "2020-09-18T11:13:13.645Z", "contributors": [ - "ireneml.fr" + "UOCccorcoles", + "UOCjcanovasi", + "editorUOC", + "chrisdavidmills", + "eljonims" ] }, - "Web/CSS/grid-template-areas": { - "modified": "2019-03-23T22:11:49.454Z", + "conflicting/Learn/Forms": { + "modified": "2020-07-16T22:20:56.050Z", "contributors": [ - "diroco" + "xyvs", + "mikiangel10", + "chrisdavidmills", + "eljonims", + "sjmiles" ] }, - "Web/CSS/grid-template-columns": { - "modified": "2020-10-15T21:57:16.414Z", + "Learn/Forms/Property_compatibility_table_for_form_controls": { + "modified": "2020-08-30T01:12:52.090Z", "contributors": [ - "fscholz", - "IsraelFloresDGA" + "edchasw" ] }, - "Web/CSS/grid-template-rows": { - "modified": "2020-10-15T21:57:11.635Z", + "Learn/Forms/Test_your_skills:_HTML5_controls": { + "modified": "2020-07-16T22:22:11.445Z", "contributors": [ - "AlePerez92", - "fscholz", - "IsraelFloresDGA" + "Enesimus" ] }, - "Web/CSS/height": { - "modified": "2019-03-23T23:54:05.630Z", + "Learn/Forms/Test_your_skills:_Other_controls": { + "modified": "2020-07-16T22:22:12.140Z", "contributors": [ - "israel-munoz", - "teoli", - "Mgjbot", - "Nathymig", - "HenryGR" + "Enesimus" ] }, - "Web/CSS/hyphens": { - "modified": "2020-10-15T22:02:23.515Z", + "Learn/Forms/Sending_and_retrieving_form_data": { + "modified": "2020-07-16T22:21:26.056Z", "contributors": [ - "blanchart", - "AntonioNavajasOjeda" + "Rafasu", + "rocioDEV", + "MrGreen", + "OseChez", + "DaniNz", + "peternerd", + "SphinxKnight", + "chrisdavidmills", + "Ricky_Lomax" ] }, - "Web/CSS/image": { - "modified": "2019-03-23T22:28:08.883Z", + "Learn/Forms/Styling_web_forms": { + "modified": "2020-07-16T22:21:30.546Z", "contributors": [ - "israel-munoz" + "OMEGAYALFA", + "chrisdavidmills", + "cizquierdof" ] }, - "Web/CSS/image-rendering": { - "modified": "2020-10-15T22:02:06.401Z", + "Learn/Forms/Basic_native_form_controls": { + "modified": "2020-09-15T08:02:23.197Z", "contributors": [ - "rodrigorila" + "UOCccorcoles", + "editorUOC", + "rayrojas" ] }, - "Web/CSS/ime-mode": { - "modified": "2019-01-16T14:38:44.597Z", + "Learn/Forms/HTML5_input_types": { + "modified": "2020-10-30T10:06:35.877Z", "contributors": [ - "teoli", - "fscholz", - "Mgjbot", - "Nathymig", - "HenryGR" + "alejandro0619", + "panpy-web" ] }, - "Web/CSS/inherit": { - "modified": "2019-07-27T06:34:31.498Z", + "Learn/Forms/Form_validation": { + "modified": "2020-11-19T13:12:47.854Z", "contributors": [ - "josepaternina", - "AlejandroJSR7", - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "tcebrian", + "UOCccorcoles", + "UOCjcanovasi", + "editorUOC", + "blanchart", + "israel-munoz" ] }, - "Web/CSS/inheritance": { - "modified": "2019-03-23T23:53:04.499Z", + "Learn/Forms/Your_first_form": { + "modified": "2020-09-15T05:57:07.460Z", "contributors": [ - "joseanpg", - "teoli", - "Mgjbot", - "Nathymig", - "HenryGR" + "UOCccorcoles", + "editorUOC", + "BraisOliveira", + "OMEGAYALFA", + "OrlandoDeJesusCuxinYama", + "Giikah", + "chrisdavidmills", + "HGARZON" ] }, - "Web/CSS/initial": { - "modified": "2019-01-16T15:42:24.130Z", + "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-09-05T21:21:55.228Z", "contributors": [ - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "Nachec", + "UOCccorcoles", + "Enesimus", + "jmalsar", + "editorUOC", + "RG52", + "luchiano199", + "AlieYin" ] }, - "Web/CSS/inline-size": { - "modified": "2020-10-15T22:16:34.800Z", + "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { + "modified": "2020-09-05T04:27:29.218Z", "contributors": [ - "teffcode" + "Nachec", + "UOCccorcoles", + "juan.grred", + "Enesimus", + "jmalsar", + "blanchart", + "editorUOC", + "Myuel", + "MichaelMejiaMora", + "ferlopezcarr", + "javierpolit" ] }, - "Web/CSS/inset": { - "modified": "2020-10-15T22:16:40.193Z", + "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { + "modified": "2020-08-31T12:17:08.843Z", "contributors": [ - "teffcode" + "UOCccorcoles", + "editorUOC", + "javierpolit" ] }, - "Web/CSS/inset-block": { - "modified": "2020-10-15T22:16:40.204Z", + "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { + "modified": "2020-09-06T16:55:31.460Z", "contributors": [ - "teffcode" + "Nachec", + "UOCccorcoles", + "editorUOC", + "chaerf", + "AlidaContreras", + "javierpolit", + "SoftwareRVG", + "welm" ] }, - "Web/CSS/inset-block-end": { - "modified": "2020-10-15T22:16:39.037Z", + "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:18.388Z", "contributors": [ - "teffcode" + "SoftwareRVG" ] }, - "Web/CSS/inset-block-start": { - "modified": "2020-10-15T22:16:44.127Z", + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-09-03T05:18:15.831Z", "contributors": [ - "teffcode" + "Nachec", + "Enesimus", + "ivanagui2", + "Sergio_Gonzalez_Collado", + "cizquierdof", + "AngelFQC" ] }, - "Web/CSS/inset-inline": { - "modified": "2020-10-15T22:16:43.251Z", + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-11-24T21:57:47.560Z", "contributors": [ - "teffcode" + "nilo15", + "Nachec", + "UOCccorcoles", + "maodecolombia", + "Enesimus", + "editorUOC", + "narvmtz", + "dmipaguirre", + "BubuAnabelas", + "marlabarbz", + "erllanosr", + "r2fv", + "jonasmreza", + "Cjpertuz", + "yan-vega", + "Armando-Cruz", + "felixgomez", + "olvap", + "emermao", + "soedrego", + "Abihu", + "mitocondriaco", + "nahuelsotelo", + "dayamll", + "JimP99", + "EdwinTorres", + "salvarez1988", + "cizquierdof", + "juanluis", + "welm" ] }, - "Web/CSS/inset-inline-end": { - "modified": "2020-10-15T22:16:39.864Z", + "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:11.881Z", "contributors": [ - "teffcode" + "jmalsar", + "luchiano199", + "javierpolit" ] }, - "Web/CSS/inset-inline-start": { - "modified": "2020-10-15T22:16:43.418Z", + "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-11-07T18:07:55.376Z", "contributors": [ - "teffcode" + "nilo15", + "Nachec", + "UOCccorcoles", + "ccorcoles", + "editorUOC", + "hector080", + "clarii", + "Myuel", + "dmipaguirre", + "Armando-Cruz", + "MichaelMejiaMora", + "soedrego", + "absaucedo", + "venomdj2011", + "CarlosJose" ] }, - "Web/CSS/integer": { - "modified": "2019-03-23T23:50:21.071Z", + "Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links": { + "modified": "2020-07-16T22:24:22.922Z", "contributors": [ - "fscholz", - "teoli", - "HenryGR", - "Mgjbot" + "Enesimus" ] }, - "Web/CSS/isolation": { - "modified": "2019-03-23T22:32:29.363Z", + "Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics": { + "modified": "2020-07-16T22:24:21.949Z", "contributors": [ - "SoftwareRVG", - "javichito" + "Enesimus" ] }, - "Web/CSS/justify-content": { - "modified": "2019-03-23T22:48:18.861Z", + "Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text": { + "modified": "2020-09-05T23:06:12.474Z", "contributors": [ - "amaiafilo", - "angelfeliz", - "teoli", - "Sebastianz", - "JoaquinBedoian" + "walter.boba79" ] }, - "Web/CSS/left": { - "modified": "2020-10-15T21:15:23.699Z", + "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-09-04T15:00:09.675Z", "contributors": [ - "SphinxKnight", - "miltonjosuerivascastro100", - "Sebastianz", - "teoli", - "ethertank", - "Mgjbot", - "fiorella", - "HenryGR" + "Nachec", + "UOCccorcoles", + "Enesimus", + "Maose", + "ccorcoles", + "editorUOC", + "hector080", + "JulianMahecha", + "BubuAnabelas", + "RafaelVentura", + "jadiosc", + "dcarmal-dayvo", + "Owildfox", + "Myuel", + "dmipaguirre", + "Dany07", + "welm" ] }, - "Web/CSS/length": { - "modified": "2019-03-23T23:54:15.791Z", + "Learn/HTML/Tables/Basics": { + "modified": "2020-09-09T11:52:38.720Z", "contributors": [ - "israel-munoz", - "fscholz", - "teoli", - "deibyod", - "Mgjbot", - "HenryGR" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/line-height": { - "modified": "2019-06-20T19:43:18.097Z", + "Learn/HTML/Tables/Advanced": { + "modified": "2020-09-14T06:33:13.790Z", "contributors": [ - "jalonnun", - "Daniel_Martin", - "wbamberg", - "IsaacAaron", - "SphinxKnight", - "garolard", - "teoli", - "Mgjbot", - "Nathymig", - "RickieesES", - "HenryGR" + "UOCccorcoles", + "editorUOC" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:56:55.739Z", + "Learn/HTML/Tables": { + "modified": "2020-07-16T22:25:11.000Z", "contributors": [ - "chrisdavidmills", - "efrenmartinez", - "rgomez", - "Miguelslo27", - "Sebastianz", - "prayash", - "scarnagot" + "Drathveloper", + "IXTRUnai" ] }, - "Web/CSS/list-style": { - "modified": "2019-03-23T23:52:08.020Z", + "Learn/HTML/Tables/Structuring_planet_data": { + "modified": "2020-07-16T22:25:29.339Z", "contributors": [ - "SphinxKnight", - "teoli", - "Nathymig" + "IXTRUnai" ] }, - "Web/CSS/list-style-image": { - "modified": "2019-03-23T23:52:12.640Z", + "Learn/JavaScript/Building_blocks/Looping_code": { + "modified": "2020-10-10T18:54:10.014Z", "contributors": [ - "SphinxKnight", - "teoli", - "Nathymig" + "GianGuerra", + "Enesimus", + "josecampo", + "jesusvillalta", + "yohanolmedo", + "Zenchy", + "SebastianMaciel" ] }, - "Web/CSS/list-style-position": { - "modified": "2019-03-23T23:52:11.106Z", + "Learn/JavaScript/Building_blocks/Build_your_own_function": { + "modified": "2020-07-16T22:31:28.751Z", "contributors": [ - "magdic", - "SphinxKnight", - "teoli", - "Nathymig" + "InmobAli", + "serarroy", + "carlosgocereceda" ] }, - "Web/CSS/list-style-type": { - "modified": "2019-03-23T23:52:09.967Z", + "Learn/JavaScript/Building_blocks/Events": { + "modified": "2020-07-16T22:31:37.027Z", "contributors": [ - "SphinxKnight", - "teoli", - "Nathymig", - "ethertank" + "jhonarielgj", + "sebastiananea", + "maximilianotulian", + "ismamz" ] }, - "Web/CSS/margin": { - "modified": "2019-03-23T22:26:03.547Z", + "Learn/JavaScript/Building_blocks/Image_gallery": { + "modified": "2020-07-16T22:31:42.753Z", "contributors": [ - "Limbian" + "amIsmael" ] }, - "Web/CSS/margin-block": { - "modified": "2020-10-15T22:16:43.806Z", + "Learn/JavaScript/Client-side_web_APIs/Introduction": { + "modified": "2020-07-16T22:32:44.249Z", "contributors": [ - "mariadelrosario98", - "teffcode" + "robertsallent", + "gonzaa96", + "Usuario001", + "kevtinoco", + "Anonymous", + "OrlandoDeJesusCuxinYama" ] }, - "Web/CSS/margin-block-start": { - "modified": "2020-10-15T22:16:40.788Z", + "Learn/JavaScript/First_steps/Silly_story_generator": { + "modified": "2020-11-28T18:15:56.503Z", "contributors": [ - "teffcode" + "willian593", + "Enesimus", + "fj1261", + "keskyle17", + "antqted" ] }, - "Web/CSS/margin-bottom": { - "modified": "2019-03-23T23:13:38.811Z", + "Learn/JavaScript/First_steps/Math": { + "modified": "2020-08-11T20:21:00.937Z", "contributors": [ - "wbamberg", - "Sebastianz", - "fscholz", - "damesa" + "Nachec", + "Enesimus", + "keskyle17", + "Creasick", + "Aussith_9NT", + "JaviMartain", + "guibetancur", + "domingoacd", + "jjpc" ] }, - "Web/CSS/margin-inline": { - "modified": "2020-10-15T22:16:41.777Z", + "Learn/JavaScript/First_steps/Test_your_skills:_Strings": { + "modified": "2020-08-11T12:16:57.685Z", "contributors": [ - "karen-pal", - "teffcode" + "Nachec" ] }, - "Web/CSS/margin-inline-end": { - "modified": "2020-10-15T22:16:40.105Z", + "Learn/JavaScript/First_steps/What_is_JavaScript": { + "modified": "2020-08-08T22:05:17.982Z", "contributors": [ - "teffcode" + "Nachec", + "zgreco2000", + "jacobo.delgado", + "console", + "c9009", + "Creasick", + "bosspetta", + "alejoWeb", + "JorgeAML", + "eliud-c-delgado", + "roberbnd" ] }, - "Web/CSS/margin-inline-start": { - "modified": "2020-10-15T22:16:38.735Z", + "Learn/JavaScript/Objects/Object_building_practice": { + "modified": "2020-07-16T22:32:30.877Z", "contributors": [ - "teffcode" + "r-vasquez", + "rayrojas", + "luchiano199", + "Sergio_Gonzalez_Collado", + "pomarbar" ] }, - "Web/CSS/margin-right": { - "modified": "2019-03-23T23:54:10.369Z", + "Learn/Server-side/Django/Introduction": { + "modified": "2020-07-16T22:36:38.315Z", "contributors": [ - "teoli", - "Marti1125" + "dr2d4", + "jlpb97", + "oalberto96", + "javierdelpino", + "oscvic" ] }, - "Web/CSS/max-block-size": { - "modified": "2020-10-15T22:16:39.543Z", + "Learn/Server-side/First_steps": { + "modified": "2020-07-16T22:36:08.254Z", "contributors": [ - "teffcode" + "javierdelpino" ] }, - "Web/CSS/max-height": { - "modified": "2019-03-23T23:52:01.295Z", + "Learn/Server-side/First_steps/Introduction": { + "modified": "2020-07-16T22:36:13.094Z", "contributors": [ - "wbamberg", - "marc31bilbao", - "teoli", - "Mgjbot", - "Nathymig" + "AnaHertaj", + "SphinxKnight", + "mortyBL", + "javierdelpino" ] }, - "Web/CSS/max-inline-size": { - "modified": "2020-10-15T22:16:37.228Z", + "Learn/Server-side/First_steps/Website_security": { + "modified": "2020-07-16T22:36:27.856Z", "contributors": [ - "teffcode" + "isaine", + "Slb-Sbsz", + "javierdelpino" ] }, - "Web/CSS/max-width": { - "modified": "2020-10-15T21:16:38.209Z", + "Learn/Server-side/First_steps/Client-Server_overview": { + "modified": "2020-07-16T22:36:18.740Z", "contributors": [ - "SphinxKnight", - "teoli", - "HenryGR", - "Mgjbot" + "Slb-Sbsz", + "javierdelpino" ] }, - "Web/CSS/min()": { - "modified": "2020-12-03T10:19:50.144Z", + "Learn/Server-side/First_steps/Web_frameworks": { + "modified": "2020-07-16T22:36:23.784Z", "contributors": [ - "AlePerez92", - "chrisdavidmills", - "meolivares06" + "Slb-Sbsz", + "javierdelpino" ] }, - "Web/CSS/min-block-size": { - "modified": "2020-10-15T22:16:39.045Z", + "Learn/Common_questions/Using_Github_pages": { + "modified": "2020-07-16T22:35:51.571Z", "contributors": [ - "teffcode" + "DaniNz", + "LuyisiMiger", + "TAXIS" ] }, - "Web/CSS/min-height": { - "modified": "2019-03-23T23:51:59.533Z", + "Glossary/Localization": { + "modified": "2019-01-16T13:31:36.167Z", "contributors": [ - "wbamberg", - "Sebastianz", - "teoli", - "Nathymig" + "DirkS", + "RickieesES", + "Mgjbot", + "Verruckt", + "Jorolo", + "Takenbot", + "Nukeador", + "Radigar" ] }, - "Web/CSS/min-inline-size": { - "modified": "2020-10-15T22:16:37.579Z", + "orphaned/Localizar_con_Narro": { + "modified": "2019-03-24T00:12:25.538Z", "contributors": [ - "teffcode" + "jvmjunior", + "deimidis" ] }, - "Web/CSS/min-width": { - "modified": "2019-03-23T23:50:19.370Z", + "MDN/At_ten": { + "modified": "2019-03-23T22:49:57.954Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "teoli", - "HenryGR", - "Mgjbot" + "pabloveintimilla", + "diego.mauricio.meneses.rios" ] }, - "Web/CSS/minmax()": { - "modified": "2020-11-16T09:05:45.467Z", + "orphaned/MDN/Community": { + "modified": "2020-04-24T19:14:03.228Z", "contributors": [ - "chrisdavidmills", - "jorgemontoyab" + "inwm", + "SphinxKnight", + "wbamberg", + "jenyvera", + "0zxo", + "Jeremie", + "LeoHirsch", + "luisgm76" ] }, - "Web/CSS/normal": { - "modified": "2019-03-23T23:50:19.746Z", + "orphaned/MDN/Community/Working_in_community": { + "modified": "2020-09-03T13:14:53.733Z", "contributors": [ - "teoli", - "FredB", - "HenryGR" + "FoulMangoPY", + "jswisher", + "wbamberg", + "welm", + "Sebastian.Nagles" ] }, - "Web/CSS/number": { - "modified": "2019-03-23T23:53:45.345Z", + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2020-08-21T18:14:17.930Z", "contributors": [ - "fscholz", - "teoli", - "Mgjbot", - "HenryGR" + "Tomillo", + "JADE-2006", + "wbamberg", + "JuniorBO", + "Arudb79", + "LeoHirsch" ] }, - "Web/CSS/object-fit": { - "modified": "2020-10-15T21:53:59.281Z", + "orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template": { + "modified": "2019-03-18T21:31:21.033Z", "contributors": [ - "AlePerez92", - "BubuAnabelas", - "Cristhian-Medina", - "fernandozarco", - "chrisvpr", - "cristianeph" + "wbamberg", + "B1tF8er" ] }, - "Web/CSS/object-position": { - "modified": "2019-03-23T22:31:02.066Z", + "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { + "modified": "2019-01-16T19:47:18.318Z", "contributors": [ - "thezeeck" + "wbamberg", + "LeoHirsch" ] }, - "Web/CSS/opacity": { - "modified": "2019-08-20T11:36:11.809Z", + "orphaned/MDN/Contribute/Howto/Remove_Experimental_Macros": { + "modified": "2020-07-05T17:06:56.383Z", "contributors": [ - "Armando-Cruz", - "blanchart", - "Manten19", - "UlisesGascon", - "teoli" + "Anibalismo" ] }, - "Web/CSS/order": { - "modified": "2019-03-23T22:28:06.551Z", + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-03-18T20:54:27.132Z", "contributors": [ - "evaferreira", - "joshitobuba" + "LauraJaime8", + "wbamberg", + "ElNobDeTfm", + "Arudb79", + "LeoHirsch" ] }, - "Web/CSS/outline": { - "modified": "2020-10-15T21:49:07.223Z", + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T18:56:48.857Z", "contributors": [ - "danielblazquez", - "IsaacAaron", - "israel-munoz" + "wbamberg", + "MarkelCuesta", + "rowasc", + "LeoHirsch" ] }, - "Web/CSS/outline-color": { - "modified": "2019-03-18T21:15:39.790Z", + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2020-07-05T16:17:53.925Z", "contributors": [ - "israel-munoz" + "Anibalismo", + "Maose", + "wbamberg", + "gerard.am", + "LeoHirsch" ] }, - "Web/CSS/outline-offset": { - "modified": "2019-03-23T22:27:28.876Z", + "orphaned/MDN/Contribute/Howto/Use_navigation_sidebars": { + "modified": "2019-05-08T17:34:30.854Z", "contributors": [ - "israel-munoz" + "ivanagui2" ] }, - "Web/CSS/outline-style": { - "modified": "2019-03-18T21:45:18.063Z", + "orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-06-26T02:13:25.044Z", "contributors": [ - "israel-munoz" + "Enesimus", + "pablorebora", + "blanchart", + "BubuAnabelas", + "SphinxKnight", + "FranciscoImanolSuarez" ] }, - "Web/CSS/outline-width": { - "modified": "2019-03-18T21:16:50.488Z", + "MDN/Contribute/Processes": { + "modified": "2019-01-17T02:12:44.469Z", "contributors": [ - "israel-munoz" + "wbamberg", + "astrapotro" ] }, - "Web/CSS/overflow": { - "modified": "2020-10-15T21:22:11.063Z", + "MDN/Guidelines/Conventions_definitions": { + "modified": "2020-09-30T15:28:56.412Z", "contributors": [ - "manuelizo", - "SJW", - "marc-ferrer", - "developingo", - "Sebastianz", - "Sheppy", - "teoli", - "_0x" + "chrisdavidmills", + "Nachec" ] }, - "Web/CSS/overflow-y": { - "modified": "2020-10-15T21:37:11.176Z", + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:28:56.038Z", "contributors": [ - "_deiberchacon", - "Silly-and_Clever", + "chrisdavidmills", + "blanchart", + "clarii", + "wbamberg", + "Jeremie", + "Salamandra101", + "Dgeek", + "fscholz", + "LeoHirsch", "teoli", - "Sebastianz", - "yvesmh" + "Pgulijczuk", + "DoctorRomi", + "Nukeador", + "Nanomo", + "Eqx", + "Jorolo" ] }, - "Web/CSS/padding": { - "modified": "2020-07-02T20:44:00.780Z", + "MDN/Yari": { + "modified": "2019-09-09T15:52:33.535Z", "contributors": [ - "kren.funes17", - "arielnoname", - "Sebastianz", - "fscholz", - "teoli", - "maiky" + "SphinxKnight", + "clarii", + "wbamberg", + "Jeremie", + "Diio", + "atlas7jean" ] }, - "Web/CSS/padding-block": { - "modified": "2020-10-15T22:16:40.169Z", + "MDN/Structures/Live_samples": { + "modified": "2020-09-30T09:06:15.983Z", "contributors": [ - "teffcode" + "chrisdavidmills", + "wbamberg", + "emanuelvega", + "LUISTGMDN", + "elihro" ] }, - "Web/CSS/padding-block-end": { - "modified": "2020-10-15T22:16:44.832Z", + "MDN/Structures/Macros/Other": { + "modified": "2020-09-30T09:06:17.522Z", "contributors": [ - "teffcode" + "chrisdavidmills", + "Nachec" ] }, - "Web/CSS/padding-block-start": { - "modified": "2020-10-15T22:16:44.371Z", + "MDN/Structures/Compatibility_tables": { + "modified": "2020-10-15T22:33:39.399Z", "contributors": [ - "teffcode" + "chrisdavidmills", + "Nachec" ] }, - "Web/CSS/padding-bottom": { - "modified": "2019-03-23T22:12:06.885Z", + "MDN/Tools/KumaScript": { + "modified": "2020-09-30T16:48:19.117Z", "contributors": [ - "qsanabria" + "chrisdavidmills", + "wbamberg", + "velizluisma", + "Jeremie", + "LeoHirsch" ] }, - "Web/CSS/padding-inline": { - "modified": "2020-10-15T22:16:45.046Z", + "orphaned/MDN/Tools/Page_regeneration": { + "modified": "2020-09-30T16:48:19.365Z", "contributors": [ - "teffcode" + "chrisdavidmills", + "Anibalismo" ] }, - "Web/CSS/padding-inline-end": { - "modified": "2020-10-15T22:16:39.998Z", + "orphaned/MDN/Tools/Template_editing": { + "modified": "2020-09-30T16:48:19.234Z", "contributors": [ - "teffcode" + "chrisdavidmills", + "wbamberg", + "juan-ferrer-toribio" ] }, - "Web/CSS/padding-inline-start": { - "modified": "2020-10-15T22:16:41.877Z", + "Mozilla/Firefox/Releases/3/DOM_improvements": { + "modified": "2019-03-23T23:50:52.840Z", "contributors": [ - "teffcode" + "wbamberg", + "Mgjbot", + "RickieesES", + "Nukeador", + "HenryGR", + "Talisker" ] }, - "Web/CSS/padding-top": { - "modified": "2019-03-23T22:12:05.180Z", + "Mozilla/Firefox/Releases/3/SVG_improvements": { + "modified": "2019-03-23T23:50:55.206Z", "contributors": [ - "qsanabria" + "wbamberg", + "Mgjbot", + "RickieesES", + "Nukeador", + "Talisker" ] }, - "Web/CSS/perspective": { - "modified": "2019-03-23T23:23:10.717Z", + "Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3": { + "modified": "2019-03-24T00:02:34.038Z", "contributors": [ - "Sebastianz", - "Prinz_Rana", + "wbamberg", "fscholz", + "Nukeador", + "Mgjbot", + "Nathymig", + "Dukebody" + ] + }, + "orphaned/Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla": { + "modified": "2019-03-23T23:59:56.566Z", + "contributors": [ "teoli", - "AngelFQC" + "Siyivan", + "krusch", + "Mgjbot", + "Mrgonzalez", + "Superruzafa", + "Ttataje", + "Nukeador" ] }, - "Web/CSS/porcentaje": { - "modified": "2019-03-23T23:25:05.075Z", + "orphaned/Modo_casi_estándar_de_Gecko": { + "modified": "2019-03-23T23:43:50.956Z", "contributors": [ - "fscholz", "teoli", - "aerotrink" + "Mgjbot", + "Jorolo" ] }, - "Web/CSS/position": { - "modified": "2020-10-15T21:15:59.180Z", + "orphaned/Módulos_JavaScript": { + "modified": "2019-03-23T23:53:21.168Z", "contributors": [ - "mollzilla", - "ismamz", - "mauriciopaterninar", - "phurtado1112", - "sejas", - "OttoChamo", - "plaso", - "Aleks07m", - "welm", "SphinxKnight", - "CarmenCamacho", - "enriqueabsurdum", - "killoblanco", "teoli", "Mgjbot", - "HenryGR" + "Ffranz", + "Mariano" ] }, - "Web/CSS/quotes": { - "modified": "2020-10-15T21:46:00.335Z", + "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": { + "modified": "2019-03-18T21:08:05.873Z", "contributors": [ - "SJW", - "arroutado" + "hecaxmmx", + "rgo", + "jde-gr", + "doztrock", + "yuniers" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:09.252Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Debugging": { + "modified": "2019-03-18T21:05:20.525Z", "contributors": [ - "chrisdavidmills", - "hectorcano", - "israel-munoz" + "Pau" ] }, - "Web/CSS/repeat()": { - "modified": "2020-11-18T14:44:16.857Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension": { + "modified": "2019-03-18T21:08:10.456Z", "contributors": [ - "chrisdavidmills", - "CrlsMrls", - "IsraelFloresDGA" + "fitojb", + "yuniers" ] }, - "Web/CSS/resize": { - "modified": "2019-03-23T22:49:42.378Z", + "Mozilla/Add-ons/WebExtensions/Prerequisites": { + "modified": "2019-03-23T22:45:28.352Z", "contributors": [ - "SphinxKnight", - "Sebastianz", - "gonzalec" + "yuniers" ] }, - "Web/CSS/resolución": { - "modified": "2019-03-23T22:38:44.850Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_": { + "modified": "2019-03-18T21:05:24.379Z", "contributors": [ - "Sebastianz", - "Prinz_Rana", - "Conradin88" + "FacundoCerezo", + "IXTRUnai" ] }, - "Web/CSS/resolved_value": { - "modified": "2019-03-23T22:16:57.498Z", + "Mozilla/Add-ons/WebExtensions/What_are_WebExtensions": { + "modified": "2020-11-23T00:59:33.889Z", "contributors": [ - "israel-munoz" + "kenliten", + "hecaxmmx", + "13539" ] }, - "Web/CSS/right": { - "modified": "2019-03-24T00:13:54.957Z", + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2020-11-23T01:34:20.681Z", "contributors": [ - "wbamberg", - "SphinxKnight", - "Sebastianz", - "teoli", - "FredB", - "HenryGR", - "Mgjbot" + "kenliten", + "IgnacioMilia", + "mppfiles", + "adderou", + "hecaxmmx", + "Maller_Lagoon" ] }, - "Web/CSS/rtl": { - "modified": "2019-01-16T15:48:03.556Z", + "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": { + "modified": "2019-04-25T06:15:12.057Z", "contributors": [ - "teoli", - "HenryGR" + "Klius", + "IgnacioMilia", + "chicocoulomb", + "hecaxmmx", + "yuniers" ] }, - "Web/CSS/scroll-behavior": { - "modified": "2019-03-23T22:07:41.439Z", + "Mozilla/Add-ons/WebExtensions/user_interface/Browser_action": { + "modified": "2019-03-18T21:03:34.447Z", "contributors": [ - "pantuflo" + "adderou" ] }, - "Web/CSS/specified_value": { - "modified": "2019-03-23T22:16:53.752Z", + "Mozilla/Developer_guide/Mozilla_build_FAQ": { + "modified": "2019-03-23T23:58:56.616Z", "contributors": [ - "israel-munoz" + "chrisdavidmills", + "fscholz", + "teoli", + "DoctorRomi", + "Nukeador", + "Mgjbot", + "Blank zero" ] }, - "Web/CSS/text-decoration": { - "modified": "2019-03-23T22:21:38.548Z", + "Mozilla/Developer_guide/Source_Code/CVS": { + "modified": "2019-03-23T23:46:33.805Z", "contributors": [ - "fitojb", - "israel-munoz" + "chrisdavidmills", + "teoli", + "Nukeador", + "Mgjbot", + "Blank zero" ] }, - "Web/CSS/text-decoration-color": { - "modified": "2019-03-23T22:27:00.164Z", + "orphaned/nsDirectoryService": { + "modified": "2019-03-23T23:40:31.943Z", "contributors": [ - "israel-munoz" + "teoli", + "Breaking Pitt" ] }, - "Web/CSS/text-decoration-line": { - "modified": "2020-10-15T21:49:07.335Z", + "orphaned/Participar_en_el_proyecto_Mozilla": { + "modified": "2019-03-24T00:07:54.638Z", "contributors": [ - "AlePerez92", - "israel-munoz" + "teoli", + "inma_610" ] }, - "Web/CSS/text-decoration-style": { - "modified": "2019-03-18T21:17:28.073Z", + "Mozilla/Firefox/Releases/3/Templates": { + "modified": "2019-03-24T00:02:45.436Z", "contributors": [ - "JimP99", - "israel-munoz" + "wbamberg", + "fscholz", + "Nukeador", + "Kaltya", + "Mgjbot" ] }, - "Web/CSS/text-emphasis": { - "modified": "2019-03-23T22:09:46.786Z", + "orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla": { + "modified": "2019-01-16T15:02:38.544Z", "contributors": [ - "studioArtbliss" + "Anonymous" ] }, - "Web/CSS/text-emphasis-color": { - "modified": "2020-10-15T21:57:48.189Z", + "orphaned/Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación": { + "modified": "2019-01-16T16:13:02.334Z", "contributors": [ - "BubuAnabelas", - "mym2013" + "Jorolo", + "Lastjuan" ] }, - "Web/CSS/text-orientation": { - "modified": "2020-10-15T22:02:16.878Z", + "orphaned/Principios_básicos_de_los_servicios_Web": { + "modified": "2019-01-16T16:13:03.069Z", "contributors": [ - "MikeOrtizTrivino" + "Jorolo", + "Xoan", + "Breaking Pitt" ] }, - "Web/CSS/text-overflow": { - "modified": "2020-10-15T21:59:14.245Z", + "orphaned/Recursos_en_modo_desconectado_en_Firefox": { + "modified": "2019-03-18T21:11:07.042Z", "contributors": [ - "davidelx", - "xpdv", - "plagasul", - "camilobuitrago" + "duduindo", + "Mgjbot", + "Nukeador", + "Nathymig", + "HenryGR" ] }, - "Web/CSS/text-shadow": { - "modified": "2019-03-23T22:27:32.186Z", + "orphaned/Referencia_de_XUL": { + "modified": "2019-04-19T23:18:32.719Z", "contributors": [ - "israel-munoz" + "wbamberg", + "teoli", + "chukito" ] }, - "Web/CSS/text-transform": { - "modified": "2019-10-10T16:32:05.528Z", + "Web/API/Document_Object_Model/Whitespace": { + "modified": "2020-08-24T04:42:05.596Z", "contributors": [ - "Makinita", - "evaferreira", - "israel-munoz" + "Nachec" ] }, - "Web/CSS/time": { - "modified": "2020-10-15T21:50:52.581Z", + "Web/API/Document_Object_Model/Examples": { + "modified": "2019-03-23T23:51:24.173Z", "contributors": [ - "lajaso", - "israel-munoz" + "SphinxKnight", + "khalid32", + "Mgjbot", + "Manu", + "Markens", + "Nathymig" ] }, - "Web/CSS/top": { - "modified": "2020-07-29T21:08:45.361Z", + "Web/API/Document_Object_Model/Events": { + "modified": "2019-03-18T21:45:13.362Z", "contributors": [ - "clancastor05", - "SphinxKnight", - "davidgg", - "solemoris", - "teoli", - "lcamacho", - "jaumesvdevelopers", - "HenryGR", - "Mgjbot" + "recortes" ] }, - "Web/CSS/transform": { - "modified": "2020-11-12T03:08:37.391Z", + "Web/API/Document_Object_Model": { + "modified": "2019-01-16T16:01:11.054Z", "contributors": [ - "SphinxKnight", - "rolivo288", - "SoftwareRVG", - "Sebastianz", - "GersonLazaro", - "fscholz", - "bicentenario", - "Xaviju", - "teoli", - "limonada_prototype" + "DR", + "Nathymig" ] }, - "Web/CSS/transform-function": { - "modified": "2019-03-23T23:10:41.562Z", + "Web/API/Document_Object_Model/Introduction": { + "modified": "2019-03-23T23:48:16.078Z", "contributors": [ - "israel-munoz", - "mrstork", - "prayash", - "limbus" + "LuisSevillano", + "IsaacAaron", + "Sheppy", + "Uri", + "Nathymig" ] }, - "Web/CSS/transform-function/rotate()": { - "modified": "2020-11-19T16:05:17.901Z", + "Web/API/Document_object_model/Locating_DOM_elements_using_selectors": { + "modified": "2020-06-14T19:56:35.416Z", "contributors": [ - "chrisdavidmills", - "danielblazquez", - "pekechis" + "snickArg" ] }, - "Web/CSS/transform-function/rotate3d()": { - "modified": "2020-11-19T16:07:08.348Z", + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-23T23:38:22.567Z", "contributors": [ - "chrisdavidmills", - "jeronimonunez", - "jjyepez" + "blanchart", + "eljonims", + "welm", + "javigaar", + "learnercys", + "pierre_alfonso", + "jesanchez" ] }, - "Web/CSS/transform-function/scale()": { - "modified": "2020-11-30T10:15:28.610Z", + "Mozilla/Firefox/Releases/2/Security_changes": { + "modified": "2019-03-23T23:42:29.185Z", "contributors": [ - "chrisdavidmills", - "ileonpxsp", - "BubuAnabelas", - "lizbethrojano", - "yomar-dev", - "quiqueciria", - "maramal" + "wbamberg", + "teoli", + "Nukeador" ] }, - "Web/CSS/transform-function/translate()": { - "modified": "2020-11-30T10:30:15.561Z", + "orphaned/Selección_de_modo_en_Mozilla": { + "modified": "2019-11-21T20:40:48.950Z", "contributors": [ - "chrisdavidmills", - "AlePerez92", - "hectoraldairah", - "Esteban26", - "murielsan", - "ShakMR" + "wbamberg", + "teoli", + "fscholz", + "Jorolo" ] }, - "Web/CSS/transform-function/translateY()": { - "modified": "2020-11-30T13:00:51.105Z", + "Web/API/Server-sent_events": { + "modified": "2019-03-23T23:24:42.323Z", "contributors": [ - "chrisdavidmills", - "israel-munoz" + "ethertank" ] }, - "Web/CSS/transform-function/translateZ()": { - "modified": "2020-11-30T13:02:44.123Z", + "Web/API/Server-sent_events/Using_server-sent_events": { + "modified": "2019-04-16T06:11:09.003Z", "contributors": [ - "chrisdavidmills", - "luisdev-works" + "albertoclarbrines", + "adlr", + "iamwao", + "jgutix", + "aztrock" ] }, - "Web/CSS/transform-origin": { - "modified": "2019-03-23T23:20:59.497Z", + "orphaned/Storage": { + "modified": "2019-03-24T00:09:02.141Z", "contributors": [ - "Sebastianz", - "fscholz", "teoli", - "limonada_prototype" + "elPatox", + "Francoyote", + "HenryGR", + "Mgjbot" ] }, - "Web/CSS/transform-style": { - "modified": "2020-10-15T22:31:22.949Z", + "Web/SVG/SVG_1.1_Support_in_Firefox": { + "modified": "2019-03-23T23:43:25.545Z", "contributors": [ - "luisdev-works" + "teoli", + "Superruzafa", + "Jorolo" ] }, - "Web/CSS/transition": { - "modified": "2019-03-23T22:53:01.094Z", + "Tools/Keyboard_shortcuts": { + "modified": "2020-07-28T10:35:37.425Z", "contributors": [ - "FedericoMarmo", - "fscholz", - "adlr", - "Sebastianz", - "yvesmh" + "Anibalismo", + "ssm", + "hugojavierduran9", + "marcorichetta" ] }, - "Web/CSS/transition-delay": { - "modified": "2019-03-23T23:21:44.912Z", + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.274Z", "contributors": [ - "mrstork", - "fscholz", - "Sebastianz", - "teoli", - "alcuinodeyork" + "mfluehr" ] }, - "Web/CSS/transition-duration": { - "modified": "2020-10-15T22:27:34.821Z", + "Tools/Debugger/How_to/Use_a_source_map": { + "modified": "2020-07-16T22:35:12.325Z", "contributors": [ - "luisafvaca" + "Makinita" ] }, - "Web/CSS/transition-property": { - "modified": "2020-10-15T21:58:20.034Z", + "Tools/Performance": { + "modified": "2020-07-16T22:36:12.530Z", "contributors": [ - "juan-ferrer-toribio" + "LesterGuerra", + "juanmapiquero", + "PorcoMaledette" ] }, - "Web/CSS/user-select": { - "modified": "2020-10-15T22:22:14.480Z", + "Tools/Performance/UI_Tour": { + "modified": "2020-07-16T22:36:14.726Z", "contributors": [ - "qwerty726" + "kynu", + "calcerrada", + "ramferposadas" ] }, - "Web/CSS/var()": { - "modified": "2020-11-04T09:10:15.439Z", + "Tools/Web_Audio_Editor": { + "modified": "2020-07-16T22:36:08.308Z", "contributors": [ - "chrisdavidmills", - "jroji" + "MPoli" ] }, - "Web/CSS/vertical-align": { - "modified": "2019-03-23T23:36:07.945Z", + "Tools/Style_Editor": { + "modified": "2020-07-16T22:35:00.009Z", "contributors": [ - "Sebastianz", - "teoli", - "riledhel" + "jwhitlock", + "cheline", + "SoftwareRVG", + "JosshuaCalixto1", + "maybe", + "padre629", + "CagsaBit" ] }, - "Web/CSS/visibility": { - "modified": "2019-03-23T23:52:08.163Z", + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:29.709Z", "contributors": [ - "wbamberg", - "teoli", - "Nathymig", - "HenryGR", - "Mgjbot" + "sevillacode", + "Makinita", + "_cuco_", + "Ivan-Perez", + "Dieg" ] }, - "Web/CSS/white-space": { - "modified": "2019-06-12T21:57:59.855Z", + "Tools/Page_Inspector/3-pane_mode": { + "modified": "2020-07-16T22:34:53.611Z", "contributors": [ - "jdaison", - "missmakita" + "welm" ] }, - "Web/CSS/widows": { - "modified": "2020-10-15T21:59:52.045Z", + "Tools/Page_Inspector/How_to/Open_the_Inspector": { + "modified": "2020-07-16T22:34:32.611Z", "contributors": [ - "jpmontoya182" + "amaiafilo" ] }, - "Web/CSS/width": { - "modified": "2019-03-23T23:50:07.221Z", + "Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model": { + "modified": "2020-07-16T22:34:34.150Z", "contributors": [ - "israel-munoz", - "diegocanal", - "teoli", - "HenryGR", - "Mgjbot" + "amaiafilo" ] }, - "Web/CSS/writing-mode": { - "modified": "2019-03-23T22:28:35.899Z", + "Tools/Page_Inspector/How_to/Examine_and_edit_HTML": { + "modified": "2020-07-16T22:34:40.440Z", "contributors": [ - "fitojb" + "amaiafilo" ] }, - "Web/CSS/z-index": { - "modified": "2020-03-20T18:20:08.966Z", + "Tools/Page_Inspector/How_to/Inspect_and_select_colors": { + "modified": "2020-07-16T22:34:34.877Z", "contributors": [ - "camsa", - "javichito", - "teoli", - "AntonioNavajas" + "amaiafilo" ] }, - "Web/CSS/zoom": { - "modified": "2019-03-23T22:35:36.401Z", + "Tools/Page_Inspector/How_to/Reposition_elements_in_the_page": { + "modified": "2020-07-16T22:34:45.756Z", "contributors": [ - "carloque", - "Sebastianz", - "pekechis" + "alebarbaja" ] }, - "Web/Demos_of_open_web_technologies": { - "modified": "2019-03-23T22:33:45.097Z", + "Tools/Remote_Debugging/Firefox_for_Android": { + "modified": "2020-07-16T22:35:38.980Z", "contributors": [ - "SoftwareRVG", - "elfoxero" + "odelrio", + "pawer13", + "pacommozilla", + "StripTM" ] }, - "Web/EXSLT": { - "modified": "2019-03-18T20:59:19.473Z", + "Tools/Responsive_Design_Mode": { + "modified": "2020-07-16T22:35:21.169Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Mgjbot", - "Talisker" + "adolfotc", + "HugoM1682", + "amaiafilo", + "walter.atg", + "maedca" ] }, - "Web/EXSLT/exsl": { - "modified": "2019-01-16T15:21:39.795Z", + "Tools/Taking_screenshots": { + "modified": "2020-07-16T22:36:38.280Z", "contributors": [ - "ExE-Boss", - "teoli", - "Anonymous" + "picandocodigo" ] }, - "Web/EXSLT/exsl/node-set": { - "modified": "2019-03-18T20:59:21.647Z", + "Tools/Web_Console/UI_Tour": { + "modified": "2020-07-16T22:34:17.075Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Mgjbot", - "Talisker" + "JonoyeMasuso" ] }, - "Web/EXSLT/exsl/object-type": { - "modified": "2019-03-23T23:51:27.324Z", + "Tools/Web_Console/The_command_line_interpreter": { + "modified": "2020-08-27T20:06:30.290Z", "contributors": [ - "ExE-Boss", - "lajaso", - "Mgjbot", - "Talisker" + "Nachec" ] }, - "Web/EXSLT/math": { - "modified": "2019-01-16T15:25:29.279Z", + "orphaned/Traducir_las_descripciones_de_las_extensiones": { + "modified": "2019-03-23T23:53:33.332Z", "contributors": [ - "ExE-Boss", "teoli", - "Anonymous" + "Nukeador", + "Sebastianzartner@gmx.de", + "D20v02d", + "Mgjbot" ] }, - "Web/EXSLT/math/highest": { - "modified": "2019-03-18T20:59:18.500Z", + "orphaned/Traducir_una_extensión": { + "modified": "2019-03-23T23:57:54.041Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "lajaso", + "Sebastianz", + "teoli", + "Sheppy", + "gironlievanos", "Mgjbot", - "Talisker" + "Superruzafa" ] }, - "Web/EXSLT/math/lowest": { - "modified": "2019-03-18T20:59:17.805Z", + "Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces": { + "modified": "2019-03-23T23:20:26.633Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", "lajaso", - "Mgjbot", - "Talisker" + "jucazam", + "pablo.turati" ] }, - "Web/EXSLT/math/max": { - "modified": "2019-03-18T20:59:18.804Z", + "orphaned/Usando_archivos_desde_aplicaciones_web": { + "modified": "2019-03-24T00:07:10.927Z", "contributors": [ "SphinxKnight", - "ExE-Boss", - "lajaso", - "Talisker" + "AngelFQC", + "StripTM", + "Izel", + "deimidis", + "maedca" ] }, - "Web/EXSLT/math/min": { - "modified": "2019-03-18T20:59:20.254Z", + "orphaned/Usar_código_de_Mozilla_en_otros_proyectos": { + "modified": "2019-03-24T00:09:00.370Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "lajaso", - "Talisker" + "maedca", + "inma_610" ] }, - "Web/EXSLT/regexp": { - "modified": "2019-01-16T15:23:22.952Z", + "orphaned/Usar_web_workers": { + "modified": "2019-03-24T00:07:32.918Z", "contributors": [ - "ExE-Boss", "teoli", - "Anonymous" + "ajimix", + "inma_610" ] }, - "Web/EXSLT/regexp/match": { - "modified": "2019-03-18T20:59:21.504Z", + "orphaned/Usar_XPInstall_para_instalar_plugins": { + "modified": "2019-01-16T16:11:23.781Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "Superruzafa", + "Fedora-core", + "Floot" ] }, - "Web/EXSLT/regexp/replace": { - "modified": "2019-03-18T20:59:20.093Z", + "Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core": { + "modified": "2019-12-13T21:06:41.403Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "wbamberg", + "jswisher" ] }, - "Web/EXSLT/regexp/test": { - "modified": "2019-03-18T20:59:20.575Z", + "orphaned/Uso_del_núcleo_del_nivel_1_del_DOM": { + "modified": "2019-12-13T21:10:23.918Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "wbamberg", + "broxmgs", + "Superruzafa", + "Jorolo" ] }, - "Web/EXSLT/set": { - "modified": "2019-01-16T15:23:27.004Z", + "orphaned/Vigilar_plugins": { + "modified": "2019-01-16T15:35:57.481Z", "contributors": [ - "ExE-Boss", - "teoli", - "Anonymous" + "HenryGR" ] }, - "Web/EXSLT/set/difference": { - "modified": "2019-03-18T20:59:18.953Z", + "Web/API/Web_Audio_API": { + "modified": "2019-03-23T23:31:19.634Z", + "contributors": [ + "estebanborai", + "AngelFQC", + "Pau_Ilargia", + "maedca" + ] + }, + "Web/Accessibility/Community": { + "modified": "2019-03-23T23:41:25.430Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "teoli", + "Jorolo" ] }, - "Web/EXSLT/set/distinct": { - "modified": "2019-03-18T20:59:22.067Z", + "Web/Accessibility": { + "modified": "2020-09-22T14:24:03.363Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "FranciscoImanolSuarez", + "Gummox", + "Mediavilladiezj", + "cisval", + "monserratcallejaalmazan", + "chmutoff", + "teoli", + "DoctorRomi", + "Mgjbot", + "Jorolo", + "Lowprofile", + "Wikier", + "Nukeador", + "Gonzobonzoo" ] }, - "Web/EXSLT/set/has-same-node": { - "modified": "2019-03-18T20:59:20.421Z", + "Web/Accessibility/Understanding_WCAG/Text_labels_and_names": { + "modified": "2020-05-21T19:43:48.950Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "giioaj", + "IsraelFloresDGA" ] }, - "Web/EXSLT/set/intersection": { - "modified": "2019-03-18T20:59:18.660Z", + "Web/Accessibility/Understanding_WCAG": { + "modified": "2019-03-18T21:25:29.001Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "evaferreira" ] }, - "Web/EXSLT/set/leading": { - "modified": "2019-03-18T20:59:17.662Z", + "Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast": { + "modified": "2020-06-09T06:15:36.471Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "teoli", - "Talisker" + "11bits", + "apenab" ] }, - "Web/EXSLT/set/trailing": { - "modified": "2019-03-18T20:59:19.267Z", + "Web/Accessibility/Understanding_WCAG/Perceivable": { + "modified": "2019-03-18T21:25:19.991Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "teoli", - "Talisker" + "evaferreira" ] }, - "Web/EXSLT/str": { - "modified": "2019-01-16T15:24:51.477Z", + "Web/Accessibility/Understanding_WCAG/Keyboard": { + "modified": "2020-09-28T17:32:58.697Z", "contributors": [ - "ExE-Boss", - "teoli", - "Anonymous" + "megatux", + "IsraelFloresDGA" ] }, - "Web/EXSLT/str/concat": { - "modified": "2019-03-18T20:59:20.717Z", + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute": { + "modified": "2019-08-28T11:54:04.515Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "IsraelFloresDGA", + "Karla_Glez" ] }, - "Web/EXSLT/str/split": { - "modified": "2019-03-18T20:59:17.504Z", + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role": { + "modified": "2019-08-28T12:48:39.532Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "IsraelFloresDGA" ] }, - "Web/EXSLT/str/tokenize": { - "modified": "2019-03-18T20:59:19.116Z", + "Web/Accessibility/ARIA/forms/alerts": { + "modified": "2020-08-13T01:22:34.331Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Talisker" + "Nachec" ] }, - "Web/Events": { - "modified": "2019-03-23T23:21:27.399Z", + "Web/Accessibility/ARIA/forms/Basic_form_hints": { + "modified": "2019-03-18T21:22:07.007Z", "contributors": [ - "ExE-Boss", - "wbamberg", - "gabo8611" + "IsraelFloresDGA" ] }, - "Web/Events/DOMContentLoaded": { - "modified": "2019-09-06T00:37:43.389Z", + "Web/Accessibility/ARIA/forms/Multipart_labels": { + "modified": "2019-11-27T15:16:55.571Z", "contributors": [ - "wbamberg", - "jramcast", - "ExE-Boss", - "fscholz", - "AlexOfSoCal", - "jdmgarcia", - "daniville" + "IsaacAaron", + "IsraelFloresDGA" ] }, - "Web/Events/abort": { - "modified": "2019-04-30T13:47:43.431Z", + "Web/API/Animation/Animation": { + "modified": "2019-03-23T22:05:09.399Z", "contributors": [ - "wbamberg", - "ExE-Boss", - "fscholz", - "balboag" + "IngoBongo" ] }, - "Web/Events/animationend": { - "modified": "2019-03-23T22:31:35.580Z", + "Web/API/Animation/finished": { + "modified": "2019-03-23T22:05:06.573Z", "contributors": [ - "ExE-Boss", - "soncco" + "IngoBongo" ] }, - "Web/Events/beforeunload": { - "modified": "2019-04-30T14:05:00.135Z", + "Web/API/Animation/currentTime": { + "modified": "2019-03-23T22:05:12.506Z", "contributors": [ - "wbamberg", - "ExE-Boss", - "anasyusef", - "Bant89" + "IngoBongo" ] }, - "Web/Events/blur": { - "modified": "2019-03-23T22:40:57.440Z", + "Web/API/Web_Storage_API": { + "modified": "2019-03-23T22:46:51.819Z", "contributors": [ - "ExE-Boss", + "fherce", "AlePerez92", - "fscholz", - "teoli", - "javier-alba" + "VictorAbdon" ] }, - "Web/Events/load": { - "modified": "2019-04-30T13:43:52.776Z", + "Web/API/Web_Storage_API/Using_the_Web_Storage_API": { + "modified": "2020-08-14T20:09:18.391Z", "contributors": [ - "wbamberg", - "ExE-Boss", - "AlePerez92" + "Enesimus", + "fherce" ] }, - "Web/Events/loadend": { - "modified": "2019-03-23T22:09:49.071Z", + "Web/API/Clipboard_API": { + "modified": "2020-10-15T22:31:40.101Z", "contributors": [ - "ExE-Boss", - "fscholz", - "darioperez" + "gato" ] }, - "Web/Events/pointerlockchange": { - "modified": "2019-03-18T21:16:43.654Z", + "Web/API/Canvas_API/Tutorial/Compositing/Example": { + "modified": "2019-03-18T21:36:04.043Z", "contributors": [ - "ExE-Boss", - "fscholz", - "arquigames" + "lajaso" ] }, - "Web/Events/transitioncancel": { - "modified": "2019-04-30T14:14:15.478Z", + "Web/API/Console/table": { + "modified": "2019-03-23T22:20:30.589Z", "contributors": [ - "wbamberg", - "ExE-Boss", - "juan-ferrer-toribio" + "AlePerez92" ] }, - "Web/Events/transitionend": { - "modified": "2019-03-23T22:04:18.976Z", + "Web/API/Document/open": { + "modified": "2020-10-15T22:31:23.051Z", "contributors": [ - "ExE-Boss", - "fscholz", - "juan-ferrer-toribio" + "WillieMensa" ] }, - "Web/Guide": { - "modified": "2019-07-18T20:35:32.528Z", + "Web/API/XMLDocument/async": { + "modified": "2019-03-23T22:57:43.989Z", "contributors": [ - "clarii", - "D3Portillo", - "Breaking Pitt", - "VictorAbdon", - "n2nand", - "Puchoti", - "DrTrucho", - "DanielCarron", - "daroswing", - "osodi", - "LeoHirsch", - "hjaguen", - "ethertank", - "Sheppy" + "MauroEldritch" ] }, - "Web/Guide/AJAX": { - "modified": "2019-03-18T21:14:54.246Z", + "Web/API/Document/createAttribute": { + "modified": "2020-10-15T21:55:08.825Z", "contributors": [ - "AlePerez92", - "chrisdavidmills", - "ccarruitero", - "chukito", - "Mgjbot", - "Nukeador", - "Summit677", - "Pascalc", - "Jorolo", - "Marianov", - "Takenbot", - "Baluart", - "Breaking Pitt", - "Seres" + "rodririobo", + "juanseromo12", + "FenixAlive" ] }, - "Web/Guide/AJAX/Comunidad": { - "modified": "2019-03-23T23:41:30.919Z", + "Web/API/DocumentOrShadowRoot/pointerLockElement": { + "modified": "2019-03-23T22:05:31.350Z", "contributors": [ - "chrisdavidmills", - "teoli", - "Jorolo" + "arquigames" ] }, - "Web/Guide/AJAX/Primeros_Pasos": { - "modified": "2019-03-23T23:54:11.584Z", + "Web/API/DOMString/Binary": { + "modified": "2020-08-29T03:33:22.030Z", "contributors": [ - "padrecedano", - "chrisdavidmills", - "mili01gm", - "Mgjbot", - "Luis Hidalgo", - "Hegael", - "Tatan", - "Takenbot", - "Jorolo", - "Puxaalonso", - "Nukeador", - "Noctuido", - "Seres" + "Nachec" ] }, - "Web/Guide/API": { - "modified": "2019-09-11T09:31:45.916Z", + "Web/API/GlobalEventHandlers/onwheel": { + "modified": "2019-03-18T21:09:09.483Z", "contributors": [ - "SphinxKnight", - "VictorAbdon", - "Sheppy" + "fscholz", + "SoftwareRVG" ] }, - "Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained": { - "modified": "2019-03-23T23:27:10.499Z", + "Web/API/HTMLVideoElement": { + "modified": "2019-06-22T13:44:40.927Z", "contributors": [ - "Sheppy", - "rubencidlara" + "Santi72Alc", + "myrnafig" ] }, - "Web/Guide/API/Vibration": { - "modified": "2019-03-23T23:03:32.169Z", + "Web/API/Fetch_API/Basic_concepts": { + "modified": "2019-03-18T21:24:00.327Z", "contributors": [ - "juancjara" + "IsraelFloresDGA" ] }, - "Web/Guide/CSS/Block_formatting_context": { - "modified": "2019-03-23T22:32:27.340Z", + "Web/API/Fetch_API/Using_Fetch": { + "modified": "2020-12-08T11:29:15.934Z", "contributors": [ - "Enesimus", - "javichito" + "mondeja", + "arturojimenezmedia", + "camsa", + "jccuevas", + "MateoVelilla", + "crimoniv", + "danielM9521", + "SphinxKnight", + "Ruluk", + "jpuerto", + "baumannzone", + "anjerago", + "icedrek", + "royexr", + "AlePerez92" ] }, - "Web/Guide/CSS/probando_media_queries": { - "modified": "2019-03-23T23:07:40.812Z", + "Web/API/WindowEventHandlers/onunload": { + "modified": "2019-03-23T23:39:28.498Z", "contributors": [ - "TibicenasDesign" + "fscholz", + "khalid32", + "Sheppy" ] }, - "Web/Guide/DOM": { - "modified": "2019-03-23T23:27:17.444Z", + "Web/API/HTMLOrForeignElement/dataset": { + "modified": "2020-10-15T22:06:35.887Z", "contributors": [ - "Sheppy" + "OneLoneFox", + "PacoVela", + "ultraklon", + "pipepico", + "AlePerez92" ] }, - "Web/Guide/DOM/Events": { - "modified": "2019-03-23T23:27:18.635Z", + "Web/API/HTMLOrForeignElement/focus": { + "modified": "2020-10-15T21:51:27.517Z", "contributors": [ - "Sheppy" + "IsraelFloresDGA", + "AlePerez92", + "jesumv" ] }, - "Web/Guide/DOM/Events/Creacion_y_Activación_Eventos": { - "modified": "2019-03-23T22:58:27.867Z", + "Web/API/ElementCSSInlineStyle/style": { + "modified": "2019-03-23T23:58:09.934Z", "contributors": [ - "gAval997", - "juanpablocarrillo", - "BrunoViera", - "enreda", - "Soid" + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR" ] }, - "Web/Guide/DOM/Events/eventos_controlador": { - "modified": "2020-08-01T23:47:25.815Z", + "Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB": { + "modified": "2020-01-13T04:48:11.759Z", "contributors": [ - "Enesimus", - "alesalva" + "chrisdavidmills", + "fscholz", + "elin3t", + "sebasmagri" ] }, - "Web/Guide/Graphics": { - "modified": "2020-05-19T14:31:25.384Z", + "Web/API/IndexedDB_API/Using_IndexedDB": { + "modified": "2020-01-13T04:48:12.209Z", "contributors": [ - ".bkjop0", - "lassergraf", - "CarlosEduardoEncinas", - "pescadito.2007", - "rogeliomtx", - "CarlosQuijano", - "lalo2013" + "chrisdavidmills", + "gama", + "Pcost8300", + "franvalmo", + "frank-orellana", + "otif11", + "urbanogb", + "AlePerez92", + "beatriz-merino", + "matajm", + "elin3t", + "maparrar" ] }, - "Web/Guide/HTML/Canvas_tutorial": { - "modified": "2019-03-23T23:18:23.090Z", + "Web/API/Navigator/geolocation": { + "modified": "2019-03-23T23:31:55.176Z", "contributors": [ - "fniwes", - "DeiberChacon", - "jeancgarciaq" + "jabarrioss", + "AlePerez92", + "fscholz", + "jsx", + "lfentanes" ] }, - "Web/Guide/HTML/Canvas_tutorial/Advanced_animations": { - "modified": "2019-03-23T22:11:01.831Z", + "Web/API/NavigatorOnLine/Online_and_offline_events": { + "modified": "2019-01-16T15:46:38.836Z", "contributors": [ - "elagat" + "chrisdavidmills", + "Mgjbot", + "Nukeador", + "RickieesES", + "Unixcoder" ] }, - "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors": { - "modified": "2020-05-15T18:35:37.655Z", + "Web/API/Node/parentElement": { + "modified": "2020-10-15T21:55:42.512Z", "contributors": [ - "dimaio77" + "AlePerez92", + "LRojas", + "tureey" ] }, - "Web/Guide/HTML/Canvas_tutorial/Basic_animations": { - "modified": "2019-10-10T16:52:52.102Z", + "Web/API/Node/insertBefore": { + "modified": "2020-10-15T21:36:49.326Z", "contributors": [ - "Sergio_Gonzalez_Collado", - "lajaso", - "Huarseral" + "AlePerez92", + "danvao", + "Sedoy", + "carpasse" ] }, - "Web/Guide/HTML/Canvas_tutorial/Basic_usage": { - "modified": "2020-04-24T15:40:04.067Z", + "Web/API/Notifications_API/Using_the_Notifications_API": { + "modified": "2020-04-11T06:35:05.696Z", "contributors": [ - "Davidaz", - "mariogalan", - "teoli", - "guillermomartinmarco", - "eoasakura", - "mamigove" + "davidelx", + "IXTRUnai" ] }, - "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas": { - "modified": "2019-03-23T23:15:03.361Z", + "Web/API/Crypto/getRandomValues": { + "modified": "2020-10-15T21:49:57.084Z", "contributors": [ - "cepeami01", - "AlexisRC463", - "matiasrvergara", - "Blackangel1965", - "ErikMj69", - "alkaithil", - "faqndo", - "martinzaraterafael", - "gabriel15", - "Marezelej" + "hecmonter", + "joseluisq", + "julianmoji" ] }, - "Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility": { - "modified": "2019-03-18T21:31:01.983Z", + "Web/HTTP/Headers/Digest": { + "modified": "2020-10-15T22:27:29.781Z", "contributors": [ - "cepeami01" + "joseluisq" ] }, - "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas": { - "modified": "2019-03-23T23:18:04.030Z", + "orphaned/Web/API/Web_Crypto_API/Checking_authenticity_with_password": { + "modified": "2019-03-23T22:10:43.026Z", "contributors": [ - "Cax" + "haxdai" ] }, - "Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas": { - "modified": "2019-03-18T21:42:58.094Z", + "Web/API/Web_Speech_API/Using_the_Web_Speech_API": { + "modified": "2020-05-10T18:32:28.954Z", "contributors": [ - "Luis_Gentil", - "JulianSoto", - "anfuca" + "mcarou" ] }, - "Web/Guide/HTML/Editable_content": { - "modified": "2019-03-23T22:09:49.599Z", + "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL": { + "modified": "2019-03-23T22:37:32.127Z", "contributors": [ - "vinyetcg", - "JoaquinGiordano", - "V.Morantes" + "asarch", + "Giovan" ] }, - "Web/Guide/HTML/Introduction_alhtml_clone": { - "modified": "2019-03-23T23:11:36.473Z", + "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": { + "modified": "2019-03-23T22:15:44.225Z", "contributors": [ - "emanuelvega", - "Cristhoper" + "BubuAnabelas", + "marce_1994" ] }, - "Web/Guide/HTML/categorias_de_contenido": { - "modified": "2020-09-06T09:32:45.431Z", + "Web/API/WebSockets_API/Writing_WebSocket_server": { + "modified": "2019-05-21T02:54:42.354Z", "contributors": [ - "Nachec", - "BrayanAvian", - "raecillacastellana", - "eljonims", - "eliasrodeloso" + "SphinxKnight", + "manueljrs", + "Yantup", + "jjmontes" ] }, - "Web/Guide/Movil": { - "modified": "2019-03-23T22:48:50.706Z", + "Web/API/WebSockets_API/Writing_WebSocket_servers": { + "modified": "2019-06-21T20:55:28.443Z", "contributors": [ - "miguelsp" + "alesalva", + "SphinxKnight", + "juanmanuelramallo", + "8manuel", + "llekn", + "jjmontes", + "augus1990" ] }, - "Web/Guide/Parsing_and_serializing_XML": { - "modified": "2019-03-23T22:10:22.365Z", + "Web/API/WindowOrWorkerGlobalScope/atob": { + "modified": "2019-03-23T23:03:12.715Z", "contributors": [ - "FenixAlive" + "fscholz", + "sathyasanles" ] }, - "Web/Guide/Performance": { - "modified": "2019-03-23T23:21:17.984Z", + "Glossary/Base64": { + "modified": "2020-10-08T22:36:13.676Z", "contributors": [ - "DeiberChacon", - "Sheppy" + "kevinandresviedmanlopez", + "carloscasalar", + "Arukantara", + "sathyasanles" ] }, - "Web/Guide/Performance/Usando_web_workers": { - "modified": "2020-09-27T14:14:17.948Z", + "Web/API/WindowOrWorkerGlobalScope/clearInterval": { + "modified": "2019-03-23T22:56:16.485Z", "contributors": [ - "hendaniel", - "arbesulo", - "zynt1102", - "albertovelazmoliner", - "luisdos", - "EricMoIr", - "hmorv", - "DeiberChacon", - "rsalgado", - "mvargasmoran" + "Guitxo" ] }, - "Web/Guide/Usando_Objetos_FormData": { - "modified": "2019-03-23T23:19:26.530Z", + "Web/API/WindowOrWorkerGlobalScope/clearTimeout": { + "modified": "2019-06-18T10:20:27.972Z", "contributors": [ - "ramingar", - "Siro_Diaz", - "wilo" + "AlePerez92", + "fscholz", + "basemnassar11", + "VictorArias" ] }, - "Web/HTML": { - "modified": "2020-12-10T12:38:08.697Z", + "Web/API/WindowOrWorkerGlobalScope/setInterval": { + "modified": "2020-08-24T18:02:23.092Z", "contributors": [ - "ojgarciab", - "SphinxKnight", - "cesarmerino.ec71", - "barriosines07", - "Nachec", - "Enesimus", - "Neto503", - "hackertj", - "chrisdavidmills", - "blanchart", - "roocce", - "titox", - "donpaginasweboficial", - "Kenikser", - "RayPL", - "YeseniaMariela", - "gabriel-ar", - "PabloLajarin", - "JoseBarakat", - "raecillacastellana", - "israel-munoz", - "jsx", - "Hteemo", - "eduMXM", - "enesimo", - "MARVINFLORENTINO", - "pekechis", - "monserratcallejaalmazan", - "thzunder", - "roheru", - "vltamara", - "ArcangelZith", - "ronyworld", - "LeoHirsch", - "CarlosQuijano", - "AngelFQC" + "mastertrooper", + "Makinita", + "Klius", + "claudionebbia" ] }, - "Web/HTML/Atributos": { - "modified": "2019-03-23T23:21:50.772Z", + "Web/API/WindowOrWorkerGlobalScope/setTimeout": { + "modified": "2019-03-23T23:17:29.378Z", "contributors": [ - "raecillacastellana", - "Cdam", + "BubuAnabelas", "vltamara", - "Shinigami-sama", - "welm", - "noografo", - "Benito", - "LeoHirsch", - "sha" + "nauj27", + "fscholz", + "AshfaqHossain", + "VictorArias" ] }, - "Web/HTML/Atributos/accept": { - "modified": "2020-10-15T22:34:00.656Z", + "Web/API/FormData": { + "modified": "2020-10-15T21:22:58.694Z", "contributors": [ - "Nachec" + "AlePerez92", + "vladimirbat", + "alvaromorenomorales", + "ojgarciab", + "Sheppy", + "AngelFQC", + "wilo", + "marco_mucino" ] }, - "Web/HTML/Atributos/autocomplete": { - "modified": "2019-04-06T00:39:59.162Z", + "Web/CSS/:user-invalid": { + "modified": "2019-03-23T22:30:48.940Z", "contributors": [ - "qmarquez", - "Raulpascual2" + "teoli", + "pekechis" ] }, - "Web/HTML/Atributos/min": { - "modified": "2020-10-15T22:33:58.169Z", + "Web/CSS/:autofill": { + "modified": "2019-03-23T22:29:31.809Z", "contributors": [ - "Nachec" + "teoli", + "pekechis" ] }, - "Web/HTML/Atributos/minlength": { - "modified": "2020-10-15T22:33:56.870Z", + "Web/CSS/:not": { + "modified": "2020-11-30T09:54:17.195Z", "contributors": [ - "Nachec" + "blanchart", + "lajaso", + "teoli", + "jotadeaa", + "luisgagocasas" ] }, - "Web/HTML/Atributos/multiple": { - "modified": "2020-09-08T01:48:55.405Z", + "Web/CSS/::file-selector-button": { + "modified": "2019-03-18T21:21:36.190Z", "contributors": [ - "Nachec" + "teoli", + "pekechis" ] }, - "Web/HTML/Atributos_Globales": { - "modified": "2020-10-15T21:39:25.776Z", + "Web/CSS/box-flex": { + "modified": "2019-03-23T22:36:18.128Z", "contributors": [ - "Nachec", - "PacoVela", - "imangas", - "vltamara" + "teoli", + "pekechis" ] }, - "Web/HTML/Atributos_Globales/accesskey": { - "modified": "2019-03-23T22:41:37.238Z", + "Web/CSS/box-pack": { + "modified": "2019-03-23T22:36:13.348Z", "contributors": [ - "jcr4" + "teoli", + "pekechis" ] }, - "Web/HTML/Atributos_Globales/autocapitalize": { - "modified": "2020-10-15T22:12:15.178Z", + "Web/CSS/user-modify": { + "modified": "2019-03-23T22:35:48.381Z", "contributors": [ - "Nachec", - "carlosgocereceda", - "WilsonIsAliveClone", - "Raulpascual2" + "teoli", + "pekechis" ] }, - "Web/HTML/Atributos_Globales/class": { - "modified": "2019-03-23T22:41:38.505Z", + "Web/CSS/@media/height": { + "modified": "2020-10-15T22:23:38.815Z", "contributors": [ - "imangas", - "jcr4" + "IsraelFloresDGA" ] }, - "Web/HTML/Atributos_Globales/contenteditable": { - "modified": "2019-03-23T22:41:31.507Z", + "Web/CSS/@media/resolution": { + "modified": "2019-03-23T22:38:40.675Z", "contributors": [ - "ManuAlvarado22", - "jcr4" + "Conradin88" ] }, - "Web/HTML/Atributos_Globales/contextmenu": { - "modified": "2019-03-23T22:41:33.594Z", + "Web/CSS/CSS_Columns": { + "modified": "2019-03-23T22:28:10.699Z", "contributors": [ - "jcr4" + "Anonymous" ] }, - "Web/HTML/Atributos_Globales/data-*": { - "modified": "2019-06-27T12:32:36.980Z", + "Web/CSS/Comments": { + "modified": "2019-03-23T22:16:58.806Z", "contributors": [ - "deyvirosado", - "jcr4" + "israel-munoz" ] }, - "Web/HTML/Atributos_Globales/dir": { - "modified": "2019-03-23T22:41:19.442Z", + "orphaned/Web/CSS/Comenzando_(tutorial_CSS)": { + "modified": "2019-03-23T23:39:37.048Z", "contributors": [ - "jcr4" + "teoli", + "jsalinas" ] }, - "Web/HTML/Atributos_Globales/draggable": { - "modified": "2019-03-23T22:41:17.791Z", + "orphaned/Web/CSS/Como_iniciar": { + "modified": "2019-01-16T13:59:37.327Z", "contributors": [ - "JuanSerrano02", - "jcr4" + "teoli", + "Izel" ] }, - "Web/HTML/Atributos_Globales/dropzone": { - "modified": "2019-03-23T22:41:19.266Z", + "Web/CSS/CSS_Animations/Detecting_CSS_animation_support": { + "modified": "2019-03-23T22:41:48.122Z", "contributors": [ - "JuanSerrano02", - "jcr4" + "wbamberg", + "CristhianLora1", + "DracotMolver" ] }, - "Web/HTML/Atributos_Globales/hidden": { - "modified": "2019-03-23T22:41:18.690Z", + "Web/CSS/CSS_Animations/Using_CSS_animations": { + "modified": "2020-07-06T16:16:21.887Z", "contributors": [ - "jcr4" + "Jazperist", + "miguelgilmartinez", + "fermelli", + "GasGen", + "KattyaCuevas", + "rod232", + "Jvalenz1982", + "SphinxKnight", + "teoli", + "onerbs", + "Luis_Calvo", + "ulisescab" ] }, - "Web/HTML/Atributos_Globales/id": { - "modified": "2019-03-23T22:45:39.709Z", + "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "modified": "2019-03-23T22:41:48.777Z", "contributors": [ - "vanesa", - "DavidZabaleta", - "eoasakura" + "teoli", + "mcclone2001" ] }, - "Web/HTML/Atributos_Globales/is": { - "modified": "2020-10-15T22:04:27.264Z", + "Web/CSS/CSS_Colors/Color_picker_tool": { + "modified": "2019-03-23T22:23:27.596Z", "contributors": [ - "daniel.duarte" + "elihro" ] }, - "Web/HTML/Atributos_Globales/itemid": { - "modified": "2019-03-23T22:37:36.858Z", + "Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2019-03-18T21:18:33.523Z", "contributors": [ - "pekechis" + "danpaltor" ] }, - "Web/HTML/Atributos_Globales/itemprop": { - "modified": "2019-03-23T22:41:15.543Z", + "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2020-03-25T21:15:58.856Z", "contributors": [ - "rhssr", - "jcr4" + "amazing79", + "otello1971", + "cwalternicolas" ] }, - "Web/HTML/Atributos_Globales/itemref": { - "modified": "2019-03-23T22:36:41.055Z", + "Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout": { + "modified": "2019-10-01T23:38:23.285Z", "contributors": [ - "jcr4" + "jcastillaingeniero", + "amaiafilo", + "IsraelFloresDGA", + "jorgemontoyab" ] }, - "Web/HTML/Atributos_Globales/itemscope": { - "modified": "2020-10-15T21:41:28.202Z", + "Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout": { + "modified": "2019-12-18T12:24:17.824Z", "contributors": [ - "JuanSerrano02", - "chrisvpr", - "jcr4" + "amazing79", + "natalygiraldo", + "amaiafilo", + "TavoTrash", + "aribet", + "jorgemontoyab" ] }, - "Web/HTML/Atributos_Globales/lang": { - "modified": "2019-03-23T22:41:11.276Z", + "Web/CSS/CSS_Logical_Properties/Sizing": { + "modified": "2019-03-19T19:17:23.927Z", "contributors": [ - "agonzalezml", - "jcr4" + "teffcode" ] }, - "Web/HTML/Atributos_Globales/slot": { - "modified": "2020-10-15T22:04:16.315Z", + "Web/CSS/CSS_Box_Model": { + "modified": "2019-03-23T22:37:33.458Z", "contributors": [ - "daniel.duarte" + "tipoqueno", + "pekechis" ] }, - "Web/HTML/Atributos_Globales/spellcheck": { - "modified": "2019-03-23T22:41:06.455Z", + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2019-08-28T10:35:24.055Z", "contributors": [ - "jcr4" + "tipoqueno" ] }, - "Web/HTML/Atributos_Globales/style": { - "modified": "2019-03-23T22:41:09.210Z", + "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": { + "modified": "2019-03-23T22:32:15.462Z", "contributors": [ - "jcr4" + "amaiafilo", + "Ralexhx", + "javichito" ] }, - "Web/HTML/Atributos_Globales/tabindex": { - "modified": "2019-07-12T03:22:15.997Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": { + "modified": "2019-03-23T22:32:38.884Z", "contributors": [ - "ChrisMHM", - "bamvoo", - "cabetancourtc", - "StripTM", - "jcr4" + "javichito" ] }, - "Web/HTML/Atributos_Globales/title": { - "modified": "2019-03-23T22:40:44.282Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float": { + "modified": "2019-04-26T07:22:46.044Z", "contributors": [ - "jcr4" + "SphinxKnight", + "LaGallinaTuruleta", + "javichito" ] }, - "Web/HTML/Atributos_Globales/translate": { - "modified": "2019-03-23T22:40:27.406Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1": { + "modified": "2019-03-23T22:32:36.821Z", "contributors": [ - "jcr4" + "javichito" ] }, - "Web/HTML/Atributos_Globales/x-ms-acceleratorkey": { - "modified": "2019-03-18T21:20:44.665Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2": { + "modified": "2019-03-23T22:32:34.821Z", "contributors": [ - "WriestTavo" + "javichito" ] }, - "Web/HTML/Atributos_de_configuracion_CORS": { - "modified": "2019-03-23T22:46:11.986Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3": { + "modified": "2019-03-23T22:32:30.208Z", "contributors": [ - "eporta88", - "virlliNia", - "vltamara" + "javichito" ] }, - "Web/HTML/Block-level_elements": { - "modified": "2019-03-18T20:44:10.775Z", + "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": { + "modified": "2019-03-23T22:32:44.958Z", "contributors": [ - "ManuelPalominochirote", - "raecillacastellana", - "dinael", - "pekechis", - "erdavo", - "vltamara", - "teoli", - "MILTON.AGUILAR" + "javichito" ] }, - "Web/HTML/Canvas": { - "modified": "2019-10-10T16:45:32.554Z", + "Web/CSS/CSS_Positioning/Understanding_z_index": { + "modified": "2019-03-18T20:42:17.583Z", + "contributors": [ + "ChipTime", + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index": { + "modified": "2019-03-23T22:32:47.571Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Conditional_Rules": { + "modified": "2019-03-23T22:05:34.864Z", + "contributors": [ + "arnulfolg" + ] + }, + "Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property": { + "modified": "2019-03-24T00:04:04.275Z", "contributors": [ - "lajaso", - "jagomf", "teoli", - "ethertank", - "jesusmercado", - "dextra", - "beto21", - "inma_610", - "RickieesES", - "Pgulijczuk", - "kourt_xand", - "Fifthtoe", - "Mgjbot" + "fscholz", + "Mgjbot", + "Jorolo" ] }, - "Web/HTML/Canvas/A_basic_ray-caster": { - "modified": "2019-03-19T08:57:21.057Z", + "Web/CSS/Replaced_element": { + "modified": "2019-03-23T23:08:30.961Z", "contributors": [ - "AzazelN28", - "Fandres91", - "dkocho4", - "preteric" + "jdbazagaruiz" ] }, - "Web/HTML/Canvas/Drawing_graphics_with_canvas": { - "modified": "2019-03-23T23:19:53.719Z", + "Web/CSS/Specificity": { + "modified": "2020-11-14T17:11:45.294Z", "contributors": [ - "teoli", - "rubencidlara" + "0neomar", + "fer", + "glrodasz", + "mariupereyra", + "arjusgit", + "DavidGalvis", + "gcjuan", + "LuisSevillano", + "deimidis2", + "aeroxmotion", + "padrecedano", + "Remohir" ] }, - "Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida": { - "modified": "2020-07-16T22:22:32.156Z", + "Web/CSS/gradient": { + "modified": "2019-03-23T22:37:34.623Z", "contributors": [ - "ZKoaLa", - "nazhaj", - "JuanC_01" + "devilkillermc", + "mym2013", + "Sebastianz", + "wizAmit", + "slayslot", + "Conradin88" ] }, - "Web/HTML/Elemento": { - "modified": "2020-07-13T03:12:39.708Z", + "Web/CSS/Tools/Cubic_Bezier_Generator": { + "modified": "2019-03-18T21:20:03.429Z", "contributors": [ - "Enesimus", - "IsraelFloresDGA", - "ivanhelo", - "gabriel-ar", - "raecillacastellana", - "imangas", - "jccancelo", - "vltamara", - "teoli", - "LinoJaime", - "Rkovac", - "betoscopio", - "semptrion", - "StripTM", - "deimidis", - "Mgjbot", - "Klosma", - "Jorolo" + "gsalinase" ] }, - "Web/HTML/Elemento/Elementos_títulos": { - "modified": "2019-03-23T23:41:24.635Z", + "Web/CSS/Tools": { + "modified": "2019-03-23T22:28:04.142Z", "contributors": [ - "evaferreira", - "chrisdavidmills", - "israel-munoz", - "teoli", - "Jorolo" + "arturoblack" ] }, - "Web/HTML/Elemento/Etiqueta_Personalizada_HTML5": { - "modified": "2019-03-23T22:40:57.260Z", + "Web/Progressive_web_apps/Responsive/Media_types": { + "modified": "2019-03-18T21:15:11.297Z", "contributors": [ - "Lazaro" + "luismj" ] }, - "Web/HTML/Elemento/Shadow": { - "modified": "2019-03-23T22:06:38.273Z", + "Web/CSS/percentage": { + "modified": "2019-03-23T23:25:05.075Z", "contributors": [ - "H4isan" + "fscholz", + "teoli", + "aerotrink" ] }, - "Web/HTML/Elemento/Tipos_de_elementos": { - "modified": "2019-03-23T23:46:22.404Z", + "Learn/CSS/Howto/CSS_FAQ": { + "modified": "2020-07-16T22:25:44.798Z", "contributors": [ - "Sebastianz", - "jigs12", "teoli", - "ethertank", - "Klosma", - "Jorolo" + "inma_610" ] }, - "Web/HTML/Elemento/a": { - "modified": "2020-12-02T02:55:47.706Z", + "orphaned/Web/CSS/Primeros_pasos": { + "modified": "2019-03-24T00:05:34.862Z", "contributors": [ - "SphinxKnight", - "xtrs84zk", - "HectorFranco", - "sergio_p_d", - "julioematasv", - "ManuelSLemos", - "raecillacastellana", "teoli", - "Nukeador", - "RickieesES", - "HenryGR", - "Mgjbot" + "deimidis" ] }, - "Web/HTML/Elemento/abbr": { - "modified": "2019-03-23T23:41:48.686Z", + "Web/CSS/Pseudo-elements": { + "modified": "2019-03-23T23:21:50.048Z", "contributors": [ - "vanesa", - "abaracedo", - "jigs12", - "welm", + "BubuAnabelas", + "VictorAbdon", "teoli", - "Jorolo" + "jota1410" ] }, - "Web/HTML/Elemento/acronym": { - "modified": "2019-03-23T23:41:54.391Z", + "Web/CSS/Reference": { + "modified": "2019-03-24T00:14:13.384Z", "contributors": [ - "Sebastianz", - "jigs12", + "lajaso", + "israel-munoz", + "joshitobuba", + "mrstork", + "prayash", + "malayaleecoder", "teoli", - "Jorolo" + "tregagnon", + "inma_610", + "fscholz", + "Nukeador" ] }, - "Web/HTML/Elemento/address": { - "modified": "2019-03-23T23:41:48.972Z", + "Web/CSS/mix-blend-mode": { + "modified": "2020-10-15T21:37:53.265Z", "contributors": [ - "abaracedo", - "jigs12", + "Undigon", + "mrstork", "teoli", - "Jorolo" + "Sebastianz", + "msanz" ] }, - "Web/HTML/Elemento/applet": { - "modified": "2019-03-23T23:42:26.076Z", + "Web/CSS/resolution": { + "modified": "2019-03-23T22:38:44.850Z", "contributors": [ "Sebastianz", - "teoli", - "Jorolo" + "Prinz_Rana", + "Conradin88" ] }, - "Web/HTML/Elemento/area": { - "modified": "2019-03-23T23:41:50.345Z", + "orphaned/Web/CSS/rtl": { + "modified": "2019-01-16T15:48:03.556Z", "contributors": [ - "Sebastianz", - "jigs12", "teoli", - "Jorolo" + "HenryGR" ] }, - "Web/HTML/Elemento/article": { - "modified": "2020-04-14T03:59:04.779Z", + "Web/CSS/Attribute_selectors": { + "modified": "2020-10-15T21:26:03.862Z", "contributors": [ - "Jx1ls", - "wbamberg", + "blanchart", + "MoisesGuevara", + "lajaso", "teoli", - "deimidis" + "jota1410" ] }, - "Web/HTML/Elemento/aside": { - "modified": "2019-05-13T08:38:38.128Z", + "Web/CSS/CSS_Selectors": { + "modified": "2019-07-09T01:16:13.123Z", "contributors": [ + "missmakita", "blanchart", - "wbamberg", - "teoli", - "trevorh", - "ccarruitero", - "inma_610" + "Benji1337", + "metal-gogo", + "kikolevante" ] }, - "Web/HTML/Elemento/audio": { - "modified": "2019-03-24T00:17:32.335Z", + "Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors": { + "modified": "2020-07-31T07:57:08.167Z", "contributors": [ - "wbamberg", - "teoli", - "tregagnon", - "RickieesES", - "inma_610" + "blanchart", + "israel-munoz" ] }, - "Web/HTML/Elemento/b": { - "modified": "2019-03-23T23:41:59.385Z", + "Web/CSS/Adjacent_sibling_combinator": { + "modified": "2019-03-23T22:39:30.908Z", "contributors": [ - "gabrielvol", - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "alkaithil" ] }, - "Web/HTML/Elemento/base": { - "modified": "2019-03-23T23:41:55.648Z", + "Web/CSS/General_sibling_combinator": { + "modified": "2019-03-23T22:39:33.429Z", "contributors": [ - "raecillacastellana", - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "alkaithil" ] }, - "Web/HTML/Elemento/basefont": { - "modified": "2019-03-23T23:42:33.059Z", + "Web/CSS/Value_definition_syntax": { + "modified": "2019-03-23T22:38:52.899Z", "contributors": [ + "apazacoder", "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "Guillaume-Heras", + "VictorAbdon" ] }, - "Web/HTML/Elemento/bdi": { - "modified": "2019-03-23T22:37:44.087Z", + "Web/CSS/CSS_Text": { + "modified": "2019-03-23T22:36:23.444Z", "contributors": [ - "pekechis", - "teoli" + "pekechis" ] }, - "Web/HTML/Elemento/bdo": { - "modified": "2019-03-23T23:41:59.174Z", + "Web/CSS/CSS_Transitions/Using_CSS_transitions": { + "modified": "2019-08-01T05:58:17.579Z", "contributors": [ - "Sebastianz", - "jigs12", + "chrisdavidmills", + "mrstork", + "alberdigital", "teoli", - "Jorolo" + "inma_610", + "deimidis" ] }, - "Web/HTML/Elemento/bgsound": { - "modified": "2019-10-10T16:35:21.119Z", + "Web/CSS/computed_value": { + "modified": "2019-03-23T23:53:20.456Z", "contributors": [ - "jcr4" + "teoli", + "Mgjbot", + "Firewordy", + "HenryGR" ] }, - "Web/HTML/Elemento/big": { - "modified": "2019-03-23T23:42:00.157Z", + "Web/CSS/initial_value": { + "modified": "2019-01-16T15:32:31.295Z", "contributors": [ - "Sebastianz", - "jigs12", - "welm", "teoli", - "Jorolo" + "Mgjbot", + "Nathymig", + "HenryGR" ] }, - "Web/HTML/Elemento/blink": { - "modified": "2019-10-10T16:37:40.291Z", + "Web/API/HTMLElement/animationend_event": { + "modified": "2019-03-23T22:31:35.580Z", "contributors": [ - "teoli", - "jcr4" + "ExE-Boss", + "soncco" ] }, - "Web/HTML/Elemento/blockquote": { - "modified": "2019-03-23T23:42:29.095Z", + "Web/API/Window/beforeunload_event": { + "modified": "2019-04-30T14:05:00.135Z", "contributors": [ - "Sebastianz", - "jigs12", + "wbamberg", + "ExE-Boss", + "anasyusef", + "Bant89" + ] + }, + "Web/API/Element/blur_event": { + "modified": "2019-03-23T22:40:57.440Z", + "contributors": [ + "ExE-Boss", + "AlePerez92", + "fscholz", "teoli", - "Jorolo" + "javier-alba" + ] + }, + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2019-09-06T00:37:43.389Z", + "contributors": [ + "wbamberg", + "jramcast", + "ExE-Boss", + "fscholz", + "AlexOfSoCal", + "jdmgarcia", + "daniville" ] }, - "Web/HTML/Elemento/body": { - "modified": "2020-10-15T22:34:39.725Z", + "Web/API/Window/load_event": { + "modified": "2019-04-30T13:43:52.776Z", "contributors": [ - "Nachec" + "wbamberg", + "ExE-Boss", + "AlePerez92" ] }, - "Web/HTML/Elemento/br": { - "modified": "2019-03-23T23:42:25.427Z", + "Web/API/XMLHttpRequest/loadend_event": { + "modified": "2019-03-23T22:09:49.071Z", "contributors": [ - "vanesa", - "abaracedo", - "jigs12", - "teoli", - "Jorolo" + "ExE-Boss", + "fscholz", + "darioperez" ] }, - "Web/HTML/Elemento/button": { - "modified": "2020-10-15T21:13:54.408Z", + "Web/API/Document/pointerlockchange_event": { + "modified": "2019-03-18T21:16:43.654Z", "contributors": [ - "MarielaBR", - "evaferreira", - "Sebastianz", - "jigs12", - "oece", - "teoli", - "ethertank", - "Jorolo" + "ExE-Boss", + "fscholz", + "arquigames" ] }, - "Web/HTML/Elemento/canvas": { - "modified": "2019-03-24T00:07:43.236Z", + "Web/API/HTMLElement/transitioncancel_event": { + "modified": "2019-04-30T14:14:15.478Z", "contributors": [ "wbamberg", - "evaferreira", - "teoli", - "inma_610", - "xaky" + "ExE-Boss", + "juan-ferrer-toribio" ] }, - "Web/HTML/Elemento/caption": { - "modified": "2019-03-23T23:42:13.711Z", + "Web/API/HTMLElement/transitionend_event": { + "modified": "2019-03-23T22:04:18.976Z", "contributors": [ - "camilai", - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "ExE-Boss", + "fscholz", + "juan-ferrer-toribio" ] }, - "Web/HTML/Elemento/center": { - "modified": "2020-04-23T17:50:49.499Z", + "Web/Guide/AJAX/Community": { + "modified": "2019-03-23T23:41:30.919Z", "contributors": [ - "JAMC", - "blanchart", - "Sebastianz", + "chrisdavidmills", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/cite": { - "modified": "2019-03-23T23:42:34.535Z", + "Web/Guide/AJAX/Getting_Started": { + "modified": "2019-03-23T23:54:11.584Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "padrecedano", + "chrisdavidmills", + "mili01gm", + "Mgjbot", + "Luis Hidalgo", + "Hegael", + "Tatan", + "Takenbot", + "Jorolo", + "Puxaalonso", + "Nukeador", + "Noctuido", + "Seres" ] }, - "Web/HTML/Elemento/code": { - "modified": "2019-03-23T23:41:28.451Z", + "Web/Guide/Events/Orientation_and_motion_data_explained": { + "modified": "2019-03-23T23:27:10.499Z", "contributors": [ - "BubuAnabelas", - "teoli", - "Jorolo" + "Sheppy", + "rubencidlara" ] }, - "Web/HTML/Elemento/col": { - "modified": "2019-03-23T23:42:14.518Z", + "Web/API/Vibration_API": { + "modified": "2019-03-23T23:03:32.169Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "juancjara" ] }, - "Web/HTML/Elemento/colgroup": { - "modified": "2019-03-23T23:42:18.079Z", + "Web/CSS/Media_Queries/Testing_media_queries": { + "modified": "2019-03-23T23:07:40.812Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "TibicenasDesign" ] }, - "Web/HTML/Elemento/command": { - "modified": "2019-10-05T04:48:52.506Z", + "Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-23T22:58:27.867Z", "contributors": [ - "titox", - "jcr4" + "gAval997", + "juanpablocarrillo", + "BrunoViera", + "enreda", + "Soid" ] }, - "Web/HTML/Elemento/content": { - "modified": "2019-03-23T22:36:12.624Z", + "Web/Guide/Events/Event_handlers": { + "modified": "2020-08-01T23:47:25.815Z", "contributors": [ - "jcr4" + "Enesimus", + "alesalva" ] }, - "Web/HTML/Elemento/data": { - "modified": "2019-07-24T08:09:10.849Z", + "Web/Guide/Events": { + "modified": "2019-03-23T23:27:18.635Z", "contributors": [ - "SphinxKnight", - "mikecolina", - "raecillacastellana" + "Sheppy" ] }, - "Web/HTML/Elemento/datalist": { - "modified": "2020-10-15T21:13:43.994Z", + "Web/API/Canvas_API/Tutorial/Advanced_animations": { + "modified": "2019-03-23T22:11:01.831Z", "contributors": [ - "mfranzke", - "hernanarica", - "miguelgilmartinez", - "Luuis", - "SphinxKnight", - "teoli", - "translatoon", - "Izel" + "elagat" ] }, - "Web/HTML/Elemento/dd": { - "modified": "2020-10-15T21:18:43.107Z", + "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors": { + "modified": "2020-05-15T18:35:37.655Z", "contributors": [ - "IsraelFloresDGA", - "jigs12", - "johnmejia", - "teoli", - "Jorolo" + "dimaio77" ] }, - "Web/HTML/Elemento/del": { - "modified": "2019-03-18T21:11:06.542Z", + "Web/API/Canvas_API/Tutorial/Basic_animations": { + "modified": "2019-10-10T16:52:52.102Z", "contributors": [ - "duduindo", + "Sergio_Gonzalez_Collado", + "lajaso", + "Huarseral" + ] + }, + "Web/API/Canvas_API/Tutorial/Basic_usage": { + "modified": "2020-04-24T15:40:04.067Z", + "contributors": [ + "Davidaz", + "mariogalan", "teoli", - "torresnicolas", - "Jorolo" + "guillermomartinmarco", + "eoasakura", + "mamigove" ] }, - "Web/HTML/Elemento/details": { - "modified": "2019-07-23T13:52:13.415Z", + "Web/API/Canvas_API/Tutorial/Drawing_shapes": { + "modified": "2019-03-23T23:15:03.361Z", "contributors": [ - "Krnan", - "jcr4" + "cepeami01", + "AlexisRC463", + "matiasrvergara", + "Blackangel1965", + "ErikMj69", + "alkaithil", + "faqndo", + "martinzaraterafael", + "gabriel15", + "Marezelej" ] }, - "Web/HTML/Elemento/dfn": { - "modified": "2019-03-18T21:11:06.323Z", + "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": { + "modified": "2019-03-18T21:31:01.983Z", "contributors": [ - "duduindo", - "teoli", - "Jorolo" + "cepeami01" ] }, - "Web/HTML/Elemento/dialog": { - "modified": "2020-10-15T21:43:09.315Z", + "Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-23T23:18:23.090Z", "contributors": [ - "danielblazquez", - "abaracedo" + "fniwes", + "DeiberChacon", + "jeancgarciaq" ] }, - "Web/HTML/Elemento/dir": { - "modified": "2019-03-18T21:11:06.122Z", + "Web/API/Canvas_API/Tutorial/Optimizing_canvas": { + "modified": "2019-03-23T23:18:04.030Z", "contributors": [ - "duduindo", - "teoli", - "Jorolo" + "Cax" ] }, - "Web/HTML/Elemento/div": { - "modified": "2019-03-23T23:42:24.990Z", + "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas": { + "modified": "2019-03-18T21:42:58.094Z", "contributors": [ - "Neto2412", - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "Luis_Gentil", + "JulianSoto", + "anfuca" ] }, - "Web/HTML/Elemento/dl": { - "modified": "2020-10-15T21:18:47.033Z", + "Web/Guide/HTML/Content_categories": { + "modified": "2020-09-06T09:32:45.431Z", "contributors": [ - "iign", - "IsraelFloresDGA", - "jigs12", - "johnmejia", - "teoli", - "Jorolo" + "Nachec", + "BrayanAvian", + "raecillacastellana", + "eljonims", + "eliasrodeloso" ] }, - "Web/HTML/Elemento/dt": { - "modified": "2020-10-15T21:18:46.570Z", + "orphaned/Web/Guide/HTML/Introduction_alhtml_clone": { + "modified": "2019-03-23T23:11:36.473Z", "contributors": [ - "IsraelFloresDGA", - "jigs12", - "ander2", - "teoli", - "Jorolo" + "emanuelvega", + "Cristhoper" ] }, - "Web/HTML/Elemento/element": { - "modified": "2019-03-23T22:38:36.820Z", + "Web/Guide/Mobile": { + "modified": "2019-03-23T22:48:50.706Z", "contributors": [ - "raecillacastellana", - "kramery" + "miguelsp" ] }, - "Web/HTML/Elemento/em": { - "modified": "2019-03-23T23:41:24.943Z", + "Web/API/Web_Workers_API/Using_web_workers": { + "modified": "2020-09-27T14:14:17.948Z", "contributors": [ - "BubuAnabelas", - "teoli", - "Jorolo" + "hendaniel", + "arbesulo", + "zynt1102", + "albertovelazmoliner", + "luisdos", + "EricMoIr", + "hmorv", + "DeiberChacon", + "rsalgado", + "mvargasmoran" ] }, - "Web/HTML/Elemento/embed": { - "modified": "2019-03-24T00:07:02.501Z", + "Web/API/Canvas_API/Manipulating_video_using_canvas": { + "modified": "2019-03-24T00:07:00.528Z", "contributors": [ - "wbamberg", "teoli", "inma_610" ] }, - "Web/HTML/Elemento/fieldset": { - "modified": "2019-03-24T00:04:28.839Z", + "Web/HTML/Attributes/crossorigin": { + "modified": "2019-03-23T22:46:11.986Z", "contributors": [ - "dmarchena", - "Sebastianz", - "teoli", - "roperzh", - "ethertank", - "Klosma", - "Jorolo" + "eporta88", + "virlliNia", + "vltamara" + ] + }, + "Web/HTML/Global_attributes/accesskey": { + "modified": "2019-03-23T22:41:37.238Z", + "contributors": [ + "jcr4" ] }, - "Web/HTML/Elemento/figcaption": { - "modified": "2020-10-15T21:43:37.764Z", + "Web/HTML/Global_attributes/autocapitalize": { + "modified": "2020-10-15T22:12:15.178Z", "contributors": [ - "danieltacho", - "danielblazquez", - "BrayanAvian", - "pekechis" + "Nachec", + "carlosgocereceda", + "WilsonIsAliveClone", + "Raulpascual2" ] }, - "Web/HTML/Elemento/figure": { - "modified": "2019-03-24T00:07:44.105Z", + "Web/HTML/Global_attributes/class": { + "modified": "2019-03-23T22:41:38.505Z", "contributors": [ - "wbamberg", - "teoli", - "inma_610", - "translatoon" + "imangas", + "jcr4" ] }, - "Web/HTML/Elemento/font": { - "modified": "2019-03-23T23:42:25.753Z", + "Web/HTML/Global_attributes/contenteditable": { + "modified": "2019-03-23T22:41:31.507Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "ManuAlvarado22", + "jcr4" ] }, - "Web/HTML/Elemento/footer": { - "modified": "2019-03-24T00:06:10.667Z", + "Web/HTML/Global_attributes/contextmenu": { + "modified": "2019-03-23T22:41:33.594Z", "contributors": [ - "teoli", - "translatoon" + "jcr4" ] }, - "Web/HTML/Elemento/form": { - "modified": "2019-03-23T23:38:31.636Z", + "Web/HTML/Global_attributes/data-*": { + "modified": "2019-06-27T12:32:36.980Z", "contributors": [ - "teoli", - "jesanchez", - "jsalinas" + "deyvirosado", + "jcr4" ] }, - "Web/HTML/Elemento/frame": { - "modified": "2019-03-23T23:42:33.478Z", + "Web/HTML/Global_attributes/dir": { + "modified": "2019-03-23T22:41:19.442Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "jcr4" ] }, - "Web/HTML/Elemento/frameset": { - "modified": "2019-03-23T23:42:33.678Z", + "Web/HTML/Global_attributes/draggable": { + "modified": "2019-03-23T22:41:17.791Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "JuanSerrano02", + "jcr4" ] }, - "Web/HTML/Elemento/head": { - "modified": "2019-03-23T23:41:19.487Z", + "orphaned/Web/HTML/Global_attributes/dropzone": { + "modified": "2019-03-23T22:41:19.266Z", "contributors": [ - "israel-munoz", - "teoli", - "Jorolo" + "JuanSerrano02", + "jcr4" ] }, - "Web/HTML/Elemento/header": { - "modified": "2019-09-22T13:38:40.530Z", + "Web/HTML/Global_attributes/hidden": { + "modified": "2019-03-23T22:41:18.690Z", "contributors": [ - "duduindo", - "erix2016", - "wbamberg", - "teoli", - "trevorh", - "deimidis", - "translatoon" + "jcr4" ] }, - "Web/HTML/Elemento/hgroup": { - "modified": "2020-04-16T18:54:49.840Z", + "Web/HTML/Global_attributes/id": { + "modified": "2019-03-23T22:45:39.709Z", "contributors": [ - "camsa", - "wbamberg", - "eazel7", - "harthe13", - "teoli", - "ccarruitero", - "percy@mozilla.pe" + "vanesa", + "DavidZabaleta", + "eoasakura" ] }, - "Web/HTML/Elemento/hr": { - "modified": "2019-03-23T23:41:46.133Z", + "Web/HTML/Global_attributes": { + "modified": "2020-10-15T21:39:25.776Z", "contributors": [ - "wissol", - "gabrielvol", - "jigs12", - "teoli", - "welm", - "Jorolo" + "Nachec", + "PacoVela", + "imangas", + "vltamara" ] }, - "Web/HTML/Elemento/html": { - "modified": "2019-03-23T23:41:20.478Z", + "Web/HTML/Global_attributes/is": { + "modified": "2020-10-15T22:04:27.264Z", "contributors": [ - "raecillacastellana", - "arturoblack", - "teoli", - "Jorolo" + "daniel.duarte" ] }, - "Web/HTML/Elemento/i": { - "modified": "2019-03-18T21:11:05.917Z", + "Web/HTML/Global_attributes/itemid": { + "modified": "2019-03-23T22:37:36.858Z", "contributors": [ - "duduindo", - "teoli", - "Jorolo" + "pekechis" ] }, - "Web/HTML/Elemento/iframe": { - "modified": "2020-10-15T21:20:22.917Z", + "Web/HTML/Global_attributes/itemprop": { + "modified": "2019-03-23T22:41:15.543Z", "contributors": [ - "mirinnes", - "nadya.serrano", - "danielblazquez", - "duduindo", - "wbamberg", - "antoiba86", - "jhonnycano@hotmail.com", - "teoli", - "aguztinrs" + "rhssr", + "jcr4" ] }, - "Web/HTML/Elemento/image": { - "modified": "2019-03-23T22:38:59.070Z", + "Web/HTML/Global_attributes/itemref": { + "modified": "2019-03-23T22:36:41.055Z", "contributors": [ "jcr4" ] }, - "Web/HTML/Elemento/img": { - "modified": "2020-07-12T20:16:35.983Z", + "Web/HTML/Global_attributes/itemscope": { + "modified": "2020-10-15T21:41:28.202Z", "contributors": [ - "maodecolombia", - "thzunder", - "teoli", - "makoescalzo" + "JuanSerrano02", + "chrisvpr", + "jcr4" ] }, - "Web/HTML/Elemento/input": { - "modified": "2020-07-14T01:15:57.719Z", + "Web/HTML/Global_attributes/lang": { + "modified": "2019-03-23T22:41:11.276Z", "contributors": [ - "maodecolombia", - "KacosPro", - "moisesalmonte", - "israel-munoz", - "Alejandra.B", - "garciaFullana", - "j-light", - "chech", - "dennistobar", - "welm", - "Johsua", - "byverdu", - "chipsweb", - "teoli", - "ovnicraft" + "agonzalezml", + "jcr4" ] }, - "Web/HTML/Elemento/input/Botón": { - "modified": "2019-04-18T16:11:40.984Z", + "Web/HTML/Global_attributes/slot": { + "modified": "2020-10-15T22:04:16.315Z", "contributors": [ - "IsaacAaron", - "joelarmad", - "LexAenima" + "daniel.duarte" ] }, - "Web/HTML/Elemento/input/checkbox": { - "modified": "2019-05-13T05:40:59.628Z", + "Web/HTML/Global_attributes/spellcheck": { + "modified": "2019-03-23T22:41:06.455Z", "contributors": [ - "AlePerez92", - "BetsabethTorrres", - "j-light", - "FranRomero", - "JoseEnrique" + "jcr4" ] }, - "Web/HTML/Elemento/input/color": { - "modified": "2019-03-23T22:37:43.300Z", + "Web/HTML/Global_attributes/style": { + "modified": "2019-03-23T22:41:09.210Z", "contributors": [ - "fitojb", - "Alesan7" + "jcr4" ] }, - "Web/HTML/Elemento/input/date": { - "modified": "2019-10-10T16:45:44.142Z", + "Web/HTML/Global_attributes/tabindex": { + "modified": "2019-07-12T03:22:15.997Z", "contributors": [ - "ANAIDJM1", - "fitojb" + "ChrisMHM", + "bamvoo", + "cabetancourtc", + "StripTM", + "jcr4" ] }, - "Web/HTML/Elemento/input/datetime": { - "modified": "2019-03-23T22:36:20.508Z", + "Web/HTML/Global_attributes/title": { + "modified": "2019-03-23T22:40:44.282Z", "contributors": [ - "AngelMunoz", "jcr4" ] }, - "Web/HTML/Elemento/input/email": { - "modified": "2020-10-15T22:11:48.198Z", + "Web/HTML/Global_attributes/translate": { + "modified": "2019-03-23T22:40:27.406Z", "contributors": [ - "Nachec", - "facuarmo", - "MarielaBR" + "jcr4" ] }, - "Web/HTML/Elemento/input/hidden": { - "modified": "2020-10-15T22:10:33.714Z", + "Web/HTML/Global_attributes/x-ms-acceleratorkey": { + "modified": "2019-03-18T21:20:44.665Z", "contributors": [ - "IsraelFloresDGA" + "WriestTavo" ] }, - "Web/HTML/Elemento/input/number": { - "modified": "2020-10-15T22:26:16.273Z", + "Web/HTML/Attributes/accept": { + "modified": "2020-10-15T22:34:00.656Z", "contributors": [ - "roocce" + "Nachec" ] }, - "Web/HTML/Elemento/input/password": { - "modified": "2019-03-23T22:38:38.107Z", + "Web/HTML/Attributes/autocomplete": { + "modified": "2019-04-06T00:39:59.162Z", "contributors": [ - "MarielaBR", - "xxx41", - "AlvaroNieto" + "qmarquez", + "Raulpascual2" ] }, - "Web/HTML/Elemento/input/range": { - "modified": "2019-03-18T20:57:13.760Z", + "Web/HTML/Attributes": { + "modified": "2019-03-23T23:21:50.772Z", "contributors": [ - "SphinxKnight", - "KikeSan", - "Luis_Calvo" + "raecillacastellana", + "Cdam", + "vltamara", + "Shinigami-sama", + "welm", + "noografo", + "Benito", + "LeoHirsch", + "sha" ] }, - "Web/HTML/Elemento/input/text": { - "modified": "2020-10-15T22:34:26.828Z", + "Web/HTML/Attributes/min": { + "modified": "2020-10-15T22:33:58.169Z", "contributors": [ "Nachec" ] }, - "Web/HTML/Elemento/ins": { - "modified": "2019-07-06T05:38:19.222Z", + "Web/HTML/Attributes/minlength": { + "modified": "2020-10-15T22:33:56.870Z", "contributors": [ - "baumannzone", - "duduindo", - "welm", - "teoli", - "torresnicolas", - "Jorolo" + "Nachec" ] }, - "Web/HTML/Elemento/isindex": { - "modified": "2019-03-23T22:36:13.994Z", + "Web/HTML/Attributes/multiple": { + "modified": "2020-09-08T01:48:55.405Z", "contributors": [ - "jcr4" + "Nachec" ] }, - "Web/HTML/Elemento/kbd": { - "modified": "2019-03-18T21:11:05.093Z", + "Web/API/Canvas_API/A_basic_ray-caster": { + "modified": "2019-03-19T08:57:21.057Z", "contributors": [ - "duduindo", - "welm", + "AzazelN28", + "Fandres91", + "dkocho4", + "preteric" + ] + }, + "Web/API/Canvas_API": { + "modified": "2019-10-10T16:45:32.554Z", + "contributors": [ + "lajaso", + "jagomf", "teoli", - "Jorolo" + "ethertank", + "jesusmercado", + "dextra", + "beto21", + "inma_610", + "RickieesES", + "Pgulijczuk", + "kourt_xand", + "Fifthtoe", + "Mgjbot" ] }, - "Web/HTML/Elemento/keygen": { - "modified": "2019-03-24T00:06:20.618Z", + "Learn/HTML/Howto/Author_fast-loading_HTML_pages": { + "modified": "2020-07-16T22:22:32.156Z", "contributors": [ - "wbamberg", - "teoli", - "deimidis" + "ZKoaLa", + "nazhaj", + "JuanC_01" ] }, - "Web/HTML/Elemento/label": { - "modified": "2019-03-23T23:22:26.460Z", + "Web/HTML/Element/a": { + "modified": "2020-12-02T02:55:47.706Z", "contributors": [ - "ardillan", - "gcejas", + "SphinxKnight", + "xtrs84zk", + "HectorFranco", + "sergio_p_d", + "julioematasv", + "ManuelSLemos", + "raecillacastellana", "teoli", - "WillyMaikowski" + "Nukeador", + "RickieesES", + "HenryGR", + "Mgjbot" ] }, - "Web/HTML/Elemento/legend": { - "modified": "2019-06-05T17:18:09.680Z", + "Web/HTML/Element/abbr": { + "modified": "2019-03-23T23:41:48.686Z", "contributors": [ - "Ivnosing", - "Sebastianz", - "saski", + "vanesa", + "abaracedo", + "jigs12", + "welm", "teoli", - "Klosma", "Jorolo" ] }, - "Web/HTML/Elemento/li": { - "modified": "2019-03-18T21:11:04.870Z", + "Web/HTML/Element/acronym": { + "modified": "2019-03-23T23:41:54.391Z", "contributors": [ - "duduindo", - "chepegeek", + "Sebastianz", + "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/link": { - "modified": "2019-03-23T23:41:37.686Z", + "Web/HTML/Element/address": { + "modified": "2019-03-23T23:41:48.972Z", "contributors": [ - "pawer13", - "israel-munoz", - "Sebastianz", + "abaracedo", "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/main": { - "modified": "2019-03-23T23:25:22.761Z", + "Web/HTML/Element/applet": { + "modified": "2019-03-23T23:42:26.076Z", "contributors": [ - "evaferreira", - "jesusbotella", + "Sebastianz", "teoli", - "jsalinas" + "Jorolo" ] }, - "Web/HTML/Elemento/map": { - "modified": "2019-03-23T23:41:43.985Z", + "Web/HTML/Element/area": { + "modified": "2019-03-23T23:41:50.345Z", "contributors": [ "Sebastianz", "jigs12", @@ -16693,80 +17022,58 @@ "Jorolo" ] }, - "Web/HTML/Elemento/mark": { - "modified": "2020-10-15T21:04:57.447Z", + "Web/HTML/Element/article": { + "modified": "2020-04-14T03:59:04.779Z", "contributors": [ - "danielblazquez", - "feliperomero3", + "Jx1ls", "wbamberg", "teoli", - "Flerex", - "hugohabel", - "inma_610", - "translatoon" + "deimidis" ] }, - "Web/HTML/Elemento/marquee": { - "modified": "2019-03-18T20:57:46.110Z", + "Web/HTML/Element/aside": { + "modified": "2019-05-13T08:38:38.128Z", "contributors": [ - "gabriell24", - "erix2016", - "alexander171294" + "blanchart", + "wbamberg", + "teoli", + "trevorh", + "ccarruitero", + "inma_610" ] }, - "Web/HTML/Elemento/menu": { - "modified": "2019-03-18T21:11:04.661Z", + "Web/HTML/Element/audio": { + "modified": "2019-03-24T00:17:32.335Z", "contributors": [ - "duduindo", + "wbamberg", "teoli", - "Jorolo" + "tregagnon", + "RickieesES", + "inma_610" ] }, - "Web/HTML/Elemento/meta": { - "modified": "2019-03-23T23:42:35.250Z", + "Web/HTML/Element/b": { + "modified": "2019-03-23T23:41:59.385Z", "contributors": [ + "gabrielvol", "Sebastianz", - "feardarkness", "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/multicol": { - "modified": "2019-03-23T22:36:14.458Z", - "contributors": [ - "jcr4" - ] - }, - "Web/HTML/Elemento/nav": { - "modified": "2020-12-08T21:27:47.077Z", - "contributors": [ - "benito-san", - "DagoGuevara", - "driconmax", - "teoli", - "martinbarce", - "makoescalzo" - ] - }, - "Web/HTML/Elemento/nobr": { - "modified": "2019-03-18T21:35:49.711Z", - "contributors": [ - "rhssr", - "Mexicotec" - ] - }, - "Web/HTML/Elemento/noframes": { - "modified": "2019-03-23T23:42:28.640Z", + "Web/HTML/Element/base": { + "modified": "2019-03-23T23:41:55.648Z", "contributors": [ + "raecillacastellana", "Sebastianz", "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/noscript": { - "modified": "2019-03-23T23:42:26.569Z", + "Web/HTML/Element/basefont": { + "modified": "2019-03-23T23:42:33.059Z", "contributors": [ "Sebastianz", "jigs12", @@ -16774,182 +17081,115 @@ "Jorolo" ] }, - "Web/HTML/Elemento/object": { - "modified": "2020-10-15T22:22:23.263Z", + "Web/HTML/Element/bdi": { + "modified": "2019-03-23T22:37:44.087Z", "contributors": [ - "siregalado", - "iarah" + "pekechis", + "teoli" ] }, - "Web/HTML/Elemento/ol": { - "modified": "2020-02-03T21:28:29.355Z", + "Web/HTML/Element/bdo": { + "modified": "2019-03-23T23:41:59.174Z", "contributors": [ - "kevinar53", - "duduindo", + "Sebastianz", + "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/option": { - "modified": "2019-03-23T22:38:56.017Z", - "contributors": [ - "pekechis" - ] - }, - "Web/HTML/Elemento/p": { - "modified": "2019-03-23T23:41:31.103Z", + "Web/HTML/Element/bgsound": { + "modified": "2019-10-10T16:35:21.119Z", "contributors": [ - "Sebastianz", - "jigs12", - "teoli", - "Jorolo" + "jcr4" ] }, - "Web/HTML/Elemento/param": { - "modified": "2019-03-23T23:42:31.653Z", + "Web/HTML/Element/big": { + "modified": "2019-03-23T23:42:00.157Z", "contributors": [ "Sebastianz", "jigs12", + "welm", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/picture": { - "modified": "2019-07-20T20:15:37.196Z", - "contributors": [ - "DagoGuevara", - "JulianSoto", - "alexlndn", - "danieltacho", - "IsraelFloresDGA", - "diegos2" - ] - }, - "Web/HTML/Elemento/pre": { - "modified": "2019-03-18T21:11:04.209Z", + "Web/HTML/Element/blink": { + "modified": "2019-10-10T16:37:40.291Z", "contributors": [ - "duduindo", "teoli", - "_0x" + "jcr4" ] }, - "Web/HTML/Elemento/progress": { - "modified": "2020-10-15T21:22:45.390Z", + "Web/HTML/Element/blockquote": { + "modified": "2019-03-23T23:42:29.095Z", "contributors": [ - "SphinxKnight", - "androsfenollosa", - "wbamberg", + "Sebastianz", + "jigs12", "teoli", - "rubencidlara" + "Jorolo" ] }, - "Web/HTML/Elemento/q": { - "modified": "2020-10-15T22:34:03.995Z", + "Web/HTML/Element/body": { + "modified": "2020-10-15T22:34:39.725Z", "contributors": [ "Nachec" ] }, - "Web/HTML/Elemento/s": { - "modified": "2019-03-18T21:11:03.985Z", + "Web/HTML/Element/br": { + "modified": "2019-03-23T23:42:25.427Z", "contributors": [ - "duduindo", + "vanesa", + "abaracedo", + "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/samp": { - "modified": "2019-10-11T12:30:51.315Z", + "Web/HTML/Element/button": { + "modified": "2020-10-15T21:13:54.408Z", "contributors": [ - "danielblazquez", - "duduindo", - "Johsua", + "MarielaBR", + "evaferreira", + "Sebastianz", + "jigs12", + "oece", "teoli", + "ethertank", "Jorolo" ] }, - "Web/HTML/Elemento/script": { - "modified": "2019-03-23T22:38:36.106Z", - "contributors": [ - "ignasivs", - "raecillacastellana", - "ivandevp", - "alexander171294" - ] - }, - "Web/HTML/Elemento/section": { - "modified": "2020-07-15T11:06:51.948Z", + "Web/HTML/Element/canvas": { + "modified": "2019-03-24T00:07:43.236Z", "contributors": [ - "timetrvlr", "wbamberg", - "diegocanal", - "eljonims", - "teoli", - "ccarruitero", - "artopal" - ] - }, - "Web/HTML/Elemento/select": { - "modified": "2019-03-23T22:38:39.246Z", - "contributors": [ - "Fx-Enlcxx", - "AleV" - ] - }, - "Web/HTML/Elemento/slot": { - "modified": "2020-10-15T22:05:53.326Z", - "contributors": [ - "aguilerajl", - "Carlos-T", - "rhssr" - ] - }, - "Web/HTML/Elemento/small": { - "modified": "2019-04-04T15:23:46.402Z", - "contributors": [ - "danieltacho", - "drakzig", - "SphinxKnight", - "carloque", - "teoli", - "Jorolo" - ] - }, - "Web/HTML/Elemento/source": { - "modified": "2020-10-15T21:13:44.488Z", - "contributors": [ - "guillermomartinmarco", + "evaferreira", "teoli", - "inma_610" + "inma_610", + "xaky" ] }, - "Web/HTML/Elemento/span": { - "modified": "2019-03-24T00:17:34.814Z", + "Web/HTML/Element/caption": { + "modified": "2019-03-23T23:42:13.711Z", "contributors": [ + "camilai", "Sebastianz", "jigs12", "teoli", - "torresnicolas", - "Jorolo" - ] - }, - "Web/HTML/Elemento/strike": { - "modified": "2019-03-18T21:11:03.623Z", - "contributors": [ - "duduindo", - "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/strong": { - "modified": "2019-03-18T21:11:02.931Z", + "Web/HTML/Element/center": { + "modified": "2020-04-23T17:50:49.499Z", "contributors": [ - "duduindo", + "JAMC", + "blanchart", + "Sebastianz", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/style": { - "modified": "2019-03-23T23:42:38.349Z", + "Web/HTML/Element/cite": { + "modified": "2019-03-23T23:42:34.535Z", "contributors": [ "Sebastianz", "jigs12", @@ -16957,1125 +17197,1164 @@ "Jorolo" ] }, - "Web/HTML/Elemento/sub": { - "modified": "2020-10-15T21:18:49.449Z", + "Web/HTML/Element/code": { + "modified": "2019-03-23T23:41:28.451Z", "contributors": [ - "IsaacAaron", - "carloque", + "BubuAnabelas", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/sup": { - "modified": "2020-10-15T21:18:45.044Z", + "Web/HTML/Element/col": { + "modified": "2019-03-23T23:42:14.518Z", "contributors": [ - "IsaacAaron", - "carloque", + "Sebastianz", + "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/table": { - "modified": "2019-09-03T15:32:58.837Z", + "Web/HTML/Element/colgroup": { + "modified": "2019-03-23T23:42:18.079Z", "contributors": [ + "Sebastianz", + "jigs12", "teoli", - "jesanchez", - "cortega", - "tany" + "Jorolo" ] }, - "Web/HTML/Elemento/td": { - "modified": "2019-03-23T22:38:37.555Z", + "orphaned/Web/HTML/Element/command": { + "modified": "2019-10-05T04:48:52.506Z", "contributors": [ - "Kerinoxio", - "Zarkiel", - "raecillacastellana", - "tolano97" + "titox", + "jcr4" ] }, - "Web/HTML/Elemento/template": { - "modified": "2020-10-15T21:52:05.945Z", + "Web/HTML/Element/content": { + "modified": "2019-03-23T22:36:12.624Z", "contributors": [ - "aguilerajl", - "ArtistNeverStop", - "Diego674", - "AlePerez92" + "jcr4" ] }, - "Web/HTML/Elemento/textarea": { - "modified": "2020-10-15T21:43:13.029Z", + "Web/HTML/Element/data": { + "modified": "2019-07-24T08:09:10.849Z", "contributors": [ - "camsa", - "fscholz", - "pekechis" + "SphinxKnight", + "mikecolina", + "raecillacastellana" ] }, - "Web/HTML/Elemento/th": { - "modified": "2020-04-22T05:00:45.306Z", + "Web/HTML/Element/datalist": { + "modified": "2020-10-15T21:13:43.994Z", "contributors": [ - "blanchart", - "AgustinDPino", - "IXTRUnai", - "sapales" + "mfranzke", + "hernanarica", + "miguelgilmartinez", + "Luuis", + "SphinxKnight", + "teoli", + "translatoon", + "Izel" ] }, - "Web/HTML/Elemento/time": { - "modified": "2020-10-15T21:18:39.499Z", + "Web/HTML/Element/dd": { + "modified": "2020-10-15T21:18:43.107Z", "contributors": [ - "pardo-bsso", - "blanchart", "IsraelFloresDGA", - "dsolism", - "mauriciabad", + "jigs12", + "johnmejia", "teoli", - "sebasmagri", - "makoescalzo" + "Jorolo" ] }, - "Web/HTML/Elemento/title": { - "modified": "2019-10-10T16:32:45.843Z", + "Web/HTML/Element/del": { + "modified": "2019-03-18T21:11:06.542Z", "contributors": [ "duduindo", "teoli", + "torresnicolas", "Jorolo" ] }, - "Web/HTML/Elemento/tr": { - "modified": "2019-03-23T22:38:35.421Z", - "contributors": [ - "raecillacastellana", - "FelipeGL" - ] - }, - "Web/HTML/Elemento/track": { - "modified": "2020-10-15T22:33:21.321Z", + "Web/HTML/Element/details": { + "modified": "2019-07-23T13:52:13.415Z", "contributors": [ - "Pablo-No" + "Krnan", + "jcr4" ] }, - "Web/HTML/Elemento/tt": { - "modified": "2019-03-18T21:11:03.301Z", + "Web/HTML/Element/dfn": { + "modified": "2019-03-18T21:11:06.323Z", "contributors": [ "duduindo", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/u": { - "modified": "2019-03-18T21:11:03.114Z", + "Web/HTML/Element/dialog": { + "modified": "2020-10-15T21:43:09.315Z", + "contributors": [ + "danielblazquez", + "abaracedo" + ] + }, + "Web/HTML/Element/dir": { + "modified": "2019-03-18T21:11:06.122Z", "contributors": [ "duduindo", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/ul": { - "modified": "2019-03-23T23:42:39.154Z", + "Web/HTML/Element/div": { + "modified": "2019-03-23T23:42:24.990Z", "contributors": [ + "Neto2412", "Sebastianz", "jigs12", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/var": { - "modified": "2019-03-23T23:41:16.113Z", + "Web/HTML/Element/dl": { + "modified": "2020-10-15T21:18:47.033Z", "contributors": [ - "BubuAnabelas", + "iign", + "IsraelFloresDGA", + "jigs12", + "johnmejia", "teoli", "Jorolo" ] }, - "Web/HTML/Elemento/video": { - "modified": "2019-03-24T00:06:49.642Z", + "Web/HTML/Element/dt": { + "modified": "2020-10-15T21:18:46.570Z", "contributors": [ - "wbamberg", - "untilbit", - "AlePerez92", + "IsraelFloresDGA", + "jigs12", + "ander2", "teoli", - "inma_610", - "Izel" + "Jorolo" ] }, - "Web/HTML/Elemento/wbr": { - "modified": "2019-04-26T19:10:14.131Z", + "orphaned/Web/HTML/Element/element": { + "modified": "2019-03-23T22:38:36.820Z", "contributors": [ - "reymundus2", - "jcr4" + "raecillacastellana", + "kramery" ] }, - "Web/HTML/Elemento/xmp": { - "modified": "2019-03-23T22:38:49.554Z", + "Web/HTML/Element/Heading_Elements": { + "modified": "2019-03-23T23:41:24.635Z", "contributors": [ - "jcr4" + "evaferreira", + "chrisdavidmills", + "israel-munoz", + "teoli", + "Jorolo" ] }, - "Web/HTML/Elementos_en_línea": { - "modified": "2019-03-23T22:46:15.359Z", + "Web/HTML/Element/em": { + "modified": "2019-03-23T23:41:24.943Z", "contributors": [ - "juanbrujo", - "raecillacastellana", - "vltamara" + "BubuAnabelas", + "teoli", + "Jorolo" ] }, - "Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5": { - "modified": "2019-03-23T23:26:59.594Z", + "Web/HTML/Element/embed": { + "modified": "2019-03-24T00:07:02.501Z", "contributors": [ "wbamberg", - "vltamara", "teoli", - "nekside" + "inma_610" ] }, - "Web/HTML/Imagen_con_CORS_habilitado": { - "modified": "2019-03-23T22:46:06.691Z", + "orphaned/Web/HTML/Elemento/Etiqueta_Personalizada_HTML5": { + "modified": "2019-03-23T22:40:57.260Z", "contributors": [ - "MrCesar107", - "antoiba86", - "vltamara" + "Lazaro" ] }, - "Web/HTML/La_importancia_de_comentar_correctamente": { - "modified": "2019-03-23T23:53:31.079Z", + "Web/HTML/Element/fieldset": { + "modified": "2019-03-24T00:04:28.839Z", "contributors": [ + "dmarchena", + "Sebastianz", "teoli", - "Mgjbot", + "roperzh", + "ethertank", + "Klosma", "Jorolo" ] }, - "Web/HTML/Microdatos": { - "modified": "2019-03-23T22:12:50.480Z", - "contributors": [ - "fitojb" - ] - }, - "Web/HTML/Optimizing_your_pages_for_speculative_parsing": { - "modified": "2019-03-23T23:15:52.979Z", - "contributors": [ - "jsapiains", - "joeljose", - "vltamara", - "manufosela", - "Montherdez" - ] - }, - "Web/HTML/Quirks_Mode_and_Standards_Mode": { - "modified": "2019-03-23T22:00:35.023Z", + "Web/HTML/Element/figcaption": { + "modified": "2020-10-15T21:43:37.764Z", "contributors": [ - "chrisdavidmills", - "alvaromontoro", - "mamptecnocrata", - "ungatoquecomesushi" + "danieltacho", + "danielblazquez", + "BrayanAvian", + "pekechis" ] }, - "Web/HTML/Recursos_offline_en_firefox": { - "modified": "2019-03-19T07:43:37.221Z", + "Web/HTML/Element/figure": { + "modified": "2019-03-24T00:07:44.105Z", "contributors": [ - "pixelmin", - "dmoralesm", + "wbamberg", "teoli", - "vltamara", - "CodeMaxter", - "LuisArt", - "FCuchietti", - "MPoli", - "hugohabel", - "RickieesES", "inma_610", - "Izel" - ] - }, - "Web/HTML/Referencia": { - "modified": "2019-09-09T07:16:42.154Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "raecillacastellana", - "cosmesantos", - "vltamara", - "MegaChrono" - ] - }, - "Web/HTML/Tipos_de_enlaces": { - "modified": "2019-03-23T22:46:17.969Z", - "contributors": [ - "cmmp0112", - "_delta_", - "moisesalmonte", - "alvaromontoro", - "ivansx", - "vltamara" - ] - }, - "Web/HTML/Transision_adaptativa_DASH": { - "modified": "2019-03-23T22:46:14.015Z", - "contributors": [ - "AzazelN28", - "vltamara" + "translatoon" ] }, - "Web/HTML/Usando_audio_y_video_con_HTML5": { - "modified": "2019-10-10T16:52:54.661Z", + "Web/HTML/Element/font": { + "modified": "2019-03-23T23:42:25.753Z", "contributors": [ - "ElNobDeTfm", - "estebanz01", - "hedmon", - "blanchart", + "Sebastianz", + "jigs12", "teoli", - "ciroid", - "cesar_ortiz_elPatox", - "StripTM", - "AngelFQC" + "Jorolo" ] }, - "Web/HTML/anipular_video_por_medio_de_canvas": { - "modified": "2019-03-24T00:07:00.528Z", + "Web/HTML/Element/footer": { + "modified": "2019-03-24T00:06:10.667Z", "contributors": [ "teoli", - "inma_610" - ] - }, - "Web/HTML/microformatos": { - "modified": "2019-03-23T22:46:15.016Z", - "contributors": [ - "vltamara" + "translatoon" ] }, - "Web/HTML/Índice": { - "modified": "2019-01-16T22:12:02.767Z", + "Web/HTML/Element/form": { + "modified": "2019-03-23T23:38:31.636Z", "contributors": [ - "raecillacastellana", - "pekechis" + "teoli", + "jesanchez", + "jsalinas" ] }, - "Web/HTTP": { - "modified": "2019-03-18T20:34:58.542Z", + "Web/HTML/Element/frame": { + "modified": "2019-03-23T23:42:33.478Z", "contributors": [ - "IsraelFloresDGA", - "MarioECU", - "locolauty97", - "Sergio_Gonzalez_Collado", - "Ferrmolina", - "raecillacastellana", - "migdonio1", - "Erto", - "teoli" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Access_control_CORS": { - "modified": "2020-08-10T16:23:20.546Z", + "Web/HTML/Element/frameset": { + "modified": "2019-03-23T23:42:33.678Z", "contributors": [ - "wbamberg", - "afelopez", - "jbarcas", - "cefaloide", - "alcastic", - "franklevel", - "JuanMacias", - "psyban", - "manatico4", - "signados", - "Ricardolau", - "afbayonac", - "aurigadl", - "dcruz", - "Manhru", - "maedca" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Authentication": { - "modified": "2019-10-24T13:52:25.126Z", + "Web/HTML/Element/head": { + "modified": "2019-03-23T23:41:19.487Z", "contributors": [ - "bood-dev", - "Gochip", - "fcanellas", - "diegorec", - "kraneok", - "JuanMacias", - "_deiberchacon", - "DavidPeniafiel" + "israel-munoz", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Basics_of_HTTP": { - "modified": "2020-04-20T02:59:31.392Z", + "Web/HTML/Element/header": { + "modified": "2019-09-22T13:38:40.530Z", "contributors": [ - "obed3113", - "sanxofon", - "Sergio_Gonzalez_Collado", - "cissoid" + "duduindo", + "erix2016", + "wbamberg", + "teoli", + "trevorh", + "deimidis", + "translatoon" ] }, - "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": { - "modified": "2019-03-18T21:22:07.450Z", + "Web/HTML/Element/hgroup": { + "modified": "2020-04-16T18:54:49.840Z", "contributors": [ - "Adorta4", - "carlosgocereceda" + "camsa", + "wbamberg", + "eazel7", + "harthe13", + "teoli", + "ccarruitero", + "percy@mozilla.pe" ] }, - "Web/HTTP/Basics_of_HTTP/Datos_URIs": { - "modified": "2019-03-23T22:24:54.977Z", + "Web/HTML/Element/hr": { + "modified": "2019-03-23T23:41:46.133Z", "contributors": [ - "Sergio_Gonzalez_Collado", - "AzazelN28", - "uclides" + "wissol", + "gabrielvol", + "jigs12", + "teoli", + "welm", + "Jorolo" ] }, - "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { - "modified": "2019-03-23T22:10:11.567Z", + "Web/HTML/Element/html": { + "modified": "2019-03-23T23:41:20.478Z", "contributors": [ - "Sergio_Gonzalez_Collado", - "ChrisMHM" + "raecillacastellana", + "arturoblack", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web": { - "modified": "2019-03-23T22:24:51.387Z", + "Web/HTML/Element/i": { + "modified": "2019-03-18T21:11:05.917Z", "contributors": [ - "DaniNz", - "Sergio_Gonzalez_Collado", - "ChrisMHM", - "uclides" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Basics_of_HTTP/MIME_types": { - "modified": "2019-11-18T08:03:54.325Z", + "Web/HTML/Element/iframe": { + "modified": "2020-10-15T21:20:22.917Z", "contributors": [ - "IsaacAaron", - "sanxofon", - "Sergio_Gonzalez_Collado", - "kevinmont", - "juanrarodriguez18", - "strattadb" + "mirinnes", + "nadya.serrano", + "danielblazquez", + "duduindo", + "wbamberg", + "antoiba86", + "jhonnycano@hotmail.com", + "teoli", + "aguztinrs" ] }, - "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { - "modified": "2020-02-28T13:10:45.613Z", + "Web/HTML/Element/image": { + "modified": "2019-03-23T22:38:59.070Z", "contributors": [ - "chrisdavidmills", - "sanxofon", - "franklevel", - "gabrielnoe" + "jcr4" ] }, - "Web/HTTP/CORS/Errors": { - "modified": "2019-03-18T21:26:43.815Z", + "Web/HTML/Element/img": { + "modified": "2020-07-12T20:16:35.983Z", "contributors": [ - "nchevobbe" + "maodecolombia", + "thzunder", + "teoli", + "makoescalzo" ] }, - "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { - "modified": "2020-03-20T09:22:59.137Z", + "Web/HTML/Element": { + "modified": "2020-07-13T03:12:39.708Z", "contributors": [ - "javier.camus", - "rotcl", - "MarianoRDZ" + "Enesimus", + "IsraelFloresDGA", + "ivanhelo", + "gabriel-ar", + "raecillacastellana", + "imangas", + "jccancelo", + "vltamara", + "teoli", + "LinoJaime", + "Rkovac", + "betoscopio", + "semptrion", + "StripTM", + "deimidis", + "Mgjbot", + "Klosma", + "Jorolo" ] }, - "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { - "modified": "2020-03-10T05:27:13.697Z", + "Web/HTML/Element/input/button": { + "modified": "2019-04-18T16:11:40.984Z", "contributors": [ - "HermosinNunez", - "danhiel98", - "pyumbillo", - "rewin23" + "IsaacAaron", + "joelarmad", + "LexAenima" ] }, - "Web/HTTP/CORS/Errors/CORSNotSupportingCredentials": { - "modified": "2020-03-25T19:41:08.379Z", + "Web/HTML/Element/input/checkbox": { + "modified": "2019-05-13T05:40:59.628Z", "contributors": [ - "pablogalvezfotografiadeportiva" + "AlePerez92", + "BetsabethTorrres", + "j-light", + "FranRomero", + "JoseEnrique" ] }, - "Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed": { - "modified": "2019-10-08T04:58:57.176Z", + "Web/HTML/Element/input/color": { + "modified": "2019-03-23T22:37:43.300Z", "contributors": [ - "Concatenacion" + "fitojb", + "Alesan7" ] }, - "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { - "modified": "2020-07-09T00:32:19.159Z", + "Web/HTML/Element/input/date": { + "modified": "2019-10-10T16:45:44.142Z", "contributors": [ - "agf0710", - "advica2016", - "BubuAnabelas", - "Juan_Pablo" + "ANAIDJM1", + "fitojb" ] }, - "Web/HTTP/CSP": { - "modified": "2020-10-15T22:03:58.031Z", + "Web/HTML/Element/input/datetime": { + "modified": "2019-03-23T22:36:20.508Z", "contributors": [ - "lautaropaske", - "herleym", - "BubuAnabelas", - "vk496", - "CarlosRomeroVera" + "AngelMunoz", + "jcr4" ] }, - "Web/HTTP/Caching": { - "modified": "2019-03-18T21:21:15.259Z", + "Web/HTML/Element/input/email": { + "modified": "2020-10-15T22:11:48.198Z", "contributors": [ - "WilsonIsAliveClone", - "serarroy", - "ulisestrujillo" + "Nachec", + "facuarmo", + "MarielaBR" ] }, - "Web/HTTP/Cookies": { - "modified": "2020-06-27T19:11:54.360Z", + "Web/HTML/Element/input/hidden": { + "modified": "2020-10-15T22:10:33.714Z", "contributors": [ - "vinjatovix", - "SphinxKnight", - "g.baldemar.77", - "alexlndn", - "rayrojas", - "jesuscampos", - "nachoperassi", - "cguimaraenz", - "eortizromero", - "omertafox" + "IsraelFloresDGA" ] }, - "Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x": { - "modified": "2019-03-23T22:03:37.565Z", + "Web/HTML/Element/input": { + "modified": "2020-07-14T01:15:57.719Z", "contributors": [ - "jose89gp", - "Sergio_Gonzalez_Collado" + "maodecolombia", + "KacosPro", + "moisesalmonte", + "israel-munoz", + "Alejandra.B", + "garciaFullana", + "j-light", + "chech", + "dennistobar", + "welm", + "Johsua", + "byverdu", + "chipsweb", + "teoli", + "ovnicraft" ] }, - "Web/HTTP/Headers": { - "modified": "2019-12-10T13:29:15.931Z", + "Web/HTML/Element/input/number": { + "modified": "2020-10-15T22:26:16.273Z", "contributors": [ - "OneLoneFox", - "hamethassaf", - "darianbenito", - "MrcRjs", - "Watermelonnable", - "JurgenBlitz", - "ampersand89", - "fjuarez", - "fscholz" + "roocce" + ] + }, + "Web/HTML/Element/input/password": { + "modified": "2019-03-23T22:38:38.107Z", + "contributors": [ + "MarielaBR", + "xxx41", + "AlvaroNieto" ] }, - "Web/HTTP/Headers/Accept": { - "modified": "2020-10-15T21:55:42.853Z", + "Web/HTML/Element/input/range": { + "modified": "2019-03-18T20:57:13.760Z", "contributors": [ - "gabriel-ar" + "SphinxKnight", + "KikeSan", + "Luis_Calvo" ] }, - "Web/HTTP/Headers/Accept-Charset": { - "modified": "2020-10-15T22:13:56.858Z", + "Web/HTML/Element/input/text": { + "modified": "2020-10-15T22:34:26.828Z", "contributors": [ - "ArnoldFZ" + "Nachec" ] }, - "Web/HTTP/Headers/Accept-Ranges": { - "modified": "2020-10-15T21:52:24.088Z", + "Web/HTML/Element/ins": { + "modified": "2019-07-06T05:38:19.222Z", "contributors": [ - "gerardo1sanchez" + "baumannzone", + "duduindo", + "welm", + "teoli", + "torresnicolas", + "Jorolo" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Credentials": { - "modified": "2020-10-15T22:29:00.518Z", + "Web/HTML/Element/isindex": { + "modified": "2019-03-23T22:36:13.994Z", "contributors": [ - "BubuAnabelas", - "IsraelFloresDGA" + "jcr4" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Headers": { - "modified": "2020-10-15T22:07:25.027Z", + "Web/HTML/Element/kbd": { + "modified": "2019-03-18T21:11:05.093Z", "contributors": [ - "_deiberchacon" + "duduindo", + "welm", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Methods": { - "modified": "2020-10-15T21:54:50.843Z", + "Web/HTML/Element/keygen": { + "modified": "2019-03-24T00:06:20.618Z", "contributors": [ - "irsequisious" + "wbamberg", + "teoli", + "deimidis" ] }, - "Web/HTTP/Headers/Access-Control-Allow-Origin": { - "modified": "2020-10-15T21:56:44.483Z", + "Web/HTML/Element/label": { + "modified": "2019-03-23T23:22:26.460Z", "contributors": [ - "estrelow", - "IsraelFloresDGA", - "aranzuze35", - "_deiberchacon", - "anxobotana", - "JhonAguiar" + "ardillan", + "gcejas", + "teoli", + "WillyMaikowski" ] }, - "Web/HTTP/Headers/Access-Control-Expose-Headers": { - "modified": "2020-10-15T22:06:29.086Z", + "Web/HTML/Element/legend": { + "modified": "2019-06-05T17:18:09.680Z", "contributors": [ - "jorgeCaster", - "kraneok" + "Ivnosing", + "Sebastianz", + "saski", + "teoli", + "Klosma", + "Jorolo" ] }, - "Web/HTTP/Headers/Age": { - "modified": "2020-10-15T22:10:53.345Z", + "Web/HTML/Element/li": { + "modified": "2019-03-18T21:11:04.870Z", "contributors": [ - "0xCGonzalo" + "duduindo", + "chepegeek", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Allow": { - "modified": "2019-03-18T21:23:10.971Z", + "Web/HTML/Element/link": { + "modified": "2019-03-23T23:41:37.686Z", "contributors": [ - "ogaston" + "pawer13", + "israel-munoz", + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Authorization": { - "modified": "2019-03-18T21:34:28.554Z", + "Web/HTML/Element/main": { + "modified": "2019-03-23T23:25:22.761Z", "contributors": [ - "kraneok", - "Watermelonnable" + "evaferreira", + "jesusbotella", + "teoli", + "jsalinas" ] }, - "Web/HTTP/Headers/Cache-Control": { - "modified": "2020-10-28T14:39:35.644Z", + "Web/HTML/Element/map": { + "modified": "2019-03-23T23:41:43.985Z", "contributors": [ - "noksenberg", - "IsraelFloresDGA", - "ervin_santos" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Content-Disposition": { - "modified": "2020-10-15T21:58:39.489Z", + "Web/HTML/Element/mark": { + "modified": "2020-10-15T21:04:57.447Z", "contributors": [ - "kbono", - "lagwy" + "danielblazquez", + "feliperomero3", + "wbamberg", + "teoli", + "Flerex", + "hugohabel", + "inma_610", + "translatoon" ] }, - "Web/HTTP/Headers/Content-Encoding": { - "modified": "2020-10-15T21:53:14.848Z", + "Web/HTML/Element/marquee": { + "modified": "2019-03-18T20:57:46.110Z", "contributors": [ - "IT-Rafa", - "sevillacode" + "gabriell24", + "erix2016", + "alexander171294" ] }, - "Web/HTTP/Headers/Content-Length": { - "modified": "2020-10-15T22:07:26.889Z", + "Web/HTML/Element/menu": { + "modified": "2019-03-18T21:11:04.661Z", "contributors": [ - "aliciava00", - "efrencruz" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Content-Location": { - "modified": "2020-10-15T22:29:48.071Z", + "Web/HTML/Element/meta": { + "modified": "2019-03-23T23:42:35.250Z", "contributors": [ - "hecmonter" + "Sebastianz", + "feardarkness", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Content-Security-Policy": { - "modified": "2020-10-15T22:18:45.176Z", + "Web/HTML/Element/multicol": { + "modified": "2019-03-23T22:36:14.458Z", "contributors": [ - "rayrojas", - "mauril26", - "27z" + "jcr4" ] }, - "Web/HTTP/Headers/Content-Type": { - "modified": "2020-10-15T21:58:35.257Z", + "Web/HTML/Element/nav": { + "modified": "2020-12-08T21:27:47.077Z", "contributors": [ - "ivanfretes", - "omertafox", - "ValeriaRamos" + "benito-san", + "DagoGuevara", + "driconmax", + "teoli", + "martinbarce", + "makoescalzo" ] }, - "Web/HTTP/Headers/Cookie": { - "modified": "2020-10-15T21:55:41.792Z", + "Web/HTML/Element/nobr": { + "modified": "2019-03-18T21:35:49.711Z", "contributors": [ - "SSantiago90" + "rhssr", + "Mexicotec" ] }, - "Web/HTTP/Headers/Cross-Origin-Resource-Policy": { - "modified": "2020-10-15T22:29:00.325Z", + "Web/HTML/Element/noframes": { + "modified": "2019-03-23T23:42:28.640Z", "contributors": [ - "IsraelFloresDGA" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/ETag": { - "modified": "2020-10-15T21:57:09.273Z", + "Web/HTML/Element/noscript": { + "modified": "2019-03-23T23:42:26.569Z", "contributors": [ - "zechworld", - "evalenzuela", - "stwilberth", - "edgarrod71" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Expires": { - "modified": "2020-10-15T21:56:44.738Z", + "Web/HTML/Element/object": { + "modified": "2020-10-15T22:22:23.263Z", "contributors": [ - "ernesto.palafox" + "siregalado", + "iarah" ] }, - "Web/HTTP/Headers/Host": { - "modified": "2020-10-15T22:24:56.306Z", + "Web/HTML/Element/ol": { + "modified": "2020-02-03T21:28:29.355Z", "contributors": [ - "escatel.bernal10", - "Alvarito-056" + "kevinar53", + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Keep-Alive": { - "modified": "2020-10-15T22:02:52.123Z", + "Web/HTML/Element/option": { + "modified": "2019-03-23T22:38:56.017Z", "contributors": [ - "fernomenoide" + "pekechis" ] }, - "Web/HTTP/Headers/Link": { - "modified": "2020-10-15T22:28:59.441Z", + "Web/HTML/Element/p": { + "modified": "2019-03-23T23:41:31.103Z", "contributors": [ - "threevanny" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Origin": { - "modified": "2020-10-15T22:00:47.248Z", + "Web/HTML/Element/param": { + "modified": "2019-03-23T23:42:31.653Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Element/picture": { + "modified": "2019-07-20T20:15:37.196Z", "contributors": [ + "DagoGuevara", + "JulianSoto", + "alexlndn", + "danieltacho", "IsraelFloresDGA", - "Abelhg" + "diegos2" ] }, - "Web/HTTP/Headers/Pragma": { - "modified": "2020-10-15T22:09:54.700Z", + "Web/HTML/Element/pre": { + "modified": "2019-03-18T21:11:04.209Z", "contributors": [ - "ervin_santos" + "duduindo", + "teoli", + "_0x" ] }, - "Web/HTTP/Headers/Referer": { - "modified": "2020-10-15T21:53:10.093Z", + "Web/HTML/Element/progress": { + "modified": "2020-10-15T21:22:45.390Z", "contributors": [ - "LastCyborg", - "fitojb", - "UltimoOrejonDelTarro" + "SphinxKnight", + "androsfenollosa", + "wbamberg", + "teoli", + "rubencidlara" ] }, - "Web/HTTP/Headers/Referrer-Policy": { - "modified": "2020-10-15T22:01:34.403Z", + "Web/HTML/Element/q": { + "modified": "2020-10-15T22:34:03.995Z", "contributors": [ - "fitojb" + "Nachec" ] }, - "Web/HTTP/Headers/Server": { - "modified": "2020-10-15T21:55:40.335Z", + "Web/HTML/Element/s": { + "modified": "2019-03-18T21:11:03.985Z", "contributors": [ - "sevillacode", - "TheSgtPepper23", - "irsequisious" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Set-Cookie": { - "modified": "2020-10-26T12:24:29.884Z", + "Web/HTML/Element/samp": { + "modified": "2019-10-11T12:30:51.315Z", "contributors": [ - "ignacio-ifm", - "IsraelFloresDGA", - "rayrojas", - "ramonserrano", - "garolard" + "danielblazquez", + "duduindo", + "Johsua", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/Strict-Transport-Security": { - "modified": "2020-10-15T21:54:14.546Z", + "Web/SVG/Element/script": { + "modified": "2019-03-23T22:38:36.106Z", "contributors": [ - "AmadPS", - "pipe01", - "heilop", - "JulianSoto", - "pablolopezmera", - "Oxicode" + "ignasivs", + "raecillacastellana", + "ivandevp", + "alexander171294" ] }, - "Web/HTTP/Headers/Transfer-Encoding": { - "modified": "2020-10-15T22:24:54.193Z", + "Web/HTML/Element/section": { + "modified": "2020-07-15T11:06:51.948Z", "contributors": [ - "0xCGonzalo" + "timetrvlr", + "wbamberg", + "diegocanal", + "eljonims", + "teoli", + "ccarruitero", + "artopal" ] }, - "Web/HTTP/Headers/User-Agent": { - "modified": "2020-10-15T22:00:44.883Z", + "Web/HTML/Element/select": { + "modified": "2019-03-23T22:38:39.246Z", "contributors": [ - "LeoOliva", - "Imvi10" + "Fx-Enlcxx", + "AleV" ] }, - "Web/HTTP/Headers/Vary": { - "modified": "2020-10-15T21:56:44.020Z", + "Web/HTML/Element/shadow": { + "modified": "2019-03-23T22:06:38.273Z", "contributors": [ - "JhonAguiar" + "H4isan" ] }, - "Web/HTTP/Headers/WWW-Authenticate": { - "modified": "2020-10-15T22:19:30.337Z", + "Web/HTML/Element/slot": { + "modified": "2020-10-15T22:05:53.326Z", "contributors": [ - "malonso", - "Gytree" + "aguilerajl", + "Carlos-T", + "rhssr" ] }, - "Web/HTTP/Headers/X-Content-Type-Options": { - "modified": "2020-10-15T21:59:06.832Z", + "Web/HTML/Element/small": { + "modified": "2019-04-04T15:23:46.402Z", "contributors": [ - "clbustos", - "tonialfaro" + "danieltacho", + "drakzig", + "SphinxKnight", + "carloque", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Headers/X-Forwarded-For": { - "modified": "2020-10-15T22:16:47.635Z", + "Web/HTML/Element/source": { + "modified": "2020-10-15T21:13:44.488Z", "contributors": [ - "choadev", - "martinfrad", - "camsa" + "guillermomartinmarco", + "teoli", + "inma_610" ] }, - "Web/HTTP/Headers/X-Frame-Options": { - "modified": "2020-10-15T21:57:01.709Z", + "Web/HTML/Element/span": { + "modified": "2019-03-24T00:17:34.814Z", "contributors": [ - "ervin_santos", - "Luiggy", - "setlord" + "Sebastianz", + "jigs12", + "teoli", + "torresnicolas", + "Jorolo" ] }, - "Web/HTTP/Headers/X-XSS-Protection": { - "modified": "2020-10-15T21:59:06.897Z", + "Web/HTML/Element/strike": { + "modified": "2019-03-18T21:11:03.623Z", "contributors": [ - "JulioMoreyra", - "francinysalles", - "tonialfaro" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Messages": { - "modified": "2019-11-12T11:40:26.816Z", + "Web/HTML/Element/strong": { + "modified": "2019-03-18T21:11:02.931Z", "contributors": [ - "emiedes", - "jose89gp", - "anibalortegap", - "Sergio_Gonzalez_Collado" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Methods": { - "modified": "2020-10-15T21:51:09.574Z", + "Web/HTML/Element/style": { + "modified": "2019-03-23T23:42:38.349Z", "contributors": [ - "andrpueb", - "eddydeath", - "JRaiden", - "JulianSoto", - "RamsesMartinez" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Methods/CONNECT": { - "modified": "2020-10-15T22:09:12.273Z", + "Web/HTML/Element/sub": { + "modified": "2020-10-15T21:18:49.449Z", "contributors": [ - "jadiosc" + "IsaacAaron", + "carloque", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Methods/GET": { - "modified": "2020-12-13T00:32:42.441Z", + "Web/HTML/Element/sup": { + "modified": "2020-10-15T21:18:45.044Z", "contributors": [ - "victorgabardini", - "SphinxKnight", - "sercorc.12", - "oespino", - "RetelboP" + "IsaacAaron", + "carloque", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Methods/PATCH": { - "modified": "2020-10-04T20:15:30.024Z", + "Web/HTML/Element/table": { + "modified": "2019-09-03T15:32:58.837Z", "contributors": [ - "hamishwillee", - "cnietoc", - "SackmannDV", - "noecende" + "teoli", + "jesanchez", + "cortega", + "tany" ] }, - "Web/HTTP/Methods/POST": { - "modified": "2020-11-06T16:08:25.707Z", + "Web/HTML/Element/td": { + "modified": "2019-03-23T22:38:37.555Z", "contributors": [ - "Max_Gremory", - "JGarnica", - "qmarquez", - "DavidGalvis", - "sammye70", - "Sheppy", - "mtnalonso", - "Juenesis" + "Kerinoxio", + "Zarkiel", + "raecillacastellana", + "tolano97" ] }, - "Web/HTTP/Methods/PUT": { - "modified": "2020-10-15T21:58:39.134Z", + "Web/HTML/Element/template": { + "modified": "2020-10-15T21:52:05.945Z", "contributors": [ - "mtnalonso" + "aguilerajl", + "ArtistNeverStop", + "Diego674", + "AlePerez92" ] }, - "Web/HTTP/Methods/TRACE": { - "modified": "2020-10-15T22:12:36.763Z", + "Web/HTML/Element/textarea": { + "modified": "2020-10-15T21:43:13.029Z", "contributors": [ - "pablobiedma" + "camsa", + "fscholz", + "pekechis" ] }, - "Web/HTTP/Overview": { - "modified": "2020-08-07T11:46:49.430Z", + "Web/HTML/Element/th": { + "modified": "2020-04-22T05:00:45.306Z", "contributors": [ - "marcusdesantis", - "Enesimus", - "Rafasu", - "ChrisMHM", - "LuisGalicia", - "jose89gp", - "DaniNz", - "cabaag", - "Sergio_Gonzalez_Collado" + "blanchart", + "AgustinDPino", + "IXTRUnai", + "sapales" ] }, - "Web/HTTP/Peticiones_condicionales": { - "modified": "2019-03-18T21:19:37.220Z", + "Web/HTML/Element/time": { + "modified": "2020-10-15T21:18:39.499Z", "contributors": [ - "christianmg99" + "pardo-bsso", + "blanchart", + "IsraelFloresDGA", + "dsolism", + "mauriciabad", + "teoli", + "sebasmagri", + "makoescalzo" ] }, - "Web/HTTP/Sesión": { - "modified": "2019-03-23T22:05:36.352Z", + "orphaned/Web/HTML/Elemento/Tipos_de_elementos": { + "modified": "2019-03-23T23:46:22.404Z", "contributors": [ - "Sergio_Gonzalez_Collado" + "Sebastianz", + "jigs12", + "teoli", + "ethertank", + "Klosma", + "Jorolo" ] }, - "Web/HTTP/Status": { - "modified": "2020-10-01T02:41:07.109Z", + "Web/HTML/Element/title": { + "modified": "2019-10-10T16:32:45.843Z", "contributors": [ - "SphinxKnight", - "gonzalestino924", - "manuelguido", - "juliocesardeveloper", - "ismanapa", - "santiago.lator", - "leticia-acib", - "josecarbajalbolbot", - "StarViruZ", - "amircp", - "SebastianBar", - "serivt", - "Jens.B" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Status/100": { - "modified": "2020-10-15T21:56:53.445Z", + "Web/HTML/Element/tr": { + "modified": "2019-03-23T22:38:35.421Z", "contributors": [ - "serivt" + "raecillacastellana", + "FelipeGL" ] }, - "Web/HTTP/Status/101": { - "modified": "2019-03-18T21:22:02.098Z", + "Web/HTML/Element/track": { + "modified": "2020-10-15T22:33:21.321Z", + "contributors": [ + "Pablo-No" + ] + }, + "Web/HTML/Element/tt": { + "modified": "2019-03-18T21:11:03.301Z", "contributors": [ - "jlamasfripp" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Status/200": { - "modified": "2020-10-15T22:05:24.611Z", + "Web/HTML/Element/u": { + "modified": "2019-03-18T21:11:03.114Z", "contributors": [ - "SphinxKnight", - "alexibarra55", - "jlamasfripp", - "gbarriosf", - "snaven10", - "Adriel_from_Nav" + "duduindo", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Status/201": { - "modified": "2020-10-15T22:08:02.661Z", + "Web/HTML/Element/ul": { + "modified": "2019-03-23T23:42:39.154Z", "contributors": [ - "WriestTavo" + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Status/202": { - "modified": "2019-04-19T16:13:12.876Z", + "Web/HTML/Element/var": { + "modified": "2019-03-23T23:41:16.113Z", "contributors": [ - "Hibot12" + "BubuAnabelas", + "teoli", + "Jorolo" ] }, - "Web/HTTP/Status/203": { - "modified": "2020-06-14T20:53:26.311Z", + "Web/HTML/Element/video": { + "modified": "2019-03-24T00:06:49.642Z", "contributors": [ - "rayrojas" + "wbamberg", + "untilbit", + "AlePerez92", + "teoli", + "inma_610", + "Izel" ] }, - "Web/HTTP/Status/206": { - "modified": "2020-10-15T22:02:08.111Z", + "Web/HTML/Element/wbr": { + "modified": "2019-04-26T19:10:14.131Z", "contributors": [ - "qpdian" + "reymundus2", + "jcr4" ] }, - "Web/HTTP/Status/301": { - "modified": "2020-10-15T22:24:06.781Z", + "Web/HTML/Element/xmp": { + "modified": "2019-03-23T22:38:49.554Z", "contributors": [ - "nullxx" + "jcr4" ] }, - "Web/HTTP/Status/302": { - "modified": "2020-10-15T21:59:00.277Z", + "Web/HTML/Inline_elements": { + "modified": "2019-03-23T22:46:15.359Z", "contributors": [ - "B1tF8er", - "kraptor", - "astrapotro" + "juanbrujo", + "raecillacastellana", + "vltamara" ] }, - "Web/HTTP/Status/304": { - "modified": "2020-10-15T22:12:46.751Z", + "Web/HTML/CORS_enabled_image": { + "modified": "2019-03-23T22:46:06.691Z", "contributors": [ - "jairoFg12" + "MrCesar107", + "antoiba86", + "vltamara" ] }, - "Web/HTTP/Status/400": { - "modified": "2019-08-03T10:06:53.857Z", + "Web/HTML/Index": { + "modified": "2019-01-16T22:12:02.767Z", "contributors": [ - "molavec", - "Hibot12" + "raecillacastellana", + "pekechis" ] }, - "Web/HTTP/Status/401": { - "modified": "2020-10-15T21:55:15.004Z", + "Web/HTML/Microdata": { + "modified": "2019-03-23T22:12:50.480Z", "contributors": [ - "Clipi", - "JuanMacias", - "mjaque", - "andreximo" + "fitojb" ] }, - "Web/HTTP/Status/403": { - "modified": "2020-10-15T21:58:50.466Z", + "Web/HTML/microformats": { + "modified": "2019-03-23T22:46:15.016Z", "contributors": [ - "JuanMacias" + "vltamara" ] }, - "Web/HTTP/Status/404": { - "modified": "2020-10-15T21:56:47.503Z", + "Glossary/speculative_parsing": { + "modified": "2019-03-23T23:15:52.979Z", "contributors": [ - "BrodaNoel" + "jsapiains", + "joeljose", + "vltamara", + "manufosela", + "Montherdez" ] }, - "Web/HTTP/Status/408": { - "modified": "2019-03-18T21:30:00.279Z", + "Web/HTML/Using_the_application_cache": { + "modified": "2019-03-19T07:43:37.221Z", "contributors": [ - "juusechec" + "pixelmin", + "dmoralesm", + "teoli", + "vltamara", + "CodeMaxter", + "LuisArt", + "FCuchietti", + "MPoli", + "hugohabel", + "RickieesES", + "inma_610", + "Izel" ] }, - "Web/HTTP/Status/418": { - "modified": "2020-10-15T22:21:28.070Z", + "Web/HTML/Reference": { + "modified": "2019-09-09T07:16:42.154Z", "contributors": [ - "joseluisq", - "paolo667" + "SphinxKnight", + "wbamberg", + "raecillacastellana", + "cosmesantos", + "vltamara", + "MegaChrono" ] }, - "Web/HTTP/Status/500": { - "modified": "2020-12-07T12:32:25.820Z", + "Web/HTML/Link_types": { + "modified": "2019-03-23T22:46:17.969Z", "contributors": [ - "dayanhernandez353", - "karenonaly", - "duduindo", - "marcelokruk", - "Viejofon" + "cmmp0112", + "_delta_", + "moisesalmonte", + "alvaromontoro", + "ivansx", + "vltamara" ] }, - "Web/HTTP/Status/502": { - "modified": "2020-10-15T21:56:55.208Z", + "Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video": { + "modified": "2019-03-23T22:46:14.015Z", "contributors": [ - "josecarbajalbolbot", - "AlePerez92", - "josmelnoel" + "AzazelN28", + "vltamara" ] }, - "Web/HTTP/Status/503": { - "modified": "2020-10-15T22:10:17.555Z", + "Web/HTTP/CORS": { + "modified": "2020-08-10T16:23:20.546Z", "contributors": [ - "Parodper", - "ajuni880", - "diego-bustamante" + "wbamberg", + "afelopez", + "jbarcas", + "cefaloide", + "alcastic", + "franklevel", + "JuanMacias", + "psyban", + "manatico4", + "signados", + "Ricardolau", + "afbayonac", + "aurigadl", + "dcruz", + "Manhru", + "maedca" ] }, - "Web/HTTP/Status/504": { - "modified": "2020-10-15T22:08:08.336Z", + "Web/HTTP/Basics_of_HTTP/Data_URIs": { + "modified": "2019-03-23T22:24:54.977Z", "contributors": [ - "ojeanicolas" + "Sergio_Gonzalez_Collado", + "AzazelN28", + "uclides" ] }, - "Web/HTTP/Status/505": { - "modified": "2020-04-03T20:59:26.896Z", + "Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": { + "modified": "2019-03-23T22:24:51.387Z", "contributors": [ - "lp4749791" + "DaniNz", + "Sergio_Gonzalez_Collado", + "ChrisMHM", + "uclides" ] }, - "Web/HTTP/Status/8080": { - "modified": "2020-03-18T21:09:54.600Z", + "Web/HTTP/Connection_management_in_HTTP_1.x": { + "modified": "2019-03-23T22:03:37.565Z", "contributors": [ - "guzmanoscaralexis" + "jose89gp", + "Sergio_Gonzalez_Collado" ] }, - "Web/HTTP/mecanismo_actualizacion_protocolo": { + "Web/HTTP/Protocol_upgrade_mechanism": { "modified": "2019-03-18T21:45:03.291Z", "contributors": [ "patoezequiel", "Sergio_Gonzalez_Collado" ] }, - "Web/HTTP/recursos_y_especificaciones": { + "Web/HTTP/Conditional_requests": { + "modified": "2019-03-18T21:19:37.220Z", + "contributors": [ + "christianmg99" + ] + }, + "Web/HTTP/Resources_and_specifications": { "modified": "2019-03-23T22:03:46.656Z", "contributors": [ "_deiberchacon" ] }, - "Web/JavaScript": { - "modified": "2020-11-23T12:49:37.646Z", + "Web/HTTP/Session": { + "modified": "2019-03-23T22:05:36.352Z", "contributors": [ - "SphinxKnight", - "kramosr68", - "ivanfernandez5209", - "Tonatew", - "alejogomes944", - "Nachec", - "victitor800", - "Enesimus", - "franchesco182001", - "pauli.rodriguez.c", - "jhonarielgj", - "Fegaan", - "OOJuanferOO", - "nicolas25ramirez", - "andreamv2807", - "tomasvillarragaperez", - "Yel-Martinez-Consultor-Seo", - "rodririobo", - "isabelsvelasquezv", - "fedegianni04", - "jaomix1", - "TheJarX", - "clarii", - "NataliaCba", - "NicoleCleto1998", - "JavScars", - "untilbit", - "AlePerez92", - "aluxito", - "luisNavasArg", - "jsx", - "carlossuarez", - "Pablo_Ivan", - "teoli", - "LeoHirsch", - "smarchioni", - "ricardo777", - "CarlosQuijano", - "Scipion", - "alquimista", - "Nukeador", - "ethertank", - "Jorge.villalobos", - "arleytriana", - "arpunk", - "inma_610", - "StripTM", - "Mgjbot", - "Superruzafa", - "Verruckt", - "Jorolo", - "Vyk", - "Takenbot", - "RJacinto" + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/Status/413": { + "modified": "2020-03-18T21:09:54.600Z", + "contributors": [ + "guzmanoscaralexis" ] }, - "Web/JavaScript/Acerca_de_JavaScript": { + "Web/JavaScript/About_JavaScript": { "modified": "2020-09-12T13:33:01.910Z", "contributors": [ "Nachec", @@ -18087,44 +18366,7 @@ "StripTM" ] }, - "Web/JavaScript/Closures": { - "modified": "2020-04-08T19:26:44.700Z", - "contributors": [ - "camsa", - "wbamberg", - "AzazelN28", - "JonasBrandel", - "fscholz", - "guty", - "Siro_Diaz", - "luigli", - "teoli", - "FNK", - "juanc.jara", - "Josias", - "neosergio", - "hjoaco" - ] - }, - "Web/JavaScript/Data_structures": { - "modified": "2020-08-30T02:21:59.996Z", - "contributors": [ - "Nachec", - "edwinmunguia", - "arzr", - "rayrojas", - "melgard", - "mmngreco", - "AngryDev", - "Gorzas", - "alejandrochung", - "IXTRUnai", - "damnyorch", - "devconcept", - "sancospi" - ] - }, - "Web/JavaScript/Descripción_de_las_tecnologías_JavaScript": { + "Web/JavaScript/JavaScript_technologies_overview": { "modified": "2020-09-02T05:54:39.004Z", "contributors": [ "Nachec", @@ -18135,27 +18377,15 @@ "geinerjv" ] }, - "Web/JavaScript/Equality_comparisons_and_sameness": { - "modified": "2020-03-24T18:47:23.011Z", - "contributors": [ - "camsa", - "abestrad1", - "EduardoCasanova", - "pekechis" - ] - }, - "Web/JavaScript/EventLoop": { - "modified": "2020-03-12T19:43:05.672Z", + "Web/JavaScript/Enumerability_and_ownership_of_properties": { + "modified": "2020-08-30T03:56:15.697Z", "contributors": [ - "AzazelN28", - "omonteon", - "guillermojmc", - "eljonims", - "MrCoffey", - "Anonymous" + "Nachec", + "teoli", + "LeoHirsch" ] }, - "Web/JavaScript/Gestion_de_Memoria": { + "Web/JavaScript/Memory_Management": { "modified": "2020-03-12T19:40:38.018Z", "contributors": [ "Jairgc", @@ -18166,28 +18396,7 @@ "cesaralvarado9" ] }, - "Web/JavaScript/Guide": { - "modified": "2020-09-12T21:03:22.983Z", - "contributors": [ - "Nachec", - "AmazonianCodeGuy", - "tezece", - "MarcyG1", - "nhuamani", - "manuhdez", - "e.g.m.g.", - "Pablo_Ivan", - "nelson6e65", - "walterpaoli", - "joanvasa", - "fscholz", - "Benjalorc", - "teoli", - "mitogh", - "xavo7" - ] - }, - "Web/JavaScript/Guide/Bucles_e_iteración": { + "Web/JavaScript/Guide/Loops_and_iteration": { "modified": "2020-10-21T16:48:14.421Z", "contributors": [ "sofi8825", @@ -18205,7 +18414,21 @@ "joanvasa" ] }, - "Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores": { + "Web/JavaScript/Guide/Indexed_collections": { + "modified": "2020-08-20T18:50:37.500Z", + "contributors": [ + "Nachec", + "EstebanRK", + "ccasadom", + "jreyesgs", + "recortes", + "Cxistian", + "douwiD", + "frantcisko", + "joanvasa" + ] + }, + "Web/JavaScript/Guide/Control_flow_and_error_handling": { "modified": "2020-09-14T09:17:05.043Z", "contributors": [ "Nachec", @@ -18232,56 +18455,7 @@ "isnardi" ] }, - "Web/JavaScript/Guide/Details_of_the_Object_Model": { - "modified": "2020-08-17T15:38:30.288Z", - "contributors": [ - "Nachec", - "MariaBarros", - "AmazonianCodeGuy", - "wbamberg", - "fherce", - "SphinxKnight", - "ObsoleteHuman", - "ValentinTapiaTorti", - "brodriguezs", - "DiegoA1114", - "montogeek", - "fscholz", - "teoli", - "pheras" - ] - }, - "Web/JavaScript/Guide/Expressions_and_Operators": { - "modified": "2020-09-13T21:58:37.783Z", - "contributors": [ - "Nachec", - "gcjuan", - "Orlando-Flores-Huanca", - "wajari", - "anglozm", - "recortes", - "Ernesto385291", - "Jkierem", - "gsalinase", - "abestrad1", - "milouri23", - "Odol", - "victorsanchezm", - "ElChiniNet", - "UshioSan", - "siluvana", - "juanbrujo", - "01luisrene", - "gustavgil", - "Jaston", - "Alexis88", - "smarquez1", - "ricardochavarri", - "fscholz", - "spachecojimenez" - ] - }, - "Web/JavaScript/Guide/Funciones": { + "Web/JavaScript/Guide/Functions": { "modified": "2020-10-02T18:21:48.240Z", "contributors": [ "alejandro.fca", @@ -18307,38 +18481,7 @@ "epcode" ] }, - "Web/JavaScript/Guide/Grammar_and_types": { - "modified": "2020-09-12T23:09:43.446Z", - "contributors": [ - "Nachec", - "luis-al-merino", - "AmazonianCodeGuy", - "teknotica", - "feliperomero3", - "nullx5", - "abelosky", - "jlopezfdez", - "enriqueabsurdum", - "Ayman", - "AnthonyGareca", - "chuyinEF", - "estebancito", - "bytx", - "Pablo_Ivan", - "cgsramirez", - "eugenioNovas", - "marioalvazquez", - "joanvasa", - "fscholz", - "Cleon", - "angelnajera", - "vinixio", - "diegogaysaez", - "teoli", - "Amatos" - ] - }, - "Web/JavaScript/Guide/Introducción": { + "Web/JavaScript/Guide/Introduction": { "modified": "2020-09-14T00:29:05.489Z", "contributors": [ "Nachec", @@ -18349,139 +18492,60 @@ "gfvcastro", "RamiroNeher", "fscholz", - "MauroEldritch", - "Cleon", - "orasio", - "angelnajera", - "rianby64" - ] - }, - "Web/JavaScript/Guide/Iterators_and_Generators": { - "modified": "2020-03-12T19:42:41.976Z", - "contributors": [ - "camsa", - "DJphilomath", - "mjaque", - "lassmann", - "eycopia", - "nefter", - "dieguezz", - "Breaking_Pitt" - ] - }, - "Web/JavaScript/Guide/Keyed_collections": { - "modified": "2020-09-02T02:09:58.803Z", - "contributors": [ - "Nachec", - "MariaBarros", - "jesus92gz", - "eljonims" - ] - }, - "Web/JavaScript/Guide/Meta_programming": { - "modified": "2020-08-18T02:34:39.284Z", - "contributors": [ - "Nachec", - "asamajamasa", - "jaomix1", - "jzatarain" - ] - }, - "Web/JavaScript/Guide/Módulos": { - "modified": "2020-10-15T22:27:31.770Z", - "contributors": [ - "Nachec", - "luis.m1tech", - "antonioHigueron", - "jorgeherrera9103", - "FDSoil" - ] - }, - "Web/JavaScript/Guide/Numbers_and_dates": { - "modified": "2020-09-14T23:27:03.154Z", - "contributors": [ - "Nachec", - "ds-developer1", - "la-syl", - "IsraelFloresDGA", - "ingcarlosperez", - "georgenevets", - "yakashiro" - ] - }, - "Web/JavaScript/Guide/Regular_Expressions": { - "modified": "2020-10-15T21:29:34.015Z", - "contributors": [ - "Nachec", - "wilmer2000", - "Ricardo_F.", - "lebubic", - "franklevel", - "recortes", - "LuisSevillano", - "pangeasi", - "Jabi", - "bartolocarrasco", - "fortil", - "BoyFerruco", - "Lehmer", - "wffranco", - "eljonims", - "jpmontoya182", - "guillermomartinmarco", - "fscholz", - "eespitia.rea", - "jcvergar" + "MauroEldritch", + "Cleon", + "orasio", + "angelnajera", + "rianby64" + ] + }, + "Web/JavaScript/Guide/Modules": { + "modified": "2020-10-15T22:27:31.770Z", + "contributors": [ + "Nachec", + "luis.m1tech", + "antonioHigueron", + "jorgeherrera9103", + "FDSoil" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Aserciones": { + "Web/JavaScript/Guide/Regular_Expressions/Assertions": { "modified": "2020-09-16T20:45:25.257Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres": { + "Web/JavaScript/Guide/Regular_Expressions/Character_Classes": { "modified": "2020-09-17T03:20:44.595Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Cuantificadores": { + "Web/JavaScript/Guide/Regular_Expressions/Quantifiers": { "modified": "2020-09-15T21:48:26.513Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode": { + "Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes": { "modified": "2020-09-17T10:02:16.387Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos": { + "Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges": { "modified": "2020-09-17T10:14:04.470Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia": { + "Web/JavaScript/Guide/Regular_Expressions/Cheatsheet": { "modified": "2020-08-16T23:08:15.173Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Guide/Text_formatting": { - "modified": "2020-09-15T10:00:50.941Z", - "contributors": [ - "Nachec", - "surielmx", - "IsraelFloresDGA", - "diegarta", - "Enesimus", - "jalmeida" - ] - }, - "Web/JavaScript/Guide/Trabajando_con_objectos": { + "Web/JavaScript/Guide/Working_with_Objects": { "modified": "2020-08-18T17:28:58.690Z", "contributors": [ "Nachec", @@ -18515,7 +18579,7 @@ "bluesky777" ] }, - "Web/JavaScript/Guide/Usar_promesas": { + "Web/JavaScript/Guide/Using_promises": { "modified": "2020-05-16T20:15:48.240Z", "contributors": [ "angelmartinez", @@ -18526,21 +18590,7 @@ "hamfree" ] }, - "Web/JavaScript/Guide/colecciones_indexadas": { - "modified": "2020-08-20T18:50:37.500Z", - "contributors": [ - "Nachec", - "EstebanRK", - "ccasadom", - "jreyesgs", - "recortes", - "Cxistian", - "douwiD", - "frantcisko", - "joanvasa" - ] - }, - "Web/JavaScript/Herencia_y_la_cadena_de_protipos": { + "Web/JavaScript/Inheritance_and_the_prototype_chain": { "modified": "2020-03-12T19:41:32.707Z", "contributors": [ "LeChonch", @@ -18562,28 +18612,7 @@ "blacknack" ] }, - "Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos": { - "modified": "2020-03-12T19:36:14.050Z", - "contributors": [ - "ivanagui2", - "libre8bit", - "alejandrochung", - "victorsanchezm", - "gchifflet", - "hmorv", - "Lorenzoygata", - "xxxtonixxx", - "joan.leon", - "fscholz", - "DeiberChacon", - "chebit", - "teoli", - "arpunk", - "inma_610", - "StripTM" - ] - }, - "Web/JavaScript/Introduction_to_using_XPath_in_JavaScript": { + "Web/XPath/Introduction_to_using_XPath_in_JavaScript": { "modified": "2019-05-08T19:05:57.937Z", "contributors": [ "AlbertoPrado70", @@ -18593,250 +18622,44 @@ "joakku" ] }, - "Web/JavaScript/Language_Resources": { - "modified": "2020-03-12T19:47:17.832Z", - "contributors": [ - "lajaso", - "jpmontoya182" - ] - }, - "Web/JavaScript/Reference/Errors": { - "modified": "2020-03-12T19:45:01.208Z", - "contributors": [ - "JavScars", - "Sheppy" - ] - }, - "Web/JavaScript/Reference/Errors/Bad_octal": { - "modified": "2020-03-12T19:45:41.442Z", - "contributors": [ - "HaroldV" - ] - }, - "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { - "modified": "2020-03-12T19:45:51.961Z", + "Web/JavaScript/Reference/Errors/Illegal_character": { + "modified": "2020-03-12T19:47:34.313Z", "contributors": [ - "BubuAnabelas", - "Andres62", - "ingjosegarrido", - "JaimeNorato" + "kaycdc" ] }, - "Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion": { + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { "modified": "2020-03-12T19:46:13.102Z", "contributors": [ "jonatanroot", "Lunacye" ] }, - "Web/JavaScript/Reference/Errors/Indicador_regexp_no-val": { + "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { "modified": "2020-09-01T13:12:41.234Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Reference/Errors/Invalid_array_length": { - "modified": "2020-03-12T19:46:48.651Z", - "contributors": [ - "Tlauipil" - ] - }, - "Web/JavaScript/Reference/Errors/Invalid_date": { - "modified": "2020-03-12T19:47:15.708Z", - "contributors": [ - "untilbit" - ] - }, - "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { - "modified": "2019-10-12T12:26:22.919Z", - "contributors": [ - "JGmr5" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { - "modified": "2020-03-12T19:46:53.938Z", - "contributors": [ - "DGun17" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { - "modified": "2020-03-12T19:47:16.712Z", - "contributors": [ - "TheEpicSimple" - ] - }, - "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { - "modified": "2020-03-12T19:46:54.683Z", - "contributors": [ - "hiuxmaycry", - "ivandevp" - ] - }, - "Web/JavaScript/Reference/Errors/More_arguments_needed": { - "modified": "2020-03-12T19:49:21.407Z", - "contributors": [ - "dragonmenorka" - ] - }, - "Web/JavaScript/Reference/Errors/No_variable_name": { - "modified": "2020-03-12T19:48:33.901Z", - "contributors": [ - "CatalinaCampos" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_codepoint": { - "modified": "2020-03-12T19:46:46.603Z", - "contributors": [ - "DGun17" - ] - }, - "Web/JavaScript/Reference/Errors/Not_a_function": { - "modified": "2020-03-12T19:45:06.322Z", - "contributors": [ - "PatoDeTuring", - "untilbit", - "josegarciaclm95" - ] - }, - "Web/JavaScript/Reference/Errors/Not_defined": { - "modified": "2020-10-08T09:22:13.757Z", - "contributors": [ - "ludoescribano.2016", - "FacuBustamaante", - "ozavala", - "ccorcoles", - "Heranibus", - "jsgaonac", - "Luis_Armando" - ] - }, - "Web/JavaScript/Reference/Errors/Precision_range": { - "modified": "2020-08-10T12:14:52.122Z", - "contributors": [ - "Sgewux" - ] - }, - "Web/JavaScript/Reference/Errors/Property_access_denied": { - "modified": "2020-03-12T19:46:35.795Z", - "contributors": [ - "untilbit", - "Tlauipil" - ] - }, - "Web/JavaScript/Reference/Errors/Stmt_after_return": { - "modified": "2020-03-12T19:46:14.065Z", - "contributors": [ - "WCHARRIERE", - "NanoSpicer", - "marco_Lozano" - ] - }, - "Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos": { + "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { "modified": "2020-08-31T05:09:49.990Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Reference/Errors/Too_much_recursion": { - "modified": "2020-03-12T19:45:04.878Z", - "contributors": [ - "josegarciaclm95" - ] - }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-03-12T19:47:46.684Z", - "contributors": [ - "antixsuperstar" - ] - }, - "Web/JavaScript/Reference/Errors/Unexpected_token": { - "modified": "2020-03-12T19:46:40.968Z", - "contributors": [ - "dariomaim" - ] - }, - "Web/JavaScript/Reference/Errors/Unexpected_type": { - "modified": "2020-03-12T19:45:53.118Z", - "contributors": [ - "BubuAnabelas", - "JaimeNorato" - ] - }, - "Web/JavaScript/Reference/Errors/caracter_ilegal": { - "modified": "2020-03-12T19:47:34.313Z", - "contributors": [ - "kaycdc" - ] - }, - "Web/JavaScript/Reference/Errors/in_operator_no_object": { - "modified": "2020-03-12T19:47:18.421Z", - "contributors": [ - "presercomp" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { - "modified": "2020-10-15T21:58:11.434Z", - "contributors": [ - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor": { + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor": { "modified": "2020-10-15T21:58:10.848Z", "contributors": [ - "tutugordillo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Proxy/handler/set": { - "modified": "2020-10-15T21:58:32.473Z", - "contributors": [ - "tutugordillo" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:47:01.907Z", - "contributors": [ - "gfernandez", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": { - "modified": "2019-01-16T21:30:19.248Z", - "contributors": [ - "gfernandez" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2019-03-18T21:14:43.908Z", - "contributors": [ - "javierlopm", - "trofrigo", - "lecruz01", - "roberbnd", - "jameshkramer" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Reflect/set": { - "modified": "2019-03-23T22:08:25.189Z", - "contributors": [ - "pedro-otero" + "tutugordillo" ] }, - "Web/JavaScript/Referencia": { - "modified": "2020-03-12T19:36:20.902Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set": { + "modified": "2020-10-15T21:58:32.473Z", "contributors": [ - "fscholz", - "teoli", - "zerospalencia", - "Scipion", - "ADP13", - "DSN_XP", - "Talisker", - "Sheppy", - "Nathymig", - "Mgjbot" + "tutugordillo" ] }, - "Web/JavaScript/Referencia/Acerca_de": { + "Web/JavaScript/Reference/About": { "modified": "2020-03-12T19:36:12.769Z", "contributors": [ "fscholz", @@ -18845,7 +18668,7 @@ "Sheppy" ] }, - "Web/JavaScript/Referencia/Características_Desaprobadas": { + "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { "modified": "2020-08-12T05:30:59.632Z", "contributors": [ "Nachec", @@ -18855,13 +18678,40 @@ "DSN XP" ] }, - "Web/JavaScript/Referencia/Características_Desaprobadas/The_legacy_Iterator_protocol": { + "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": { "modified": "2020-03-12T19:42:42.667Z", "contributors": [ "clystian" ] }, - "Web/JavaScript/Referencia/Classes": { + "Web/JavaScript/Reference/Classes/Public_class_fields": { + "modified": "2020-10-15T22:24:11.873Z", + "contributors": [ + "mgg.isco", + "carlos.valicenti", + "juanarbol" + ] + }, + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-12-08T22:06:53.151Z", + "contributors": [ + "gonzalopr.94", + "Mar.vin.26", + "kant", + "fscholz", + "SphinxKnight", + "balboag", + "bryanvargas" + ] + }, + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-03-12T19:43:14.828Z", + "contributors": [ + "miguelusque", + "PauPeinado" + ] + }, + "Web/JavaScript/Reference/Classes": { "modified": "2020-08-20T12:39:55.631Z", "contributors": [ "jorendorff-moz", @@ -18891,40 +18741,13 @@ "GoToLoop" ] }, - "Web/JavaScript/Referencia/Classes/Class_fields": { - "modified": "2020-10-15T22:24:11.873Z", - "contributors": [ - "mgg.isco", - "carlos.valicenti", - "juanarbol" - ] - }, - "Web/JavaScript/Referencia/Classes/Private_class_fields": { + "Web/JavaScript/Reference/Classes/Private_class_fields": { "modified": "2020-10-15T22:33:54.045Z", "contributors": [ "aronvx" ] }, - "Web/JavaScript/Referencia/Classes/constructor": { - "modified": "2020-12-08T22:06:53.151Z", - "contributors": [ - "gonzalopr.94", - "Mar.vin.26", - "kant", - "fscholz", - "SphinxKnight", - "balboag", - "bryanvargas" - ] - }, - "Web/JavaScript/Referencia/Classes/extends": { - "modified": "2020-03-12T19:43:14.828Z", - "contributors": [ - "miguelusque", - "PauPeinado" - ] - }, - "Web/JavaScript/Referencia/Classes/static": { + "Web/JavaScript/Reference/Classes/static": { "modified": "2020-03-12T19:41:02.475Z", "contributors": [ "mizhac", @@ -18934,27 +18757,37 @@ "MauroEldritch" ] }, - "Web/JavaScript/Referencia/Funciones": { - "modified": "2020-03-12T19:37:38.529Z", + "Web/JavaScript/Reference/Functions/arguments/callee": { + "modified": "2020-03-12T19:37:01.881Z", "contributors": [ - "ricardosikic", - "JoseHernan", - "sergioqa123", - "DavidGalvis", - "miguelitolaparra", - "FranciscoCastle", - "SantiagoHdez", - "arai", - "estebancito", - "hugoatenco", - "mishelashala", + "fscholz", "teoli", - "javiertarrio", - "Nathymig", - "Sheppy" + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T21:08:39.471Z", + "contributors": [ + "Nachec", + "gorydev", + "AlePerez92", + "oblomobka", + "teoli", + "DeiberChacon", + "leopic", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Reference/Functions/arguments/length": { + "modified": "2020-03-12T19:44:25.066Z", + "contributors": [ + "hmorv", + "NestorAlbelo" ] }, - "Web/JavaScript/Referencia/Funciones/Arrow_functions": { + "Web/JavaScript/Reference/Functions/Arrow_functions": { "modified": "2020-10-15T21:39:05.489Z", "contributors": [ "Nachec", @@ -18975,65 +18808,55 @@ "davecarter" ] }, - "Web/JavaScript/Referencia/Funciones/Method_definitions": { - "modified": "2020-03-12T19:44:13.294Z", - "contributors": [ - "Grijander81" - ] - }, - "Web/JavaScript/Referencia/Funciones/Parametros_por_defecto": { - "modified": "2020-10-15T21:39:27.233Z", - "contributors": [ - "Nachec", - "SphinxKnight", - "danielsalgadop", - "pancheps" - ] - }, - "Web/JavaScript/Referencia/Funciones/arguments": { - "modified": "2020-10-15T21:08:39.471Z", + "Web/JavaScript/Reference/Functions/get": { + "modified": "2020-03-12T19:37:59.268Z", "contributors": [ - "Nachec", - "gorydev", - "AlePerez92", - "oblomobka", + "ramadis", + "DarkScarbo", + "MarkelCuesta", + "fscholz", "teoli", - "DeiberChacon", - "leopic", - "Mgjbot", - "Talisker" + "carloshs92", + "jesanchez", + "ccarruitero" ] }, - "Web/JavaScript/Referencia/Funciones/arguments/callee": { - "modified": "2020-03-12T19:37:01.881Z", + "Web/JavaScript/Reference/Functions": { + "modified": "2020-03-12T19:37:38.529Z", "contributors": [ - "fscholz", + "ricardosikic", + "JoseHernan", + "sergioqa123", + "DavidGalvis", + "miguelitolaparra", + "FranciscoCastle", + "SantiagoHdez", + "arai", + "estebancito", + "hugoatenco", + "mishelashala", "teoli", - "Mgjbot", - "Talisker" + "javiertarrio", + "Nathymig", + "Sheppy" ] }, - "Web/JavaScript/Referencia/Funciones/arguments/length": { - "modified": "2020-03-12T19:44:25.066Z", + "Web/JavaScript/Reference/Functions/Method_definitions": { + "modified": "2020-03-12T19:44:13.294Z", "contributors": [ - "hmorv", - "NestorAlbelo" + "Grijander81" ] }, - "Web/JavaScript/Referencia/Funciones/get": { - "modified": "2020-03-12T19:37:59.268Z", + "Web/JavaScript/Reference/Functions/Default_parameters": { + "modified": "2020-10-15T21:39:27.233Z", "contributors": [ - "ramadis", - "DarkScarbo", - "MarkelCuesta", - "fscholz", - "teoli", - "carloshs92", - "jesanchez", - "ccarruitero" + "Nachec", + "SphinxKnight", + "danielsalgadop", + "pancheps" ] }, - "Web/JavaScript/Referencia/Funciones/parametros_rest": { + "Web/JavaScript/Reference/Functions/rest_parameters": { "modified": "2020-08-05T19:22:32.660Z", "contributors": [ "paching12", @@ -19046,7 +18869,7 @@ "mikicegal14" ] }, - "Web/JavaScript/Referencia/Funciones/set": { + "Web/JavaScript/Reference/Functions/set": { "modified": "2020-10-20T12:54:09.106Z", "contributors": [ "alejandro.fca", @@ -19054,125 +18877,83 @@ "DavidBernal" ] }, - "Web/JavaScript/Referencia/Gramatica_lexica": { + "Web/JavaScript/Reference/Lexical_grammar": { "modified": "2020-10-15T22:24:10.289Z", "contributors": [ "Nachec", "fitojb" ] }, - "Web/JavaScript/Referencia/Iteration_protocols": { - "modified": "2020-03-12T19:41:22.496Z", - "contributors": [ - "SphinxKnight", - "oagarcia" - ] - }, - "Web/JavaScript/Referencia/Modo_estricto": { - "modified": "2020-08-30T21:51:49.146Z", - "contributors": [ - "Nachec", - "martin_jaime", - "javier-aguilera", - "olijyat", - "Sotelio", - "juangpc", - "MateoVelilla", - "krthr", - "Phoneix", - "nhuamani", - "octopusinvitro", - "frasko21", - "Anonymous", - "federicobond", - "elkinbernal21", - "migueljo_12", - "seeker8" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales": { - "modified": "2020-03-12T19:36:16.167Z", + "Web/JavaScript/Reference": { + "modified": "2020-03-12T19:36:20.902Z", "contributors": [ - "Jethrotul", - "yohanolmedo", - "JoseGB", - "lajaso", - "Imvi10", - "chavesrdj", - "SphinxKnight", + "fscholz", "teoli", - "KENARKI", - "chebit", - "ethertank", - "Garf", - "tiangolo", + "zerospalencia", + "Scipion", + "ADP13", + "DSN_XP", + "Talisker", "Sheppy", "Nathymig", "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/AggregateError": { - "modified": "2020-10-15T22:31:08.318Z", + "Web/JavaScript/Reference/Iteration_protocols": { + "modified": "2020-03-12T19:41:22.496Z", "contributors": [ - "Nachec", - "Gardeky" + "SphinxKnight", + "oagarcia" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array": { - "modified": "2020-12-13T21:16:28.670Z", + "Web/JavaScript/Reference/Strict_mode": { + "modified": "2020-08-30T21:51:49.146Z", "contributors": [ - "SamuelOuteda", - "JotaCé", - "Daniel1404", - "MartinCJ08", - "lorenzo-sc", - "Pagua", - "Marito10", - "lajaso", - "AlePerez92", - "patoezequiel", - "FranciscoCastle", - "Pulits", - "Th3Cod3", - "rec", - "BubuAnabelas", - "abaracedo", - "Pablo_Bangueses", - "gfernandez", - "davegomez", - "viartola", - "Albizures", - "germanio", - "a0viedo", - "teoli", - "LuisArt", - "Nukeador", - "ADP13", - "Errepunto", - "Sheppy", - "Nathymig", - "Mgjbot" + "Nachec", + "martin_jaime", + "javier-aguilera", + "olijyat", + "Sotelio", + "juangpc", + "MateoVelilla", + "krthr", + "Phoneix", + "nhuamani", + "octopusinvitro", + "frasko21", + "Anonymous", + "federicobond", + "elkinbernal21", + "migueljo_12", + "seeker8" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/AggregateError": { + "modified": "2020-10-15T22:31:08.318Z", + "contributors": [ + "Nachec", + "Gardeky" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { "modified": "2020-10-15T22:06:23.853Z", "contributors": [ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/@@species": { + "Web/JavaScript/Reference/Global_Objects/Array/@@species": { "modified": "2020-10-15T22:07:11.429Z", "contributors": [ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables": { + "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { "modified": "2020-10-15T22:04:47.805Z", "contributors": [ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/concat": { + "Web/JavaScript/Reference/Global_Objects/Array/concat": { "modified": "2020-10-15T21:38:20.137Z", "contributors": [ "AlePerez92", @@ -19184,7 +18965,7 @@ "gonzalog" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin": { + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { "modified": "2020-10-15T21:46:52.733Z", "contributors": [ "lajaso", @@ -19193,7 +18974,7 @@ "eljonims" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/entries": { + "Web/JavaScript/Reference/Global_Objects/Array/entries": { "modified": "2020-10-15T21:45:28.326Z", "contributors": [ "lajaso", @@ -19201,7 +18982,7 @@ "imNicoSuarez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/every": { + "Web/JavaScript/Reference/Global_Objects/Array/every": { "modified": "2020-10-15T21:38:36.565Z", "contributors": [ "camsa", @@ -19212,7 +18993,7 @@ "vltamara" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/fill": { + "Web/JavaScript/Reference/Global_Objects/Array/fill": { "modified": "2020-10-15T21:37:55.734Z", "contributors": [ "camsa", @@ -19223,7 +19004,7 @@ "cesarve77" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/filter": { + "Web/JavaScript/Reference/Global_Objects/Array/filter": { "modified": "2020-12-14T06:55:37.970Z", "contributors": [ "Adil_Casamayor_Silvar", @@ -19245,7 +19026,7 @@ "matajm" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/find": { + "Web/JavaScript/Reference/Global_Objects/Array/find": { "modified": "2020-10-15T21:37:55.410Z", "contributors": [ "AlePerez92", @@ -19256,7 +19037,7 @@ "alo5" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/findIndex": { + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { "modified": "2020-10-15T21:46:40.264Z", "contributors": [ "AlePerez92", @@ -19266,7 +19047,7 @@ "andrpueb" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/flat": { + "Web/JavaScript/Reference/Global_Objects/Array/flat": { "modified": "2020-10-15T22:04:41.717Z", "contributors": [ "amarin95", @@ -19276,7 +19057,7 @@ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/flatMap": { + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { "modified": "2020-10-15T22:04:40.380Z", "contributors": [ "alejandro.figuera", @@ -19284,7 +19065,7 @@ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/forEach": { + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { "modified": "2020-10-15T21:25:13.328Z", "contributors": [ "maximocapital", @@ -19304,7 +19085,7 @@ "elfoxero" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/from": { + "Web/JavaScript/Reference/Global_Objects/Array/from": { "modified": "2020-10-15T21:41:11.903Z", "contributors": [ "AlePerez92", @@ -19315,7 +19096,7 @@ "thzunder" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/includes": { + "Web/JavaScript/Reference/Global_Objects/Array/includes": { "modified": "2020-10-15T21:41:08.738Z", "contributors": [ "emilianot", @@ -19329,7 +19110,43 @@ "DRayX" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/indexOf": { + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-12-13T21:16:28.670Z", + "contributors": [ + "SamuelOuteda", + "JotaCé", + "Daniel1404", + "MartinCJ08", + "lorenzo-sc", + "Pagua", + "Marito10", + "lajaso", + "AlePerez92", + "patoezequiel", + "FranciscoCastle", + "Pulits", + "Th3Cod3", + "rec", + "BubuAnabelas", + "abaracedo", + "Pablo_Bangueses", + "gfernandez", + "davegomez", + "viartola", + "Albizures", + "germanio", + "a0viedo", + "teoli", + "LuisArt", + "Nukeador", + "ADP13", + "Errepunto", + "Sheppy", + "Nathymig", + "Mgjbot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { "modified": "2020-10-15T21:21:34.369Z", "contributors": [ "ChristianMarca", @@ -19341,7 +19158,7 @@ "AntonioNavajas" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/isArray": { + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { "modified": "2020-10-15T21:36:49.146Z", "contributors": [ "lajaso", @@ -19351,7 +19168,7 @@ "EddieV1" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/join": { + "Web/JavaScript/Reference/Global_Objects/Array/join": { "modified": "2020-10-15T21:37:05.645Z", "contributors": [ "lajaso", @@ -19359,14 +19176,14 @@ "davegomez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/keys": { + "Web/JavaScript/Reference/Global_Objects/Array/keys": { "modified": "2020-10-15T21:46:47.383Z", "contributors": [ "lajaso", "eljonims" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf": { + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { "modified": "2020-10-15T21:44:42.909Z", "contributors": [ "luchosr", @@ -19375,7 +19192,7 @@ "cesiztel" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/length": { + "Web/JavaScript/Reference/Global_Objects/Array/length": { "modified": "2020-10-15T21:36:04.137Z", "contributors": [ "lajaso", @@ -19384,7 +19201,7 @@ "martinweingart" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/map": { + "Web/JavaScript/Reference/Global_Objects/Array/map": { "modified": "2019-07-29T10:38:41.705Z", "contributors": [ "AndCotOli", @@ -19398,7 +19215,7 @@ "fcomabella" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/of": { + "Web/JavaScript/Reference/Global_Objects/Array/of": { "modified": "2020-10-15T21:39:43.805Z", "contributors": [ "lajaso", @@ -19408,7 +19225,7 @@ "adelamata" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/pop": { + "Web/JavaScript/Reference/Global_Objects/Array/pop": { "modified": "2020-10-15T21:34:39.833Z", "contributors": [ "AlePerez92", @@ -19420,14 +19237,14 @@ "Guitxo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/prototype": { + "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { "modified": "2020-10-15T21:35:31.913Z", "contributors": [ "lajaso", "humbertaco" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/push": { + "Web/JavaScript/Reference/Global_Objects/Array/push": { "modified": "2020-10-15T21:20:34.074Z", "contributors": [ "AlePerez92", @@ -19439,7 +19256,7 @@ "mhauptma73" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/reduce": { + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { "modified": "2020-10-15T21:16:20.520Z", "contributors": [ "AlePerez92", @@ -19455,7 +19272,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight": { + "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { "modified": "2019-03-23T23:50:45.331Z", "contributors": [ "fuzzyalej", @@ -19463,7 +19280,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/reverse": { + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { "modified": "2020-10-15T21:34:38.313Z", "contributors": [ "AlePerez92", @@ -19475,7 +19292,7 @@ "arthusu" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/shift": { + "Web/JavaScript/Reference/Global_Objects/Array/shift": { "modified": "2020-08-27T12:47:35.128Z", "contributors": [ "AlePerez92", @@ -19484,7 +19301,7 @@ "gfernandez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/slice": { + "Web/JavaScript/Reference/Global_Objects/Array/slice": { "modified": "2019-03-23T22:52:20.266Z", "contributors": [ "olijyat", @@ -19499,7 +19316,7 @@ "oillescas" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/some": { + "Web/JavaScript/Reference/Global_Objects/Array/some": { "modified": "2020-10-15T21:36:10.705Z", "contributors": [ "AlePerez92", @@ -19510,7 +19327,7 @@ "martinweingart" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/sort": { + "Web/JavaScript/Reference/Global_Objects/Array/sort": { "modified": "2020-10-10T21:23:15.977Z", "contributors": [ "Gardeky", @@ -19532,7 +19349,7 @@ "lombareload" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/splice": { + "Web/JavaScript/Reference/Global_Objects/Array/splice": { "modified": "2020-10-15T21:33:06.435Z", "contributors": [ "AlePerez92", @@ -19545,20 +19362,20 @@ "alvarouribe" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString": { + "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { "modified": "2020-10-15T22:10:13.626Z", "contributors": [ "estebanpanelli" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/toSource": { + "Web/JavaScript/Reference/Global_Objects/Array/toSource": { "modified": "2019-03-23T22:08:25.338Z", "contributors": [ "teoli", "pedro-otero" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/toString": { + "Web/JavaScript/Reference/Global_Objects/Array/toString": { "modified": "2020-10-15T21:37:53.754Z", "contributors": [ "AlePerez92", @@ -19567,14 +19384,14 @@ "dgrizzla" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/unshift": { + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { "modified": "2020-10-15T21:36:39.291Z", "contributors": [ "AlePerez92", "elhesuu" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Array/values": { + "Web/JavaScript/Reference/Global_Objects/Array/values": { "modified": "2020-10-15T21:47:36.548Z", "contributors": [ "AlePerez92", @@ -19582,36 +19399,35 @@ "clystian" ] }, - "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer": { - "modified": "2020-10-15T21:40:07.554Z", - "contributors": [ - "lajaso", - "joseluisq", - "mlealvillarreal", - "AzazelN28", - "tamat" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species": { + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { "modified": "2020-10-15T22:05:03.686Z", "contributors": [ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength": { + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { "modified": "2020-10-15T22:05:03.452Z", "contributors": [ "lajaso" ] }, - "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype": { - "modified": "2020-10-15T21:51:49.315Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:40:07.554Z", "contributors": [ "lajaso", - "AzazelN28" + "joseluisq", + "mlealvillarreal", + "AzazelN28", + "tamat" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/Boolean": { + "modified": "2020-10-15T22:33:47.964Z", + "contributors": [ + "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Boolean": { + "Web/JavaScript/Reference/Global_Objects/Boolean": { "modified": "2020-10-15T21:16:58.681Z", "contributors": [ "Nachec", @@ -19625,38 +19441,14 @@ "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean": { - "modified": "2020-10-15T22:33:47.964Z", - "contributors": [ - "Nachec" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource": { + "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { "modified": "2019-09-14T17:25:31.875Z", "contributors": [ "teoli", "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date": { - "modified": "2019-10-10T16:53:04.977Z", - "contributors": [ - "wbamberg", - "Eduardo_66", - "teoli", - "Talisker", - "Mgjbot", - "Sheppy" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Date/UTC": { - "modified": "2019-03-23T23:48:17.886Z", - "contributors": [ - "teoli", - "Talisker" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getDate": { + "Web/JavaScript/Reference/Global_Objects/Date/getDate": { "modified": "2019-03-23T22:47:58.851Z", "contributors": [ "DanielFRB", @@ -19664,7 +19456,7 @@ "ycanales" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getDay": { + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { "modified": "2019-03-23T22:41:58.390Z", "contributors": [ "odelrio", @@ -19672,7 +19464,7 @@ "thzunder" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear": { + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { "modified": "2020-12-12T18:35:30.034Z", "contributors": [ "AlePerez92", @@ -19680,38 +19472,38 @@ "Guitxo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getHours": { + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { "modified": "2019-03-23T22:25:54.207Z", "contributors": [ "davElsanto" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getMilliseconds": { + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { "modified": "2019-03-23T22:19:54.449Z", "contributors": [ "Undre4m" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getMinutes": { + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { "modified": "2019-03-23T22:50:56.451Z", "contributors": [ "jezdez", "jorgeLightwave" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getMonth": { + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { "modified": "2019-03-23T22:51:30.861Z", "contributors": [ "cristobalramos" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getSeconds": { + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { "modified": "2020-10-15T22:04:39.573Z", "contributors": [ "AlePerez92" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getTime": { + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { "modified": "2020-10-18T16:10:45.747Z", "contributors": [ "feliperomero3", @@ -19719,19 +19511,30 @@ "Marttharomero" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getUTCFullYear": { + "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { "modified": "2019-03-23T22:20:31.228Z", "contributors": [ "e.g.m.g." ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours": { + "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { "modified": "2019-03-23T22:23:56.170Z", "contributors": [ "eltrikiman" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/now": { + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2019-10-10T16:53:04.977Z", + "contributors": [ + "wbamberg", + "Eduardo_66", + "teoli", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/now": { "modified": "2019-03-23T23:48:17.746Z", "contributors": [ "teoli", @@ -19739,38 +19542,32 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/parse": { + "Web/JavaScript/Reference/Global_Objects/Date/parse": { "modified": "2019-03-23T23:48:18.384Z", "contributors": [ "teoli", "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/prototype": { - "modified": "2019-03-23T23:11:22.072Z", - "contributors": [ - "teoli" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear": { + "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { "modified": "2019-03-23T22:20:28.916Z", "contributors": [ "e.g.m.g." ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/setMonth": { + "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { "modified": "2020-10-15T22:26:32.061Z", "contributors": [ "mavega998" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toDateString": { + "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { "modified": "2020-10-15T22:00:03.156Z", "contributors": [ "thisisalexis" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toISOString": { + "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { "modified": "2020-10-18T16:02:20.913Z", "contributors": [ "feliperomero3", @@ -19781,106 +19578,171 @@ "developingo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toJSON": { + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { "modified": "2020-10-15T22:34:58.674Z", "contributors": [ "w3pdsoft" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleDateString": { + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { "modified": "2020-10-15T22:26:52.505Z", "contributors": [ "AntonioM." ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleString": { + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { "modified": "2020-10-15T22:28:03.714Z", "contributors": [ "jestebans", "Juanpredev" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleTimeString": { + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { "modified": "2020-10-15T22:28:25.409Z", "contributors": [ "antixsuperstar" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString": { + "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { "modified": "2020-10-15T22:26:46.954Z", "contributors": [ "batik" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error": { - "modified": "2020-10-15T21:17:01.621Z", + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2019-03-23T23:48:17.886Z", "contributors": [ - "Nachec", - "akadoshin", - "gfernandez", "teoli", - "Talisker", + "Talisker" + ] + }, + "Web/JavaScript/Reference/Global_Objects/decodeURI": { + "modified": "2020-03-12T19:36:57.753Z", + "contributors": [ + "teoli", + "SphinxKnight", + "ADP13", "Mgjbot", "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/constructor_Error": { + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-03-12T19:37:00.546Z", + "contributors": [ + "jabarrioss", + "SphinxKnight", + "teoli", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-03-12T19:36:55.391Z", + "contributors": [ + "espipj", + "SphinxKnight", + "teoli", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-03-12T19:37:33.179Z", + "contributors": [ + "jazjay", + "SphinxKnight", + "teoli", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/Error": { "modified": "2020-10-15T22:33:54.309Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/fileName": { + "Web/JavaScript/Reference/Global_Objects/Error/fileName": { "modified": "2020-10-15T22:33:52.450Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber": { + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-10-15T21:17:01.621Z", + "contributors": [ + "Nachec", + "akadoshin", + "gfernandez", + "teoli", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { "modified": "2019-03-23T22:44:34.178Z", "contributors": [ "KikinRdz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/message": { + "Web/JavaScript/Reference/Global_Objects/Error/message": { "modified": "2019-03-23T22:31:48.655Z", "contributors": [ "RiazaValverde" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/name": { + "Web/JavaScript/Reference/Global_Objects/Error/name": { "modified": "2020-10-15T21:51:31.702Z", "contributors": [ "Nachec", "Bumxu" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/prototype": { - "modified": "2019-03-23T22:31:40.887Z", - "contributors": [ - "RiazaValverde" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Error/toSource": { + "Web/JavaScript/Reference/Global_Objects/Error/toSource": { "modified": "2020-10-15T22:33:54.410Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Error/toString": { + "Web/JavaScript/Reference/Global_Objects/Error/toString": { "modified": "2020-10-15T22:33:57.174Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/EvalError": { + "Web/JavaScript/Reference/Global_Objects/escape": { + "modified": "2020-10-15T21:56:14.356Z", + "contributors": [ + "SphinxKnight", + "RozyP", + "IXTRUnai" + ] + }, + "Web/JavaScript/Reference/Global_Objects/eval": { + "modified": "2020-03-12T19:37:01.878Z", + "contributors": [ + "driera", + "sergio_p_d", + "_cuco_", + "ericmartinezr", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/EvalError": { "modified": "2020-08-30T20:35:42.248Z", "contributors": [ "YHWHSGP88", "Undre4m" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Funcionesasíncronas": { + "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { "modified": "2020-10-15T22:06:23.441Z", "contributors": [ "akacoronel", @@ -19888,26 +19750,7 @@ "miguelrijo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function": { - "modified": "2020-10-15T21:14:31.534Z", - "contributors": [ - "Nachec", - "Tzikin100", - "teoli", - "ethertank", - "Skorney", - "ADP13", - "Mgjbot", - "Sheppy" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Function/Función": { - "modified": "2020-10-15T22:33:51.294Z", - "contributors": [ - "Nachec" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Function/apply": { + "Web/JavaScript/Reference/Global_Objects/Function/apply": { "modified": "2019-03-23T23:31:02.682Z", "contributors": [ "AdrianSkar", @@ -19924,7 +19767,7 @@ "gtoroap" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/arguments": { + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { "modified": "2019-03-23T23:48:35.727Z", "contributors": [ "teoli", @@ -19932,7 +19775,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/bind": { + "Web/JavaScript/Reference/Global_Objects/Function/bind": { "modified": "2019-03-23T23:02:28.323Z", "contributors": [ "Imvi10", @@ -19944,7 +19787,7 @@ "cobogt" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/call": { + "Web/JavaScript/Reference/Global_Objects/Function/call": { "modified": "2020-11-13T21:36:49.496Z", "contributors": [ "alejandro.fca", @@ -19954,20 +19797,39 @@ "bluesky777" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/caller": { + "Web/JavaScript/Reference/Global_Objects/Function/caller": { "modified": "2019-03-23T22:52:58.734Z", "contributors": [ "DavidBernal", "fabianlucena" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/displayName": { + "Web/JavaScript/Reference/Global_Objects/Function/displayName": { "modified": "2020-10-15T21:59:29.332Z", "contributors": [ "juliandavidmr" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/length": { + "Web/JavaScript/Reference/Global_Objects/Function/Function": { + "modified": "2020-10-15T22:33:51.294Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T21:14:31.534Z", + "contributors": [ + "Nachec", + "Tzikin100", + "teoli", + "ethertank", + "Skorney", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/length": { "modified": "2020-02-10T13:03:52.789Z", "contributors": [ "kant", @@ -19975,7 +19837,7 @@ "HyMaN" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/name": { + "Web/JavaScript/Reference/Global_Objects/Function/name": { "modified": "2019-03-18T20:38:56.122Z", "contributors": [ "SunWithIssues", @@ -19984,31 +19846,20 @@ "jorgecasar" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/prototype": { - "modified": "2019-03-23T23:53:55.022Z", - "contributors": [ - "mcardozo", - "teoli", - "shaggyrd", - "Mgjbot", - "Wrongloop", - "Sheppy" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Function/toSource": { + "Web/JavaScript/Reference/Global_Objects/Function/toSource": { "modified": "2019-03-23T22:42:12.644Z", "contributors": [ "teoli", "gpdiaz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Function/toString": { + "Web/JavaScript/Reference/Global_Objects/Function/toString": { "modified": "2019-03-23T22:31:32.582Z", "contributors": [ "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Generador": { + "Web/JavaScript/Reference/Global_Objects/Generator": { "modified": "2020-09-30T15:33:08.419Z", "contributors": [ "alejandro.fca", @@ -20017,25 +19868,46 @@ "nicolasolmos" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Generador/next": { + "Web/JavaScript/Reference/Global_Objects/Generator/next": { "modified": "2020-10-15T22:03:24.006Z", "contributors": [ "DJphilomath" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Generador/return": { + "Web/JavaScript/Reference/Global_Objects/Generator/return": { "modified": "2020-10-15T22:03:25.741Z", "contributors": [ "DJphilomath" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Generador/throw": { + "Web/JavaScript/Reference/Global_Objects/Generator/throw": { "modified": "2020-10-15T22:03:23.876Z", "contributors": [ "DJphilomath" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Infinity": { + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:36:16.167Z", + "contributors": [ + "Jethrotul", + "yohanolmedo", + "JoseGB", + "lajaso", + "Imvi10", + "chavesrdj", + "SphinxKnight", + "teoli", + "KENARKI", + "chebit", + "ethertank", + "Garf", + "tiangolo", + "Sheppy", + "Nathymig", + "Mgjbot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Infinity": { "modified": "2020-03-12T19:36:58.042Z", "contributors": [ "SphinxKnight", @@ -20046,19 +19918,19 @@ "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/InternalError": { - "modified": "2020-10-15T22:33:54.342Z", + "Web/JavaScript/Reference/Global_Objects/InternalError/InternalError": { + "modified": "2020-10-15T22:33:52.933Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/InternalError/Constructor_InternalError": { - "modified": "2020-10-15T22:33:52.933Z", + "Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2020-10-15T22:33:54.342Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Intl": { + "Web/JavaScript/Reference/Global_Objects/Intl": { "modified": "2020-10-15T21:58:20.138Z", "contributors": [ "LucasDeFarias", @@ -20066,28 +19938,49 @@ "puentesdiaz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat": { - "modified": "2020-10-15T21:29:49.289Z", + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": { + "modified": "2020-10-15T22:26:32.434Z", "contributors": [ "fscholz", - "IsraelFloresDGA", - "eespitia.rea" + "Daniel7Byte" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format": { - "modified": "2020-10-15T22:26:32.434Z", + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T21:29:49.289Z", "contributors": [ "fscholz", - "Daniel7Byte" + "IsraelFloresDGA", + "eespitia.rea" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Intl/RelativeTimeFormat": { + "Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat": { "modified": "2020-10-15T22:33:27.123Z", "contributors": [ "midudev" ] }, - "Web/JavaScript/Referencia/Objetos_globales/JSON": { + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-03-12T19:37:31.231Z", + "contributors": [ + "SphinxKnight", + "teoli", + "jarneygm", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:17:00.242Z", + "contributors": [ + "jmmarco", + "juanarbol", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Reference/Global_Objects/JSON": { "modified": "2020-09-19T17:44:12.200Z", "contributors": [ "cristian.valdivieso", @@ -20100,7 +19993,7 @@ "fscholz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/JSON/parse": { + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { "modified": "2019-03-23T23:09:22.011Z", "contributors": [ "bufalo1973", @@ -20110,7 +20003,7 @@ "PepeBeat" ] }, - "Web/JavaScript/Referencia/Objetos_globales/JSON/stringify": { + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { "modified": "2020-10-15T21:26:39.053Z", "contributors": [ "AlePerez92", @@ -20128,46 +20021,26 @@ "carlosgctes" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map": { - "modified": "2020-10-15T21:30:28.950Z", - "contributors": [ - "Almiqui", - "AntonioSalazar", - "SphinxKnight", - "Sebastiancbvz", - "vaavJSdev", - "timgivois", - "aeroxmotion", - "PepeAleu", - "xavier.gallofre", - "rn3w", - "Grijander81", - "GustavoFernandez", - "rec", - "Kouen", - "facundoj" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Map/clear": { + "Web/JavaScript/Reference/Global_Objects/Map/clear": { "modified": "2019-03-23T22:33:57.332Z", "contributors": [ "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/delete": { + "Web/JavaScript/Reference/Global_Objects/Map/delete": { "modified": "2019-06-22T21:43:58.894Z", "contributors": [ "gerardonavart", "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/entries": { + "Web/JavaScript/Reference/Global_Objects/Map/entries": { "modified": "2019-03-23T22:33:46.712Z", "contributors": [ "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/forEach": { + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { "modified": "2020-10-15T21:59:58.539Z", "contributors": [ "gerardonavart", @@ -20175,125 +20048,64 @@ "katuno1981" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/get": { + "Web/JavaScript/Reference/Global_Objects/Map/get": { "modified": "2020-10-15T22:01:57.424Z", "contributors": [ "Marte", "Sebastiancbvz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/has": { + "Web/JavaScript/Reference/Global_Objects/Map/has": { "modified": "2020-10-15T22:32:18.735Z", "contributors": [ "fredydeltoro" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/keys": { - "modified": "2019-03-23T22:31:40.425Z", + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:30:28.950Z", "contributors": [ - "jesusfchavarro" + "Almiqui", + "AntonioSalazar", + "SphinxKnight", + "Sebastiancbvz", + "vaavJSdev", + "timgivois", + "aeroxmotion", + "PepeAleu", + "xavier.gallofre", + "rn3w", + "Grijander81", + "GustavoFernandez", + "rec", + "Kouen", + "facundoj" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/prototype": { - "modified": "2019-03-23T22:06:29.334Z", + "Web/JavaScript/Reference/Global_Objects/Map/keys": { + "modified": "2019-03-23T22:31:40.425Z", "contributors": [ - "JuanMacias" + "jesusfchavarro" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/set": { + "Web/JavaScript/Reference/Global_Objects/Map/set": { "modified": "2019-03-23T22:28:28.999Z", "contributors": [ "guillermojmc" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/size": { + "Web/JavaScript/Reference/Global_Objects/Map/size": { "modified": "2019-03-23T22:34:02.057Z", "contributors": [ "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Map/values": { + "Web/JavaScript/Reference/Global_Objects/Map/values": { "modified": "2020-10-15T22:12:33.830Z", "contributors": [ "AlePerez92" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math": { - "modified": "2020-10-15T21:17:08.782Z", - "contributors": [ - "RomnSD", - "Pedro-vk", - "lajaso", - "Enesimus", - "maxbalter", - "raecillacastellana", - "mrajente47", - "enesimo", - "Jaston", - "AugustoEsquen", - "teoli", - "ethertank", - "Talisker", - "Mgjbot", - "Sheppy" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/E": { - "modified": "2020-10-15T21:21:06.485Z", - "contributors": [ - "lajaso", - "teoli", - "jessest" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/LN10": { - "modified": "2020-10-15T21:21:04.066Z", - "contributors": [ - "lajaso", - "teoli", - "jessest" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/LN2": { - "modified": "2020-10-15T21:21:06.933Z", - "contributors": [ - "lajaso", - "teoli", - "jessest" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/LOG10E": { - "modified": "2019-03-23T22:21:51.531Z", - "contributors": [ - "aocodermx" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E": { - "modified": "2019-03-23T23:35:28.496Z", - "contributors": [ - "teoli", - "jessest" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/PI": { - "modified": "2019-03-23T22:21:48.729Z", - "contributors": [ - "aocodermx" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/SQRT1_2": { - "modified": "2019-03-23T22:22:44.049Z", - "contributors": [ - "aocodermx" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/SQRT2": { - "modified": "2019-03-23T22:18:15.216Z", - "contributors": [ - "geradrum" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Math/abs": { + "Web/JavaScript/Reference/Global_Objects/Math/abs": { "modified": "2019-10-29T19:51:46.768Z", "contributors": [ "jaomix1", @@ -20301,56 +20113,56 @@ "Sotelio" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/acos": { + "Web/JavaScript/Reference/Global_Objects/Math/acos": { "modified": "2020-10-15T21:58:17.630Z", "contributors": [ "Enesimus" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/acosh": { + "Web/JavaScript/Reference/Global_Objects/Math/acosh": { "modified": "2020-10-15T21:59:09.931Z", "contributors": [ "nickobre", "Enesimus" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/asin": { + "Web/JavaScript/Reference/Global_Objects/Math/asin": { "modified": "2019-03-23T22:11:21.124Z", "contributors": [ "hckt" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/asinh": { + "Web/JavaScript/Reference/Global_Objects/Math/asinh": { "modified": "2020-10-15T22:00:15.403Z", "contributors": [ "josegarciamanez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/atan": { + "Web/JavaScript/Reference/Global_Objects/Math/atan": { "modified": "2020-10-15T22:02:19.566Z", "contributors": [ "alejocas" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/atan2": { + "Web/JavaScript/Reference/Global_Objects/Math/atan2": { "modified": "2019-03-23T22:52:46.887Z", "contributors": [ "maik10s" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/atanh": { + "Web/JavaScript/Reference/Global_Objects/Math/atanh": { "modified": "2020-11-01T00:27:58.552Z", "contributors": [ "carlitosnu41" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/cbrt": { + "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { "modified": "2020-11-01T15:23:46.179Z", "contributors": [ "carlitosnu41" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/ceil": { + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { "modified": "2020-10-15T21:49:24.207Z", "contributors": [ "RubiVG", @@ -20362,25 +20174,33 @@ "Roberto2883" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/cos": { + "Web/JavaScript/Reference/Global_Objects/Math/cos": { "modified": "2020-10-15T22:32:41.209Z", "contributors": [ "JGalazan" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/exp": { + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T21:21:06.485Z", + "contributors": [ + "lajaso", + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/exp": { "modified": "2019-03-23T22:13:13.656Z", "contributors": [ "maramal" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/expm1": { + "Web/JavaScript/Reference/Global_Objects/Math/expm1": { "modified": "2020-11-19T20:10:09.526Z", "contributors": [ "lpg7793" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/floor": { + "Web/JavaScript/Reference/Global_Objects/Math/floor": { "modified": "2020-11-03T13:27:31.226Z", "contributors": [ "LuisGalicia", @@ -20391,38 +20211,87 @@ "harleshinn" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/fround": { + "Web/JavaScript/Reference/Global_Objects/Math/fround": { "modified": "2020-10-15T22:21:30.568Z", "contributors": [ "Itaiu" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/hypot": { + "Web/JavaScript/Reference/Global_Objects/Math/hypot": { "modified": "2020-10-15T22:01:35.023Z", "contributors": [ "AzazelN28", "MarioECU" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/log": { + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2020-10-15T21:17:08.782Z", + "contributors": [ + "RomnSD", + "Pedro-vk", + "lajaso", + "Enesimus", + "maxbalter", + "raecillacastellana", + "mrajente47", + "enesimo", + "Jaston", + "AugustoEsquen", + "teoli", + "ethertank", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2020-10-15T21:21:04.066Z", + "contributors": [ + "lajaso", + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/LN2": { + "modified": "2020-10-15T21:21:06.933Z", + "contributors": [ + "lajaso", + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/log": { "modified": "2020-10-15T22:16:12.754Z", "contributors": [ "reymundus2" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/log10": { + "Web/JavaScript/Reference/Global_Objects/Math/log10": { "modified": "2019-03-23T22:26:16.691Z", "contributors": [ "amcrsanchez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/log2": { + "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { + "modified": "2019-03-23T22:21:51.531Z", + "contributors": [ + "aocodermx" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/log2": { "modified": "2020-10-15T22:02:09.980Z", "contributors": [ "asdrubalivan" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/max": { + "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { + "modified": "2019-03-23T23:35:28.496Z", + "contributors": [ + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/max": { "modified": "2019-03-23T22:58:23.136Z", "contributors": [ "roberbnd", @@ -20432,21 +20301,27 @@ "allangonzalezmiceli" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/min": { + "Web/JavaScript/Reference/Global_Objects/Math/min": { "modified": "2019-03-23T22:39:26.032Z", "contributors": [ "kutyel", "alonso.vazquez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/pow": { + "Web/JavaScript/Reference/Global_Objects/Math/PI": { + "modified": "2019-03-23T22:21:48.729Z", + "contributors": [ + "aocodermx" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/pow": { "modified": "2020-05-11T01:41:03.777Z", "contributors": [ "paguilar", "carral" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/random": { + "Web/JavaScript/Reference/Global_Objects/Math/random": { "modified": "2019-03-23T23:00:21.676Z", "contributors": [ "hdesoto", @@ -20455,7 +20330,7 @@ "daiant" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/round": { + "Web/JavaScript/Reference/Global_Objects/Math/round": { "modified": "2020-07-28T16:21:17.637Z", "contributors": [ "FacundoF1", @@ -20465,21 +20340,21 @@ "YerkoPalma" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/seno": { + "Web/JavaScript/Reference/Global_Objects/Math/sin": { "modified": "2019-03-23T22:51:39.313Z", "contributors": [ "jezdez", "germanfr" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/sign": { + "Web/JavaScript/Reference/Global_Objects/Math/sign": { "modified": "2019-03-23T22:16:42.806Z", "contributors": [ "Vickysolo", "frankman123" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/sqrt": { + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { "modified": "2019-03-23T22:28:35.014Z", "contributors": [ "MarioECU", @@ -20488,19 +20363,31 @@ "LotarMC" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/tan": { + "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { + "modified": "2019-03-23T22:22:44.049Z", + "contributors": [ + "aocodermx" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { + "modified": "2019-03-23T22:18:15.216Z", + "contributors": [ + "geradrum" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/tan": { "modified": "2020-10-15T22:30:22.119Z", "contributors": [ "spaceinvadev" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/tanh": { + "Web/JavaScript/Reference/Global_Objects/Math/tanh": { "modified": "2020-10-15T22:08:08.543Z", "contributors": [ "smuurf" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Math/trunc": { + "Web/JavaScript/Reference/Global_Objects/Math/trunc": { "modified": "2020-06-23T08:00:29.509Z", "contributors": [ "GioSJ47", @@ -20509,7 +20396,7 @@ "kenin4" ] }, - "Web/JavaScript/Referencia/Objetos_globales/NaN": { + "Web/JavaScript/Reference/Global_Objects/NaN": { "modified": "2020-03-12T19:36:10.137Z", "contributors": [ "jaomix1", @@ -20521,7 +20408,19 @@ "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number": { + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-03-12T19:42:06.401Z", + "contributors": [ + "mkiramu", + "ivanagui2", + "diegoazh", + "BubuAnabelas", + "hmorv", + "AugustoEsquen", + "AsLogd" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Number": { "modified": "2020-11-24T10:13:32.926Z", "contributors": [ "gise-s", @@ -20537,72 +20436,65 @@ "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/MAX_SAFE_INTEGER": { - "modified": "2020-10-15T22:00:45.784Z", + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2020-10-15T22:02:19.829Z", "contributors": [ - "urielmx" + "dahsser" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/MAX_VALUE": { - "modified": "2019-03-23T22:40:03.550Z", + "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { + "modified": "2020-10-15T21:44:12.806Z", "contributors": [ - "abaracedo", - "UlisesGascon" + "AlePerez92", + "Rafaelox" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/MIN_VALUE": { - "modified": "2019-03-23T22:39:33.277Z", + "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { + "modified": "2020-10-14T19:49:07.774Z", "contributors": [ + "alejandro.fca", "abaracedo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY": { - "modified": "2019-03-23T23:20:29.197Z", - "contributors": [ - "teoli", - "jarneygm" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Number/NaN": { - "modified": "2020-10-15T22:30:30.437Z", + "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { + "modified": "2020-10-15T22:02:33.932Z", "contributors": [ - "oldanirenzo" + "chrishenx" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY": { - "modified": "2019-03-23T23:20:30.481Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { + "modified": "2020-10-15T22:00:45.784Z", "contributors": [ - "teoli", - "jarneygm" + "urielmx" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/isFinite": { - "modified": "2020-10-15T22:02:19.829Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { + "modified": "2019-03-23T22:40:03.550Z", "contributors": [ - "dahsser" + "abaracedo", + "UlisesGascon" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/isInteger": { - "modified": "2020-10-15T21:44:12.806Z", + "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { + "modified": "2019-03-23T22:39:33.277Z", "contributors": [ - "AlePerez92", - "Rafaelox" + "abaracedo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/isNaN": { - "modified": "2020-10-14T19:49:07.774Z", + "Web/JavaScript/Reference/Global_Objects/Number/NaN": { + "modified": "2020-10-15T22:30:30.437Z", "contributors": [ - "alejandro.fca", - "abaracedo" + "oldanirenzo" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger": { - "modified": "2020-10-15T22:02:33.932Z", + "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { + "modified": "2019-03-23T23:20:29.197Z", "contributors": [ - "chrishenx" + "teoli", + "jarneygm" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat": { + "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { "modified": "2020-10-15T22:11:38.614Z", "contributors": [ "pilichanampe", @@ -20610,20 +20502,20 @@ "IsraelFloresDGA" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/parseInt": { + "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { "modified": "2020-10-15T22:29:44.854Z", "contributors": [ "HarryzMoba_10" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/prototype": { - "modified": "2019-03-23T23:46:16.155Z", + "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { + "modified": "2019-03-23T23:20:30.481Z", "contributors": [ "teoli", - "Sheppy" + "jarneygm" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/toFixed": { + "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { "modified": "2020-05-26T21:48:51.844Z", "contributors": [ "EtelS", @@ -20634,19 +20526,19 @@ "isabido" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString": { + "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { "modified": "2020-11-04T23:22:26.363Z", "contributors": [ "ccarruitero-mdn" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision": { + "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { "modified": "2020-10-15T22:05:51.600Z", "contributors": [ "jtorresheredia" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/toString": { + "Web/JavaScript/Reference/Global_Objects/Number/toString": { "modified": "2019-06-15T08:43:31.612Z", "contributors": [ "IbraBach", @@ -20655,50 +20547,26 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Number/valueOf": { + "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { "modified": "2020-10-15T21:58:23.022Z", "contributors": [ "Enesimus" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object": { - "modified": "2020-10-15T21:17:02.144Z", - "contributors": [ - "luisjorquera", - "fedoroffs", - "ramirobg94", - "marcelorodcla", - "hecsoto1", - "gabrielrincon", - "fscholz", - "DanielAmaro", - "taniaReyesM", - "pedro-otero", - "ragutimar", - "hmorv", - "mishelashala", - "teoli", - "diegogaysaez", - "neosergio", - "Talisker", - "Mgjbot", - "Sheppy" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Object/__defineGetter__": { + "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { "modified": "2019-03-23T22:39:13.909Z", "contributors": [ "p1errot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/__lookupGetter__": { + "Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__": { "modified": "2020-10-15T21:59:55.328Z", "contributors": [ "al-shmlan", "jerssonjgar" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/assign": { + "Web/JavaScript/Reference/Global_Objects/Object/assign": { "modified": "2020-10-15T21:34:18.548Z", "contributors": [ "camsa", @@ -20716,7 +20584,7 @@ "fscholz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/constructor": { + "Web/JavaScript/Reference/Global_Objects/Object/constructor": { "modified": "2019-03-23T23:16:25.847Z", "contributors": [ "alejandrochung", @@ -20726,7 +20594,7 @@ "carlosmantilla" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/create": { + "Web/JavaScript/Reference/Global_Objects/Object/create": { "modified": "2020-11-08T21:02:55.557Z", "contributors": [ "Hunter3195", @@ -20738,7 +20606,7 @@ "carlosmantilla" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties": { + "Web/JavaScript/Reference/Global_Objects/Object/defineProperties": { "modified": "2019-03-23T23:15:47.453Z", "contributors": [ "Thargelion", @@ -20747,7 +20615,7 @@ "guillermojmc" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty": { + "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { "modified": "2019-03-23T23:08:49.016Z", "contributors": [ "JoanSerna", @@ -20758,7 +20626,7 @@ "Siro_Diaz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/entries": { + "Web/JavaScript/Reference/Global_Objects/Object/entries": { "modified": "2019-07-12T06:16:58.372Z", "contributors": [ "ajuanjojjj", @@ -20766,7 +20634,7 @@ "JooseNavarro" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/freeze": { + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { "modified": "2020-10-15T21:40:07.065Z", "contributors": [ "D3Portillo", @@ -20776,14 +20644,14 @@ "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/fromEntries": { + "Web/JavaScript/Reference/Global_Objects/Object/fromEntries": { "modified": "2020-10-15T22:16:55.358Z", "contributors": [ "emileond", "Belquira" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptor": { + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor": { "modified": "2020-04-01T17:55:45.485Z", "contributors": [ "SoyZatarain", @@ -20792,33 +20660,33 @@ "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptors": { + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors": { "modified": "2020-10-15T22:04:17.154Z", "contributors": [ "cbalderasc" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames": { + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { "modified": "2019-03-23T23:11:13.666Z", "contributors": [ "teland" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertySymbols": { + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols": { "modified": "2019-03-23T22:44:20.977Z", "contributors": [ "SphinxKnight", "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/getPrototypeOf": { + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { "modified": "2019-03-23T23:08:23.955Z", "contributors": [ "tutugordillo", "Siro_Diaz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty": { + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { "modified": "2019-03-23T23:16:40.759Z", "contributors": [ "mlealvillarreal", @@ -20826,7 +20694,31 @@ "Siro_Diaz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/is": { + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:17:02.144Z", + "contributors": [ + "luisjorquera", + "fedoroffs", + "ramirobg94", + "marcelorodcla", + "hecsoto1", + "gabrielrincon", + "fscholz", + "DanielAmaro", + "taniaReyesM", + "pedro-otero", + "ragutimar", + "hmorv", + "mishelashala", + "teoli", + "diegogaysaez", + "neosergio", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/is": { "modified": "2020-10-25T20:02:03.267Z", "contributors": [ "Cesaraugp", @@ -20835,31 +20727,31 @@ "adelamata" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/isExtensible": { + "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { "modified": "2019-03-23T22:44:00.950Z", "contributors": [ "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/isFrozen": { + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { "modified": "2019-03-23T22:44:03.171Z", "contributors": [ "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/isPrototypeOf": { + "Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf": { "modified": "2019-03-23T22:31:29.220Z", "contributors": [ "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/isSealed": { + "Web/JavaScript/Reference/Global_Objects/Object/isSealed": { "modified": "2020-10-15T22:04:16.292Z", "contributors": [ "cbalderasc" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/keys": { + "Web/JavaScript/Reference/Global_Objects/Object/keys": { "modified": "2020-10-15T21:31:27.965Z", "contributors": [ "jose-setaworkshop", @@ -20876,19 +20768,19 @@ "rcchristiane" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions": { + "Web/JavaScript/Reference/Global_Objects/Object/preventExtensions": { "modified": "2019-04-27T00:07:22.331Z", "contributors": [ "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable": { + "Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable": { "modified": "2019-03-23T22:50:44.591Z", "contributors": [ "aldoromo88" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/proto": { + "Web/JavaScript/Reference/Global_Objects/Object/proto": { "modified": "2019-03-23T22:45:52.056Z", "contributors": [ "swsoftware", @@ -20896,27 +20788,14 @@ "adelamata" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/prototype": { - "modified": "2020-10-15T21:28:24.470Z", - "contributors": [ - "lajaso", - "Sergio_Gonzalez_Collado", - "educalleja", - "AlexanderEstebanZapata1994", - "emilianodiaz", - "mishelashala", - "teoli", - "diegogaysaez" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Object/seal": { + "Web/JavaScript/Reference/Global_Objects/Object/seal": { "modified": "2019-04-27T00:05:41.633Z", "contributors": [ "JoniJnm", "Grijander81" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf": { + "Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf": { "modified": "2019-03-23T22:43:30.332Z", "contributors": [ "SphinxKnight", @@ -20924,19 +20803,19 @@ "mishelashala" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString": { + "Web/JavaScript/Reference/Global_Objects/Object/toLocaleString": { "modified": "2020-10-15T22:31:29.977Z", "contributors": [ "JotaCé" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/toSource": { + "Web/JavaScript/Reference/Global_Objects/Object/toSource": { "modified": "2020-10-15T21:59:52.415Z", "contributors": [ "taniaReyesM" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/toString": { + "Web/JavaScript/Reference/Global_Objects/Object/toString": { "modified": "2019-03-23T23:48:33.504Z", "contributors": [ "gutyfas", @@ -20947,7 +20826,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/valueOf": { + "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { "modified": "2019-03-23T23:07:28.561Z", "contributors": [ "JuanMacias", @@ -20955,7 +20834,7 @@ "emiliot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Object/values": { + "Web/JavaScript/Reference/Global_Objects/Object/values": { "modified": "2020-10-15T21:51:49.001Z", "contributors": [ "camsa", @@ -20964,27 +20843,28 @@ "ramses512" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise": { - "modified": "2020-10-15T21:34:31.961Z", + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-07-04T20:00:21.182Z", "contributors": [ - "chrisdavidmills", - "javigaralva", - "ManuelEsp", - "atpollmann", - "jwhitlock", - "zgluis", - "joseconstela", - "luisrodriguezchaves", - "LazaroOnline", - "leopic", + "pilichanampe", + "SphinxKnight", "teoli", - "JhonAlx", - "dennistobar", - "alagos", - "jorgecasar" + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-03-12T19:37:31.195Z", + "contributors": [ + "mitsurugi", + "teoli", + "daiant", + "SphinxKnight", + "Mgjbot", + "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/all": { + "Web/JavaScript/Reference/Global_Objects/Promise/all": { "modified": "2020-10-15T21:50:20.796Z", "contributors": [ "baumannzone", @@ -20994,7 +20874,7 @@ "FranBacoSoft" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/catch": { + "Web/JavaScript/Reference/Global_Objects/Promise/catch": { "modified": "2020-10-15T21:54:38.286Z", "contributors": [ "JuanMacias", @@ -21002,20 +20882,34 @@ "walbuc" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/finally": { + "Web/JavaScript/Reference/Global_Objects/Promise/finally": { "modified": "2020-10-15T22:16:46.629Z", "contributors": [ "javigallego", "smvilar" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/prototype": { - "modified": "2020-10-15T21:52:03.650Z", + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:34:31.961Z", "contributors": [ - "atpollmann" + "chrisdavidmills", + "javigaralva", + "ManuelEsp", + "atpollmann", + "jwhitlock", + "zgluis", + "joseconstela", + "luisrodriguezchaves", + "LazaroOnline", + "leopic", + "teoli", + "JhonAlx", + "dennistobar", + "alagos", + "jorgecasar" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/race": { + "Web/JavaScript/Reference/Global_Objects/Promise/race": { "modified": "2020-10-15T21:50:20.173Z", "contributors": [ "JuanMacias", @@ -21023,7 +20917,7 @@ "FranBacoSoft" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/reject": { + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { "modified": "2020-10-15T22:00:43.489Z", "contributors": [ "edeyglez95", @@ -21031,14 +20925,14 @@ "giturra" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/resolve": { + "Web/JavaScript/Reference/Global_Objects/Promise/resolve": { "modified": "2020-10-15T22:06:37.624Z", "contributors": [ "HappyEduardoMilk", "ChristianMarca" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Promise/then": { + "Web/JavaScript/Reference/Global_Objects/Promise/then": { "modified": "2020-11-30T12:11:41.749Z", "contributors": [ "StripTM", @@ -21055,7 +20949,7 @@ "manumora" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Proxy": { + "Web/JavaScript/Reference/Global_Objects/Proxy": { "modified": "2020-10-30T19:48:13.357Z", "contributors": [ "Ramdhei-codes", @@ -21067,13 +20961,31 @@ "pedropablomt95" ] }, - "Web/JavaScript/Referencia/Objetos_globales/ReferenceError": { + "Web/JavaScript/Reference/Global_Objects/ReferenceError": { "modified": "2020-10-15T22:33:51.476Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp": { + "Web/JavaScript/Reference/Global_Objects/RegExp/compile": { + "modified": "2020-10-15T22:23:39.381Z", + "contributors": [ + "raiman264" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp/exec": { + "modified": "2019-03-23T22:08:57.043Z", + "contributors": [ + "Sebastiancbvz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase": { + "modified": "2019-03-23T22:10:00.611Z", + "contributors": [ + "Cuadraman" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp": { "modified": "2020-10-15T21:12:12.221Z", "contributors": [ "Nachec", @@ -21091,144 +21003,94 @@ "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/RegExp": { + "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { "modified": "2020-10-15T22:34:22.734Z", "contributors": [ "Nachec" ] }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/compile": { - "modified": "2020-10-15T22:23:39.381Z", - "contributors": [ - "raiman264" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/exec": { - "modified": "2019-03-23T22:08:57.043Z", - "contributors": [ - "Sebastiancbvz" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/ignoreCase": { - "modified": "2019-03-23T22:10:00.611Z", - "contributors": [ - "Cuadraman" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/rightContext": { + "Web/JavaScript/Reference/Global_Objects/RegExp/rightContext": { "modified": "2020-10-15T22:22:06.547Z", "contributors": [ "higuitadiaz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/test": { + "Web/JavaScript/Reference/Global_Objects/RegExp/test": { "modified": "2019-03-23T22:20:42.368Z", "contributors": [ "Undre4m" ] }, - "Web/JavaScript/Referencia/Objetos_globales/RegExp/toString": { + "Web/JavaScript/Reference/Global_Objects/RegExp/toString": { "modified": "2019-03-23T22:20:44.971Z", "contributors": [ "Undre4m" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set": { - "modified": "2020-10-15T21:43:41.104Z", - "contributors": [ - "camsa", - "IsraelFloresDGA", - "albertor21", - "robe007", - "taniaReyesM", - "mjlescano", - "germanio", - "frank-orellana", - "Chofoteddy" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Set/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/Set/@@iterator": { "modified": "2020-10-15T22:23:37.310Z", "contributors": [ "devtoni" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/add": { + "Web/JavaScript/Reference/Global_Objects/Set/add": { "modified": "2019-03-23T22:37:23.989Z", "contributors": [ "Chofoteddy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/clear": { + "Web/JavaScript/Reference/Global_Objects/Set/clear": { "modified": "2019-03-23T22:25:09.145Z", "contributors": [ "frank-orellana" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/delete": { + "Web/JavaScript/Reference/Global_Objects/Set/delete": { "modified": "2019-03-23T22:25:14.047Z", "contributors": [ "frank-orellana" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/entries": { + "Web/JavaScript/Reference/Global_Objects/Set/entries": { "modified": "2020-10-15T22:06:44.315Z", "contributors": [ "AMongeMoreno" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/has": { + "Web/JavaScript/Reference/Global_Objects/Set/has": { "modified": "2019-03-23T22:25:15.879Z", "contributors": [ "frank-orellana" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/size": { - "modified": "2019-03-23T22:37:32.002Z", + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-10-15T21:43:41.104Z", "contributors": [ + "camsa", + "IsraelFloresDGA", "albertor21", + "robe007", + "taniaReyesM", + "mjlescano", + "germanio", + "frank-orellana", "Chofoteddy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Set/values": { - "modified": "2020-10-15T22:23:08.370Z", - "contributors": [ - "jvelasquez-cl" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/String": { - "modified": "2020-10-15T21:15:27.929Z", + "Web/JavaScript/Reference/Global_Objects/Set/size": { + "modified": "2019-03-23T22:37:32.002Z", "contributors": [ - "Nachec", - "robertsallent", - "sujumayas", - "AriManto", - "BubuAnabelas", - "wbamberg", - "SphinxKnight", - "Gilbertrdz", - "vik231982", - "alejandrochung", - "DevManny", - "teoli", - "ADP13", - "Talisker", - "Mgjbot", - "Sheppy" + "albertor21", + "Chofoteddy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/Trim": { - "modified": "2019-08-18T16:00:14.454Z", + "Web/JavaScript/Reference/Global_Objects/Set/values": { + "modified": "2020-10-15T22:23:08.370Z", "contributors": [ - "valen2004vega", - "raulgg", - "baumannzone", - "andrpueb", - "thzunder", - "AnuarMB" + "jvelasquez-cl" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/anchor": { + "Web/JavaScript/Reference/Global_Objects/String/anchor": { "modified": "2019-03-23T23:48:20.117Z", "contributors": [ "paradoja", @@ -21237,7 +21099,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/big": { + "Web/JavaScript/Reference/Global_Objects/String/big": { "modified": "2019-03-23T23:48:12.468Z", "contributors": [ "Feder1997Clinton", @@ -21246,7 +21108,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/blink": { + "Web/JavaScript/Reference/Global_Objects/String/blink": { "modified": "2019-03-23T23:48:14.789Z", "contributors": [ "teoli", @@ -21254,7 +21116,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/bold": { + "Web/JavaScript/Reference/Global_Objects/String/bold": { "modified": "2019-03-23T23:48:17.641Z", "contributors": [ "teoli", @@ -21262,7 +21124,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/charAt": { + "Web/JavaScript/Reference/Global_Objects/String/charAt": { "modified": "2019-03-23T23:48:14.397Z", "contributors": [ "manatico4", @@ -21274,7 +21136,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt": { + "Web/JavaScript/Reference/Global_Objects/String/charCodeAt": { "modified": "2019-03-23T23:48:12.586Z", "contributors": [ "GermanRodrickson", @@ -21284,13 +21146,13 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/codePointAt": { + "Web/JavaScript/Reference/Global_Objects/String/codePointAt": { "modified": "2020-10-15T21:56:01.225Z", "contributors": [ "thepianist2" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/concat": { + "Web/JavaScript/Reference/Global_Objects/String/concat": { "modified": "2020-11-17T12:46:24.732Z", "contributors": [ "AlePerez92", @@ -21300,7 +21162,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/endsWith": { + "Web/JavaScript/Reference/Global_Objects/String/endsWith": { "modified": "2020-11-17T13:03:14.946Z", "contributors": [ "AlePerez92", @@ -21309,7 +21171,7 @@ "thzunder" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/fixed": { + "Web/JavaScript/Reference/Global_Objects/String/fixed": { "modified": "2019-03-23T23:48:13.182Z", "contributors": [ "teoli", @@ -21317,19 +21179,19 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/fontcolor": { + "Web/JavaScript/Reference/Global_Objects/String/fontcolor": { "modified": "2019-03-23T22:43:01.091Z", "contributors": [ "thzunder" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/fontsize": { + "Web/JavaScript/Reference/Global_Objects/String/fontsize": { "modified": "2019-03-23T22:42:58.033Z", "contributors": [ "thzunder" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode": { + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { "modified": "2019-03-23T23:48:18.539Z", "contributors": [ "pierina27", @@ -21338,14 +21200,14 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/fromCodePoint": { + "Web/JavaScript/Reference/Global_Objects/String/fromCodePoint": { "modified": "2019-03-23T22:54:48.266Z", "contributors": [ "SphinxKnight", "iKenshu" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/includes": { + "Web/JavaScript/Reference/Global_Objects/String/includes": { "modified": "2020-11-17T13:18:02.027Z", "contributors": [ "AlePerez92", @@ -21355,7 +21217,28 @@ "jairoFg12" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/indexOf": { + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:15:27.929Z", + "contributors": [ + "Nachec", + "robertsallent", + "sujumayas", + "AriManto", + "BubuAnabelas", + "wbamberg", + "SphinxKnight", + "Gilbertrdz", + "vik231982", + "alejandrochung", + "DevManny", + "teoli", + "ADP13", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { "modified": "2019-03-18T21:12:49.473Z", "contributors": [ "aalmadar", @@ -21367,7 +21250,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/italics": { + "Web/JavaScript/Reference/Global_Objects/String/italics": { "modified": "2019-03-23T23:48:19.418Z", "contributors": [ "teoli", @@ -21375,7 +21258,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf": { + "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { "modified": "2019-03-23T23:48:26.628Z", "contributors": [ "chepegeek", @@ -21385,7 +21268,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/length": { + "Web/JavaScript/Reference/Global_Objects/String/length": { "modified": "2020-11-17T13:10:35.617Z", "contributors": [ "AlePerez92", @@ -21397,7 +21280,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/link": { + "Web/JavaScript/Reference/Global_Objects/String/link": { "modified": "2019-03-23T23:48:12.131Z", "contributors": [ "germun", @@ -21405,13 +21288,13 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/localeCompare": { + "Web/JavaScript/Reference/Global_Objects/String/localeCompare": { "modified": "2020-10-15T22:04:12.741Z", "contributors": [ "DesarrolloJon" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/match": { + "Web/JavaScript/Reference/Global_Objects/String/match": { "modified": "2019-03-23T23:48:25.734Z", "contributors": [ "germun", @@ -21421,19 +21304,19 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/matchAll": { + "Web/JavaScript/Reference/Global_Objects/String/matchAll": { "modified": "2020-10-15T22:22:31.534Z", "contributors": [ "juanarbol" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/normalize": { + "Web/JavaScript/Reference/Global_Objects/String/normalize": { "modified": "2020-10-15T22:04:13.627Z", "contributors": [ "daniel.duarte" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/padStart": { + "Web/JavaScript/Reference/Global_Objects/String/padStart": { "modified": "2019-03-23T22:19:55.544Z", "contributors": [ "teoli", @@ -21441,23 +21324,14 @@ "EdgarOrtegaRamirez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/prototype": { - "modified": "2019-03-23T23:53:48.515Z", - "contributors": [ - "DevManny", - "teoli", - "Mgjbot", - "Talisker" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/String/raw": { + "Web/JavaScript/Reference/Global_Objects/String/raw": { "modified": "2020-10-15T21:58:34.921Z", "contributors": [ "leomicheloni", "RaulRueda" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/repeat": { + "Web/JavaScript/Reference/Global_Objects/String/repeat": { "modified": "2020-10-15T21:38:22.279Z", "contributors": [ "SphinxKnight", @@ -21466,7 +21340,7 @@ "GabrielNicolasAvellaneda" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/replace": { + "Web/JavaScript/Reference/Global_Objects/String/replace": { "modified": "2020-01-29T20:30:57.565Z", "contributors": [ "camsa", @@ -21480,7 +21354,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/search": { + "Web/JavaScript/Reference/Global_Objects/String/search": { "modified": "2019-03-23T23:48:25.507Z", "contributors": [ "AlePerez92", @@ -21490,7 +21364,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/slice": { + "Web/JavaScript/Reference/Global_Objects/String/slice": { "modified": "2019-03-23T23:48:27.527Z", "contributors": [ "ibejarano", @@ -21501,14 +21375,14 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/small": { + "Web/JavaScript/Reference/Global_Objects/String/small": { "modified": "2019-03-23T23:48:20.862Z", "contributors": [ "teoli", "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/split": { + "Web/JavaScript/Reference/Global_Objects/String/split": { "modified": "2019-03-23T23:52:25.005Z", "contributors": [ "germun", @@ -21520,7 +21394,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/startsWith": { + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { "modified": "2020-11-17T06:29:46.581Z", "contributors": [ "AlePerez92", @@ -21529,7 +21403,7 @@ "mautematico" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/strike": { + "Web/JavaScript/Reference/Global_Objects/String/strike": { "modified": "2019-03-23T23:48:19.929Z", "contributors": [ "teoli", @@ -21537,7 +21411,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/sub": { + "Web/JavaScript/Reference/Global_Objects/String/sub": { "modified": "2019-03-23T23:48:12.360Z", "contributors": [ "teoli", @@ -21545,7 +21419,7 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/substr": { + "Web/JavaScript/Reference/Global_Objects/String/substr": { "modified": "2019-03-23T23:59:51.386Z", "contributors": [ "olijyat", @@ -21557,7 +21431,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/substring": { + "Web/JavaScript/Reference/Global_Objects/String/substring": { "modified": "2019-03-24T00:03:43.568Z", "contributors": [ "alejandrochung", @@ -21567,7 +21441,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/sup": { + "Web/JavaScript/Reference/Global_Objects/String/sup": { "modified": "2019-03-23T23:48:12.249Z", "contributors": [ "teoli", @@ -21575,19 +21449,19 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/toLocaleLowerCase": { + "Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase": { "modified": "2020-10-15T22:11:36.514Z", "contributors": [ "MarkCBB" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/toLocaleUpperCase": { + "Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase": { "modified": "2020-10-15T21:55:35.801Z", "contributors": [ "padrecedano" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase": { + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { "modified": "2019-03-23T23:48:13.663Z", "contributors": [ "Daniel_Martin", @@ -21598,13 +21472,13 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/toSource": { + "Web/JavaScript/Reference/Global_Objects/String/toSource": { "modified": "2020-10-15T22:22:52.809Z", "contributors": [ "SoyZatarain" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/toString": { + "Web/JavaScript/Reference/Global_Objects/String/toString": { "modified": "2019-03-23T23:48:26.799Z", "contributors": [ "teoli", @@ -21612,7 +21486,7 @@ "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase": { + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { "modified": "2019-03-23T23:48:19.033Z", "contributors": [ "hgutierrez", @@ -21621,21 +21495,44 @@ "Mgjbot" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/trimEnd": { + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2019-08-18T16:00:14.454Z", + "contributors": [ + "valen2004vega", + "raulgg", + "baumannzone", + "andrpueb", + "thzunder", + "AnuarMB" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/trimEnd": { "modified": "2020-10-15T22:32:40.984Z", "contributors": [ - "cardotrejos" + "cardotrejos" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/valueOf": { + "modified": "2019-03-23T23:48:30.713Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol/for": { + "modified": "2019-03-23T22:06:38.566Z", + "contributors": [ + "dariomaim" ] }, - "Web/JavaScript/Referencia/Objetos_globales/String/valueOf": { - "modified": "2019-03-23T23:48:30.713Z", + "Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance": { + "modified": "2019-03-23T22:06:44.647Z", "contributors": [ - "teoli", - "Talisker", - "Mgjbot" + "aeroxmotion" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Symbol": { + "Web/JavaScript/Reference/Global_Objects/Symbol": { "modified": "2019-06-24T09:01:16.062Z", "contributors": [ "PCASME", @@ -21649,19 +21546,7 @@ "joseanpg" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Symbol/for": { - "modified": "2019-03-23T22:06:38.566Z", - "contributors": [ - "dariomaim" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance": { - "modified": "2019-03-23T22:06:44.647Z", - "contributors": [ - "aeroxmotion" - ] - }, - "Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator": { + "Web/JavaScript/Reference/Global_Objects/Symbol/iterator": { "modified": "2020-10-15T22:03:24.581Z", "contributors": [ "leovenezia", @@ -21669,19 +21554,20 @@ "DJphilomath" ] }, - "Web/JavaScript/Referencia/Objetos_globales/SyntaxError": { + "Web/JavaScript/Reference/Global_Objects/SyntaxError": { "modified": "2019-03-23T22:31:22.099Z", "contributors": [ "BubuAnabelas" ] }, - "Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype": { - "modified": "2019-03-23T22:31:16.833Z", + "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { + "modified": "2019-03-23T22:12:04.645Z", "contributors": [ - "BubuAnabelas" + "SphinxKnight", + "joseluisq" ] }, - "Web/JavaScript/Referencia/Objetos_globales/TypedArray": { + "Web/JavaScript/Reference/Global_Objects/TypedArray": { "modified": "2020-10-15T21:54:18.777Z", "contributors": [ "Nachec", @@ -21690,2058 +21576,2172 @@ "fscholz" ] }, - "Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer": { - "modified": "2019-03-23T22:12:04.645Z", + "Web/JavaScript/Reference/Global_Objects/Uint8Array": { + "modified": "2019-03-23T22:26:47.572Z", "contributors": [ - "SphinxKnight", - "joseluisq" + "joseluisq", + "misan", + "pelu" ] }, - "Web/JavaScript/Referencia/Objetos_globales/URIError": { - "modified": "2020-10-15T22:14:48.739Z", + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-03-12T19:36:57.621Z", "contributors": [ - "omoldes" + "IsaacAaron", + "Undre4m", + "BubuAnabelas", + "SphinxKnight", + "teoli", + "ADP13", + "Talisker", + "Mgjbot", + "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/Uint8Array": { - "modified": "2019-03-23T22:26:47.572Z", + "Web/JavaScript/Reference/Global_Objects/unescape": { + "modified": "2020-03-12T19:43:34.960Z", "contributors": [ - "joseluisq", - "misan", - "pelu" + "DracotMolver" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap": { - "modified": "2020-10-06T14:36:19.625Z", + "Web/JavaScript/Reference/Global_Objects/URIError": { + "modified": "2020-10-15T22:14:48.739Z", "contributors": [ - "oleksandrstarov", - "SphinxKnight", - "kdex", - "frank-orellana", - "oagarcia", - "willemsh" + "omoldes" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap/clear": { + "Web/JavaScript/Reference/Global_Objects/WeakMap/clear": { "modified": "2020-10-15T22:13:14.699Z", "contributors": [ "xochilpili" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete": { + "Web/JavaScript/Reference/Global_Objects/WeakMap/delete": { "modified": "2019-03-23T22:25:14.754Z", "contributors": [ "xochilpili", "frank-orellana" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap/get": { + "Web/JavaScript/Reference/Global_Objects/WeakMap/get": { "modified": "2020-10-15T22:13:26.011Z", "contributors": [ "xochilpili" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap/has": { + "Web/JavaScript/Reference/Global_Objects/WeakMap/has": { "modified": "2020-10-15T22:13:17.587Z", "contributors": [ "xochilpili" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype": { - "modified": "2019-03-23T22:25:12.395Z", + "Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2020-10-06T14:36:19.625Z", "contributors": [ - "frank-orellana" + "oleksandrstarov", + "SphinxKnight", + "kdex", + "frank-orellana", + "oagarcia", + "willemsh" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakMap/set": { + "Web/JavaScript/Reference/Global_Objects/WeakMap/set": { "modified": "2020-10-15T22:13:19.744Z", "contributors": [ "xochilpili" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WeakSet": { + "Web/JavaScript/Reference/Global_Objects/WeakSet": { "modified": "2019-03-23T22:06:27.270Z", "contributors": [ "OliverAcosta", "roberbnd" ] }, - "Web/JavaScript/Referencia/Objetos_globales/WebAssembly": { + "Web/JavaScript/Reference/Global_Objects/WebAssembly": { "modified": "2020-10-15T22:00:20.969Z", "contributors": [ "jvalencia" ] }, - "Web/JavaScript/Referencia/Objetos_globales/decodeURI": { - "modified": "2020-03-12T19:36:57.753Z", + "Web/JavaScript/Reference/Operators/Addition": { + "modified": "2020-10-15T22:31:13.303Z", "contributors": [ - "teoli", + "lord-reptilia" + ] + }, + "Web/JavaScript/Reference/Operators/Assignment": { + "modified": "2020-10-15T22:33:15.275Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Reference/Operators/async_function": { + "modified": "2020-10-15T22:26:51.970Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/JavaScript/Reference/Operators/await": { + "modified": "2020-10-15T21:58:10.309Z", + "contributors": [ + "esjuanma", + "jpinto7", + "JavierHspn", + "rcchristiane" + ] + }, + "Web/JavaScript/Reference/Operators/class": { + "modified": "2020-03-12T19:45:04.654Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/JavaScript/Reference/Operators/Equality": { + "modified": "2020-10-15T22:33:16.730Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-03-12T19:42:08.865Z", + "contributors": [ + "mauroflamig", + "osmar-vil", + "maedca", + "CesarBustios", + "eacp", + "cornezuelo", + "joeljose" + ] + }, + "Web/JavaScript/Reference/Operators/Decrement": { + "modified": "2020-11-17T13:27:35.616Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Reference/Operators/delete": { + "modified": "2020-03-12T19:40:27.821Z", + "contributors": [ + "abaracedo", + "elenatorro", + "oagarcia", + "rippe2hl" + ] + }, + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-10-15T21:38:20.062Z", + "contributors": [ + "Nachec", + "oscaretu", + "camsa", + "nstraub", + "FiliBits", "SphinxKnight", - "ADP13", - "Mgjbot", - "Sheppy" + "emtsnz", + "moyadf", + "kdex", + "Anyulled", + "seleenne", + "rvazquezglez" ] }, - "Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent": { - "modified": "2020-03-12T19:37:00.546Z", + "Web/JavaScript/Reference/Operators/Division": { + "modified": "2020-10-15T22:33:13.828Z", "contributors": [ - "jabarrioss", + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Reference/Operators/Optional_chaining": { + "modified": "2020-10-15T22:30:07.517Z", + "contributors": [ + "glrodasz" + ] + }, + "Web/JavaScript/Reference/Operators/function*": { + "modified": "2020-10-15T22:04:00.800Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-03-12T19:37:57.703Z", + "contributors": [ + "germanf", "SphinxKnight", "teoli", - "ADP13", - "Mgjbot", - "Sheppy" + "jesanchez", + "artopal" ] }, - "Web/JavaScript/Referencia/Objetos_globales/encodeURI": { - "modified": "2020-03-12T19:36:55.391Z", + "Web/JavaScript/Reference/Operators/Grouping": { + "modified": "2020-03-12T19:41:24.847Z", "contributors": [ - "espipj", + "oagarcia" + ] + }, + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-10-15T21:19:59.064Z", + "contributors": [ + "AlePerez92", + "MMarinero", "SphinxKnight", "teoli", - "ADP13", - "Mgjbot", - "Sheppy" + "carloshs92" ] }, - "Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent": { - "modified": "2020-03-12T19:37:33.179Z", + "Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:16:41.341Z", "contributors": [ - "jazjay", + "Nachec", + "BubuAnabelas", + "oagarcia", + "Alaon", "SphinxKnight", + "Siro_Diaz", "teoli", "Mgjbot", + "Nathymig", "Sheppy" ] }, - "Web/JavaScript/Referencia/Objetos_globales/escape": { - "modified": "2020-10-15T21:56:14.356Z", + "Web/JavaScript/Reference/Operators/instanceof": { + "modified": "2020-03-12T19:37:27.128Z", "contributors": [ + "KikeSan", + "oliverhr", "SphinxKnight", - "RozyP", - "IXTRUnai" + "olivercs", + "teoli", + "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/eval": { - "modified": "2020-03-12T19:37:01.878Z", + "Web/JavaScript/Reference/Operators/Property_Accessors": { + "modified": "2020-03-12T19:37:28.144Z", "contributors": [ - "driera", - "sergio_p_d", - "_cuco_", - "ericmartinezr", + "fpoumian", + "MarkelCuesta", "SphinxKnight", "teoli", - "Mgjbot", - "Talisker", - "Sheppy" + "Talisker" + ] + }, + "Web/JavaScript/Reference/Operators/new.target": { + "modified": "2020-03-12T19:45:24.263Z", + "contributors": [ + "jorgecas" + ] + }, + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:27:34.155Z", + "contributors": [ + "Nachec", + "fercreek", + "fel.gaete", + "edsonjmv", + "fscholz", + "SphinxKnight", + "teoli", + "jansanchez" + ] + }, + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-03-12T19:43:05.807Z", + "contributors": [ + "aeroxmotion", + "eduardogm" + ] + }, + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-03-12T19:39:15.282Z", + "contributors": [ + "lopezz", + "fscholz", + "teoli", + "aerotrink" + ] + }, + "Web/JavaScript/Reference/Operators/Pipeline_operator": { + "modified": "2020-10-15T22:24:00.271Z", + "contributors": [ + "nachofelpete" + ] + }, + "Web/JavaScript/Reference/Operators/Remainder": { + "modified": "2020-12-04T18:18:23.327Z", + "contributors": [ + "lucasmmaidana" + ] + }, + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:05:27.684Z", + "contributors": [ + "jeissonh", + "samm0023", + "jelduran", + "Aerz", + "duttyapps", + "alegnaaived" ] }, - "Web/JavaScript/Referencia/Objetos_globales/isFinite": { - "modified": "2020-03-12T19:37:31.231Z", + "Web/JavaScript/Reference/Operators/Strict_equality": { + "modified": "2020-10-15T22:31:14.496Z", "contributors": [ - "SphinxKnight", - "teoli", - "jarneygm", - "Mgjbot", - "Talisker" + "lord-reptilia" ] }, - "Web/JavaScript/Referencia/Objetos_globales/isNaN": { - "modified": "2020-10-15T21:17:00.242Z", + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:36:09.783Z", "contributors": [ - "jmmarco", - "juanarbol", + "caepalomo", + "lajaso", "SphinxKnight", - "teoli", - "Mgjbot", - "Talisker" + "oagarcia" ] }, - "Web/JavaScript/Referencia/Objetos_globales/null": { - "modified": "2020-03-12T19:42:06.401Z", + "Web/JavaScript/Reference/Operators/Subtraction": { + "modified": "2020-10-15T22:31:11.477Z", "contributors": [ - "mkiramu", - "ivanagui2", - "diegoazh", - "BubuAnabelas", - "hmorv", - "AugustoEsquen", - "AsLogd" + "lord-reptilia" ] }, - "Web/JavaScript/Referencia/Objetos_globales/parseFloat": { - "modified": "2020-07-04T20:00:21.182Z", + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-04-05T17:39:51.929Z", "contributors": [ - "pilichanampe", + "ridry", + "AugustoBarco", + "Litchstarken", + "xabitrigo", + "alejandrochung", + "garciadecastro", + "Miguel-Ramirez", + "FMauricioS", "SphinxKnight", "teoli", - "Mgjbot", - "Talisker" + "chebit", + "carloshs92" ] }, - "Web/JavaScript/Referencia/Objetos_globales/parseInt": { - "modified": "2020-03-12T19:37:31.195Z", + "Web/JavaScript/Reference/Operators/typeof": { + "modified": "2020-03-12T19:37:27.888Z", "contributors": [ - "mitsurugi", - "teoli", - "daiant", + "dashaus", + "maurodibert", + "ggomez91", + "area73", + "carmelo12341", "SphinxKnight", + "teoli", + "Siro_Diaz", "Mgjbot", "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/undefined": { - "modified": "2020-03-12T19:36:57.621Z", + "Web/JavaScript/Reference/Operators/void": { + "modified": "2020-03-12T19:37:37.188Z", "contributors": [ - "IsaacAaron", - "Undre4m", - "BubuAnabelas", + "JuanMaRuiz", + "mauroc8", + "dongerardor", "SphinxKnight", "teoli", - "ADP13", - "Talisker", - "Mgjbot", - "Sheppy" + "Talisker" ] }, - "Web/JavaScript/Referencia/Objetos_globales/unescape": { - "modified": "2020-03-12T19:43:34.960Z", + "Web/JavaScript/Reference/Operators/yield*": { + "modified": "2020-03-12T19:43:03.721Z", "contributors": [ - "DracotMolver" + "germanf" ] }, - "Web/JavaScript/Referencia/Operadores": { - "modified": "2020-10-15T21:16:41.341Z", + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-10-15T21:59:31.243Z", "contributors": [ "Nachec", - "BubuAnabelas", - "oagarcia", - "Alaon", - "SphinxKnight", - "Siro_Diaz", - "teoli", - "Mgjbot", - "Nathymig", - "Sheppy" - ] - }, - "Web/JavaScript/Referencia/Operadores/Adición": { - "modified": "2020-10-15T22:31:13.303Z", - "contributors": [ - "lord-reptilia" + "nicoan", + "Binariado", + "hamfree", + "juliandavidmr" ] }, - "Web/JavaScript/Referencia/Operadores/Aritméticos": { - "modified": "2020-10-15T21:17:29.666Z", + "Web/JavaScript/Reference/Statements/block": { + "modified": "2020-03-12T19:37:26.144Z", "contributors": [ - "lajaso", - "nelruk", - "enesimo", + "IsaacAaron", "SphinxKnight", "teoli", - "Mgjbot", - "Nathymig" + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Asignacion": { - "modified": "2020-10-15T22:33:15.275Z", + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-03-12T19:37:25.893Z", "contributors": [ - "FranciscoImanolSuarez" + "SphinxKnight", + "teoli", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Assignment_Operators": { - "modified": "2020-07-23T18:11:35.190Z", + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-03-12T19:43:15.247Z", "contributors": [ - "n306r4ph", - "esreal12", - "BrodaNoel", - "maxbfmv55", - "maxbfmv" + "AlePerez92", + "PauPeinado" ] }, - "Web/JavaScript/Referencia/Operadores/Bitwise_Operators": { - "modified": "2020-03-12T19:42:13.818Z", + "Web/JavaScript/Reference/Statements/const": { + "modified": "2020-05-18T16:35:39.912Z", "contributors": [ - "Binariado", - "hugomosh", - "EduardoSebastian", - "jnreynoso", - "mizhac", - "lizzie136", - "josewhitetower", - "miparnisari", - "elenatorro", - "CarlosRuizAscacibar" + "jorgetoloza", + "Daniel_Martin", + "SphinxKnight", + "calbertts", + "IsaacAaron", + "MarkelCuesta", + "zucchinidev", + "teoli", + "Scipion" ] }, - "Web/JavaScript/Referencia/Operadores/Comparacion": { - "modified": "2020-10-15T22:33:16.730Z", + "Web/JavaScript/Reference/Statements/continue": { + "modified": "2020-03-12T19:37:24.424Z", "contributors": [ - "FranciscoImanolSuarez" + "SphinxKnight", + "teoli", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Comparison_Operators": { - "modified": "2020-10-15T21:37:54.340Z", + "Web/JavaScript/Reference/Statements/debugger": { + "modified": "2020-03-12T19:43:07.073Z", "contributors": [ - "FranciscoImanolSuarez", - "lajaso", - "mfuentesg" + "VictorAbdon", + "ericpennachini" ] }, - "Web/JavaScript/Referencia/Operadores/Conditional_Operator": { - "modified": "2020-03-12T19:42:08.865Z", + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-03-19T20:41:26.735Z", "contributors": [ - "mauroflamig", - "osmar-vil", - "maedca", - "CesarBustios", - "eacp", - "cornezuelo", - "joeljose" + "danielclavijo19380", + "AlePerez92", + "SphinxKnight", + "teoli", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Decremento": { - "modified": "2020-11-17T13:27:35.616Z", + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-03-12T19:45:08.866Z", "contributors": [ - "FranciscoImanolSuarez" + "Undre4m" ] }, - "Web/JavaScript/Referencia/Operadores/Destructuring_assignment": { - "modified": "2020-10-15T21:38:20.062Z", + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-15T21:13:05.178Z", "contributors": [ - "Nachec", - "oscaretu", - "camsa", - "nstraub", - "FiliBits", + "AlePerez92", + "frank-orellana", + "fxisco", + "hmorv", + "guumo", + "Jdiaz", "SphinxKnight", - "emtsnz", - "moyadf", - "kdex", - "Anyulled", - "seleenne", - "rvazquezglez" + "teoli", + "Scipion" ] }, - "Web/JavaScript/Referencia/Operadores/Division": { - "modified": "2020-10-15T22:33:13.828Z", + "Web/JavaScript/Reference/Statements/for-await...of": { + "modified": "2020-10-15T22:22:58.735Z", "contributors": [ - "FranciscoImanolSuarez" + "daniel.duarte" ] }, - "Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional": { - "modified": "2020-10-15T22:30:07.517Z", + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-10-15T21:14:45.435Z", "contributors": [ - "glrodasz" + "Nachec", + "VichoReyes", + "antonygiomarx", + "tenthlive", + "enmanuelduran", + "manatico4", + "pardo-bsso", + "jsinner", + "Carlos-T", + "mariosotoxoom", + "SphinxKnight", + "teoli", + "angeldiaz", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Grouping": { - "modified": "2020-03-12T19:41:24.847Z", + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-03-12T19:43:09.602Z", "contributors": [ - "oagarcia" + "camsa", + "chabisoriano", + "petermota", + "Bumxu", + "jdazacon", + "Angarsk8" ] }, - "Web/JavaScript/Referencia/Operadores/Miembros": { - "modified": "2020-03-12T19:37:28.144Z", + "Web/JavaScript/Reference/Statements/for": { + "modified": "2020-03-12T19:37:24.852Z", "contributors": [ - "fpoumian", - "MarkelCuesta", "SphinxKnight", "teoli", "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Operadores_lógicos": { - "modified": "2020-03-12T19:42:52.811Z", - "contributors": [ - "albertor21", - "JuanMacias", - "lifescripter" - ] - }, - "Web/JavaScript/Referencia/Operadores/Operator_Precedence": { - "modified": "2020-03-12T19:39:15.282Z", + "Web/JavaScript/Reference/Statements/async_function": { + "modified": "2020-10-15T21:53:45.353Z", "contributors": [ - "lopezz", - "fscholz", - "teoli", - "aerotrink" + "docxml", + "fitojb", + "mnax001", + "lexnapoles", + "JooseNavarro", + "feserafim" ] }, - "Web/JavaScript/Referencia/Operadores/Pipeline_operator": { - "modified": "2020-10-15T22:24:00.271Z", + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-03-12T19:41:28.405Z", "contributors": [ - "nachofelpete" + "SphinxKnight", + "kdex", + "cnexans", + "mlealvillarreal", + "TheBronx", + "mrtuto2012", + "rippe2hl", + "germanfr" ] }, - "Web/JavaScript/Referencia/Operadores/Resto": { - "modified": "2020-12-04T18:18:23.327Z", + "Web/JavaScript/Reference/Statements/function": { + "modified": "2020-03-12T19:37:28.203Z", "contributors": [ - "lucasmmaidana" + "SphinxKnight", + "teoli", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/Sintaxis_Spread": { - "modified": "2020-10-15T22:05:27.684Z", + "Web/JavaScript/Reference/Statements/if...else": { + "modified": "2020-03-12T19:35:35.125Z", "contributors": [ - "jeissonh", - "samm0023", - "jelduran", - "Aerz", - "duttyapps", - "alegnaaived" + "IsaacAaron", + "SphinxKnight", + "teoli", + "Pablo_Cabrera", + "Mgjbot", + "Sheppy" ] }, - "Web/JavaScript/Referencia/Operadores/Spread_operator": { - "modified": "2020-03-12T19:41:27.743Z", + "Web/JavaScript/Reference/Statements/import.meta": { + "modified": "2020-10-15T22:29:50.934Z", "contributors": [ - "SphinxKnight", - "Scipion", - "oagarcia" + "cinthylli" ] }, - "Web/JavaScript/Referencia/Operadores/Strict_equality": { - "modified": "2020-10-15T22:31:14.496Z", + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:37:35.456Z", "contributors": [ - "lord-reptilia" + "AlePerez92", + "frank-orellana", + "feserafim", + "guumo", + "javiernunez", + "Siro_Diaz", + "jepumares" ] }, - "Web/JavaScript/Referencia/Operadores/Sustracción": { - "modified": "2020-10-15T22:31:11.477Z", + "Web/JavaScript/Reference/Statements": { + "modified": "2020-05-11T14:52:51.956Z", "contributors": [ - "lord-reptilia" + "chrisdavidmills", + "Daniel_Martin", + "ffulgencio", + "BubuAnabelas", + "katrina.warsaw", + "SphinxKnight", + "teoli", + "Nathymig", + "Sheppy" ] }, - "Web/JavaScript/Referencia/Operadores/async_function": { - "modified": "2020-10-15T22:26:51.970Z", + "Web/JavaScript/Reference/Statements/label": { + "modified": "2020-03-12T19:37:26.348Z", "contributors": [ - "IsraelFloresDGA" + "SphinxKnight", + "teoli", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/await": { - "modified": "2020-10-15T21:58:10.309Z", + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-12-07T12:54:41.333Z", "contributors": [ - "esjuanma", - "jpinto7", - "JavierHspn", - "rcchristiane" + "FacuBustamaante", + "Nachec", + "jomoji", + "SphinxKnight", + "IsaacAaron", + "Braulyw8", + "MarkelCuesta", + "Th3Cod3", + "kdex", + "devlcp", + "fjcapdevila", + "mishelashala", + "madroneropaulo", + "nicobot", + "jtanori" ] }, - "Web/JavaScript/Referencia/Operadores/class": { - "modified": "2020-03-12T19:45:04.654Z", + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-03-12T19:37:28.480Z", "contributors": [ - "AlePerez92" + "devconcept", + "rrodriguez", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/delete": { - "modified": "2020-03-12T19:40:27.821Z", + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-12-10T14:59:55.680Z", "contributors": [ - "abaracedo", - "elenatorro", - "oagarcia", - "rippe2hl" + "Celiamf", + "EliottoYT", + "RubiVG", + "nahif", + "jesusvillalta", + "SSantiago90", + "Herkom", + "renetejada7", + "rafaelgus", + "garciadecastro", + "MarioAr", + "Cubo", + "esmarti", + "christpher_c" ] }, - "Web/JavaScript/Referencia/Operadores/function": { - "modified": "2020-03-12T19:37:57.703Z", + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-03-12T19:37:27.469Z", "contributors": [ - "germanf", + "imNicoSuarez", "SphinxKnight", "teoli", - "jesanchez", - "artopal" - ] - }, - "Web/JavaScript/Referencia/Operadores/function*": { - "modified": "2020-10-15T22:04:00.800Z", - "contributors": [ - "daniel.duarte" + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/in": { - "modified": "2020-10-15T21:19:59.064Z", + "Web/JavaScript/Reference/Statements/try...catch": { + "modified": "2020-05-28T10:16:13.325Z", "contributors": [ + "dkmstr", + "BubuAnabelas", + "henryvanner", "AlePerez92", - "MMarinero", + "ManuelRubio", + "JooseNavarro", + "juanrapoport", + "habax", "SphinxKnight", "teoli", - "carloshs92" + "Mgjbot", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/instanceof": { - "modified": "2020-03-12T19:37:27.128Z", + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-03-12T19:36:22.778Z", "contributors": [ - "KikeSan", - "oliverhr", + "IsaacAaron", + "carlo.romero1991", "SphinxKnight", - "olivercs", "teoli", - "Talisker" + "Scipion", + "Mgjbot", + "Sheppy" ] }, - "Web/JavaScript/Referencia/Operadores/new": { - "modified": "2020-10-15T21:27:34.155Z", + "Web/JavaScript/Reference/Statements/while": { + "modified": "2020-03-12T19:35:40.292Z", "contributors": [ - "Nachec", - "fercreek", - "fel.gaete", - "edsonjmv", - "fscholz", + "MaurooRen", "SphinxKnight", "teoli", - "jansanchez" + "Pablo_Cabrera", + "Mgjbot", + "Talisker" ] }, - "Web/JavaScript/Referencia/Operadores/new.target": { - "modified": "2020-03-12T19:45:24.263Z", + "Web/JavaScript/Reference/Statements/with": { + "modified": "2020-03-12T19:42:08.065Z", "contributors": [ - "jorgecas" + "MarkelCuesta", + "lokcito" ] }, - "Web/JavaScript/Referencia/Operadores/operador_coma": { - "modified": "2020-03-12T19:43:05.807Z", + "Web/JavaScript/Reference/Template_literals": { + "modified": "2020-10-14T18:58:58.164Z", "contributors": [ - "aeroxmotion", - "eduardogm" + "Magdiel", + "sanchezalvarezjp", + "JuanWTF", + "IsaacLf", + "theelmix", + "SphinxKnight", + "MarkelCuesta", + "kdex", + "mishelashala", + "orasio" ] }, - "Web/JavaScript/Referencia/Operadores/super": { - "modified": "2020-10-15T21:36:09.783Z", + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-09-01T08:31:36.135Z", "contributors": [ - "caepalomo", - "lajaso", - "SphinxKnight", - "oagarcia" + "Nachec", + "pmcarballo", + "VictorSan45", + "DaniNz", + "jlopezfdez", + "mariodev12", + "javier_junin", + "GdoSan", + "unaisainz", + "oleurud", + "JavierHspn", + "jlmurgas", + "rivacubano", + "aaguilera", + "StripTM", + "bicentenario", + "NatiiDC", + "NicolasMendoza", + "LeoHirsch", + "lomejordejr", + "rogeliomtx", + "Jarkaos" ] }, - "Web/JavaScript/Referencia/Operadores/this": { - "modified": "2020-04-05T17:39:51.929Z", + "Web/JavaScript/Typed_arrays": { + "modified": "2020-10-15T21:37:33.978Z", "contributors": [ - "ridry", - "AugustoBarco", - "Litchstarken", - "xabitrigo", - "alejandrochung", - "garciadecastro", - "Miguel-Ramirez", - "FMauricioS", - "SphinxKnight", - "teoli", - "chebit", - "carloshs92" + "Nachec", + "LeoE" ] }, - "Web/JavaScript/Referencia/Operadores/typeof": { - "modified": "2020-03-12T19:37:27.888Z", + "Web/MathML/Element": { + "modified": "2019-03-23T23:37:26.121Z", "contributors": [ - "dashaus", - "maurodibert", - "ggomez91", - "area73", - "carmelo12341", - "SphinxKnight", "teoli", - "Siro_Diaz", - "Mgjbot", - "Talisker" + "emejotados" ] }, - "Web/JavaScript/Referencia/Operadores/void": { - "modified": "2020-03-12T19:37:37.188Z", + "Web/MathML/Element/math": { + "modified": "2020-10-15T22:06:20.810Z", "contributors": [ - "JuanMaRuiz", - "mauroc8", - "dongerardor", - "SphinxKnight", - "teoli", - "Talisker" + "Undigon" ] }, - "Web/JavaScript/Referencia/Operadores/yield": { - "modified": "2020-10-15T21:59:31.243Z", + "Web/Performance/Optimizing_startup_performance": { + "modified": "2019-04-04T17:42:18.542Z", "contributors": [ - "Nachec", - "nicoan", - "Binariado", - "hamfree", - "juliandavidmr" + "c-torres" ] }, - "Web/JavaScript/Referencia/Operadores/yield*": { - "modified": "2020-03-12T19:43:03.721Z", + "Web/Progressive_web_apps/Developer_guide/Installing": { + "modified": "2020-09-20T03:25:41.762Z", "contributors": [ - "germanf" + "Nachec" ] }, - "Web/JavaScript/Referencia/Palabras_Reservadas": { - "modified": "2019-03-23T23:46:34.387Z", + "Web/Security/Same-origin_policy": { + "modified": "2020-12-10T07:41:38.226Z", "contributors": [ - "gsalinase", - "Gabrielth2206", - "Heramalva", - "teoli", - "Sheppy", - "Nathymig" + "ojgarciab", + "robertsallent", + "Abelhg" ] }, - "Web/JavaScript/Referencia/Sentencias": { - "modified": "2020-05-11T14:52:51.956Z", + "Web/Security/Securing_your_site/Turning_off_form_autocompletion": { + "modified": "2019-03-23T22:04:06.546Z", "contributors": [ - "chrisdavidmills", - "Daniel_Martin", - "ffulgencio", - "BubuAnabelas", - "katrina.warsaw", - "SphinxKnight", - "teoli", - "Nathymig", - "Sheppy" + "samus128", + "Hoosep" ] }, - "Web/JavaScript/Referencia/Sentencias/Empty": { - "modified": "2020-03-12T19:45:08.866Z", + "Web/SVG/Element/glyph": { + "modified": "2019-03-23T22:53:24.929Z", "contributors": [ - "Undre4m" + "Sebastianz", + "saeioul" ] }, - "Web/JavaScript/Referencia/Sentencias/block": { - "modified": "2020-03-12T19:37:26.144Z", + "orphaned/Web/SVG/SVG_en_Firefox_1.5": { + "modified": "2019-03-23T23:42:07.791Z", "contributors": [ - "IsaacAaron", - "SphinxKnight", "teoli", - "Talisker" + "Mgjbot", + "Jorolo", + "Arcnor" ] }, - "Web/JavaScript/Referencia/Sentencias/break": { - "modified": "2020-03-12T19:37:25.893Z", + "Web/SVG/Tutorial/Introduction": { + "modified": "2019-03-18T21:32:37.330Z", "contributors": [ - "SphinxKnight", - "teoli", - "Talisker" + "Undigon", + "d-go" ] }, - "Web/JavaScript/Referencia/Sentencias/class": { - "modified": "2020-03-12T19:43:15.247Z", + "Web/Tutorials": { + "modified": "2020-11-30T04:19:10.869Z", "contributors": [ - "AlePerez92", - "PauPeinado" + "blanchart", + "mastertrooper", + "Enesimus", + "ewan-m", + "Yes197", + "VlixesItaca", + "pucherico", + "CristopherAE", + "fperaltaN", + "isabelcarrod", + "Sheppy", + "iKenshu", + "JuanC_01", + "ubermensch79", + "cynthia", + "rubencidlara", + "fmagrosoto", + "CarlosQuijano", + "diegogaysaez" ] }, - "Web/JavaScript/Referencia/Sentencias/const": { - "modified": "2020-05-18T16:35:39.912Z", + "Web/XML/XML_introduction": { + "modified": "2019-07-25T12:38:17.842Z", "contributors": [ - "jorgetoloza", - "Daniel_Martin", - "SphinxKnight", - "calbertts", - "IsaacAaron", - "MarkelCuesta", - "zucchinidev", - "teoli", - "Scipion" + "jugonzalez40", + "ExE-Boss", + "npcsayfail", + "israel-munoz", + "Mgjbot", + "Superruzafa", + "Fedora-core", + "Jorolo" ] }, - "Web/JavaScript/Referencia/Sentencias/continue": { - "modified": "2020-03-12T19:37:24.424Z", + "Web/XPath/Axes/ancestor-or-self": { + "modified": "2019-01-16T16:11:00.606Z", "contributors": [ - "SphinxKnight", - "teoli", - "Talisker" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/debugger": { - "modified": "2020-03-12T19:43:07.073Z", + "Web/XPath/Axes/ancestor": { + "modified": "2019-01-16T16:11:09.049Z", "contributors": [ - "VictorAbdon", - "ericpennachini" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/default": { - "modified": "2020-10-15T22:11:48.475Z", + "Web/XPath/Axes/attribute": { + "modified": "2019-01-16T16:11:03.106Z", "contributors": [ - "Davids-Devel" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/do...while": { - "modified": "2020-03-19T20:41:26.735Z", + "Web/XPath/Axes/child": { + "modified": "2019-01-16T16:11:02.142Z", "contributors": [ - "danielclavijo19380", - "AlePerez92", - "SphinxKnight", - "teoli", - "Talisker" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/export": { - "modified": "2020-10-15T21:13:05.178Z", + "Web/XPath/Axes/descendant-or-self": { + "modified": "2019-01-16T16:11:00.088Z", "contributors": [ - "AlePerez92", - "frank-orellana", - "fxisco", - "hmorv", - "guumo", - "Jdiaz", - "SphinxKnight", - "teoli", - "Scipion" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/for": { - "modified": "2020-03-12T19:37:24.852Z", + "Web/XPath/Axes/descendant": { + "modified": "2019-01-16T16:11:00.301Z", "contributors": [ - "SphinxKnight", - "teoli", - "Talisker" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/for-await...of": { - "modified": "2020-10-15T22:22:58.735Z", + "Web/XPath/Axes/following-sibling": { + "modified": "2019-01-16T16:11:02.465Z", "contributors": [ - "daniel.duarte" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/for...in": { - "modified": "2020-10-15T21:14:45.435Z", + "Web/XPath/Axes/following": { + "modified": "2019-01-16T16:10:55.079Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Axes": { + "modified": "2019-03-18T20:59:19.791Z", "contributors": [ - "Nachec", - "VichoReyes", - "antonygiomarx", - "tenthlive", - "enmanuelduran", - "manatico4", - "pardo-bsso", - "jsinner", - "Carlos-T", - "mariosotoxoom", "SphinxKnight", - "teoli", - "angeldiaz", - "Talisker" + "ExE-Boss", + "Mgjbot", + "Jorolo", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/for...of": { - "modified": "2020-03-12T19:43:09.602Z", + "Web/XPath/Axes/namespace": { + "modified": "2019-01-16T16:10:55.086Z", "contributors": [ - "camsa", - "chabisoriano", - "petermota", - "Bumxu", - "jdazacon", - "Angarsk8" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/funcion_asincrona": { - "modified": "2020-10-15T21:53:45.353Z", + "Web/XPath/Axes/parent": { + "modified": "2019-01-16T16:10:56.130Z", "contributors": [ - "docxml", - "fitojb", - "mnax001", - "lexnapoles", - "JooseNavarro", - "feserafim" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/function": { - "modified": "2020-03-12T19:37:28.203Z", + "Web/XPath/Axes/preceding-sibling": { + "modified": "2019-01-16T16:10:57.298Z", "contributors": [ - "SphinxKnight", - "teoli", - "Talisker" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/function*": { - "modified": "2020-03-12T19:41:28.405Z", + "Web/XPath/Axes/preceding": { + "modified": "2019-01-16T16:11:08.778Z", "contributors": [ - "SphinxKnight", - "kdex", - "cnexans", - "mlealvillarreal", - "TheBronx", - "mrtuto2012", - "rippe2hl", - "germanfr" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/if...else": { - "modified": "2020-03-12T19:35:35.125Z", + "Web/XPath/Functions/contains": { + "modified": "2019-01-16T15:50:22.864Z", "contributors": [ - "IsaacAaron", - "SphinxKnight", - "teoli", - "Pablo_Cabrera", + "ExE-Boss", "Mgjbot", - "Sheppy" + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/import": { - "modified": "2020-10-15T21:37:35.456Z", + "Web/XPath/Functions": { + "modified": "2019-03-23T22:09:03.742Z", "contributors": [ - "AlePerez92", - "frank-orellana", - "feserafim", - "guumo", - "javiernunez", - "Siro_Diaz", - "jepumares" + "ExE-Boss", + "Zoditu" ] }, - "Web/JavaScript/Referencia/Sentencias/import.meta": { - "modified": "2020-10-15T22:29:50.934Z", + "Web/XPath/Functions/substring": { + "modified": "2019-01-16T15:50:01.578Z", "contributors": [ - "cinthylli" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/label": { - "modified": "2020-03-12T19:37:26.348Z", + "Web/XPath/Functions/true": { + "modified": "2019-03-18T20:59:19.925Z", "contributors": [ "SphinxKnight", - "teoli", - "Talisker" + "ExE-Boss", + "Mgjbot", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/let": { - "modified": "2020-12-07T12:54:41.333Z", + "Web/XSLT/Element/apply-imports": { + "modified": "2019-03-18T20:59:15.544Z", "contributors": [ - "FacuBustamaante", - "Nachec", - "jomoji", "SphinxKnight", - "IsaacAaron", - "Braulyw8", - "MarkelCuesta", - "Th3Cod3", - "kdex", - "devlcp", - "fjcapdevila", - "mishelashala", - "madroneropaulo", - "nicobot", - "jtanori" + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Referencia/Sentencias/return": { - "modified": "2020-03-12T19:37:28.480Z", + "Web/XSLT/Element/apply-templates": { + "modified": "2019-03-18T20:59:18.352Z", "contributors": [ - "devconcept", - "rrodriguez", "SphinxKnight", - "teoli", + "chrisdavidmills", "Mgjbot", - "Talisker" + "ErickCastellanos" ] }, - "Web/JavaScript/Referencia/Sentencias/switch": { - "modified": "2020-12-10T14:59:55.680Z", + "Web/XSLT/Element/attribute-set": { + "modified": "2019-03-18T20:59:20.997Z", "contributors": [ - "Celiamf", - "EliottoYT", - "RubiVG", - "nahif", - "jesusvillalta", - "SSantiago90", - "Herkom", - "renetejada7", - "rafaelgus", - "garciadecastro", - "MarioAr", - "Cubo", - "esmarti", - "christpher_c" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Referencia/Sentencias/throw": { - "modified": "2020-03-12T19:37:27.469Z", + "Web/XSLT/Element/attribute": { + "modified": "2019-03-18T20:59:20.857Z", "contributors": [ - "imNicoSuarez", "SphinxKnight", - "teoli", - "Talisker" + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Referencia/Sentencias/try...catch": { - "modified": "2020-05-28T10:16:13.325Z", + "Web/XSLT/Element/call-template": { + "modified": "2019-03-18T20:59:16.448Z", "contributors": [ - "dkmstr", - "BubuAnabelas", - "henryvanner", - "AlePerez92", - "ManuelRubio", - "JooseNavarro", - "juanrapoport", - "habax", "SphinxKnight", - "teoli", + "chrisdavidmills", "Mgjbot", - "Talisker" + "ErickCastellanos" ] }, - "Web/JavaScript/Referencia/Sentencias/var": { - "modified": "2020-03-12T19:36:22.778Z", + "Web/XSLT/Element/choose": { + "modified": "2019-03-18T20:59:21.136Z", "contributors": [ - "IsaacAaron", - "carlo.romero1991", "SphinxKnight", - "teoli", - "Scipion", + "chrisdavidmills", "Mgjbot", - "Sheppy" + "ErickCastellanos", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/while": { - "modified": "2020-03-12T19:35:40.292Z", + "Web/XSLT/Element/comment": { + "modified": "2019-03-18T20:59:15.680Z", "contributors": [ - "MaurooRen", "SphinxKnight", - "teoli", - "Pablo_Cabrera", + "chrisdavidmills", "Mgjbot", - "Talisker" + "ErickCastellanos", + "Cmayo" ] }, - "Web/JavaScript/Referencia/Sentencias/with": { - "modified": "2020-03-12T19:42:08.065Z", + "Web/XSLT/Element/copy-of": { + "modified": "2019-03-18T20:59:18.212Z", "contributors": [ - "MarkelCuesta", - "lokcito" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Referencia/template_strings": { - "modified": "2020-10-14T18:58:58.164Z", + "Web/XSLT/Element/copy": { + "modified": "2019-03-18T20:59:16.879Z", "contributors": [ - "Magdiel", - "sanchezalvarezjp", - "JuanWTF", - "IsaacLf", - "theelmix", "SphinxKnight", - "MarkelCuesta", - "kdex", - "mishelashala", - "orasio" + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Shells": { - "modified": "2020-03-12T19:44:40.392Z", + "Web/XSLT/Element/decimal-format": { + "modified": "2019-03-18T20:59:17.054Z", "contributors": [ - "davidenriq11", - "mamptecnocrata" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Una_re-introducción_a_JavaScript": { - "modified": "2020-09-01T08:31:36.135Z", + "Web/XSLT/Element/fallback": { + "modified": "2019-03-18T20:59:15.971Z", "contributors": [ - "Nachec", - "pmcarballo", - "VictorSan45", - "DaniNz", - "jlopezfdez", - "mariodev12", - "javier_junin", - "GdoSan", - "unaisainz", - "oleurud", - "JavierHspn", - "jlmurgas", - "rivacubano", - "aaguilera", - "StripTM", - "bicentenario", - "NatiiDC", - "NicolasMendoza", - "LeoHirsch", - "lomejordejr", - "rogeliomtx", - "Jarkaos" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/Vectores_tipados": { - "modified": "2020-10-15T21:37:33.978Z", + "Web/XSLT/Element/for-each": { + "modified": "2019-03-18T20:59:16.114Z", "contributors": [ - "Nachec", - "LeoE" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/JavaScript/enumeracion_y_propietario_de_propiedades": { - "modified": "2020-08-30T03:56:15.697Z", + "Web/XSLT/Element/if": { + "modified": "2019-03-18T20:59:17.200Z", "contributors": [ - "Nachec", - "teoli", - "LeoHirsch" + "SphinxKnight", + "chrisdavidmills", + "Jrbellido", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/Manifest": { - "modified": "2020-07-18T01:40:57.131Z", + "Web/XSLT/Element/import": { + "modified": "2019-03-18T20:59:15.818Z", "contributors": [ - "angelmlucero", - "ardillan", - "Zellius", - "Pablo_Bangueses", - "luisabarca", - "malonson", - "AlePerez92" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/MathML": { - "modified": "2020-10-15T21:24:26.572Z", + "Web/XSLT/Element/include": { + "modified": "2019-03-18T20:59:17.940Z", "contributors": [ - "Undigon", - "teoli", - "fred.wang", - "ChaitanyaGSNR" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/MathML/Attribute": { - "modified": "2019-03-23T23:26:57.621Z", + "Web/XSLT/Element/key": { + "modified": "2019-03-18T20:59:21.931Z", "contributors": [ - "LuifeR", - "ccarruitero", - "maedca" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/MathML/Authoring": { - "modified": "2019-03-23T23:27:02.180Z", + "Web/XSLT/Element/message": { + "modified": "2019-03-18T20:59:16.585Z", "contributors": [ - "rafaqtro", - "fred.wang", - "voylinux", - "robertoasq", - "maedca" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" ] }, - "Web/MathML/Elemento": { - "modified": "2019-03-23T23:37:26.121Z", + "Web/XSLT/Element/namespace-alias": { + "modified": "2019-03-18T20:59:19.621Z", "contributors": [ - "teoli", - "emejotados" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/MathML/Elemento/math": { - "modified": "2020-10-15T22:06:20.810Z", + "Web/XSLT/Element/number": { + "modified": "2019-03-18T20:59:21.341Z", "contributors": [ - "Undigon" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" ] }, - "Web/MathML/Examples": { - "modified": "2019-03-23T23:25:26.042Z", + "Web/XSLT/Element/otherwise": { + "modified": "2019-03-18T20:59:16.726Z", "contributors": [ - "nielsdg" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" ] }, - "Web/MathML/Examples/MathML_Pythagorean_Theorem": { - "modified": "2019-03-23T23:25:28.102Z", + "Web/XSLT/Transforming_XML_with_XSLT": { + "modified": "2019-01-16T16:11:59.562Z", "contributors": [ - "osvaldobaeza" + "chrisdavidmills", + "Superruzafa", + "Mgjbot", + "Jorolo", + "Ivanfrade", + "Piltrafeta", + "Nukeador" ] }, - "Web/Media": { - "modified": "2020-07-15T09:47:41.711Z", + "Web/XSLT/Element/when": { + "modified": "2019-03-18T20:59:18.078Z", "contributors": [ - "Sheppy" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" ] }, - "Web/Media/Formats": { - "modified": "2020-07-15T09:47:42.018Z", + "Web/XSLT/Element/with-param": { + "modified": "2019-03-18T20:59:17.348Z", "contributors": [ - "Sheppy" + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" ] }, - "Web/Media/Formats/Containers": { - "modified": "2020-07-15T09:47:51.166Z", + "Web/API/Battery_Status_API": { + "modified": "2019-03-23T23:25:28.703Z", "contributors": [ - "hugojavierduran9" + "sinfallas" ] }, - "Web/Performance": { - "modified": "2019-04-04T19:28:41.844Z", + "Web/API/Pointer_Lock_API": { + "modified": "2019-03-23T23:28:21.712Z", "contributors": [ - "arekucr", - "chrisdavidmills" + "fscholz", + "arquigames", + "joredjs" ] }, - "Web/Performance/Fundamentals": { - "modified": "2019-05-05T06:54:02.458Z", + "Web/API/Geolocation_API": { + "modified": "2019-05-04T15:09:02.013Z", "contributors": [ - "c-torres" + "mauroarcet", + "claudionebbia", + "pixelmin", + "guissellavillarreal", + "untilbit", + "BRIGIDAMATTERA", + "cizquierdof", + "rubencidlara", + "lfentanes", + "diegogarcia" ] }, - "Web/Performance/How_browsers_work": { - "modified": "2020-09-10T10:11:23.592Z", + "Web/API/WebRTC_API/Session_lifetime": { + "modified": "2019-03-23T23:26:58.387Z", "contributors": [ - "sancarbar" + "maedca", + "voylinux" ] }, - "Web/Performance/mejorando_rendimienot_inicial": { - "modified": "2019-04-04T17:42:18.542Z", + "Web/API/Media_Streams_API": { + "modified": "2019-03-23T23:26:56.897Z", "contributors": [ - "c-torres" + "palfrei", + "maedca" ] }, - "Web/Progressive_web_apps": { - "modified": "2020-09-20T04:18:55.064Z", + "Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC": { + "modified": "2019-03-23T23:27:02.999Z", "contributors": [ - "Nachec", - "Enesimus", - "chrisdavidmills", - "hypnotic-frog", - "javichito" + "pablocubico", + "maedca" ] }, - "Web/Progressive_web_apps/App_structure": { - "modified": "2020-09-20T03:39:21.273Z", + "Web/API/WebRTC_API/Taking_still_photos": { + "modified": "2019-03-23T23:26:57.758Z", "contributors": [ - "Nachec", - "NicolasKuhn" + "robertoasq", + "maedca" ] }, - "Web/Progressive_web_apps/Developer_guide": { - "modified": "2020-09-20T03:25:40.381Z", + "conflicting/Web/API/WebSockets_API": { + "modified": "2019-01-16T13:56:47.847Z", "contributors": [ - "Deng_C1" + "inma_610" ] }, - "Web/Progressive_web_apps/Developer_guide/Instalar": { - "modified": "2020-09-20T03:25:41.762Z", + "Glossary/XHTML": { + "modified": "2019-03-23T23:46:04.272Z", "contributors": [ - "Nachec" + "Mgjbot", + "Jorolo", + "Nukeador" ] }, - "Web/Progressive_web_apps/Installable_PWAs": { - "modified": "2020-09-20T03:54:28.154Z", + "orphaned/XPInstall_API_Reference": { + "modified": "2019-01-16T15:37:54.457Z", "contributors": [ - "Nachec" + "Eddomita" ] }, - "Web/Progressive_web_apps/Introduction": { - "modified": "2020-09-20T03:34:06.424Z", + "Mozilla/Firefox/Releases/3/Full_page_zoom": { + "modified": "2019-03-23T23:50:26.114Z", "contributors": [ - "Nachec", - "gastono.442", - "tw1ttt3r", - "santi324", - "chrisdavidmills" + "wbamberg", + "Nukeador", + "Mariano", + "Mgjbot" ] }, - "Web/Progressive_web_apps/Loading": { - "modified": "2020-09-20T04:08:37.661Z", + "conflicting/Web/API/Document_Object_Model": { + "modified": "2019-03-24T00:02:47.149Z", "contributors": [ - "Nachec" + "fscholz", + "Mgjbot", + "Nathymig", + "Jorolo" ] }, - "Web/Progressive_web_apps/Offline_Service_workers": { - "modified": "2020-09-20T03:45:55.671Z", + "conflicting/Web/OpenSearch": { + "modified": "2019-01-16T15:27:59.157Z", "contributors": [ - "Nachec" + "Mgjbot", + "Superruzafa", + "Lesmo sft", + "Nukeador" ] }, - "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { - "modified": "2020-09-20T04:04:04.639Z", + "conflicting/Mozilla/Add-ons": { + "modified": "2019-03-23T23:19:24.053Z", "contributors": [ - "Nachec" + "martin.weingart", + "Josele89" ] }, - "Web/Progressive_web_apps/Ventajas": { - "modified": "2019-11-03T14:52:14.998Z", + "Mozilla/Developer_guide/Build_Instructions": { + "modified": "2019-03-23T23:58:55.256Z", "contributors": [ - "totopizzahn" + "teoli", + "DoctorRomi", + "Mgjbot", + "Blank zero" ] }, - "Web/Reference": { - "modified": "2019-03-23T23:21:27.898Z", + "conflicting/Web/HTML/Global_attributes/spellcheck": { + "modified": "2019-03-23T23:54:20.583Z", "contributors": [ "raecillacastellana", "vltamara", - "asero82", - "atlas7jean", - "Nickolay" + "MxJ3susDi4z", + "teoli", + "Mgjbot", + "Jorolo", + "Omnisilver", + "Nukeador" ] }, - "Web/Reference/API": { - "modified": "2019-03-23T23:20:25.941Z", + "conflicting/Web/Guide": { + "modified": "2019-03-23T23:43:57.691Z", "contributors": [ - "AlePerez92", - "jhia", - "welm", - "vggallego", - "DeiberChacon", - "angmauricio", - "vitoco", - "CristianMar25", - "gesifred", - "cmeraz", - "davy.martinez" + "Mgjbot", + "Jorolo" ] }, - "Web/SVG": { - "modified": "2019-03-23T23:44:20.243Z", + "conflicting/Web/API/Web_Storage_API": { + "modified": "2019-03-24T00:11:21.014Z", "contributors": [ - "Undigon", - "Noradrex", - "teoli", - "Verruckt", - "Jorolo", + "AshfaqHossain", + "StripTM", + "RickieesES", + "inma_610", "Mgjbot", - "Josebagar" + "Superruzafa", + "Nukeador" ] }, - "Web/SVG/Attribute": { - "modified": "2019-08-04T03:46:23.452Z", + "conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d": { + "modified": "2019-03-24T00:03:50.113Z", "contributors": [ - "jcortesa", - "chrisdavidmills" + "ethertank", + "fscholz", + "Mgjbot", + "Nukeador", + "Jorolo", + "Takenbot", + "julionc", + "Versae" ] }, - "Web/SVG/Attribute/stop-color": { - "modified": "2020-10-15T22:06:34.292Z", + "conflicting/Web/API/HTML_Drag_and_Drop_API": { + "modified": "2019-03-23T23:18:26.504Z", "contributors": [ - "andcal" + "drewp" ] }, - "Web/SVG/Attribute/transform": { - "modified": "2019-03-23T22:07:32.328Z", + "conflicting/Web/HTML/Global_attributes": { + "modified": "2019-03-18T21:19:21.658Z", "contributors": [ - "dimuziop" + "PabloDeTorre" ] }, - "Web/SVG/Element": { - "modified": "2019-03-19T13:42:20.553Z", + "conflicting/Glossary/Doctype": { + "modified": "2019-01-17T00:20:06.485Z", "contributors": [ - "borja", - "jmanquez", - "kscarfone" + "wilfridoSantos" ] }, - "Web/SVG/Element/a": { - "modified": "2020-10-15T22:16:15.979Z", + "conflicting/Web/HTML/Element": { + "modified": "2020-01-21T22:36:54.135Z", "contributors": [ - "borja" + "losfroger", + "cocoletzimata", + "Duque61", + "raecillacastellana", + "maymaury", + "squidjam", + "on3_g" ] }, - "Web/SVG/Element/animate": { - "modified": "2020-10-15T22:09:39.514Z", + "conflicting/Learn": { + "modified": "2020-07-16T22:22:13.785Z", "contributors": [ - "evaferreira" + "hamfree" ] }, - "Web/SVG/Element/circle": { - "modified": "2019-03-23T22:57:12.727Z", + "conflicting/MDN/Contribute/Getting_started": { + "modified": "2019-01-16T18:56:38.941Z", "contributors": [ "wbamberg", - "Sebastianz", - "humbertaco" + "MauricioGil", + "LeoHirsch" ] }, - "Web/SVG/Element/foreignObject": { - "modified": "2019-03-23T23:05:21.297Z", + "MDN/Guidelines/CSS_style_guide": { + "modified": "2020-09-30T15:28:56.171Z", "contributors": [ - "Sebastianz", - "THernandez03" + "chrisdavidmills", + "wbamberg", + "Jeremie", + "LeoHirsch" ] }, - "Web/SVG/Element/g": { - "modified": "2019-03-23T22:54:18.875Z", + "conflicting/MDN/Yari": { + "modified": "2019-01-16T19:06:06.895Z", "contributors": [ - "Sebastianz", - "teoli", - "FrankzWolf" + "wbamberg", + "Jeremie", + "MauricioGil" ] }, - "Web/SVG/Element/glifo": { - "modified": "2019-03-23T22:53:24.929Z", + "conflicting/MDN/Yari_13d770b50d5ab9ce747962b2552e0eef": { + "modified": "2019-03-23T23:15:25.956Z", "contributors": [ - "Sebastianz", - "saeioul" + "wbamberg", + "Jeremie", + "MauricioGil" ] }, - "Web/SVG/Element/rect": { - "modified": "2019-03-23T23:02:06.920Z", + "conflicting/MDN/Tools": { + "modified": "2020-12-14T09:30:27.029Z", "contributors": [ "wbamberg", - "roadev", - "Sebastianz", - "jdgarrido" + "Sheppy" ] }, - "Web/SVG/Element/style": { - "modified": "2019-03-23T22:54:27.955Z", + "orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox": { + "modified": "2019-03-23T22:45:27.399Z", + "contributors": [ + "yuniers" + ] + }, + "conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14": { + "modified": "2019-06-16T19:12:21.185Z", + "contributors": [ + "jesusvillalta", + "Sheppy", + "Nathymig" + ] + }, + "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": { + "modified": "2019-01-16T15:43:53.805Z", + "contributors": [ + "Dailosmm", + "Mgjbot", + "Jorolo", + "Nukeador", + "Epaclon", + "Pasky" + ] + }, + "conflicting/Tools/Performance": { + "modified": "2020-07-16T22:35:28.621Z", "contributors": [ - "Sebastianz", - "teoli", - "rippe2hl" + "MrDaza" ] }, - "Web/SVG/Element/svg": { - "modified": "2020-11-04T10:23:00.659Z", + "conflicting/Tools/about:debugging": { + "modified": "2020-07-16T22:35:41.552Z", "contributors": [ - "hardy.rafael17", - "Mcch", - "diegovinie", - "BubuAnabelas", - "mbenitez01" + "stephiemtz" ] }, - "Web/SVG/Element/text": { - "modified": "2020-05-14T06:42:53.448Z", + "conflicting/Web/Progressive_web_apps": { + "modified": "2019-03-23T23:32:50.922Z", "contributors": [ - "danielhiguerasgoold", - "Sebastianz", - "emorc" + "fitojb", + "pacommozilla", + "wfranck", + "rafael_mora", + "htrellez" ] }, - "Web/SVG/Element/use": { - "modified": "2019-03-23T22:58:09.476Z", + "conflicting/Web/Guide/Mobile": { + "modified": "2019-03-23T23:32:51.331Z", "contributors": [ - "andysierra", - "Sebastianz", - "jorge_castro" + "wbamberg" ] }, - "Web/SVG/Index": { - "modified": "2019-01-16T22:36:49.773Z", + "Web/API/DocumentOrShadowRoot/getSelection": { + "modified": "2019-03-23T22:54:50.239Z", "contributors": [ - "jwhitlock", - "ComplementosMozilla" + "Diferno" ] }, - "Web/SVG/SVG_en_Firefox_1.5": { - "modified": "2019-03-23T23:42:07.791Z", + "Web/API/DocumentOrShadowRoot/styleSheets": { + "modified": "2019-03-23T23:58:05.224Z", "contributors": [ + "fscholz", + "jsx", "teoli", - "Mgjbot", - "Jorolo", - "Arcnor" + "HenryGR" ] }, - "Web/SVG/Tutorial": { - "modified": "2020-01-15T20:06:40.249Z", + "Web/API/HTMLElement/accessKey": { + "modified": "2019-03-23T22:26:12.172Z", "contributors": [ - "dago.d.havana", - "jpriet0", - "d-go", - "Npmada", - "teoli", - "Jeremie" + "SoftwareRVG" ] }, - "Web/SVG/Tutorial/Getting_Started": { - "modified": "2019-03-23T23:19:26.348Z", + "conflicting/Web/API": { + "modified": "2019-03-23T22:26:11.317Z", "contributors": [ - "kevinricardojs", - "teoli", - "Alberpat" + "SoftwareRVG" ] }, - "Web/SVG/Tutorial/Introducción": { - "modified": "2019-03-18T21:32:37.330Z", + "Web/API/GlobalEventHandlers/ongotpointercapture": { + "modified": "2019-03-23T22:25:49.346Z", "contributors": [ - "Undigon", - "d-go" + "SoftwareRVG" ] }, - "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { - "modified": "2019-03-23T23:21:05.945Z", + "Web/API/GlobalEventHandlers/onlostpointercapture": { + "modified": "2019-03-23T22:25:49.190Z", "contributors": [ - "chrisdavidmills", - "matrimonio", - "verma21", - "marelin" + "SoftwareRVG" ] }, - "Web/SVG/Tutorial/Tools_for_SVG": { - "modified": "2019-03-20T13:46:46.393Z", + "Web/API/Document/createEvent": { + "modified": "2019-03-23T22:01:26.841Z", "contributors": [ - "James-Yaakov" + "AlePerez92" ] }, - "Web/Security": { - "modified": "2019-09-10T16:32:01.356Z", + "conflicting/Web/API/Geolocation": { + "modified": "2019-03-23T23:01:31.642Z", "contributors": [ - "SphinxKnight", - "npcsayfail", - "lejovaar7", - "fgcalderon", - "pablodonoso", - "marumari" + "fscholz" ] }, - "Web/Security/CSP": { - "modified": "2019-03-23T22:48:09.013Z", + "conflicting/Web/API/Node": { + "modified": "2019-03-23T22:08:57.260Z", "contributors": [ - "Anteojudo", - "Nydv" + "tureey" ] }, - "Web/Security/CSP/CSP_policy_directives": { - "modified": "2019-03-23T22:46:40.903Z", + "conflicting/Web/API/Push_API": { + "modified": "2019-03-23T22:19:10.252Z", "contributors": [ - "rafamagno", - "maedca" + "YulianD" ] }, - "Web/Security/CSP/Introducing_Content_Security_Policy": { - "modified": "2019-01-16T21:25:25.758Z", + "conflicting/Web/API/Crypto/getRandomValues": { + "modified": "2019-03-23T22:25:15.548Z", "contributors": [ - "Anteojudo", - "Nydv" + "Jeremie" ] }, - "Web/Security/Same-origin_politica": { - "modified": "2020-12-10T07:41:38.226Z", + "conflicting/Web/API/Window/localStorage": { + "modified": "2020-07-20T09:10:56.525Z", "contributors": [ - "ojgarciab", - "robertsallent", - "Abelhg" + "LucasMaciasAtala", + "moniqaveiga", + "Andresrodart", + "lsphantom" ] }, - "Web/Security/Securing_your_site": { - "modified": "2019-03-23T22:04:13.465Z", + "conflicting/Web/API/URL": { + "modified": "2019-03-23T22:38:17.598Z", "contributors": [ - "fgcalderon", - "mbm" + "israelfl" ] }, - "Web/Security/Securing_your_site/desactivar_autocompletado_formulario": { - "modified": "2019-03-23T22:04:06.546Z", + "conflicting/Web/API/WindowOrWorkerGlobalScope": { + "modified": "2019-03-23T23:03:15.466Z", "contributors": [ - "samus128", - "Hoosep" + "teoli" ] }, - "Web/Tutoriales": { - "modified": "2020-11-30T04:19:10.869Z", + "conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a": { + "modified": "2019-03-23T23:01:30.065Z", "contributors": [ - "blanchart", - "mastertrooper", - "Enesimus", - "ewan-m", - "Yes197", - "VlixesItaca", - "pucherico", - "CristopherAE", - "fperaltaN", - "isabelcarrod", - "Sheppy", - "iKenshu", - "JuanC_01", - "ubermensch79", - "cynthia", - "rubencidlara", - "fmagrosoto", - "CarlosQuijano", - "diegogaysaez" + "fscholz" ] }, - "Web/Web_Components": { - "modified": "2020-05-21T13:06:07.299Z", + "conflicting/Web/CSS/:placeholder-shown": { + "modified": "2019-03-23T22:33:30.015Z", "contributors": [ - "aguilerajl", - "Ktoxcon", - "IsraelFloresDGA", - "mboo", - "Rodmore", - "maybe" + "teoli", + "pekechis" ] }, - "Web/Web_Components/Custom_Elements": { - "modified": "2019-03-23T22:21:51.809Z", + "conflicting/Web/CSS/:placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891": { + "modified": "2019-03-23T22:29:24.542Z", "contributors": [ - "cawilff", - "AlePerez92", - "fipadron", - "V.Morantes" + "teoli", + "pekechis" ] }, - "Web/Web_Components/Using_custom_elements": { - "modified": "2020-06-28T18:39:06.239Z", + "Web/CSS/:is": { + "modified": "2019-03-23T22:17:18.601Z", "contributors": [ - "lupomontero", - "aguilerajl" + "israel-munoz" ] }, - "Web/Web_Components/Using_shadow_DOM": { - "modified": "2020-10-24T17:36:39.409Z", + "conflicting/Web/CSS/::placeholder": { + "modified": "2019-03-23T22:29:22.118Z", "contributors": [ - "jephsanchez", - "Charlemagnes", - "quintero_japon", - "DavidGalvis" + "teoli", + "pekechis" ] }, - "Web/Web_Components/Using_templates_and_slots": { - "modified": "2020-03-26T15:38:45.869Z", + "conflicting/Web/CSS/::placeholder_70bda352bb504ebdd6cd3362879e2479": { + "modified": "2019-03-18T21:16:20.006Z", "contributors": [ - "olalinv", - "quintero_japon", - "BrunoUY", - "ulisestrujillo" + "teoli", + "pekechis" ] }, - "Web/XML": { - "modified": "2019-03-18T21:18:03.528Z", + "Web/CSS/box-ordinal-group": { + "modified": "2019-03-23T22:36:12.257Z", "contributors": [ - "ExE-Boss" + "pekechis" ] }, - "Web/XML/Introducción_a_XML": { - "modified": "2019-07-25T12:38:17.842Z", + "conflicting/Web/CSS/cursor": { + "modified": "2019-03-23T22:35:57.612Z", "contributors": [ - "jugonzalez40", - "ExE-Boss", - "npcsayfail", - "israel-munoz", - "Mgjbot", - "Superruzafa", - "Fedora-core", - "Jorolo" + "pekechis" ] }, - "Web/XPath": { - "modified": "2019-01-16T14:32:30.886Z", + "Web/CSS/font-language-override": { + "modified": "2019-03-23T23:13:49.521Z", "contributors": [ - "ExE-Boss", - "fscholz", - "Mgjbot", - "Jorolo" + "martinezdario55" ] }, - "Web/XPath/Ejes": { - "modified": "2019-03-18T20:59:19.791Z", + "Web/CSS/mask-clip": { + "modified": "2019-03-23T22:35:47.057Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Mgjbot", - "Jorolo", - "Cmayo" + "pekechis" ] }, - "Web/XPath/Ejes/ancestor": { - "modified": "2019-01-16T16:11:09.049Z", + "Web/CSS/mask-image": { + "modified": "2019-03-23T22:35:45.973Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "hectorcano", + "pekechis" ] }, - "Web/XPath/Ejes/ancestor-or-self": { - "modified": "2019-01-16T16:11:00.606Z", + "Web/CSS/mask-origin": { + "modified": "2019-03-23T22:35:46.533Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "pekechis" ] }, - "Web/XPath/Ejes/attribute": { - "modified": "2019-01-16T16:11:03.106Z", + "Web/CSS/mask-position": { + "modified": "2019-03-23T22:38:37.922Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "teoli", + "Simplexible", + "Prinz_Rana", + "pekechis", + "Kuiki" ] }, - "Web/XPath/Ejes/child": { - "modified": "2019-01-16T16:11:02.142Z", + "Web/CSS/mask-repeat": { + "modified": "2019-03-23T22:35:46.401Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "pekechis" + ] + }, + "Web/CSS/mask": { + "modified": "2019-03-23T22:35:50.079Z", + "contributors": [ + "pekechis" ] }, - "Web/XPath/Ejes/descendant": { - "modified": "2019-01-16T16:11:00.301Z", + "conflicting/Web/CSS/@viewport": { + "modified": "2019-03-18T21:38:59.253Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "israel-munoz" ] }, - "Web/XPath/Ejes/descendant-or-self": { - "modified": "2019-01-16T16:11:00.088Z", + "conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848": { + "modified": "2019-03-18T21:16:26.082Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "israel-munoz" ] }, - "Web/XPath/Ejes/following": { - "modified": "2019-01-16T16:10:55.079Z", + "conflicting/Web/CSS/width": { + "modified": "2019-01-16T15:41:51.944Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" ] }, - "Web/XPath/Ejes/following-sibling": { - "modified": "2019-01-16T16:11:02.465Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-23T23:39:38.906Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "teoli", + "jsalinas" ] }, - "Web/XPath/Ejes/namespace": { - "modified": "2019-01-16T16:10:55.086Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22": { + "modified": "2019-03-24T00:11:28.788Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "fernandomoreno605", + "DavidWebcreate", + "aguilarcarlos", + "teoli", + "LeoHirsch", + "dusvilopez", + "turekon", + "Izel" ] }, - "Web/XPath/Ejes/parent": { - "modified": "2019-01-16T16:10:56.130Z", + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:41:48.399Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "teoli" ] }, - "Web/XPath/Ejes/preceding": { - "modified": "2019-01-16T16:11:08.778Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { + "modified": "2019-03-23T22:17:03.740Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "israel-munoz" ] }, - "Web/XPath/Ejes/preceding-sibling": { - "modified": "2019-01-16T16:10:57.298Z", + "Web/CSS/CSS_Color": { + "modified": "2019-03-23T22:23:30.277Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "betelleclerc", + "Krenair" ] }, - "Web/XPath/Funciones": { - "modified": "2019-03-23T22:09:03.742Z", + "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": { + "modified": "2019-03-23T22:31:07.427Z", "contributors": [ - "ExE-Boss", - "Zoditu" + "miguelsp" ] }, - "Web/XPath/Funciones/contains": { - "modified": "2019-01-16T15:50:22.864Z", + "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-05-15T19:01:41.614Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "luzbelmex", + "VictorSan45", + "NeXuZZ-SCM", + "Tonylu11", + "javier_junin", + "AlePerez92", + "MMariscal", + "fscholz", + "ArcangelZith", + "FNK", + "rippe2hl", + "StripTM", + "joan.leon", + "arturo_sanz" ] }, - "Web/XPath/Funciones/substring": { - "modified": "2019-01-16T15:50:01.578Z", + "Web/CSS/url()": { + "modified": "2020-01-10T13:46:46.404Z", "contributors": [ - "ExE-Boss", - "Mgjbot", - "Cmayo" + "roocce" ] }, - "Web/XPath/Funciones/true": { - "modified": "2019-03-18T20:59:19.925Z", + "Web/CSS/column-gap": { + "modified": "2020-10-15T22:01:06.788Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Mgjbot", - "Cmayo" + "agarcilazo", + "klaufel" ] }, - "Web/XSLT": { - "modified": "2019-03-23T23:44:23.657Z", + "Web/CSS/gap": { + "modified": "2019-03-23T22:13:30.250Z", "contributors": [ - "chrisdavidmills", - "Verruckt", - "Mgjbot", - "Jorolo", - "Nukeador", - "Piltrafeta" + "ireneml.fr" ] }, - "Web/XSLT/Element": { - "modified": "2019-03-18T20:59:16.316Z", + "conflicting/Learn/CSS/Building_blocks": { + "modified": "2019-03-23T23:02:20.733Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "chrisdavidmills", - "fscholz", - "Jorolo", - "ErickCastellanos" + "albaluna" ] }, - "Web/XSLT/Element/element": { - "modified": "2019-03-18T20:59:21.788Z", + "conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-23T23:02:26.342Z", "contributors": [ - "SphinxKnight", - "ExE-Boss", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "carlos.millan3", + "eljonims", + "mamptecnocrata", + "albaluna" ] }, - "Web/XSLT/Transformando_XML_con_XSLT": { - "modified": "2019-01-16T16:11:59.562Z", + "conflicting/Learn/CSS/Building_blocks/Values_and_units": { + "modified": "2019-03-23T22:59:44.751Z", "contributors": [ - "chrisdavidmills", - "Superruzafa", - "Mgjbot", - "Jorolo", - "Ivanfrade", - "Piltrafeta", - "Nukeador" + "albaluna" ] }, - "Web/XSLT/apply-imports": { - "modified": "2019-03-18T20:59:15.544Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works_194e34e451d4ace023d98021c00b3cfd": { + "modified": "2019-03-23T23:02:23.335Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "mamptecnocrata", + "albaluna" ] }, - "Web/XSLT/apply-templates": { - "modified": "2019-03-18T20:59:18.352Z", + "conflicting/Learn/CSS/First_steps": { + "modified": "2019-03-24T00:09:12.368Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "luismj", + "javierdp", + "teoli", + "inma_610" ] }, - "Web/XSLT/attribute": { - "modified": "2019-03-18T20:59:20.857Z", + "conflicting/Learn/CSS/CSS_layout": { + "modified": "2019-03-23T22:20:39.961Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "lavilofam1" ] }, - "Web/XSLT/attribute-set": { - "modified": "2019-03-18T20:59:20.997Z", + "conflicting/Learn/CSS/Styling_text/Fundamentals": { + "modified": "2019-03-23T23:02:09.062Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "albaluna" ] }, - "Web/XSLT/call-template": { - "modified": "2019-03-18T20:59:16.448Z", + "conflicting/Learn/CSS/Building_blocks/Selectors": { + "modified": "2019-03-23T23:02:22.202Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "albaluna" ] }, - "Web/XSLT/choose": { - "modified": "2019-03-18T20:59:21.136Z", + "conflicting/Web/CSS/font-variant": { + "modified": "2019-03-23T23:50:19.746Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos", - "Cmayo" + "teoli", + "FredB", + "HenryGR" ] }, - "Web/XSLT/comment": { - "modified": "2019-03-18T20:59:15.680Z", + "Web/API/HTMLMediaElement/abort_event": { + "modified": "2019-04-30T13:47:43.431Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos", - "Cmayo" + "wbamberg", + "ExE-Boss", + "fscholz", + "balboag" ] }, - "Web/XSLT/copy": { - "modified": "2019-03-18T20:59:16.879Z", + "conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10": { + "modified": "2019-03-23T23:27:17.444Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "Sheppy" ] }, - "Web/XSLT/copy-of": { - "modified": "2019-03-18T20:59:18.212Z", + "Web/API/FormData/Using_FormData_Objects": { + "modified": "2019-03-23T23:19:26.530Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "ramingar", + "Siro_Diaz", + "wilo" ] }, - "Web/XSLT/decimal-format": { - "modified": "2019-03-18T20:59:17.054Z", + "conflicting/Web/API/Canvas_API/Tutorial": { + "modified": "2019-03-23T23:19:53.719Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "teoli", + "rubencidlara" ] }, - "Web/XSLT/fallback": { - "modified": "2019-03-18T20:59:15.971Z", + "conflicting/Web/Media/Formats": { + "modified": "2019-03-23T23:26:59.594Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "wbamberg", + "vltamara", + "teoli", + "nekside" ] }, - "Web/XSLT/for-each": { - "modified": "2019-03-18T20:59:16.114Z", + "conflicting/Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2019-03-23T23:53:31.079Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", + "teoli", "Mgjbot", - "ErickCastellanos" + "Jorolo" ] }, - "Web/XSLT/if": { - "modified": "2019-03-18T20:59:17.200Z", + "conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2019-10-10T16:52:54.661Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Jrbellido", - "Mgjbot", - "ErickCastellanos" + "ElNobDeTfm", + "estebanz01", + "hedmon", + "blanchart", + "teoli", + "ciroid", + "cesar_ortiz_elPatox", + "StripTM", + "AngelFQC" ] }, - "Web/XSLT/import": { - "modified": "2019-03-18T20:59:15.818Z", + "conflicting/Learn/JavaScript/Objects": { + "modified": "2020-03-12T19:36:14.050Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "ivanagui2", + "libre8bit", + "alejandrochung", + "victorsanchezm", + "gchifflet", + "hmorv", + "Lorenzoygata", + "xxxtonixxx", + "joan.leon", + "fscholz", + "DeiberChacon", + "chebit", + "teoli", + "arpunk", + "inma_610", + "StripTM" ] }, - "Web/XSLT/include": { - "modified": "2019-03-18T20:59:17.940Z", + "Web/JavaScript/Reference/Global_Objects/Proxy/Proxy": { + "modified": "2020-10-15T21:58:11.434Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "fscholz" ] }, - "Web/XSLT/key": { - "modified": "2019-03-18T20:59:21.931Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-01-16T21:30:19.248Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "gfernandez" ] }, - "Web/XSLT/message": { - "modified": "2019-03-18T20:59:16.585Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:51:49.315Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos", - "Cmayo" + "lajaso", + "AzazelN28" ] }, - "Web/XSLT/namespace-alias": { - "modified": "2019-03-18T20:59:19.621Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2019-03-23T23:11:22.072Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "teoli" ] }, - "Web/XSLT/number": { - "modified": "2019-03-18T20:59:21.341Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2019-03-23T22:31:40.887Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" + "RiazaValverde" ] }, - "Web/XSLT/otherwise": { - "modified": "2019-03-18T20:59:16.726Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2019-03-23T23:53:55.022Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", + "mcardozo", + "teoli", + "shaggyrd", "Mgjbot", - "ErickCastellanos", - "Cmayo" + "Wrongloop", + "Sheppy" ] }, - "Web/XSLT/when": { - "modified": "2019-03-18T20:59:18.078Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2019-03-23T22:06:29.334Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos", - "Cmayo" + "JuanMacias" ] }, - "Web/XSLT/with-param": { - "modified": "2019-03-18T20:59:17.348Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2019-03-23T23:46:16.155Z", "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos", - "Cmayo" + "teoli", + "Sheppy" ] }, - "WebAPI": { - "modified": "2019-03-23T23:32:09.157Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:28:24.470Z", "contributors": [ - "wbamberg", - "fscholz", - "ccarruitero", - "maedca", - "ethertank", - "Jeremie" + "lajaso", + "Sergio_Gonzalez_Collado", + "educalleja", + "AlexanderEstebanZapata1994", + "emilianodiaz", + "mishelashala", + "teoli", + "diegogaysaez" ] }, - "WebAPI/Estado_de_Bateria": { - "modified": "2019-03-23T23:25:28.703Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-10-15T21:52:03.650Z", "contributors": [ - "sinfallas" + "atpollmann" ] }, - "WebAPI/Pointer_Lock": { - "modified": "2019-03-23T23:28:21.712Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2019-03-23T23:53:48.515Z", "contributors": [ - "fscholz", - "arquigames", - "joredjs" + "DevManny", + "teoli", + "Mgjbot", + "Talisker" ] }, - "WebAPI/Using_geolocation": { - "modified": "2019-05-04T15:09:02.013Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2019-03-23T22:31:16.833Z", "contributors": [ - "mauroarcet", - "claudionebbia", - "pixelmin", - "guissellavillarreal", - "untilbit", - "BRIGIDAMATTERA", - "cizquierdof", - "rubencidlara", - "lfentanes", - "diegogarcia" + "BubuAnabelas" ] }, - "WebAssembly": { - "modified": "2020-10-15T22:25:36.765Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap": { + "modified": "2019-03-23T22:25:12.395Z", "contributors": [ - "jonathan.reyes33" + "frank-orellana" ] }, - "WebAssembly/Concepts": { - "modified": "2020-12-06T14:14:45.486Z", + "conflicting/Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:17:29.666Z", "contributors": [ - "Sergio_Gonzalez_Collado", - "mastertrooper" + "lajaso", + "nelruk", + "enesimo", + "SphinxKnight", + "teoli", + "Mgjbot", + "Nathymig" ] }, - "WebAssembly/Loading_and_running": { - "modified": "2020-09-15T19:19:35.117Z", + "conflicting/Web/JavaScript/Reference/Operators_d3958587a3d3dd644852ad397eb5951b": { + "modified": "2020-07-23T18:11:35.190Z", "contributors": [ - "mastertrooper" + "n306r4ph", + "esreal12", + "BrodaNoel", + "maxbfmv55", + "maxbfmv" ] }, - "WebRTC": { - "modified": "2019-03-23T23:26:58.291Z", + "conflicting/Web/JavaScript/Reference/Operators_5c44e7d07c463ff1a5a63654f4bda87b": { + "modified": "2020-03-12T19:42:13.818Z", "contributors": [ - "sebasmagri" + "Binariado", + "hugomosh", + "EduardoSebastian", + "jnreynoso", + "mizhac", + "lizzie136", + "josewhitetower", + "miparnisari", + "elenatorro", + "CarlosRuizAscacibar" ] }, - "WebRTC/Introduction": { - "modified": "2019-03-23T23:26:58.387Z", + "conflicting/Web/JavaScript/Reference/Operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8": { + "modified": "2020-10-15T21:37:54.340Z", "contributors": [ - "maedca", - "voylinux" + "FranciscoImanolSuarez", + "lajaso", + "mfuentesg" ] }, - "WebRTC/MediaStream_API": { - "modified": "2019-03-23T23:26:56.897Z", + "conflicting/Web/JavaScript/Reference/Operators_e72d8790e25513408a18a5826660f704": { + "modified": "2020-03-12T19:42:52.811Z", "contributors": [ - "palfrei", - "maedca" + "albertor21", + "JuanMacias", + "lifescripter" ] }, - "WebRTC/Peer-to-peer_communications_with_WebRTC": { - "modified": "2019-03-23T23:27:02.999Z", + "conflicting/Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-03-12T19:41:27.743Z", "contributors": [ - "pablocubico", - "maedca" + "SphinxKnight", + "Scipion", + "oagarcia" ] }, - "WebRTC/Taking_webcam_photos": { - "modified": "2019-03-23T23:26:57.758Z", + "conflicting/Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2019-03-23T23:46:34.387Z", "contributors": [ - "robertoasq", - "maedca" + "gsalinase", + "Gabrielth2206", + "Heramalva", + "teoli", + "Sheppy", + "Nathymig" ] }, - "WebSockets": { - "modified": "2019-01-16T13:56:47.847Z", + "conflicting/Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T22:11:48.475Z", "contributors": [ - "inma_610" + "Davids-Devel" ] }, - "Web_Audio_API": { - "modified": "2019-03-23T23:31:19.634Z", + "conflicting/Web/Progressive_web_apps/Introduction": { + "modified": "2019-11-03T14:52:14.998Z", "contributors": [ - "estebanborai", - "AngelFQC", - "Pau_Ilargia", - "maedca" + "totopizzahn" ] }, - "Web_Development/Mobile": { - "modified": "2019-03-23T23:32:51.331Z", + "conflicting/Web/HTTP/Headers/Content-Security-Policy": { + "modified": "2019-03-23T22:46:40.903Z", "contributors": [ - "wbamberg" + "rafamagno", + "maedca" ] }, - "Web_Development/Mobile/Diseño_responsivo": { - "modified": "2019-03-23T23:32:50.922Z", + "conflicting/Web/HTTP/CSP": { + "modified": "2019-03-23T22:48:09.013Z", "contributors": [ - "fitojb", - "pacommozilla", - "wfranck", - "rafael_mora", - "htrellez" + "Anteojudo", + "Nydv" ] }, - "XHTML": { - "modified": "2019-03-23T23:46:04.272Z", + "conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5": { + "modified": "2019-01-16T21:25:25.758Z", "contributors": [ - "Mgjbot", - "Jorolo", - "Nukeador" + "Anteojudo", + "Nydv" ] }, - "XPInstall_API_Reference": { - "modified": "2019-01-16T15:37:54.457Z", + "conflicting/Web/Web_Components/Using_custom_elements": { + "modified": "2019-03-23T22:21:51.809Z", "contributors": [ - "Eddomita" + "cawilff", + "AlePerez92", + "fipadron", + "V.Morantes" ] }, - "Zoom_a_página_completa": { - "modified": "2019-03-23T23:50:26.114Z", + "conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3": { + "modified": "2019-03-23T23:32:09.157Z", "contributors": [ "wbamberg", - "Nukeador", - "Mariano", - "Mgjbot" + "fscholz", + "ccarruitero", + "maedca", + "ethertank", + "Jeremie" ] }, - "nsDirectoryService": { - "modified": "2019-03-23T23:40:31.943Z", + "conflicting/Web/API/WebRTC_API": { + "modified": "2019-03-23T23:26:58.291Z", "contributors": [ - "teoli", - "Breaking Pitt" + "sebasmagri" ] } } \ No newline at end of file diff --git a/files/es/conflicting/glossary/doctype/index.html b/files/es/conflicting/glossary/doctype/index.html index d59af84200..f0f6e18715 100644 --- a/files/es/conflicting/glossary/doctype/index.html +++ b/files/es/conflicting/glossary/doctype/index.html @@ -1,7 +1,8 @@ --- title: DTD -slug: Glossary/DTD +slug: conflicting/Glossary/Doctype translation_of: Glossary/Doctype translation_of_original: Glossary/DTD +original_slug: Glossary/DTD ---

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

diff --git a/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/es/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html index b47218eb7a..d927df50e1 100644 --- 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 @@ -1,8 +1,9 @@ --- title: Cascada y herencia -slug: Web/CSS/Introducción/Cascading_and_inheritance +slug: conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/CSS/Introducción/Cascading_and_inheritance ---

{{ CSSTutorialTOC() }}

diff --git a/files/es/conflicting/learn/css/building_blocks/index.html b/files/es/conflicting/learn/css/building_blocks/index.html index caccdd80b2..6c07d85ec3 100644 --- a/files/es/conflicting/learn/css/building_blocks/index.html +++ b/files/es/conflicting/learn/css/building_blocks/index.html @@ -1,8 +1,9 @@ --- title: Boxes -slug: Web/CSS/Introducción/Boxes +slug: conflicting/Learn/CSS/Building_blocks translation_of: Learn/CSS/Building_blocks translation_of_original: Web/Guide/CSS/Getting_started/Boxes +original_slug: Web/CSS/Introducción/Boxes ---

{{ CSSTutorialTOC() }}

diff --git a/files/es/conflicting/learn/css/building_blocks/selectors/index.html b/files/es/conflicting/learn/css/building_blocks/selectors/index.html index 9ebe3573e8..c15b94b415 100644 --- a/files/es/conflicting/learn/css/building_blocks/selectors/index.html +++ b/files/es/conflicting/learn/css/building_blocks/selectors/index.html @@ -1,8 +1,9 @@ --- title: Selectores -slug: Web/CSS/Introducción/Selectors +slug: conflicting/Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Web/CSS/Introducción/Selectors ---

{{ CSSTutorialTOC() }}

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 index 030fa9d692..79b7ac23cb 100644 --- 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 @@ -1,8 +1,9 @@ --- title: Color -slug: Web/CSS/Introducción/Color +slug: conflicting/Learn/CSS/Building_blocks/Values_and_units translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors translation_of_original: Web/Guide/CSS/Getting_started/Color +original_slug: Web/CSS/Introducción/Color ---

{{ CSSTutorialTOC() }}

diff --git a/files/es/conflicting/learn/css/css_layout/index.html b/files/es/conflicting/learn/css/css_layout/index.html index f71d3a82e6..86364b84fa 100644 --- a/files/es/conflicting/learn/css/css_layout/index.html +++ b/files/es/conflicting/learn/css/css_layout/index.html @@ -1,8 +1,9 @@ --- title: Layout -slug: Web/CSS/Introducción/Layout +slug: conflicting/Learn/CSS/CSS_layout translation_of: Learn/CSS/CSS_layout translation_of_original: Web/Guide/CSS/Getting_started/Layout +original_slug: Web/CSS/Introducción/Layout ---

{{ CSSTutorialTOC() }}

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 index 941f96a0e5..831a835c72 100644 --- 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 @@ -1,8 +1,9 @@ --- title: Por que usar CSS -slug: Web/CSS/Como_iniciar/Por_que_usar_CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/CSS/Como_iniciar/Por_que_usar_CSS ---

 

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

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 index f4beb05519..6db03d40c8 100644 --- 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 @@ -1,16 +1,18 @@ --- title: Cómo funciona el CSS -slug: Web/CSS/Introducción/How_CSS_works +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_194e34e451d4ace023d98021c00b3cfd tags: - CSS - 'CSS:' - - 'CSS:Empezando' + - CSS:Empezando - Diseño - Guía - Inicio - Web translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/CSS/Introducción/How_CSS_works ---

{{ CSSTutorialTOC() }}

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 index 18852f2439..a46c22f85e 100644 --- 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 @@ -1,10 +1,12 @@ --- title: Que es CSS -slug: Web/CSS/Como_iniciar/Que_es_CSS +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_a460b5a76c3c2e7fc9b8da464dfd0c22 tags: - para_revisar translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Web/CSS/Como_iniciar/Que_es_CSS ---

En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.

diff --git a/files/es/conflicting/learn/css/first_steps/index.html b/files/es/conflicting/learn/css/first_steps/index.html index 09177572fa..ffcef61e68 100644 --- a/files/es/conflicting/learn/css/first_steps/index.html +++ b/files/es/conflicting/learn/css/first_steps/index.html @@ -1,12 +1,13 @@ --- title: Introducción -slug: Web/CSS/Introducción +slug: conflicting/Learn/CSS/First_steps tags: - CSS - - 'CSS:Introducción' + - CSS:Introducción - para_revisar translation_of: Learn/CSS/First_steps translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/CSS/Introducción ---

Presentación

diff --git a/files/es/conflicting/learn/css/styling_text/fundamentals/index.html b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html index 1788c8c0ee..19c967bb6c 100644 --- a/files/es/conflicting/learn/css/styling_text/fundamentals/index.html +++ b/files/es/conflicting/learn/css/styling_text/fundamentals/index.html @@ -1,8 +1,9 @@ --- title: Los estilos de texto -slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +slug: conflicting/Learn/CSS/Styling_text/Fundamentals translation_of: Learn/CSS/Styling_text/Fundamentals translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +original_slug: Web/CSS/Introducción/Los:estilos_de_texto ---

{{ CSSTutorialTOC() }}

diff --git a/files/es/conflicting/learn/forms/index.html b/files/es/conflicting/learn/forms/index.html index c607c7993a..03824f9932 100644 --- a/files/es/conflicting/learn/forms/index.html +++ b/files/es/conflicting/learn/forms/index.html @@ -1,6 +1,6 @@ --- title: Formularios HTML -slug: Learn/HTML/Forms +slug: conflicting/Learn/Forms tags: - Featured - Forms @@ -12,6 +12,7 @@ tags: - TopicStub - Web translation_of: Learn/Forms +original_slug: Learn/HTML/Forms ---

Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   El formulario HTML  es una herramienta  cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los widgets personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!

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 index f110fc9851..e6cd3db57d 100644 --- 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 @@ -1,6 +1,6 @@ --- title: La importancia de comentar correctamente -slug: Web/HTML/La_importancia_de_comentar_correctamente +slug: conflicting/Learn/HTML/Introduction_to_HTML/Getting_started tags: - HTML - Todas_las_Categorías @@ -8,6 +8,7 @@ tags: - XML translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments translation_of_original: Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting +original_slug: Web/HTML/La_importancia_de_comentar_correctamente ---

 


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 index 77810a8e65..5598eb90bd 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Usando audio y video con HTML5 -slug: Web/HTML/Usando_audio_y_video_con_HTML5 +slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content tags: - Flash - Ogg @@ -14,6 +14,7 @@ tags: - reserva translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +original_slug: Web/HTML/Usando_audio_y_video_con_HTML5 ---

HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.

diff --git a/files/es/conflicting/learn/index.html b/files/es/conflicting/learn/index.html index 0092ba899e..066950ce62 100644 --- a/files/es/conflicting/learn/index.html +++ b/files/es/conflicting/learn/index.html @@ -1,11 +1,12 @@ --- title: Codificación-Scripting -slug: Learn/codificacion-scripting +slug: conflicting/Learn tags: - Codificación - Principiante - Scripting translation_of: Learn translation_of_original: Learn/Coding-Scripting +original_slug: Learn/codificacion-scripting ---

REDIRIGE Aprende

diff --git a/files/es/conflicting/learn/javascript/objects/index.html b/files/es/conflicting/learn/javascript/objects/index.html index 83c8f0a7c9..ae0f3827d1 100644 --- a/files/es/conflicting/learn/javascript/objects/index.html +++ b/files/es/conflicting/learn/javascript/objects/index.html @@ -1,6 +1,6 @@ --- title: Introducción a JavaScript orientado a objetos -slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos +slug: conflicting/Learn/JavaScript/Objects tags: - Constructor - Herencia @@ -11,6 +11,7 @@ tags: - espacio de nombres translation_of: Learn/JavaScript/Objects translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +original_slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos ---

{{jsSidebar("Introductory")}}

diff --git a/files/es/conflicting/mdn/contribute/getting_started/index.html b/files/es/conflicting/mdn/contribute/getting_started/index.html index 225d69bf1d..71bd6b4624 100644 --- a/files/es/conflicting/mdn/contribute/getting_started/index.html +++ b/files/es/conflicting/mdn/contribute/getting_started/index.html @@ -1,8 +1,9 @@ --- title: Cosas para hacer en MDN -slug: MDN/Contribute/Tareas +slug: conflicting/MDN/Contribute/Getting_started translation_of: MDN/Contribute/Getting_started translation_of_original: MDN/Contribute/Tasks +original_slug: MDN/Contribute/Tareas ---
{{MDNSidebar}}

¿Estás buscando formas de ayudar a mejorar MDN? Hay muchas formas de ayudar: desde corregir errores tipográficos hasta escribir nuevo contenido, o incluso ayudar a desarrollar la plataforma Kuma en la que se construye el sitio web. La guía para el contribuyente de MDN cubre todas las formas en las que puedes ayudar y cómo hacerlo. Más abajo, encontrarás listas de tareas más específicas que faltan hacer.

Hay un montón de cosas que puedes hacer para ayudar en MDN. Tenemos una guía para las tareas que puedes llevar a cabo como parte de nuestro artículo Comenzando en MDN. Entre las posibles formas de ayudar se encuentran:

diff --git a/files/es/conflicting/mdn/tools/index.html b/files/es/conflicting/mdn/tools/index.html index 7703e98dd1..98db2920e8 100644 --- a/files/es/conflicting/mdn/tools/index.html +++ b/files/es/conflicting/mdn/tools/index.html @@ -1,6 +1,6 @@ --- title: MDN user guide -slug: MDN/User_guide +slug: conflicting/MDN/Tools tags: - Documentation - Landing @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: MDN/Tools translation_of_original: MDN/User_guide +original_slug: MDN/User_guide ---
{{MDNSidebar}}

The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.

{{SubpagesWithSummaries}}

diff --git a/files/es/conflicting/mdn/yari/index.html b/files/es/conflicting/mdn/yari/index.html index afe0ce3b5a..9517a30f30 100644 --- a/files/es/conflicting/mdn/yari/index.html +++ b/files/es/conflicting/mdn/yari/index.html @@ -1,8 +1,9 @@ --- title: Primeros pasos -slug: MDN/Kuma/Contributing/Getting_started +slug: conflicting/MDN/Yari translation_of: MDN/Kuma translation_of_original: MDN/Kuma/Contributing/Getting_started +original_slug: MDN/Kuma/Contributing/Getting_started ---
{{MDNSidebar}}

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

Solución de problemas

diff --git a/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html b/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html index 9fc477a01b..bdedd4aff0 100644 --- a/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html +++ b/files/es/conflicting/mdn/yari_13d770b50d5ab9ce747962b2552e0eef/index.html @@ -1,8 +1,9 @@ --- title: Contribuir a Kuma -slug: MDN/Kuma/Contributing +slug: conflicting/MDN/Yari_13d770b50d5ab9ce747962b2552e0eef translation_of: MDN/Kuma translation_of_original: MDN/Kuma/Contributing +original_slug: MDN/Kuma/Contributing ---
{{MDNSidebar}}

Si desea contribuir al proyecto de Kuma para ayudarnos a construir una gran plataforma wiki y para hacer que el sitio de Mozilla Developer Network aun mejor, los documentos aquí deberían ayudarle a unirse en el esfuerzo.

diff --git a/files/es/conflicting/mozilla/add-ons/index.html b/files/es/conflicting/mozilla/add-ons/index.html index 615116edaf..43ecbe517c 100644 --- a/files/es/conflicting/mozilla/add-ons/index.html +++ b/files/es/conflicting/mozilla/add-ons/index.html @@ -1,8 +1,9 @@ --- title: Construyendo una extensión -slug: Building_an_Extension +slug: conflicting/Mozilla/Add-ons translation_of: Mozilla/Add-ons translation_of_original: Building_an_Extension +original_slug: Building_an_Extension ---

Introducción

diff --git a/files/es/conflicting/tools/about_colon_debugging/index.html b/files/es/conflicting/tools/about_colon_debugging/index.html index a827b255cb..2fb0a75710 100644 --- a/files/es/conflicting/tools/about_colon_debugging/index.html +++ b/files/es/conflicting/tools/about_colon_debugging/index.html @@ -1,8 +1,9 @@ --- title: Debugging over a network -slug: Tools/Remote_Debugging/Debugging_over_a_network -translation_of: 'Tools/about:debugging#Connecting_over_the_Network' +slug: conflicting/Tools/about:debugging +translation_of: Tools/about:debugging#Connecting_over_the_Network translation_of_original: Tools/Remote_Debugging/Debugging_over_a_network +original_slug: Tools/Remote_Debugging/Debugging_over_a_network ---

{{draft}}

diff --git a/files/es/conflicting/tools/performance/index.html b/files/es/conflicting/tools/performance/index.html index 23fa9e1e34..66dc76c6a1 100644 --- a/files/es/conflicting/tools/performance/index.html +++ b/files/es/conflicting/tools/performance/index.html @@ -1,8 +1,9 @@ --- title: JavaScript Profiler -slug: Tools/Profiler +slug: conflicting/Tools/Performance translation_of: Tools/Performance translation_of_original: Tools/Profiler +original_slug: Tools/Profiler ---
Utilice la herramienta de perfiles para encontrar los cuellos de botella en el código JavaScript. El Profiler muestras periódicamente la pila actual de llamadas JavaScript y compila información sobre las muestras. 
diff --git a/files/es/conflicting/web/api/canvas_api/tutorial/index.html b/files/es/conflicting/web/api/canvas_api/tutorial/index.html index 7271aabfb7..31bdbfc942 100644 --- a/files/es/conflicting/web/api/canvas_api/tutorial/index.html +++ b/files/es/conflicting/web/api/canvas_api/tutorial/index.html @@ -1,8 +1,9 @@ --- title: Dibujando gráficos con canvas -slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +slug: conflicting/Web/API/Canvas_API/Tutorial translation_of: Web/API/Canvas_API/Tutorial translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +original_slug: Web/HTML/Canvas/Drawing_graphics_with_canvas ---

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

diff --git a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html index 76e8d7fdc2..7764d268c4 100644 --- a/files/es/conflicting/web/api/crypto/getrandomvalues/index.html +++ b/files/es/conflicting/web/api/crypto/getrandomvalues/index.html @@ -1,6 +1,6 @@ --- title: RandomSource -slug: Web/API/RandomSource +slug: conflicting/Web/API/Crypto/getRandomValues tags: - API - Interface @@ -11,6 +11,7 @@ tags: - Web Crypto API translation_of: Web/API/Crypto/getRandomValues translation_of_original: Web/API/RandomSource +original_slug: Web/API/RandomSource ---

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

diff --git a/files/es/conflicting/web/api/document_object_model/index.html b/files/es/conflicting/web/api/document_object_model/index.html index 8123441661..f318f65508 100644 --- a/files/es/conflicting/web/api/document_object_model/index.html +++ b/files/es/conflicting/web/api/document_object_model/index.html @@ -1,11 +1,12 @@ --- title: Acerca del Modelo de Objetos del Documento -slug: Acerca_del_Modelo_de_Objetos_del_Documento +slug: conflicting/Web/API/Document_Object_Model tags: - DOM - Todas_las_Categorías translation_of: Web/API/Document_Object_Model translation_of_original: DOM/About_the_Document_Object_Model +original_slug: Acerca_del_Modelo_de_Objetos_del_Documento ---

¿Qué es DOM?

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 index fc26bc0bee..9e3c7c7c46 100644 --- a/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html +++ b/files/es/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -1,6 +1,6 @@ --- title: DOM developer guide -slug: Web/Guide/DOM +slug: conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 tags: - API - DOM @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/API/Document_Object_Model translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/DOM ---

{{draft}}

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

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 index 26d372847a..ae8c384e87 100644 --- a/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html +++ b/files/es/conflicting/web/api/document_object_model_7d961b8030c6099ee907f4f4b5fe6b3d/index.html @@ -1,11 +1,12 @@ --- title: DOM -slug: DOM +slug: conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d tags: - DOM - Todas_las_Categorías translation_of: Web/API/Document_Object_Model translation_of_original: DOM +original_slug: DOM ---
Acerca del Modelo de Objetos del Documento
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 index 7759932552..bd1c67c343 100644 --- a/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html +++ b/files/es/conflicting/web/api/document_object_model_9f3a59543838705de7e9b080fde3cc14/index.html @@ -1,11 +1,12 @@ --- title: Prefacio -slug: Referencia_DOM_de_Gecko/Prefacio +slug: conflicting/Web/API/Document_Object_Model_9f3a59543838705de7e9b080fde3cc14 tags: - DOM - Todas_las_Categorías translation_of: Web/API/Document_Object_Model translation_of_original: Web/API/Document_Object_Model/Preface +original_slug: Referencia_DOM_de_Gecko/Prefacio ---

« Referencia DOM de Gecko

diff --git a/files/es/conflicting/web/api/geolocation/index.html b/files/es/conflicting/web/api/geolocation/index.html index 0f8895b7b8..bd9d8f78d6 100644 --- a/files/es/conflicting/web/api/geolocation/index.html +++ b/files/es/conflicting/web/api/geolocation/index.html @@ -1,10 +1,11 @@ --- title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation +slug: conflicting/Web/API/Geolocation tags: - API translation_of: Web/API/Geolocation translation_of_original: Web/API/NavigatorGeolocation +original_slug: Web/API/NavigatorGeolocation ---

{{APIRef("Geolocation API")}}

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 index 292b860888..e8dd96166b 100644 --- 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 @@ -1,11 +1,12 @@ --- title: DragDrop -slug: DragDrop +slug: conflicting/Web/API/HTML_Drag_and_Drop_API tags: - NeedsTranslation - TopicStub translation_of: Web/API/HTML_Drag_and_Drop_API translation_of_original: DragDrop +original_slug: DragDrop ---

 

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

diff --git a/files/es/conflicting/web/api/index.html b/files/es/conflicting/web/api/index.html index c970ea8947..66f2f46da6 100644 --- a/files/es/conflicting/web/api/index.html +++ b/files/es/conflicting/web/api/index.html @@ -1,6 +1,6 @@ --- title: Element.name -slug: Web/API/Element/name +slug: conflicting/Web/API tags: - API - Compatibilidad de los navegadores @@ -12,6 +12,7 @@ tags: - actualizacion translation_of: Web/API translation_of_original: Web/API/Element/name +original_slug: Web/API/Element/name ---

{{ APIRef("DOM") }}

diff --git a/files/es/conflicting/web/api/indexeddb_api/index.html b/files/es/conflicting/web/api/indexeddb_api/index.html index 91e216833a..cdcd58724c 100644 --- a/files/es/conflicting/web/api/indexeddb_api/index.html +++ b/files/es/conflicting/web/api/indexeddb_api/index.html @@ -1,8 +1,9 @@ --- title: IndexedDB -slug: IndexedDB +slug: conflicting/Web/API/IndexedDB_API tags: - páginas_a_traducir +original_slug: IndexedDB ---

{{ SeeCompatTable() }}

diff --git a/files/es/conflicting/web/api/node/index.html b/files/es/conflicting/web/api/node/index.html index f6faf58631..2204a75c59 100644 --- a/files/es/conflicting/web/api/node/index.html +++ b/files/es/conflicting/web/api/node/index.html @@ -1,6 +1,6 @@ --- title: Nodo.nodoPrincipal -slug: Web/API/Node/nodoPrincipal +slug: conflicting/Web/API/Node tags: - API - DOM @@ -8,6 +8,7 @@ tags: - Propiedad translation_of: Web/API/Node translation_of_original: Web/API/Node/nodePrincipal +original_slug: Web/API/Node/nodoPrincipal ---
{{APIRef("DOM")}}
diff --git a/files/es/conflicting/web/api/push_api/index.html b/files/es/conflicting/web/api/push_api/index.html index 05d101e5fa..016e0abcaa 100644 --- a/files/es/conflicting/web/api/push_api/index.html +++ b/files/es/conflicting/web/api/push_api/index.html @@ -1,8 +1,9 @@ --- title: Usando la API Push -slug: Web/API/Push_API/Using_the_Push_API +slug: conflicting/Web/API/Push_API translation_of: Web/API/Push_API translation_of_original: Web/API/Push_API/Using_the_Push_API +original_slug: Web/API/Push_API/Using_the_Push_API ---

La W3C Push API offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.

diff --git a/files/es/conflicting/web/api/url/index.html b/files/es/conflicting/web/api/url/index.html index 6ca15914a4..61ab76466d 100644 --- a/files/es/conflicting/web/api/url/index.html +++ b/files/es/conflicting/web/api/url/index.html @@ -1,6 +1,6 @@ --- title: Window.URL -slug: Web/API/Window/URL +slug: conflicting/Web/API/URL tags: - API - DOM @@ -10,6 +10,7 @@ tags: - WebAPI translation_of: Web/API/URL translation_of_original: Web/API/Window/URL +original_slug: Web/API/Window/URL ---

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

diff --git a/files/es/conflicting/web/api/web_storage_api/index.html b/files/es/conflicting/web/api/web_storage_api/index.html index 6889022c7a..551f98f92d 100644 --- a/files/es/conflicting/web/api/web_storage_api/index.html +++ b/files/es/conflicting/web/api/web_storage_api/index.html @@ -1,6 +1,6 @@ --- title: Almacenamiento -slug: DOM/Almacenamiento +slug: conflicting/Web/API/Web_Storage_API tags: - DOM - JavaScript @@ -9,6 +9,7 @@ tags: - para_revisar translation_of: Web/API/Web_Storage_API translation_of_original: Web/Guide/API/DOM/Storage +original_slug: DOM/Almacenamiento ---

{{ ApiRef() }}

Introducción

diff --git a/files/es/conflicting/web/api/webrtc_api/index.html b/files/es/conflicting/web/api/webrtc_api/index.html index b8eb318529..41554256cd 100644 --- a/files/es/conflicting/web/api/webrtc_api/index.html +++ b/files/es/conflicting/web/api/webrtc_api/index.html @@ -1,8 +1,9 @@ --- title: WebRTC -slug: WebRTC +slug: conflicting/Web/API/WebRTC_API translation_of: Web/API/WebRTC_API translation_of_original: WebRTC +original_slug: WebRTC ---

El RTC en WebRTC significa Real-Time Communications, o comunicaciones en tiempo real, en español. WebRTC es una tecnología que permite compartir en tiempo real datos de audio y video entre navegadores (pares). Como conjunto de estándares, WebRTC provee a cualquier navegador de la capacidad de compartir datos de aplicación y realizar teleconferencias de par a par, sin la necesidad de instalar complementos o Software de terceros.

Los componentes de WebRTC son utilizados a través de interfaces avanzadaz de programación en JavaScript (APIs). Actualmente se están desarrollando la API de streaming a través de la red, que representa los flujos de datos de audio y vídeo, y la API PeerConnection, que permite a dos o más usuarios realizar conexiones navegador a navegador. Igualmente en desarrollo se encuentra la API DataChannel, que permite la transmisión de otros tipos de datos para juegos en tiempo real, mensajería instantánea, transferencia de archivos, y otros.

diff --git a/files/es/conflicting/web/api/websockets_api/index.html b/files/es/conflicting/web/api/websockets_api/index.html index f7ac10a94d..6250ba53c0 100644 --- a/files/es/conflicting/web/api/websockets_api/index.html +++ b/files/es/conflicting/web/api/websockets_api/index.html @@ -1,9 +1,10 @@ --- title: WebSockets -slug: WebSockets +slug: conflicting/Web/API/WebSockets_API tags: - WebSockets - para_revisar +original_slug: WebSockets ---

{{ SeeCompatTable () }}

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

diff --git a/files/es/conflicting/web/api/window/localstorage/index.html b/files/es/conflicting/web/api/window/localstorage/index.html index 5c46cb9559..d4307e30a4 100644 --- a/files/es/conflicting/web/api/window/localstorage/index.html +++ b/files/es/conflicting/web/api/window/localstorage/index.html @@ -1,11 +1,12 @@ --- title: LocalStorage -slug: Web/API/Storage/LocalStorage +slug: conflicting/Web/API/Window/localStorage tags: - Almacenamiento en Navegador - Almacenamiento local translation_of: Web/API/Window/localStorage translation_of_original: Web/API/Web_Storage_API/Local_storage +original_slug: Web/API/Storage/LocalStorage ---

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

diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html index 2607e635fa..881424841a 100644 --- a/files/es/conflicting/web/api/windoworworkerglobalscope/index.html +++ b/files/es/conflicting/web/api/windoworworkerglobalscope/index.html @@ -1,6 +1,6 @@ --- title: WindowBase64 -slug: Web/API/WindowBase64 +slug: conflicting/Web/API/WindowOrWorkerGlobalScope tags: - API - HTML-DOM @@ -10,6 +10,7 @@ tags: - WindowBase64 translation_of: Web/API/WindowOrWorkerGlobalScope translation_of_original: Web/API/WindowBase64 +original_slug: Web/API/WindowBase64 ---

{{APIRef}}

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

diff --git a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html index 549969232f..bede3a0c57 100644 --- a/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html +++ b/files/es/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -1,10 +1,11 @@ --- title: WindowTimers -slug: Web/API/WindowTimers +slug: conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a tags: - API translation_of: Web/API/WindowOrWorkerGlobalScope translation_of_original: Web/API/WindowTimers +original_slug: Web/API/WindowTimers ---
{{APIRef("HTML DOM")}}
diff --git a/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html index 0c189b625d..7630d77e37 100644 --- a/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ b/files/es/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -1,6 +1,6 @@ --- title: WebAPI -slug: WebAPI +slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 tags: - Apps - DOM @@ -10,6 +10,7 @@ tags: - TopicStub translation_of: Web/API translation_of_original: WebAPI +original_slug: WebAPI ---

WebAPI es un termino usado para referirse al conjunto de APIs compatibles y de acceso a los dispositivos que permite a las Web apps y contenido acceder al hardware del dispositivo (como el estado de la batería o la vibración de hardware), al igual que acceso a información almacenada en el dispositivo (como el calendario o la lista de contactos). Agregando estas APIs, esperamos expandir lo que la Web puede hacer hoy y solo plataformas propietarias fueron capaces de hacer en el pasado.

diff --git a/files/es/conflicting/web/css/@viewport/index.html b/files/es/conflicting/web/css/@viewport/index.html index bb9c54b069..613ae5a285 100644 --- a/files/es/conflicting/web/css/@viewport/index.html +++ b/files/es/conflicting/web/css/@viewport/index.html @@ -1,11 +1,12 @@ --- title: height -slug: Web/CSS/@viewport/height +slug: conflicting/Web/CSS/@viewport tags: - Descriptor CSS - Referencia translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/height +original_slug: Web/CSS/@viewport/height ---
{{CSSRef}}
diff --git a/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html index 2c550153bc..1c89eeec84 100644 --- a/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html +++ b/files/es/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -1,8 +1,9 @@ --- title: width -slug: Web/CSS/@viewport/width +slug: conflicting/Web/CSS/@viewport_c925ec0506b352ea1185248b874f7848 translation_of: Web/CSS/@viewport translation_of_original: Web/CSS/@viewport/width +original_slug: Web/CSS/@viewport/width ---
{{CSSRef}}
diff --git a/files/es/conflicting/web/css/_colon_placeholder-shown/index.html b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html index c7f84a0273..a29af2de30 100644 --- a/files/es/conflicting/web/css/_colon_placeholder-shown/index.html +++ b/files/es/conflicting/web/css/_colon_placeholder-shown/index.html @@ -1,6 +1,6 @@ --- title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' +slug: conflicting/Web/CSS/:placeholder-shown tags: - CSS - Marcador de Posición INPUT @@ -9,8 +9,9 @@ tags: - Placeholder - Pseudo-Clase CSS - Referencia CSS -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' +translation_of: Web/CSS/:placeholder-shown +translation_of_original: Web/CSS/:-moz-placeholder +original_slug: Web/CSS/:-moz-placeholder ---
Nota: La pseudo-clase CSS :-moz-placeholder está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.
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 index b83b72db1a..41ba68e25e 100644 --- a/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html +++ b/files/es/conflicting/web/css/_colon_placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891/index.html @@ -1,13 +1,14 @@ --- title: ':-ms-input-placeholder' -slug: 'Web/CSS/:-ms-input-placeholder' +slug: conflicting/Web/CSS/:placeholder-shown_f20b6cc785f9fd133a0f9fb582f36891 tags: - CSS - No estándar(2) - Pseudo clase CSS - Referencia -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-ms-input-placeholder' +translation_of: Web/CSS/:placeholder-shown +translation_of_original: Web/CSS/:-ms-input-placeholder +original_slug: Web/CSS/:-ms-input-placeholder ---
{{Non-standard_header}}{{CSSRef}}
diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html index 3c8fbb8c3a..99c5ec97ee 100644 --- a/files/es/conflicting/web/css/_doublecolon_placeholder/index.html +++ b/files/es/conflicting/web/css/_doublecolon_placeholder/index.html @@ -1,13 +1,14 @@ --- title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' +slug: conflicting/Web/CSS/::placeholder tags: - CSS - No estándar(2) - Pseudo-elemento CSS - Referencia CSS -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-placeholder' +translation_of: Web/CSS/::placeholder +translation_of_original: Web/CSS/::-moz-placeholder +original_slug: Web/CSS/::-moz-placeholder ---
{{Non-standard_header}}{{CSSRef}}
diff --git a/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html index 181f0a966c..54824a3934 100644 --- a/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html +++ b/files/es/conflicting/web/css/_doublecolon_placeholder_70bda352bb504ebdd6cd3362879e2479/index.html @@ -1,6 +1,6 @@ --- title: '::-webkit-input-placeholder' -slug: 'Web/CSS/::-webkit-input-placeholder' +slug: conflicting/Web/CSS/::placeholder_70bda352bb504ebdd6cd3362879e2479 tags: - CSS - NeedsExample @@ -9,8 +9,9 @@ tags: - Pseudo-elemento CSS - Referencia - Referencia CSS -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-webkit-input-placeholder' +translation_of: Web/CSS/::placeholder +translation_of_original: Web/CSS/::-webkit-input-placeholder +original_slug: Web/CSS/::-webkit-input-placeholder ---
{{Non-standard_header}}{{CSSRef}}
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 index dd39986ed4..c2fb316660 100644 --- 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 @@ -1,8 +1,9 @@ --- title: Usando las cajas flexibles CSS -slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS ---
{{CSSRef}}
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 index e42553fe97..e28553d037 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Usando flexbox para componer aplicaciones web -slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - Avanzado - CSS @@ -10,6 +10,7 @@ tags: - Web translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web ---

{{CSSRef}}

diff --git a/files/es/conflicting/web/css/cursor/index.html b/files/es/conflicting/web/css/cursor/index.html index 213b3607c0..a1b674c1c7 100644 --- a/files/es/conflicting/web/css/cursor/index.html +++ b/files/es/conflicting/web/css/cursor/index.html @@ -1,10 +1,11 @@ --- title: '-moz-cell' -slug: Web/CSS/-moz-cell +slug: conflicting/Web/CSS/cursor tags: - CSS translation_of: Web/CSS/cursor translation_of_original: Web/CSS/-moz-cell +original_slug: Web/CSS/-moz-cell ---
{{CSSRef}}{{obsolete_header}}
diff --git a/files/es/conflicting/web/css/font-variant/index.html b/files/es/conflicting/web/css/font-variant/index.html index 332e284385..09f79f2844 100644 --- a/files/es/conflicting/web/css/font-variant/index.html +++ b/files/es/conflicting/web/css/font-variant/index.html @@ -1,8 +1,9 @@ --- title: normal -slug: Web/CSS/normal +slug: conflicting/Web/CSS/font-variant translation_of: Web/CSS/font-variant translation_of_original: Web/CSS/normal +original_slug: Web/CSS/normal ---

Sumario

El valor normal en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.

diff --git a/files/es/conflicting/web/css/width/index.html b/files/es/conflicting/web/css/width/index.html index c380b1b891..ade93e4cf9 100644 --- a/files/es/conflicting/web/css/width/index.html +++ b/files/es/conflicting/web/css/width/index.html @@ -1,12 +1,13 @@ --- title: auto -slug: Web/CSS/auto +slug: conflicting/Web/CSS/width tags: - CSS - - 'CSS:Referencias' + - CSS:Referencias - Todas_las_Categorías translation_of: Web/CSS/width translation_of_original: Web/CSS/auto +original_slug: Web/CSS/auto ---

<< Volver diff --git a/files/es/conflicting/web/guide/index.html b/files/es/conflicting/web/guide/index.html index d6d72dfef3..e1fb2513bd 100644 --- a/files/es/conflicting/web/guide/index.html +++ b/files/es/conflicting/web/guide/index.html @@ -1,11 +1,12 @@ --- title: Desarrollo Web -slug: Desarrollo_Web +slug: conflicting/Web/Guide tags: - Desarrollo_Web - Todas_las_Categorías translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Desarrollo_Web ---

diff --git a/files/es/conflicting/web/guide/mobile/index.html b/files/es/conflicting/web/guide/mobile/index.html index cc288a9c45..028d0c71ed 100644 --- a/files/es/conflicting/web/guide/mobile/index.html +++ b/files/es/conflicting/web/guide/mobile/index.html @@ -1,6 +1,6 @@ --- title: Mobile Web development -slug: Web_Development/Mobile +slug: conflicting/Web/Guide/Mobile tags: - Mobile - NeedsTranslation @@ -8,6 +8,7 @@ tags: - Web Development translation_of: Web/Guide/Mobile translation_of_original: Web_Development/Mobile +original_slug: Web_Development/Mobile ---

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

    diff --git a/files/es/conflicting/web/html/element/index.html b/files/es/conflicting/web/html/element/index.html index 64595418c8..ebde8fbff4 100644 --- a/files/es/conflicting/web/html/element/index.html +++ b/files/es/conflicting/web/html/element/index.html @@ -1,8 +1,9 @@ --- title: Lista de Elementos HTML5 -slug: HTML/HTML5/HTML5_lista_elementos +slug: conflicting/Web/HTML/Element translation_of: Web/HTML/Element translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +original_slug: HTML/HTML5/HTML5_lista_elementos ---

    Todos los elementos del estandar HTML5 están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al indice de elementos HTML el cual lista todas las posibles etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web.

    diff --git a/files/es/conflicting/web/html/global_attributes/index.html b/files/es/conflicting/web/html/global_attributes/index.html index 64afaf64ff..5c1df0adc7 100644 --- a/files/es/conflicting/web/html/global_attributes/index.html +++ b/files/es/conflicting/web/html/global_attributes/index.html @@ -1,6 +1,6 @@ --- title: Atributo global -slug: Glossary/Atributo_global +slug: conflicting/Web/HTML/Global_attributes tags: - CodingScripting - Glosario @@ -8,6 +8,7 @@ tags: - atributo translation_of: Web/HTML/Global_attributes translation_of_original: Glossary/Global_attribute +original_slug: Glossary/Atributo_global ---

    Los Atributos Globales son {{glossary("attribute","atributos")}} que pueden ser usados en todos los {{glossary("element","elementos")}} (aunque a veces no tienen efecto en algunos de ellos).

    diff --git a/files/es/conflicting/web/html/global_attributes/spellcheck/index.html b/files/es/conflicting/web/html/global_attributes/spellcheck/index.html index 0f409bb10e..7d8b76554b 100644 --- a/files/es/conflicting/web/html/global_attributes/spellcheck/index.html +++ b/files/es/conflicting/web/html/global_attributes/spellcheck/index.html @@ -1,6 +1,6 @@ --- title: Control de la corrección ortográfica en formularios HTML -slug: Control_de_la_corrección_ortográfica_en_formularios_HTML +slug: conflicting/Web/HTML/Global_attributes/spellcheck tags: - Desarrollo_Web - Gestión de configuración @@ -10,6 +10,7 @@ tags: - XHTML translation_of: Web/HTML/Global_attributes/spellcheck translation_of_original: Web/HTML/Controlling_spell_checking_in_HTML_forms +original_slug: Control_de_la_corrección_ortográfica_en_formularios_HTML ---

    {{ gecko_minversion_header("1.8.1") }} Firefox 2 incorpora un corrector ortográfico para las áreas y los campos de texto de los formularios web. Usando la interfaz "about:config" el usuario puede activar o desactivar el corrector, además, puede indicar si desea o no habilitar la corrección ortográfica y si debe habilitarse para áreas y campos de texto o sólo en áreas de texto.

    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 index fbd15d6764..7e325a7d49 100644 --- 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 @@ -1,11 +1,12 @@ --- title: Tipo MIME incorrecto en archivos CSS -slug: Tipo_MIME_incorrecto_en_archivos_CSS +slug: conflicting/Web/HTTP/Basics_of_HTTP/MIME_types tags: - CSS - Todas_las_Categorías translation_of: Web/HTTP/Basics_of_HTTP/MIME_types translation_of_original: Incorrect_MIME_Type_for_CSS_Files +original_slug: Tipo_MIME_incorrecto_en_archivos_CSS ---

    ¿Cuál es el problema?

    Quizás encuentres una web que use CSS con un diseño pobre en Netscape 7.x o cualquier navegador basado en Gecko como Mozilla, mientras que en Internet Explorer se muestra correctamente. Una de las razones más comunes para que esto suceda es una configuración inapropiada del servidor que tiene almacenado el archivo CSS. Algunos servidores Apache e iPlanet asocian archivos con extensión .CSS con un tipo incorrecto MIME como el "text/plain" o "application/x-pointplus". En algunos casos, Netscape 7.x y Mozilla ignoran el archivo CSS porque tiene un tipo MIME incorrecto y usan una hoja de estilo por defecto que causa que el diseño sea diferente del que se pretendía por parte del desarrollador web. diff --git a/files/es/conflicting/web/http/csp/index.html b/files/es/conflicting/web/http/csp/index.html index 6fcf1a2ff3..bb9d56164f 100644 --- a/files/es/conflicting/web/http/csp/index.html +++ b/files/es/conflicting/web/http/csp/index.html @@ -1,11 +1,12 @@ --- title: CSP (Políticas de Seguridad de Contenido) -slug: Web/Security/CSP +slug: conflicting/Web/HTTP/CSP tags: - Documento - Referencia translation_of: Web/HTTP/CSP translation_of_original: Web/Security/CSP +original_slug: Web/Security/CSP ---

    {{gecko_minversion_header("2.0")}}
    diff --git a/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html b/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html index 58960c7798..96a5cf6d8d 100644 --- a/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html +++ b/files/es/conflicting/web/http/csp_aeae68a149c6fbe64e541cbdcd6ed5c5/index.html @@ -1,6 +1,6 @@ --- title: Introducción a Políticas de Seguridad de Contenido -slug: Web/Security/CSP/Introducing_Content_Security_Policy +slug: conflicting/Web/HTTP/CSP_aeae68a149c6fbe64e541cbdcd6ed5c5 tags: - Documento - Políticas de Seguridad de Contenido @@ -8,6 +8,7 @@ tags: - Seguridad translation_of: Web/HTTP/CSP translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy +original_slug: Web/Security/CSP/Introducing_Content_Security_Policy ---

    {{ gecko_minversion_header("2") }}

    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 index c2f9c5a628..dd1cb8d720 100644 --- a/files/es/conflicting/web/http/headers/content-security-policy/index.html +++ b/files/es/conflicting/web/http/headers/content-security-policy/index.html @@ -1,8 +1,9 @@ --- title: Políticas Directivas CSP -slug: Web/Security/CSP/CSP_policy_directives +slug: conflicting/Web/HTTP/Headers/Content-Security-Policy translation_of: Web/HTTP/Headers/Content-Security-Policy translation_of_original: Web/Security/CSP/CSP_policy_directives +original_slug: Web/Security/CSP/CSP_policy_directives ---

     

    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 index fef80071de..48a3db323c 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -1,12 +1,13 @@ --- title: ArrayBuffer.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer tags: - ArrayBuffer - JavaScript - Propiedad translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype ---
    {{JSRef}}
    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 index de92c8ee02..362876f5af 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/date/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/date/index.html @@ -1,12 +1,13 @@ --- title: Date.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date tags: - Date - JavaScript - Property translation_of: Web/JavaScript/Reference/Global_Objects/Date translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype ---
    {{JSRef("Objetos_globales", "Date")}}
    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 index aac1516fc2..5540880b03 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/error/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/error/index.html @@ -1,8 +1,9 @@ --- title: Error.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error translation_of: Web/JavaScript/Reference/Global_Objects/Error translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype ---
    {{JSRef}}
    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 index 9d8671c534..20de74f338 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/function/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/function/index.html @@ -1,12 +1,13 @@ --- title: Function.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function tags: - Function - JavaScript - Property translation_of: Web/JavaScript/Reference/Global_Objects/Function translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype ---
    {{JSRef("Objetos_globales", "Function")}}
    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 index b255e65b69..557a561e76 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/map/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/map/index.html @@ -1,8 +1,9 @@ --- title: Map.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map translation_of: Web/JavaScript/Reference/Global_Objects/Map translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype ---
    {{JSRef}}
    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 index c15b5b5fcb..2f9f0a8e4e 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/number/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/number/index.html @@ -1,12 +1,13 @@ --- title: Number.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number tags: - JavaScript - Number - Property translation_of: Web/JavaScript/Reference/Global_Objects/Number translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype ---
    {{JSRef("Objetos_globales", "Number")}}
    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 index 9b55c9cccc..805aa55cf9 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,12 +1,13 @@ --- title: Object.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object tags: - JavaScript - Objeto - Propiedad translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype ---
    {{JSRef("Objetos_globales", "Object")}}
    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 index c15107912a..99fe5cfd8d 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -1,12 +1,13 @@ --- title: Promise.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise tags: - JavaScript - Promesa - Propiedad translation_of: Web/JavaScript/Reference/Global_Objects/Promise translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype ---
    {{JSRef}}
    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 index fa75157c9d..0f4dc1fde3 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -1,6 +1,6 @@ --- title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError tags: - Error - JavaScript @@ -10,6 +10,7 @@ tags: - RangeError translation_of: Web/JavaScript/Reference/Global_Objects/RangeError translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---
    {{JSRef}}
    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 index 89519b08d2..5f13679c36 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: String.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - JavaScript - Property @@ -8,6 +8,7 @@ tags: - String translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype ---

    {{JSRef("Objetos_globales", "String")}}

    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 index 2de491bc21..8fbdac1a8d 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -1,6 +1,6 @@ --- title: SyntaxError.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - SyntaxError translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype ---
    {{JSRef}}
    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 index 41d501135d..fd84aa6280 100644 --- a/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ b/files/es/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -1,6 +1,6 @@ --- title: WeakMap.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap tags: - ECMAScript6 - JavaScript @@ -8,6 +8,7 @@ tags: - WeakMap translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +original_slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype ---
    {{JSRef}}
    diff --git a/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html index 14010f37e3..0f36de5c58 100644 --- a/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html +++ b/files/es/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -1,11 +1,12 @@ --- title: Palabras Reservadas -slug: Web/JavaScript/Referencia/Palabras_Reservadas +slug: conflicting/Web/JavaScript/Reference/Lexical_grammar tags: - JavaScript - palabras reservadas translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords translation_of_original: Web/JavaScript/Reference/Reserved_Words +original_slug: Web/JavaScript/Referencia/Palabras_Reservadas ---

     

    diff --git a/files/es/conflicting/web/javascript/reference/operators/index.html b/files/es/conflicting/web/javascript/reference/operators/index.html index 71968fda85..ef6c162b92 100644 --- a/files/es/conflicting/web/javascript/reference/operators/index.html +++ b/files/es/conflicting/web/javascript/reference/operators/index.html @@ -1,11 +1,12 @@ --- title: Operadores Aritméticos -slug: Web/JavaScript/Referencia/Operadores/Aritméticos +slug: conflicting/Web/JavaScript/Reference/Operators tags: - JavaScript - Operador translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +original_slug: Web/JavaScript/Referencia/Operadores/Aritméticos ---
    {{jsSidebar("Operators")}}
    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 index 050a2026f6..f8d23e4eaa 100644 --- a/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/es/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -1,6 +1,6 @@ --- title: Operador de propagación -slug: Web/JavaScript/Referencia/Operadores/Spread_operator +slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax tags: - Experimental - Expérimental(2) @@ -8,6 +8,7 @@ tags: - Operador translation_of: Web/JavaScript/Reference/Operators/Spread_syntax translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +original_slug: Web/JavaScript/Referencia/Operadores/Spread_operator ---
    {{jsSidebar("Operators")}}
    diff --git a/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html b/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html index 8685790d2c..9c2a7a8c40 100644 --- a/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html +++ b/files/es/conflicting/web/javascript/reference/operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8/index.html @@ -1,12 +1,14 @@ --- title: Operadores de Comparación -slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_5a0acbbb60ea37d0fdc52e3bd4c3fae8 tags: - JavaScript - Operador - Referencia translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +original_slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html b/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html index c4276c1c95..7d80f90f12 100644 --- a/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html +++ b/files/es/conflicting/web/javascript/reference/operators_5c44e7d07c463ff1a5a63654f4bda87b/index.html @@ -1,11 +1,13 @@ --- title: Operadores a nivel de bit -slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_5c44e7d07c463ff1a5a63654f4bda87b tags: - JavaScript - Operador translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html b/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html index 979eff63f2..90a97a1033 100644 --- a/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html +++ b/files/es/conflicting/web/javascript/reference/operators_d3958587a3d3dd644852ad397eb5951b/index.html @@ -1,11 +1,13 @@ --- title: Operadores de asignación -slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators +slug: >- + conflicting/Web/JavaScript/Reference/Operators_d3958587a3d3dd644852ad397eb5951b tags: - JavaScript - Operador translation_of: Web/JavaScript/Reference/Operators#Assignment_operators translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +original_slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators ---
    {{jsSidebar("Operators")}}
    diff --git a/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html b/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html index 4c9cb860a9..a2a2ca8de7 100644 --- a/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html +++ b/files/es/conflicting/web/javascript/reference/operators_e72d8790e25513408a18a5826660f704/index.html @@ -1,8 +1,10 @@ --- title: Operadores lógicos -slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos +slug: >- + conflicting/Web/JavaScript/Reference/Operators_e72d8790e25513408a18a5826660f704 translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos ---
    {{jsSidebar("Operadores_lógicos")}}
    diff --git a/files/es/conflicting/web/javascript/reference/statements/switch/index.html b/files/es/conflicting/web/javascript/reference/statements/switch/index.html index a25a5a5369..c70e5eec5d 100644 --- a/files/es/conflicting/web/javascript/reference/statements/switch/index.html +++ b/files/es/conflicting/web/javascript/reference/statements/switch/index.html @@ -1,11 +1,12 @@ --- title: default -slug: Web/JavaScript/Referencia/Sentencias/default +slug: conflicting/Web/JavaScript/Reference/Statements/switch tags: - JavaScript - Palabra clave translation_of: Web/JavaScript/Reference/Statements/switch translation_of_original: Web/JavaScript/Reference/Statements/default +original_slug: Web/JavaScript/Referencia/Sentencias/default ---
    {{jsSidebar("Sentencias")}}
    diff --git a/files/es/conflicting/web/media/formats/index.html b/files/es/conflicting/web/media/formats/index.html index f342f64d11..15b4627d03 100644 --- a/files/es/conflicting/web/media/formats/index.html +++ b/files/es/conflicting/web/media/formats/index.html @@ -1,8 +1,9 @@ --- title: Formatos de medios admitidos por los elementos HTML audio y video -slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 +slug: conflicting/Web/Media/Formats translation_of: Web/Media/Formats translation_of_original: Web/HTML/Supported_media_formats +original_slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 ---

    Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} proporcionan apoyo para la reproducción de audio y video sin necesidad de plug-ins. Codecs de vídeo y codecs de audio se utilizan para manejar vídeo y audio, y los diferentes codecs ofrecen diferentes niveles de compresión y calidad. Un formato de contenedor se utiliza para almacenar y transmitir el vídeo y el audio codificado juntos. Muchos codecs y formatos de contenedor existe, e incluso hay más combinaciones de ellos. Para su uso en la web, sólo un puñado de combinaciones son relevantes.

    diff --git a/files/es/conflicting/web/opensearch/index.html b/files/es/conflicting/web/opensearch/index.html index 638147ee38..524c22557e 100644 --- a/files/es/conflicting/web/opensearch/index.html +++ b/files/es/conflicting/web/opensearch/index.html @@ -1,10 +1,11 @@ --- title: Añadir motores de búsqueda desde páginas web -slug: Añadir_motores_de_búsqueda_desde_páginas_web +slug: conflicting/Web/OpenSearch tags: - Plugins_de_búsqueda translation_of: Web/OpenSearch translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +original_slug: Añadir_motores_de_búsqueda_desde_páginas_web ---

    Firefox permite que código JavaScript instale plugins de motores de búsqueda, y soporta dos formatos de plugin de motores de búsqueda: OpenSearch, y Sherlock.

    diff --git a/files/es/conflicting/web/progressive_web_apps/index.html b/files/es/conflicting/web/progressive_web_apps/index.html index 6445a631af..4025b422b5 100644 --- a/files/es/conflicting/web/progressive_web_apps/index.html +++ b/files/es/conflicting/web/progressive_web_apps/index.html @@ -1,8 +1,9 @@ --- title: Diseño adaptable («responsivo») -slug: Web_Development/Mobile/Diseño_responsivo +slug: conflicting/Web/Progressive_web_apps translation_of: Web/Progressive_web_apps translation_of_original: Web/Guide/Responsive_design +original_slug: Web_Development/Mobile/Diseño_responsivo ---

    Como reacción a los problemas asociados con la estrategia de desarrollar sitios web separados para los móviles y los escritorios, una idea relativamente nueva — aunque de hecho es bastante vieja— que está aumentando en popularidad: deshacerse por completo de la detección del agente de usuario y hacer que la misma página responda a las capacidades del navegador en el lado del cliente. Este enfoque se ha denominado comúnmente como diseño web adaptable —o «responsivo»—. Al igual que la estrategia de sitios separados, el diseño web adaptativo tiene aspectos positivos y negativos.

    Las ventajas

    diff --git a/files/es/conflicting/web/progressive_web_apps/introduction/index.html b/files/es/conflicting/web/progressive_web_apps/introduction/index.html index e1fa9fad1f..be12926a85 100644 --- a/files/es/conflicting/web/progressive_web_apps/introduction/index.html +++ b/files/es/conflicting/web/progressive_web_apps/introduction/index.html @@ -1,6 +1,6 @@ --- title: Ventajas de una aplicación web progresiva (AWP) -slug: Web/Progressive_web_apps/Ventajas +slug: conflicting/Web/Progressive_web_apps/Introduction tags: - AWP - aplicaciones web progresivas @@ -8,6 +8,7 @@ tags: - ventajas translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications translation_of_original: Web/Progressive_web_apps/Advantages +original_slug: Web/Progressive_web_apps/Ventajas ---

    Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.

    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 index 98c3562a7b..9ca4c50786 100644 --- a/files/es/conflicting/web/web_components/using_custom_elements/index.html +++ b/files/es/conflicting/web/web_components/using_custom_elements/index.html @@ -1,12 +1,13 @@ --- title: Custom Elements -slug: Web/Web_Components/Custom_Elements +slug: conflicting/Web/Web_Components/Using_custom_elements tags: - Componentes Web - Web Components - custom elements translation_of: Web/Web_Components/Using_custom_elements translation_of_original: Web/Web_Components/Custom_Elements +original_slug: Web/Web_Components/Custom_Elements ---

    Los Custom Elements son una característica que permite crear tus propios elementos HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los Web Components, pero también pueden ser utilizados independientemente.

    diff --git a/files/es/games/introduction/index.html b/files/es/games/introduction/index.html index b19ea1a61e..60f96afec0 100644 --- a/files/es/games/introduction/index.html +++ b/files/es/games/introduction/index.html @@ -1,11 +1,12 @@ --- title: Introduccion para desarrollo de juegos para la Web -slug: Games/Introduccion +slug: Games/Introduction tags: - Firefox OS - juegos - moviles translation_of: Games/Introduction +original_slug: Games/Introduccion ---
    {{GamesSidebar}}
    diff --git a/files/es/games/introduction_to_html5_game_development/index.html b/files/es/games/introduction_to_html5_game_development/index.html index dcbaca6422..58ce238fbc 100644 --- a/files/es/games/introduction_to_html5_game_development/index.html +++ b/files/es/games/introduction_to_html5_game_development/index.html @@ -1,12 +1,13 @@ --- title: Introducción al desarrollo de juegos HTML5 (resumen) -slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) +slug: Games/Introduction_to_HTML5_Game_Development tags: - Firefox OS - HTML5 - Móvil - juegos translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +original_slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) ---
    {{GamesSidebar}}
    diff --git a/files/es/games/publishing_games/game_monetization/index.html b/files/es/games/publishing_games/game_monetization/index.html index 1549b222da..82a7ca2cd6 100644 --- a/files/es/games/publishing_games/game_monetization/index.html +++ b/files/es/games/publishing_games/game_monetization/index.html @@ -1,6 +1,6 @@ --- title: Monetización de videojuegos -slug: Games/Publishing_games/Monetización_de_los_juegos +slug: Games/Publishing_games/Game_monetization tags: - HTLM5 - JavaScript @@ -10,6 +10,7 @@ tags: - marca - monetización translation_of: Games/Publishing_games/Game_monetization +original_slug: Games/Publishing_games/Monetización_de_los_juegos ---
    {{GamesSidebar}}
    diff --git a/files/es/games/tools/asm.js/index.html b/files/es/games/tools/asm.js/index.html index bd41ed70a3..7cf59242f7 100644 --- a/files/es/games/tools/asm.js/index.html +++ b/files/es/games/tools/asm.js/index.html @@ -1,10 +1,11 @@ --- title: asm.js -slug: Games/Herramients/asm.js +slug: Games/Tools/asm.js tags: - JavaScript - asm.js translation_of: Games/Tools/asm.js +original_slug: Games/Herramients/asm.js ---
    {{GamesSidebar}}
    diff --git a/files/es/games/tools/index.html b/files/es/games/tools/index.html index e09812b07d..d738ba2f7b 100644 --- a/files/es/games/tools/index.html +++ b/files/es/games/tools/index.html @@ -1,12 +1,13 @@ --- title: Herramientas para desarrolladores de juegos -slug: Games/Herramients +slug: Games/Tools tags: - NeedsContent - NeedsTranslation - aplicaciones - juegos translation_of: Games/Tools +original_slug: Games/Herramients ---
    {{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.

    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 index 0276d5dc7f..f15637347d 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Rebotar en las paredes -slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes +slug: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls tags: - 2D - Canvas @@ -11,6 +11,7 @@ tags: - fuerte - juegos translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls +original_slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes ---
    {{GamesSidebar}}
    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 index 672d7528a6..c9ecc25441 100644 --- a/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html +++ b/files/es/games/tutorials/2d_breakout_game_phaser/buttons/index.html @@ -1,6 +1,6 @@ --- title: Botones -slug: Games/Tutorials/2D_breakout_game_Phaser/Botones +slug: Games/Tutorials/2D_breakout_game_Phaser/Buttons tags: - 2D - Botones @@ -11,6 +11,7 @@ tags: - Tutorial - juegos translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons +original_slug: Games/Tutorials/2D_breakout_game_Phaser/Botones ---
    {{GamesSidebar}}
    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 index d168aa0102..b9a7ed4290 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Rebota en las paredes -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls ---
    {{GamesSidebar}}

    {{IncludeSubnav("/es/docs/Games")}}

    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 index 99c944764b..1cc9c22783 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Construye el muro de ladrillos -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques ---
    {{GamesSidebar}}
    {{IncludeSubnav("/es/docs/Games")}}
    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 index e6d950b834..3fa35ecbfb 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Detección de colisiones -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones ---
    {{GamesSidebar}}
    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 index 59703d3bc7..bc415c8db4 100644 --- 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 @@ -1,9 +1,11 @@ --- 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 + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it translation_of: >- Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +original_slug: >- + Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it ---
    {{GamesSidebar}}
    {{IncludeSubnav("/en-US/docs/Games")}}
    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 index a3bd5e2c2e..6401e237b6 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Terminando -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando ---
    {{GamesSidebar}}
    {{IncludeSubnav("/en-US/docs/Games")}}
    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 index d57ccef444..6aa0db9751 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Fin del juego -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over tags: - Canvas - Fin del juego @@ -8,6 +8,7 @@ tags: - Tutorial - graficos translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego ---
    {{GamesSidebar}}
    {{IncludeSubnav("/es-ES/docs/Games")}}
    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 index 10ea794d5f..9eba1ed40f 100644 --- a/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html +++ b/files/es/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -1,10 +1,11 @@ --- title: Famoso juego 2D usando JavaScript puro -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript tags: - 2D Canvas JavaScript Tutorial - Principiante Juegos translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro ---
    {{GamesSidebar}}
    {{IncludeSubnav("/es-ES/docs/Games")}}
    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 index 65e32f0ac2..d233538b93 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Controles del ratón -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton ---
    {{GamesSidebar}}
    {{IncludeSubnav("/en-US/docs/Games")}}
    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 index 60a5df8c5a..d4b80386e7 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Mueve la bola -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola ---
    {{GamesSidebar}}
    {{IncludeSubnav("/es-ES/docs/Games")}}
    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 index 81403423c7..18def1565a 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Control de la pala y el teclado -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado ---
    {{GamesSidebar}}
    {{IncludeSubnav("/es/docs/Games")}}
    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 index b67a730e94..3b921fc5c2 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Poner un contador y terminar ganando -slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win +slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +original_slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win ---
    {{GamesSidebar}}
    {{IncludeSubnav("/en-US/docs/Games")}}
    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 index 135193ec50..26b3eb46f1 100644 --- a/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html +++ b/files/es/games/tutorials/html5_gamedev_phaser_device_orientation/index.html @@ -2,7 +2,7 @@ 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 +slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation tags: - API Vibración - API orientacion de dispositivos @@ -11,6 +11,7 @@ tags: - HTML5 - Phaser translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation ---
    {{GamesSidebar}}

    {{ draft() }}

    diff --git a/files/es/games/tutorials/index.html b/files/es/games/tutorials/index.html index 3a0807cc77..8b40ad4353 100644 --- a/files/es/games/tutorials/index.html +++ b/files/es/games/tutorials/index.html @@ -1,10 +1,11 @@ --- title: Workflows for different game types -slug: Games/Workflows +slug: Games/Tutorials tags: - NeedsTranslation - TopicStub translation_of: Games/Tutorials +original_slug: Games/Workflows ---
    {{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/glossary/algorithm/index.html b/files/es/glossary/algorithm/index.html index e007ec918e..8164762d9a 100644 --- a/files/es/glossary/algorithm/index.html +++ b/files/es/glossary/algorithm/index.html @@ -1,9 +1,10 @@ --- title: Algoritmo -slug: Glossary/Algoritmo +slug: Glossary/Algorithm tags: - CodingScripting - Glossary translation_of: Glossary/Algorithm +original_slug: Glossary/Algoritmo ---

    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 index c3ccfb69ca..0a3ff5c6bb 100644 --- a/files/es/glossary/argument/index.html +++ b/files/es/glossary/argument/index.html @@ -1,7 +1,8 @@ --- title: Argumento -slug: Glossary/Argumento +slug: Glossary/Argument translation_of: Glossary/Argument +original_slug: Glossary/Argumento ---

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

    diff --git a/files/es/glossary/array/index.html b/files/es/glossary/array/index.html index 74b22dbedc..cf3f7346e1 100644 --- a/files/es/glossary/array/index.html +++ b/files/es/glossary/array/index.html @@ -1,6 +1,6 @@ --- title: Arreglos (Matrices) -slug: Glossary/Arreglos +slug: Glossary/array tags: - Arreglos - CodificaciónScripting @@ -9,6 +9,7 @@ tags: - Matriz - programacion translation_of: Glossary/array +original_slug: Glossary/Arreglos ---

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

    diff --git a/files/es/glossary/asynchronous/index.html b/files/es/glossary/asynchronous/index.html index 439f95eb37..e68d6f7162 100644 --- a/files/es/glossary/asynchronous/index.html +++ b/files/es/glossary/asynchronous/index.html @@ -1,12 +1,13 @@ --- title: Asíncrono -slug: Glossary/Asíncrono +slug: Glossary/Asynchronous tags: - Asíncrono - Glosario - Mecánicas de la Web - Web translation_of: Glossary/Asynchronous +original_slug: Glossary/Asíncrono ---

    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:

    diff --git a/files/es/glossary/attribute/index.html b/files/es/glossary/attribute/index.html index 42027cf072..50b5977e59 100644 --- a/files/es/glossary/attribute/index.html +++ b/files/es/glossary/attribute/index.html @@ -1,7 +1,8 @@ --- title: Atributo -slug: Glossary/Atributo +slug: Glossary/Attribute translation_of: Glossary/Attribute +original_slug: Glossary/Atributo ---

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

    diff --git a/files/es/glossary/base64/index.html b/files/es/glossary/base64/index.html index c8747777cd..319f83ee89 100644 --- a/files/es/glossary/base64/index.html +++ b/files/es/glossary/base64/index.html @@ -1,7 +1,8 @@ --- title: Base64 codificando y decodificando -slug: Web/API/WindowBase64/Base64_codificando_y_decodificando +slug: Glossary/Base64 translation_of: Glossary/Base64 +original_slug: Web/API/WindowBase64/Base64_codificando_y_decodificando ---

    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.

    diff --git a/files/es/glossary/breadcrumb/index.html b/files/es/glossary/breadcrumb/index.html index 0fe4ade2f7..3bed52fd22 100644 --- a/files/es/glossary/breadcrumb/index.html +++ b/files/es/glossary/breadcrumb/index.html @@ -1,12 +1,13 @@ --- title: Miga de pan -slug: Glossary/miga-de-pan +slug: Glossary/Breadcrumb tags: - Accesibilidad - Glosario - Miga de pan - navegación translation_of: Glossary/Breadcrumb +original_slug: Glossary/miga-de-pan ---

    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.

    diff --git a/files/es/glossary/cache/index.html b/files/es/glossary/cache/index.html index 1c9b861ae8..c2259b370f 100644 --- a/files/es/glossary/cache/index.html +++ b/files/es/glossary/cache/index.html @@ -1,10 +1,11 @@ --- title: Caché -slug: Glossary/Caché +slug: Glossary/Cache tags: - Glosario - HTTP translation_of: Glossary/Cache +original_slug: Glossary/Caché ---

    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.

    diff --git a/files/es/glossary/call_stack/index.html b/files/es/glossary/call_stack/index.html index f164d913ca..3eea4ae1cc 100644 --- a/files/es/glossary/call_stack/index.html +++ b/files/es/glossary/call_stack/index.html @@ -1,11 +1,12 @@ --- title: Pila de llamadas -slug: Glossary/Pila_llamadas +slug: Glossary/Call_stack tags: - Glosario - JavaScript - Pila de llamadas translation_of: Glossary/Call_stack +original_slug: Glossary/Pila_llamadas ---

    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.

    diff --git a/files/es/glossary/card_sorting/index.html b/files/es/glossary/card_sorting/index.html index a9b2638bb2..d65a7b93bf 100644 --- a/files/es/glossary/card_sorting/index.html +++ b/files/es/glossary/card_sorting/index.html @@ -1,11 +1,12 @@ --- title: Clasificación por tarjetas (card sorting) -slug: Glossary/Clasificación_por_tarjetas_(card_sorting) +slug: Glossary/Card_sorting tags: - Card sorting - Diseño - Glosario translation_of: Glossary/Card_sorting +original_slug: Glossary/Clasificación_por_tarjetas_(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.

    diff --git a/files/es/glossary/character/index.html b/files/es/glossary/character/index.html index 5198607137..163c694890 100644 --- a/files/es/glossary/character/index.html +++ b/files/es/glossary/character/index.html @@ -1,11 +1,12 @@ --- title: Caracter -slug: Glossary/Caracter +slug: Glossary/Character tags: - CodingScripting - Glosario - String translation_of: Glossary/Character +original_slug: Glossary/Caracter ---

    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.

    diff --git a/files/es/glossary/character_set/index.html b/files/es/glossary/character_set/index.html index 27e5a7345c..cbfc145643 100644 --- a/files/es/glossary/character_set/index.html +++ b/files/es/glossary/character_set/index.html @@ -1,11 +1,12 @@ --- title: Conjunto de caracteres -slug: Glossary/conjunto_de_caracteres +slug: Glossary/character_set tags: - Codificación de caracteres - Conjunto de caracteres - Glosario translation_of: Glossary/character_set +original_slug: Glossary/conjunto_de_caracteres ---

    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.

    diff --git a/files/es/glossary/cia/index.html b/files/es/glossary/cia/index.html index 983f0d0447..4e51564f39 100644 --- a/files/es/glossary/cia/index.html +++ b/files/es/glossary/cia/index.html @@ -1,10 +1,11 @@ --- title: CID -slug: Glossary/CID +slug: Glossary/CIA tags: - Glosario - Seguridad translation_of: Glossary/CIA +original_slug: Glossary/CID ---

    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.

    diff --git a/files/es/glossary/cipher/index.html b/files/es/glossary/cipher/index.html index e0679eca97..5cf2de6446 100644 --- a/files/es/glossary/cipher/index.html +++ b/files/es/glossary/cipher/index.html @@ -1,12 +1,13 @@ --- title: Algoritmo criptográfico -slug: Glossary/Cifrado +slug: Glossary/Cipher tags: - Criptografía - Glosario - Seguridad - privacidad translation_of: Glossary/Cipher +original_slug: Glossary/Cifrado ---

    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.

    diff --git a/files/es/glossary/ciphertext/index.html b/files/es/glossary/ciphertext/index.html index 65315ab297..734da35770 100644 --- a/files/es/glossary/ciphertext/index.html +++ b/files/es/glossary/ciphertext/index.html @@ -1,12 +1,13 @@ --- title: Texto Cifrado -slug: Glossary/TextoCifrado +slug: Glossary/Ciphertext tags: - Cryptography - Glossary - Privacy - Security translation_of: Glossary/Ciphertext +original_slug: Glossary/TextoCifrado ---

    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.

    diff --git a/files/es/glossary/closure/index.html b/files/es/glossary/closure/index.html index 2f4cbbb479..5f4fb688d7 100644 --- a/files/es/glossary/closure/index.html +++ b/files/es/glossary/closure/index.html @@ -1,9 +1,10 @@ --- title: Clausura -slug: Glossary/Clausura +slug: Glossary/Closure tags: - Glosario translation_of: Glossary/Closure +original_slug: Glossary/Clausura ---

    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.

    diff --git a/files/es/glossary/cms/index.html b/files/es/glossary/cms/index.html index e4a67f504b..70fbfac3eb 100644 --- a/files/es/glossary/cms/index.html +++ b/files/es/glossary/cms/index.html @@ -1,11 +1,12 @@ --- title: Sistema de gestión de contenidos -slug: Glossary/Sistema_gestion_contenidos +slug: Glossary/CMS tags: - CMS - Glosario - Sistema de gestión de contenidos translation_of: Glossary/CMS +original_slug: Glossary/Sistema_gestion_contenidos ---

    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.

    diff --git a/files/es/glossary/constant/index.html b/files/es/glossary/constant/index.html index 41d4efb98a..d036a7c989 100644 --- a/files/es/glossary/constant/index.html +++ b/files/es/glossary/constant/index.html @@ -1,11 +1,12 @@ --- title: Constante -slug: Glossary/Constante +slug: Glossary/Constant tags: - CodingScripting - Constante - Glosario translation_of: Glossary/Constant +original_slug: Glossary/Constante ---

    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.

    diff --git a/files/es/glossary/cryptanalysis/index.html b/files/es/glossary/cryptanalysis/index.html index c56576e600..e390d9d650 100644 --- a/files/es/glossary/cryptanalysis/index.html +++ b/files/es/glossary/cryptanalysis/index.html @@ -1,12 +1,13 @@ --- title: Criptoanálisis -slug: Glossary/Criptoanálisis +slug: Glossary/Cryptanalysis tags: - Criptografía - Glosario - Seguridad - privacidad translation_of: Glossary/Cryptanalysis +original_slug: Glossary/Criptoanálisis ---

    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.

    diff --git a/files/es/glossary/cryptography/index.html b/files/es/glossary/cryptography/index.html index cfd3f498db..6b0e1043fa 100644 --- a/files/es/glossary/cryptography/index.html +++ b/files/es/glossary/cryptography/index.html @@ -1,12 +1,13 @@ --- title: Criptografía -slug: Glossary/Criptografía +slug: Glossary/Cryptography tags: - Criptografía - Glosario - Seguridad - privacidad translation_of: Glossary/Cryptography +original_slug: Glossary/Criptografía ---

    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.

    diff --git a/files/es/glossary/css_preprocessor/index.html b/files/es/glossary/css_preprocessor/index.html index 7304385604..db56737d8d 100644 --- a/files/es/glossary/css_preprocessor/index.html +++ b/files/es/glossary/css_preprocessor/index.html @@ -1,7 +1,8 @@ --- title: Preprocesador CSS -slug: Glossary/Preprocesador_CSS +slug: Glossary/CSS_preprocessor translation_of: Glossary/CSS_preprocessor +original_slug: Glossary/Preprocesador_CSS ---

    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.

    diff --git a/files/es/glossary/data_structure/index.html b/files/es/glossary/data_structure/index.html index d01f1b0ac8..016b605981 100644 --- a/files/es/glossary/data_structure/index.html +++ b/files/es/glossary/data_structure/index.html @@ -1,11 +1,12 @@ --- title: Estructura de datos -slug: Glossary/Estructura_de_datos +slug: Glossary/Data_structure tags: - Codificación - Estructura de datos - Glosario translation_of: Glossary/Data_structure +original_slug: Glossary/Estructura_de_datos ---

    Estructura de datos es una forma particular de organizar datos para que puedan ser usados eficientemente.

    diff --git a/files/es/glossary/decryption/index.html b/files/es/glossary/decryption/index.html index 838c76438b..6fa7ee3da6 100644 --- a/files/es/glossary/decryption/index.html +++ b/files/es/glossary/decryption/index.html @@ -1,12 +1,13 @@ --- title: Descifrado -slug: Glossary/Descifrado +slug: Glossary/Decryption tags: - Criptografía - Glosario - Seguridad - privacidad translation_of: Glossary/Decryption +original_slug: Glossary/Descifrado ---

     

    diff --git a/files/es/glossary/dhtml/index.html b/files/es/glossary/dhtml/index.html index ee735a29bc..5163f10090 100644 --- a/files/es/glossary/dhtml/index.html +++ b/files/es/glossary/dhtml/index.html @@ -1,10 +1,11 @@ --- title: DHTML -slug: DHTML +slug: Glossary/DHTML tags: - DHTML - Todas_las_Categorías translation_of: Glossary/DHTML +original_slug: DHTML ---

    diff --git a/files/es/glossary/domain_name/index.html b/files/es/glossary/domain_name/index.html index e2c9e01c16..dfe5a9fe3b 100644 --- a/files/es/glossary/domain_name/index.html +++ b/files/es/glossary/domain_name/index.html @@ -1,7 +1,8 @@ --- title: Nombre de dominio -slug: Glossary/Nombre_de_dominio +slug: Glossary/Domain_name translation_of: Glossary/Domain_name +original_slug: Glossary/Nombre_de_dominio ---

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

    diff --git a/files/es/glossary/dynamic_typing/index.html b/files/es/glossary/dynamic_typing/index.html index c8ee61a087..56797b0663 100644 --- a/files/es/glossary/dynamic_typing/index.html +++ b/files/es/glossary/dynamic_typing/index.html @@ -1,11 +1,12 @@ --- title: Tipado Dinámico -slug: Glossary/Tipado_dinámico +slug: Glossary/Dynamic_typing tags: - Código - Glosario - LenguajeDeProgramación translation_of: Glossary/Dynamic_typing +original_slug: Glossary/Tipado_dinámico ---

    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.

    diff --git a/files/es/glossary/encryption/index.html b/files/es/glossary/encryption/index.html index 4d98cc9ad5..44c2438f4f 100644 --- a/files/es/glossary/encryption/index.html +++ b/files/es/glossary/encryption/index.html @@ -1,12 +1,13 @@ --- title: Encriptación -slug: Glossary/Encriptación +slug: Glossary/Encryption tags: - Criptografía - Glosario - Seguridad - privacidad translation_of: Glossary/Encryption +original_slug: Glossary/Encriptación ---

    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.

    diff --git a/files/es/glossary/entity/index.html b/files/es/glossary/entity/index.html index cc6ebf2682..7b58bae960 100644 --- a/files/es/glossary/entity/index.html +++ b/files/es/glossary/entity/index.html @@ -1,11 +1,12 @@ --- title: Entidad -slug: Glossary/Entidad +slug: Glossary/Entity tags: - Caractères - HTML - entidad translation_of: Glossary/Entity +original_slug: Glossary/Entidad ---

    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. 

    diff --git a/files/es/glossary/first-class_function/index.html b/files/es/glossary/first-class_function/index.html index 311f068470..1d1e569277 100644 --- a/files/es/glossary/first-class_function/index.html +++ b/files/es/glossary/first-class_function/index.html @@ -1,7 +1,8 @@ --- title: Funcion de primera clase -slug: Glossary/Funcion_de_primera_clase +slug: Glossary/First-class_Function translation_of: Glossary/First-class_Function +original_slug: Glossary/Funcion_de_primera_clase ---

    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.

    diff --git a/files/es/glossary/forbidden_header_name/index.html b/files/es/glossary/forbidden_header_name/index.html index e2f16bbecf..6a978cd6e4 100644 --- a/files/es/glossary/forbidden_header_name/index.html +++ b/files/es/glossary/forbidden_header_name/index.html @@ -1,6 +1,6 @@ --- title: Nombre de encabezado prohibido -slug: Glossary/Nombre_de_encabezado_prohibido +slug: Glossary/Forbidden_header_name tags: - Encabezados - Fetch @@ -8,6 +8,7 @@ tags: - HTTP - prohibido translation_of: Glossary/Forbidden_header_name +original_slug: Glossary/Nombre_de_encabezado_prohibido ---

    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.

    diff --git a/files/es/glossary/function/index.html b/files/es/glossary/function/index.html index f67d9e90c8..8f4f309f00 100644 --- a/files/es/glossary/function/index.html +++ b/files/es/glossary/function/index.html @@ -1,12 +1,13 @@ --- title: Función -slug: Glossary/Función +slug: Glossary/Function tags: - CodingScripting - Glosario - IIFE - JavaScript translation_of: Glossary/Function +original_slug: Glossary/Función ---

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

    diff --git a/files/es/glossary/general_header/index.html b/files/es/glossary/general_header/index.html index d27644dad0..4072537f04 100644 --- a/files/es/glossary/general_header/index.html +++ b/files/es/glossary/general_header/index.html @@ -1,7 +1,8 @@ --- title: Cabecera general -slug: Glossary/Cabecera_general +slug: Glossary/General_header translation_of: Glossary/General_header +original_slug: Glossary/Cabecera_general ---

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

    diff --git a/files/es/glossary/identifier/index.html b/files/es/glossary/identifier/index.html index 63f26a35a8..cda711dece 100644 --- a/files/es/glossary/identifier/index.html +++ b/files/es/glossary/identifier/index.html @@ -1,6 +1,6 @@ --- title: Identificador -slug: Glossary/Identificador +slug: Glossary/Identifier tags: - Campartir - CodingScripting @@ -8,6 +8,7 @@ tags: - Novato - Principiante translation_of: Glossary/Identifier +original_slug: Glossary/Identificador ---

    Un Identificador es una secuencia de caracteres en el código que identifica una {{Glossary("Variable")}}, {{Glossary("Function", "función")}} o {{Glossary("Property", "propiedad")}}.

    diff --git a/files/es/glossary/immutable/index.html b/files/es/glossary/immutable/index.html index 534f00b6b6..f1a0428fce 100644 --- a/files/es/glossary/immutable/index.html +++ b/files/es/glossary/immutable/index.html @@ -1,10 +1,11 @@ --- title: Inmutable -slug: Glossary/Inmutable +slug: Glossary/Immutable tags: - CodingScripting - Glosario translation_of: Glossary/Immutable +original_slug: Glossary/Inmutable ---

    Un {{glossary("object", "objeto")}} inmutable es aquel cuyo contenido no se puede cambiar.Un objeto puede ser inmutable por varias razones, por ejemplo:

    diff --git a/files/es/glossary/information_architecture/index.html b/files/es/glossary/information_architecture/index.html index 222ed88e59..5791adce1a 100644 --- a/files/es/glossary/information_architecture/index.html +++ b/files/es/glossary/information_architecture/index.html @@ -1,11 +1,12 @@ --- title: Arquitectura de la información -slug: Glossary/Arquitectura_de_la_información +slug: Glossary/Information_architecture tags: - Arquitectura informacional - Diseño - Glosario translation_of: Glossary/Information_architecture +original_slug: Glossary/Arquitectura_de_la_información ---

    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.

    diff --git a/files/es/glossary/key/index.html b/files/es/glossary/key/index.html index b228776065..be1524acf3 100644 --- a/files/es/glossary/key/index.html +++ b/files/es/glossary/key/index.html @@ -1,11 +1,12 @@ --- title: Clave -slug: Glossary/Clave +slug: Glossary/Key tags: - Criptografía - Glosario - Seguridad translation_of: Glossary/Key +original_slug: Glossary/Clave ---

    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.

    diff --git a/files/es/glossary/localization/index.html b/files/es/glossary/localization/index.html index def1406446..47305fa6d9 100644 --- a/files/es/glossary/localization/index.html +++ b/files/es/glossary/localization/index.html @@ -1,9 +1,10 @@ --- title: Localización -slug: Localización +slug: Glossary/Localization tags: - Localización translation_of: Glossary/Localization +original_slug: Localización ---

      

    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.

    diff --git a/files/es/glossary/main_thread/index.html b/files/es/glossary/main_thread/index.html index 47cef4e428..f58296fe3f 100644 --- a/files/es/glossary/main_thread/index.html +++ b/files/es/glossary/main_thread/index.html @@ -1,12 +1,13 @@ --- title: Hilo principal -slug: Glossary/Hilo_principal +slug: Glossary/Main_thread tags: - Actualización Web - Glosario - Referencia - Web de rendimiento translation_of: Glossary/Main_thread +original_slug: Glossary/Hilo_principal ---

    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.

    diff --git a/files/es/glossary/metadata/index.html b/files/es/glossary/metadata/index.html index dddb546b28..d7387d5a0a 100644 --- a/files/es/glossary/metadata/index.html +++ b/files/es/glossary/metadata/index.html @@ -1,11 +1,12 @@ --- title: Metadato -slug: Glossary/Metadato +slug: Glossary/Metadata tags: - CodingScripting - Glosario - HTML translation_of: Glossary/Metadata +original_slug: Glossary/Metadato ---

    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.

    diff --git a/files/es/glossary/method/index.html b/files/es/glossary/method/index.html index b0539a9474..85006330ed 100644 --- a/files/es/glossary/method/index.html +++ b/files/es/glossary/method/index.html @@ -1,10 +1,11 @@ --- title: Método -slug: Glossary/Método +slug: Glossary/Method tags: - Glosario - JavaScript translation_of: Glossary/Method +original_slug: Glossary/Método ---

    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.

    diff --git a/files/es/glossary/number/index.html b/files/es/glossary/number/index.html index 6c1b7cd2b5..0853572a97 100644 --- a/files/es/glossary/number/index.html +++ b/files/es/glossary/number/index.html @@ -1,10 +1,11 @@ --- title: Number -slug: Glossary/Numero +slug: Glossary/Number tags: - Glosario - JavaScript translation_of: Glossary/Number +original_slug: Glossary/Numero ---

    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.

    diff --git a/files/es/glossary/object/index.html b/files/es/glossary/object/index.html index aeda572ea9..723857e098 100644 --- a/files/es/glossary/object/index.html +++ b/files/es/glossary/object/index.html @@ -1,7 +1,8 @@ --- title: Object -slug: Glossary/Objecto +slug: Glossary/Object translation_of: Glossary/Object +original_slug: Glossary/Objecto ---

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

    diff --git a/files/es/glossary/operand/index.html b/files/es/glossary/operand/index.html index 6a198905e3..212d5f1372 100644 --- a/files/es/glossary/operand/index.html +++ b/files/es/glossary/operand/index.html @@ -1,10 +1,11 @@ --- title: Operando -slug: Glossary/Operando +slug: Glossary/Operand tags: - Codificación - Glosario translation_of: Glossary/Operand +original_slug: Glossary/Operando ---

    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.

    diff --git a/files/es/glossary/operator/index.html b/files/es/glossary/operator/index.html index 0385f67830..4307dbcf21 100644 --- a/files/es/glossary/operator/index.html +++ b/files/es/glossary/operator/index.html @@ -1,10 +1,11 @@ --- title: Operador -slug: Glossary/Operador +slug: Glossary/Operator tags: - Glosario - Scripting translation_of: Glossary/Operator +original_slug: Glossary/Operador ---

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

    diff --git a/files/es/glossary/plaintext/index.html b/files/es/glossary/plaintext/index.html index 2c76ac8212..6e8a7fa6c9 100644 --- a/files/es/glossary/plaintext/index.html +++ b/files/es/glossary/plaintext/index.html @@ -1,11 +1,12 @@ --- title: Texto Simple -slug: Glossary/TextoSimple +slug: Glossary/Plaintext tags: - Cryptography - Glossary - Security translation_of: Glossary/Plaintext +original_slug: Glossary/TextoSimple ---

    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.

    diff --git a/files/es/glossary/preflight_request/index.html b/files/es/glossary/preflight_request/index.html index 6bd66f555a..4c9aa5ddb8 100644 --- a/files/es/glossary/preflight_request/index.html +++ b/files/es/glossary/preflight_request/index.html @@ -1,7 +1,8 @@ --- title: Preflight petición -slug: Glossary/Preflight_peticion +slug: Glossary/Preflight_request translation_of: Glossary/Preflight_request +original_slug: Glossary/Preflight_peticion ---

    Una petición preflight CORS es una petición CORS realizada para comprobar si el protocolo {{Glossary("CORS")}} es comprendido.

    diff --git a/files/es/glossary/primitive/index.html b/files/es/glossary/primitive/index.html index 1966a23803..2591883ebb 100644 --- a/files/es/glossary/primitive/index.html +++ b/files/es/glossary/primitive/index.html @@ -1,11 +1,12 @@ --- title: Primitivo -slug: Glossary/Primitivo +slug: Glossary/Primitive tags: - CodingScripting - Glosario - JavaScript translation_of: Glossary/Primitive +original_slug: Glossary/Primitivo ---

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

    diff --git a/files/es/glossary/property/index.html b/files/es/glossary/property/index.html index 07eae32e78..a5578b1ff2 100644 --- a/files/es/glossary/property/index.html +++ b/files/es/glossary/property/index.html @@ -1,10 +1,11 @@ --- title: Propiedad -slug: Glossary/propiedad +slug: Glossary/property tags: - Desambiguación - Glosario translation_of: Glossary/property +original_slug: Glossary/propiedad ---

    El término propiedad puede tener varios significados según el contexto. Se puede referir a:

    diff --git a/files/es/glossary/pseudo-class/index.html b/files/es/glossary/pseudo-class/index.html index b3984258d3..549bc2b1f9 100644 --- a/files/es/glossary/pseudo-class/index.html +++ b/files/es/glossary/pseudo-class/index.html @@ -1,6 +1,6 @@ --- title: Pseudo-clase -slug: Glossary/Pseudo-clase +slug: Glossary/Pseudo-class tags: - CSS - Glosario @@ -8,6 +8,7 @@ tags: - Selector - Selectores translation_of: Glossary/Pseudo-class +original_slug: Glossary/Pseudo-clase ---

    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.

    diff --git a/files/es/glossary/pseudocode/index.html b/files/es/glossary/pseudocode/index.html index 7a68d05ecb..75af780d8d 100644 --- a/files/es/glossary/pseudocode/index.html +++ b/files/es/glossary/pseudocode/index.html @@ -1,11 +1,12 @@ --- title: Pseudocódigo -slug: Glossary/Pseudocódigo +slug: Glossary/Pseudocode tags: - CodingScripting - Glosario - Pseudocódigo translation_of: Glossary/Pseudocode +original_slug: Glossary/Pseudocódigo ---

    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.

    diff --git a/files/es/glossary/recursion/index.html b/files/es/glossary/recursion/index.html index 866ba64a33..cb0f4d9cf0 100644 --- a/files/es/glossary/recursion/index.html +++ b/files/es/glossary/recursion/index.html @@ -1,10 +1,11 @@ --- title: Recursión -slug: Glossary/Recursión +slug: Glossary/Recursion tags: - CodingScripting - Glosario translation_of: Glossary/Recursion +original_slug: Glossary/Recursión ---

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

    diff --git a/files/es/glossary/safe/index.html b/files/es/glossary/safe/index.html index f5c1c42763..7a2be815a7 100644 --- a/files/es/glossary/safe/index.html +++ b/files/es/glossary/safe/index.html @@ -1,7 +1,8 @@ --- title: Seguro -slug: Glossary/seguro +slug: Glossary/safe translation_of: Glossary/safe +original_slug: Glossary/seguro ---

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

    diff --git a/files/es/glossary/scm/index.html b/files/es/glossary/scm/index.html index be400de190..a05c47a98b 100644 --- a/files/es/glossary/scm/index.html +++ b/files/es/glossary/scm/index.html @@ -1,11 +1,12 @@ --- title: SCV -slug: Glossary/SCV +slug: Glossary/SCM tags: - CodingScripting - Glosario - SCV translation_of: Glossary/SCM +original_slug: Glossary/SCV ---

    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.

    diff --git a/files/es/glossary/speculative_parsing/index.html b/files/es/glossary/speculative_parsing/index.html index 6509450cf9..95ea987e5a 100644 --- a/files/es/glossary/speculative_parsing/index.html +++ b/files/es/glossary/speculative_parsing/index.html @@ -1,12 +1,13 @@ --- title: Optimizar sus páginas para análisis especulativo -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +slug: Glossary/speculative_parsing tags: - Avanzado - Desarrollo web - HTML - HTML5 translation_of: Glossary/speculative_parsing +original_slug: Web/HTML/Optimizing_your_pages_for_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.

    diff --git a/files/es/glossary/statement/index.html b/files/es/glossary/statement/index.html index 501478a820..b2fef82b81 100644 --- a/files/es/glossary/statement/index.html +++ b/files/es/glossary/statement/index.html @@ -1,10 +1,11 @@ --- title: Sentencias -slug: Glossary/Sentencias +slug: Glossary/Statement tags: - Glosario - Principiante translation_of: Glossary/Statement +original_slug: Glossary/Sentencias ---

    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.

    diff --git a/files/es/glossary/static_typing/index.html b/files/es/glossary/static_typing/index.html index 161ab31c61..68648c0b59 100644 --- a/files/es/glossary/static_typing/index.html +++ b/files/es/glossary/static_typing/index.html @@ -1,11 +1,12 @@ --- title: Tipificación estática -slug: Glossary/Tipificación_estática +slug: Glossary/Static_typing tags: - CodingScripting - Glossary - Type translation_of: Glossary/Static_typing +original_slug: Glossary/Tipificación_estática ---

    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.

    diff --git a/files/es/glossary/synchronous/index.html b/files/es/glossary/synchronous/index.html index cfe10edd6f..d4382e0855 100644 --- a/files/es/glossary/synchronous/index.html +++ b/files/es/glossary/synchronous/index.html @@ -1,12 +1,13 @@ --- title: Sincrónico -slug: Glossary/Sincronico +slug: Glossary/Synchronous tags: - Glosario - Mecánicas - Web - WebMechanics translation_of: Glossary/Synchronous +original_slug: Glossary/Sincronico ---

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

    diff --git a/files/es/glossary/type_coercion/index.html b/files/es/glossary/type_coercion/index.html index 02721fad10..7260ab3c2d 100644 --- a/files/es/glossary/type_coercion/index.html +++ b/files/es/glossary/type_coercion/index.html @@ -1,7 +1,8 @@ --- title: Coerción -slug: Glossary/coercion +slug: Glossary/Type_coercion translation_of: Glossary/Type_coercion +original_slug: Glossary/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.

    diff --git a/files/es/glossary/ui/index.html b/files/es/glossary/ui/index.html index 0b24558082..87d1d4cb69 100644 --- a/files/es/glossary/ui/index.html +++ b/files/es/glossary/ui/index.html @@ -1,11 +1,12 @@ --- title: IU -slug: Glossary/IU +slug: Glossary/UI tags: - Accesibilidad - Diseño - Glosario translation_of: Glossary/UI +original_slug: Glossary/IU ---

    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.

    diff --git a/files/es/glossary/validator/index.html b/files/es/glossary/validator/index.html index 8b105054a9..587c8a3e96 100644 --- a/files/es/glossary/validator/index.html +++ b/files/es/glossary/validator/index.html @@ -1,11 +1,12 @@ --- title: Validador -slug: Glossary/Validador +slug: Glossary/Validator tags: - Glosario - Principiante - Seguridad translation_of: Glossary/Validator +original_slug: Glossary/Validador ---

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

    diff --git a/files/es/glossary/value/index.html b/files/es/glossary/value/index.html index d0d2cc2bf8..aca8799dcc 100644 --- a/files/es/glossary/value/index.html +++ b/files/es/glossary/value/index.html @@ -1,10 +1,11 @@ --- title: Valor -slug: Glossary/Valor +slug: Glossary/Value tags: - CodingScripting - Glosario translation_of: Glossary/Value +original_slug: Glossary/Valor ---
    {{jsSidebar}}
    diff --git a/files/es/glossary/whitespace/index.html b/files/es/glossary/whitespace/index.html index db6014deae..05638d15ef 100644 --- a/files/es/glossary/whitespace/index.html +++ b/files/es/glossary/whitespace/index.html @@ -1,11 +1,12 @@ --- title: Espacio en blanco -slug: Glossary/Espacio_en_blanco +slug: Glossary/Whitespace tags: - Glosario - Gramática léxica - espacioenblanco translation_of: Glossary/Whitespace +original_slug: Glossary/Espacio_en_blanco ---

    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.

    diff --git a/files/es/glossary/xforms/index.html b/files/es/glossary/xforms/index.html index 6590baacdd..7290ade27c 100644 --- a/files/es/glossary/xforms/index.html +++ b/files/es/glossary/xforms/index.html @@ -1,7 +1,8 @@ --- title: XForm -slug: Glossary/XForm +slug: Glossary/XForms translation_of: Glossary/XForms +original_slug: Glossary/XForm ---

    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.

    diff --git a/files/es/glossary/xhtml/index.html b/files/es/glossary/xhtml/index.html index 63e9c8b5e7..f62bdb0aad 100644 --- a/files/es/glossary/xhtml/index.html +++ b/files/es/glossary/xhtml/index.html @@ -1,12 +1,13 @@ --- title: XHTML -slug: XHTML +slug: Glossary/XHTML tags: - HTML - Todas_las_Categorías - XHTML - XML translation_of: Glossary/XHTML +original_slug: 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: diff --git a/files/es/learn/accessibility/what_is_accessibility/index.html b/files/es/learn/accessibility/what_is_accessibility/index.html index e92994e37c..3d9d8d2843 100644 --- a/files/es/learn/accessibility/what_is_accessibility/index.html +++ b/files/es/learn/accessibility/what_is_accessibility/index.html @@ -1,7 +1,8 @@ --- title: ¿Qué es la accesibilidad? -slug: Learn/Accessibility/Qué_es_la_accesibilidad +slug: Learn/Accessibility/What_is_accessibility translation_of: Learn/Accessibility/What_is_accessibility +original_slug: Learn/Accessibility/Qué_es_la_accesibilidad ---

    {{LearnSidebar}}
    diff --git a/files/es/learn/common_questions/common_web_layouts/index.html b/files/es/learn/common_questions/common_web_layouts/index.html index 7e05cbcaad..5c78b094cd 100644 --- a/files/es/learn/common_questions/common_web_layouts/index.html +++ b/files/es/learn/common_questions/common_web_layouts/index.html @@ -1,6 +1,6 @@ --- title: ¿Qué contienen los diseños web comunes? -slug: Learn/Common_questions/diseños_web_comunes +slug: Learn/Common_questions/Common_web_layouts tags: - CSS - Común @@ -9,6 +9,7 @@ tags: - HTML - Principiante translation_of: Learn/Common_questions/Common_web_layouts +original_slug: Learn/Common_questions/diseños_web_comunes ---
    {{IncludeSubnav("/en-US/Learn")}}
    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 index aeffd72c64..1a6116151d 100644 --- 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 @@ -1,6 +1,6 @@ --- title: ¿Cuánto cuesta hacer algo en la Web? -slug: Learn/Common_questions/Cuanto_cuesta +slug: Learn/Common_questions/How_much_does_it_cost tags: - Comenzando - Herramientas de desarrollo web @@ -9,6 +9,7 @@ tags: - costo - hosting translation_of: Learn/Common_questions/How_much_does_it_cost +original_slug: Learn/Common_questions/Cuanto_cuesta ---

    Dedicarse a la web no es tan barato como parece. En este artículo discutimos cuánto puedes tener que gastar, y por qué.

    diff --git a/files/es/learn/common_questions/using_github_pages/index.html b/files/es/learn/common_questions/using_github_pages/index.html index 81a7138430..2c52f5ef79 100644 --- a/files/es/learn/common_questions/using_github_pages/index.html +++ b/files/es/learn/common_questions/using_github_pages/index.html @@ -1,7 +1,8 @@ --- title: ¿Cómo se utiliza Github pages? -slug: Learn/Using_Github_pages +slug: Learn/Common_questions/Using_Github_pages translation_of: Learn/Common_questions/Using_Github_pages +original_slug: Learn/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.

    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 index ef50be60ad..de5d24db8d 100644 --- a/files/es/learn/common_questions/what_is_a_url/index.html +++ b/files/es/learn/common_questions/what_is_a_url/index.html @@ -1,7 +1,8 @@ --- title: ¿Qué es una URL? -slug: Learn/Common_questions/Qué_es_una_URL +slug: Learn/Common_questions/What_is_a_URL translation_of: Learn/Common_questions/What_is_a_URL +original_slug: Learn/Common_questions/Qué_es_una_URL ---

    Este artículo habla sobre las Uniform Resource Locators (URLs), explicando qué son y cómo se estructuran.

    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 index 4969677db6..a7ded29232 100644 --- 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 @@ -1,11 +1,12 @@ --- title: Que es un servidor WEB? -slug: Learn/Common_questions/Que_es_un_servidor_WEB +slug: Learn/Common_questions/What_is_a_web_server tags: - Infraestructura - Principiante - necesitaEsquema translation_of: Learn/Common_questions/What_is_a_web_server +original_slug: Learn/Common_questions/Que_es_un_servidor_WEB ---

    En este articulo veremos que son los servidores, cómo funcionan y por qué son importantes.

    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 index 92687e7d13..d5ee07aac3 100644 --- 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 @@ -1,6 +1,6 @@ --- title: ¿Qué software necesito para construir un sitio web? -slug: Learn/Common_questions/Que_software_necesito +slug: Learn/Common_questions/What_software_do_I_need tags: - Build a website - Building @@ -8,6 +8,7 @@ tags: - Principiante - software translation_of: Learn/Common_questions/What_software_do_I_need +original_slug: Learn/Common_questions/Que_software_necesito ---

    En este artículo se explican cuales componentes de software necesita para editar, cargar, o visualizar un sitio web. 

    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 index 0de93e1eb1..a44c392720 100644 --- a/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/es/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -1,7 +1,8 @@ --- title: Fondos y bordes -slug: Learn/CSS/Building_blocks/Fondos_y_bordes +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +original_slug: Learn/CSS/Building_blocks/Fondos_y_bordes ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
    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 index 91a359181f..b90c7a9d1f 100644 --- a/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/es/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,7 +1,8 @@ --- title: Cascada y herencia -slug: Learn/CSS/Building_blocks/Cascada_y_herencia +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +original_slug: Learn/CSS/Building_blocks/Cascada_y_herencia ---
    {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
    diff --git a/files/es/learn/css/building_blocks/debugging_css/index.html b/files/es/learn/css/building_blocks/debugging_css/index.html index 5f04fdd756..3e1b940897 100644 --- a/files/es/learn/css/building_blocks/debugging_css/index.html +++ b/files/es/learn/css/building_blocks/debugging_css/index.html @@ -1,7 +1,8 @@ --- title: Depurar el CSS -slug: Learn/CSS/Building_blocks/Depurar_el_CSS +slug: Learn/CSS/Building_blocks/Debugging_CSS translation_of: Learn/CSS/Building_blocks/Debugging_CSS +original_slug: Learn/CSS/Building_blocks/Depurar_el_CSS ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
    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 index b53db2df02..a4f90859a7 100644 --- a/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/es/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -1,6 +1,6 @@ --- title: Comprensión de los fundamentos de CSS -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension tags: - CSS - Estilo @@ -12,6 +12,7 @@ tags: - comentários - reglas translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension ---
    {{LearnSidebar}}
    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 index fa21de66e5..4f1e9a7143 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Manejando diferentes direcciones de texto -slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto +slug: Learn/CSS/Building_blocks/Handling_different_text_directions tags: - Aprendizaje - CSS @@ -10,6 +10,7 @@ tags: - Principiante - Propiedades lógicas translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +original_slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
    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 index db0f522728..27232582a5 100644 --- 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 @@ -1,7 +1,8 @@ --- -title: 'Imágenes, medios y elementos de formulario' -slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario +title: Imágenes, medios y elementos de formulario +slug: Learn/CSS/Building_blocks/Images_media_form_elements translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +original_slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
    diff --git a/files/es/learn/css/building_blocks/overflowing_content/index.html b/files/es/learn/css/building_blocks/overflowing_content/index.html index 808a519c12..4c5b173d08 100644 --- a/files/es/learn/css/building_blocks/overflowing_content/index.html +++ b/files/es/learn/css/building_blocks/overflowing_content/index.html @@ -1,7 +1,8 @@ --- title: Contenido desbordado -slug: Learn/CSS/Building_blocks/Contenido_desbordado +slug: Learn/CSS/Building_blocks/Overflowing_content translation_of: Learn/CSS/Building_blocks/Overflowing_content +original_slug: Learn/CSS/Building_blocks/Contenido_desbordado ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
    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 index 057c38c18d..fc106ec303 100644 --- a/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/es/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -1,7 +1,8 @@ --- title: Selectores de atributo -slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +original_slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos ---

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

    diff --git a/files/es/learn/css/building_blocks/selectors/combinators/index.html b/files/es/learn/css/building_blocks/selectors/combinators/index.html index 54f416456d..b6c2f0a5bf 100644 --- a/files/es/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/es/learn/css/building_blocks/selectors/combinators/index.html @@ -1,7 +1,8 @@ --- title: Combinadores -slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores +slug: Learn/CSS/Building_blocks/Selectors/Combinators translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +original_slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

    diff --git a/files/es/learn/css/building_blocks/selectors/index.html b/files/es/learn/css/building_blocks/selectors/index.html index d0ea61da20..4584bb30d3 100644 --- a/files/es/learn/css/building_blocks/selectors/index.html +++ b/files/es/learn/css/building_blocks/selectors/index.html @@ -1,7 +1,8 @@ --- title: Selectores CSS -slug: Learn/CSS/Building_blocks/Selectores_CSS +slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors +original_slug: Learn/CSS/Building_blocks/Selectores_CSS ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
    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 index f48dfdcbd5..6cba271113 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Pseudoclases y pseudoelementos -slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +original_slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

    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 index 01b3963f8a..c4e6758ca2 100644 --- 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 @@ -1,7 +1,8 @@ --- -title: 'Selectores de tipo, clase e ID' -slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID +title: Selectores de tipo, clase e ID +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +original_slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID ---

    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

    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 index 81759abccc..4577a3a34a 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Dimensionar elementos en CSS -slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +original_slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
    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 index dbc0d644f8..d0b81d69fe 100644 --- a/files/es/learn/css/building_blocks/the_box_model/index.html +++ b/files/es/learn/css/building_blocks/the_box_model/index.html @@ -1,7 +1,8 @@ --- title: El modelo de caja -slug: Learn/CSS/Building_blocks/El_modelo_de_caja +slug: Learn/CSS/Building_blocks/The_box_model translation_of: Learn/CSS/Building_blocks/The_box_model +original_slug: Learn/CSS/Building_blocks/El_modelo_de_caja ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
    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 index 4470746bc8..c72e131a90 100644 --- a/files/es/learn/css/building_blocks/values_and_units/index.html +++ b/files/es/learn/css/building_blocks/values_and_units/index.html @@ -1,7 +1,8 @@ --- title: Valores y unidades CSS -slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS +slug: Learn/CSS/Building_blocks/Values_and_units translation_of: Learn/CSS/Building_blocks/Values_and_units +original_slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
    diff --git a/files/es/learn/css/css_layout/introduction/index.html b/files/es/learn/css/css_layout/introduction/index.html index 2f409d97c3..769cd9da0f 100644 --- a/files/es/learn/css/css_layout/introduction/index.html +++ b/files/es/learn/css/css_layout/introduction/index.html @@ -1,7 +1,8 @@ --- title: Introducción al diseño en CSS -slug: Learn/CSS/CSS_layout/Introducción +slug: Learn/CSS/CSS_layout/Introduction translation_of: Learn/CSS/CSS_layout/Introduction +original_slug: Learn/CSS/CSS_layout/Introducción ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/css/css_layout/normal_flow/index.html b/files/es/learn/css/css_layout/normal_flow/index.html index ffc873938f..6c528855af 100644 --- a/files/es/learn/css/css_layout/normal_flow/index.html +++ b/files/es/learn/css/css_layout/normal_flow/index.html @@ -1,7 +1,8 @@ --- title: Flujo normal -slug: Learn/CSS/CSS_layout/Flujo_normal +slug: Learn/CSS/CSS_layout/Normal_Flow translation_of: Learn/CSS/CSS_layout/Normal_Flow +original_slug: Learn/CSS/CSS_layout/Flujo_normal ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/css/css_layout/responsive_design/index.html b/files/es/learn/css/css_layout/responsive_design/index.html index 4ddb7a94db..e1307d54a5 100644 --- a/files/es/learn/css/css_layout/responsive_design/index.html +++ b/files/es/learn/css/css_layout/responsive_design/index.html @@ -1,7 +1,8 @@ --- title: Diseño receptivo -slug: Learn/CSS/CSS_layout/Diseño_receptivo +slug: Learn/CSS/CSS_layout/Responsive_Design translation_of: Learn/CSS/CSS_layout/Responsive_Design +original_slug: Learn/CSS/CSS_layout/Diseño_receptivo ---
    {{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
    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 index 18065a1da5..d709a628d5 100644 --- a/files/es/learn/css/css_layout/supporting_older_browsers/index.html +++ b/files/es/learn/css/css_layout/supporting_older_browsers/index.html @@ -1,7 +1,8 @@ --- title: Soporte a navegadores antiguos -slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +original_slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/css/first_steps/getting_started/index.html b/files/es/learn/css/first_steps/getting_started/index.html index 1da9edb582..0fc4331abe 100644 --- a/files/es/learn/css/first_steps/getting_started/index.html +++ b/files/es/learn/css/first_steps/getting_started/index.html @@ -1,6 +1,6 @@ --- title: Empezar con CSS -slug: Learn/CSS/First_steps/Comenzando_CSS +slug: Learn/CSS/First_steps/Getting_started tags: - Aprender - CSS @@ -12,6 +12,7 @@ tags: - Selectores - Sintaxis translation_of: Learn/CSS/First_steps/Getting_started +original_slug: Learn/CSS/First_steps/Comenzando_CSS ---
    {{LearnSidebar}}
    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 index a3e9bb94b8..4021804ce5 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Cómo se estructura el CSS -slug: Learn/CSS/First_steps/Como_se_estructura_CSS +slug: Learn/CSS/First_steps/How_CSS_is_structured translation_of: Learn/CSS/First_steps/How_CSS_is_structured +original_slug: Learn/CSS/First_steps/Como_se_estructura_CSS ---
    {{LearnSidebar}}
    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 index 920212e080..74c3e7fc06 100644 --- a/files/es/learn/css/first_steps/how_css_works/index.html +++ b/files/es/learn/css/first_steps/how_css_works/index.html @@ -1,7 +1,8 @@ --- title: Cómo funciona CSS -slug: Learn/CSS/First_steps/Como_funciona_CSS +slug: Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works +original_slug: Learn/CSS/First_steps/Como_funciona_CSS ---

    {{LearnSidebar}}
    {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

    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 index bff4f103bf..2fe00e7ce9 100644 --- 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 @@ -1,11 +1,12 @@ --- title: Usa tu nuevo conocimiento -slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento +slug: Learn/CSS/First_steps/Using_your_new_knowledge tags: - Aprendizaje - CSS - Principiante translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +original_slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento ---

    {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

    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 index eb4f8e8a8a..82908677ec 100644 --- a/files/es/learn/css/first_steps/what_is_css/index.html +++ b/files/es/learn/css/first_steps/what_is_css/index.html @@ -1,6 +1,6 @@ --- title: ¿Qué es el CSS? -slug: Learn/CSS/First_steps/Qué_es_CSS +slug: Learn/CSS/First_steps/What_is_CSS tags: - Beginner - CSS @@ -10,6 +10,7 @@ tags: - Specifications - Syntax translation_of: Learn/CSS/First_steps/What_is_CSS +original_slug: Learn/CSS/First_steps/Qué_es_CSS ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/css/howto/css_faq/index.html b/files/es/learn/css/howto/css_faq/index.html index 36c2fa1317..3037ac68c8 100644 --- a/files/es/learn/css/howto/css_faq/index.html +++ b/files/es/learn/css/howto/css_faq/index.html @@ -1,10 +1,11 @@ --- title: Preguntas frecuentes sobre CSS -slug: Web/CSS/Preguntas_frecuentes_sobre_CSS +slug: Learn/CSS/Howto/CSS_FAQ tags: - CSS - Proyecto MDC translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/Preguntas_frecuentes_sobre_CSS ---

    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.

    diff --git a/files/es/learn/css/howto/generated_content/index.html b/files/es/learn/css/howto/generated_content/index.html index 605e87f9e2..232c1c6e4d 100644 --- a/files/es/learn/css/howto/generated_content/index.html +++ b/files/es/learn/css/howto/generated_content/index.html @@ -1,6 +1,6 @@ --- title: Usando CSS para generar contenido -slug: Learn/CSS/Sábercomo/Generated_content +slug: Learn/CSS/Howto/Generated_content tags: - CSS - Fundamentos @@ -9,6 +9,7 @@ tags: - Web - graficos translation_of: Learn/CSS/Howto/Generated_content +original_slug: Learn/CSS/Sábercomo/Generated_content ---

    {{ CSSTutorialTOC() }}

    diff --git a/files/es/learn/css/howto/index.html b/files/es/learn/css/howto/index.html index ffff1653c0..c3669d187f 100644 --- a/files/es/learn/css/howto/index.html +++ b/files/es/learn/css/howto/index.html @@ -1,7 +1,8 @@ --- title: Usa CSS para resolver problemas comunes -slug: Learn/CSS/Sábercomo +slug: Learn/CSS/Howto translation_of: Learn/CSS/Howto +original_slug: Learn/CSS/Sábercomo ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/css/styling_text/web_fonts/index.html b/files/es/learn/css/styling_text/web_fonts/index.html index 7bfa162217..880307b419 100644 --- a/files/es/learn/css/styling_text/web_fonts/index.html +++ b/files/es/learn/css/styling_text/web_fonts/index.html @@ -1,7 +1,8 @@ --- title: Fuentes web -slug: Learn/CSS/Styling_text/Fuentes_web +slug: Learn/CSS/Styling_text/Web_fonts translation_of: Learn/CSS/Styling_text/Web_fonts +original_slug: Learn/CSS/Styling_text/Fuentes_web ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/forms/basic_native_form_controls/index.html b/files/es/learn/forms/basic_native_form_controls/index.html index c8a2651837..74b5b08e46 100644 --- a/files/es/learn/forms/basic_native_form_controls/index.html +++ b/files/es/learn/forms/basic_native_form_controls/index.html @@ -1,7 +1,8 @@ --- title: Controles de formulario originales -slug: Learn/HTML/Forms/The_native_form_widgets +slug: Learn/Forms/Basic_native_form_controls translation_of: Learn/Forms/Basic_native_form_controls +original_slug: Learn/HTML/Forms/The_native_form_widgets ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/forms/form_validation/index.html b/files/es/learn/forms/form_validation/index.html index e967b68973..c5a4d4f0dc 100644 --- a/files/es/learn/forms/form_validation/index.html +++ b/files/es/learn/forms/form_validation/index.html @@ -1,6 +1,6 @@ --- title: Validación de formularios de datos -slug: Learn/HTML/Forms/Validacion_formulario_datos +slug: Learn/Forms/Form_validation tags: - Ejemplo - Guía @@ -10,6 +10,7 @@ tags: - Web - formulários translation_of: Learn/Forms/Form_validation +original_slug: Learn/HTML/Forms/Validacion_formulario_datos ---
    {{LearnSidebar}}
    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 index 73ae6e6590..1f83cf0ad0 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Cómo crear widgets de formularios personalizados -slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados +slug: Learn/Forms/How_to_build_custom_form_controls translation_of: Learn/Forms/How_to_build_custom_form_controls +original_slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados ---
    {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
    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 index 45f58520d1..e2a1a8efa9 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Cómo estructurar un formulario HTML -slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +slug: Learn/Forms/How_to_structure_a_web_form translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/forms/html5_input_types/index.html b/files/es/learn/forms/html5_input_types/index.html index d463399e93..7c62230c33 100644 --- a/files/es/learn/forms/html5_input_types/index.html +++ b/files/es/learn/forms/html5_input_types/index.html @@ -1,7 +1,8 @@ --- title: Tipos de input de HTML5 -slug: Learn/HTML/Forms/Tipos_input_HTML5 +slug: Learn/Forms/HTML5_input_types translation_of: Learn/Forms/HTML5_input_types +original_slug: Learn/HTML/Forms/Tipos_input_HTML5 ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/forms/index.html b/files/es/learn/forms/index.html index a0e77ec827..6413d9490a 100644 --- a/files/es/learn/forms/index.html +++ b/files/es/learn/forms/index.html @@ -1,10 +1,11 @@ --- title: Formularios en HTML5 -slug: HTML/HTML5/Forms_in_HTML5 +slug: Learn/Forms tags: - Forms - HTML - HTML5 +original_slug: HTML/HTML5/Forms_in_HTML5 ---

    {{ gecko_minversion_header("2") }}

    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 index 115b5580fe..a5c7202d69 100644 --- 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 @@ -1,7 +1,8 @@ --- title: Tabla de compatibilidad de propiedades CSS para controles de formulario -slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls +slug: Learn/Forms/Property_compatibility_table_for_form_controls translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +original_slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls ---
    {{learnsidebar}}
    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 index d6ca2161a4..03fc91a7f1 100644 --- a/files/es/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/es/learn/forms/sending_and_retrieving_form_data/index.html @@ -1,7 +1,8 @@ --- title: Sending form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +slug: Learn/Forms/Sending_and_retrieving_form_data translation_of: Learn/Forms/Sending_and_retrieving_form_data +original_slug: Learn/HTML/Forms/Sending_and_retrieving_form_data ---
    {{LearnSidebar}} {{PreviousMenuNext("Aprende / HTML / Formularios / The_native_form_widgets", "Aprender / 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 index 26b4173ee8..6af4b94bed 100644 --- a/files/es/learn/forms/styling_web_forms/index.html +++ b/files/es/learn/forms/styling_web_forms/index.html @@ -1,7 +1,8 @@ --- title: Estilizando formularios HTML -slug: Learn/HTML/Forms/Styling_HTML_forms +slug: Learn/Forms/Styling_web_forms translation_of: Learn/Forms/Styling_web_forms +original_slug: Learn/HTML/Forms/Styling_HTML_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.

    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 index b73c8d4442..da67e807c8 100644 --- 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 @@ -1,13 +1,14 @@ --- title: 'Prueba tus habilidades: controles HTML5' -slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5' +slug: Learn/Forms/Test_your_skills:_HTML5_controls tags: - Aprendizaje - Evaluación - Formulário - HTML5 - Principiante -translation_of: 'Learn/Forms/Test_your_skills:_HTML5_controls' +translation_of: Learn/Forms/Test_your_skills:_HTML5_controls +original_slug: Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5 ---
    {{learnsidebar}}
    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 index 1496025a8d..4e3e8a0c45 100644 --- 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 @@ -1,7 +1,8 @@ --- title: 'Prueba tus habilidades: Otros controles' -slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles' -translation_of: 'Learn/Forms/Test_your_skills:_Other_controls' +slug: Learn/Forms/Test_your_skills:_Other_controls +translation_of: Learn/Forms/Test_your_skills:_Other_controls +original_slug: Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles ---
    {{learnsidebar}}
    diff --git a/files/es/learn/forms/your_first_form/index.html b/files/es/learn/forms/your_first_form/index.html index df9d73bc60..8f0d8fe7c9 100644 --- a/files/es/learn/forms/your_first_form/index.html +++ b/files/es/learn/forms/your_first_form/index.html @@ -1,6 +1,6 @@ --- title: Mi primer formulario HTML -slug: Learn/HTML/Forms/Your_first_HTML_form +slug: Learn/Forms/Your_first_form tags: - Ejemplo - Guía @@ -9,6 +9,7 @@ tags: - Web - formulários translation_of: Learn/Forms/Your_first_form +original_slug: Learn/HTML/Forms/Your_first_HTML_form ---
    {{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
    diff --git a/files/es/learn/front-end_web_developer/index.html b/files/es/learn/front-end_web_developer/index.html index f58a9ad486..a6f82bb539 100644 --- a/files/es/learn/front-end_web_developer/index.html +++ b/files/es/learn/front-end_web_developer/index.html @@ -1,6 +1,6 @@ --- title: Desarrollo web Front-end -slug: Learn/Desarrollo_web_Front-end +slug: Learn/Front-end_web_developer tags: - Aprender - CSS @@ -14,6 +14,7 @@ tags: - Novato - Principiante translation_of: Learn/Front-end_web_developer +original_slug: Learn/Desarrollo_web_Front-end ---

    {{learnsidebar}}

    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 index 0c7f8c4121..85ca42d01c 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Manejo de archivos -slug: Learn/Getting_started_with_the_web/Manejando_los_archivos +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - Archivos - Guía @@ -9,9 +9,10 @@ tags: - Principiante - Scripting - Sitios Web - - 'l10n:priority' + - l10n:priority - teorias translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/Manejando_los_archivos ---
    {{LearnSidebar}}
    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 index 546baf0309..ccf641f1e4 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Cómo funciona la web -slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web +slug: Learn/Getting_started_with_the_web/How_the_Web_works tags: - Cliente - DNS @@ -14,6 +14,7 @@ tags: - TCP - Web translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web ---
    {{LearnSidebar()}}
    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 index 84ffdcf666..7569624eaf 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Instalación de software básico -slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico +slug: Learn/Getting_started_with_the_web/Installing_basic_software tags: - Aprender - Configuración @@ -12,8 +12,9 @@ tags: - buscador - editor de textos - instalar - - 'l10n:priority' + - l10n:priority translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +original_slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico ---
    {{LearnSidebar}}
    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 index daf6e77d18..67d6dc92cb 100644 --- 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 @@ -1,6 +1,6 @@ --- title: La web y los estándares web -slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web +slug: Learn/Getting_started_with_the_web/The_web_and_web_standards tags: - Estándares web - Front-end @@ -10,6 +10,7 @@ tags: - Web - aprende translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +original_slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web ---

    {{learnsidebar}}

    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 index b44128e05d..221875140a 100644 --- 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 @@ -1,12 +1,13 @@ --- 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 +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages tags: - Consejos - HTML - Rapido - Tips translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida ---

    Consejos para la creación de páginas HTML de carga rápida

    diff --git a/files/es/learn/html/howto/index.html b/files/es/learn/html/howto/index.html index 095e5bc54e..4717432b11 100644 --- a/files/es/learn/html/howto/index.html +++ b/files/es/learn/html/howto/index.html @@ -1,10 +1,11 @@ --- title: Solución de problemas comunes de HTML -slug: Learn/HTML/como +slug: Learn/HTML/Howto tags: - CodificacióndeSecuenciadeComandos - HTML translation_of: Learn/HTML/Howto +original_slug: Learn/HTML/como ---

    {{LearnSidebar}}

    diff --git a/files/es/learn/html/howto/use_data_attributes/index.html b/files/es/learn/html/howto/use_data_attributes/index.html index 7629974833..711d56f256 100644 --- a/files/es/learn/html/howto/use_data_attributes/index.html +++ b/files/es/learn/html/howto/use_data_attributes/index.html @@ -1,7 +1,8 @@ --- title: Uso de atributos de datos -slug: Learn/HTML/como/Usando_atributos_de_datos +slug: Learn/HTML/Howto/Use_data_attributes translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Learn/HTML/como/Usando_atributos_de_datos ---
    {{LearnSidebar}}
    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 index 7e96d3c6d7..49758ede67 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Formateo de texto avanzado -slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - CodingScripting - Guía @@ -14,6 +14,7 @@ tags: - cita - semántica translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting ---
    {{LearnSidebar}}
    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 index 330bf0d7db..6a1307c5e5 100644 --- a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -1,6 +1,6 @@ --- title: Crear hipervínculos -slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks tags: - Aprender - CodingScripting @@ -20,6 +20,7 @@ tags: - título - urls translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks ---
    {{LearnSidebar}}
    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 index 114b93ff0f..d647a6db17 100644 --- a/files/es/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/es/learn/html/introduction_to_html/debugging_html/index.html @@ -1,6 +1,6 @@ --- title: Depurar el HTML -slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML tags: - Error - Guía @@ -11,6 +11,7 @@ tags: - depurar - programar translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML ---
    {{LearnSidebar}}
    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 index 1f5f1e315c..14d5394700 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Estructura web y documentación -slug: Learn/HTML/Introduccion_a_HTML/estructura +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure tags: - CodingScripting - Composición @@ -17,6 +17,7 @@ tags: - programar - semántica translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Learn/HTML/Introduccion_a_HTML/estructura ---
    {{LearnSidebar}}
    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 index c05aa6a9f0..331be30043 100644 --- a/files/es/learn/html/introduction_to_html/getting_started/index.html +++ b/files/es/learn/html/introduction_to_html/getting_started/index.html @@ -1,6 +1,6 @@ --- title: Empezar con HTML -slug: Learn/HTML/Introduccion_a_HTML/iniciar +slug: Learn/HTML/Introduction_to_HTML/Getting_started tags: - Atributos - Elemento @@ -9,6 +9,7 @@ tags: - Principiante - comentários translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Learn/HTML/Introduccion_a_HTML/iniciar ---
    {{LearnSidebar}}
    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 index 912acb7dfe..26c7cf3963 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Fundamentos de texto en HTML -slug: Learn/HTML/Introduccion_a_HTML/texto +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals tags: - CodingScripting - Encabezados @@ -15,6 +15,7 @@ tags: - aprende - semántica translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Learn/HTML/Introduccion_a_HTML/texto ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/html/introduction_to_html/index.html b/files/es/learn/html/introduction_to_html/index.html index 64c70649cb..cbbb3806eb 100644 --- a/files/es/learn/html/introduction_to_html/index.html +++ b/files/es/learn/html/introduction_to_html/index.html @@ -1,6 +1,6 @@ --- title: Introducción a HTML -slug: Learn/HTML/Introduccion_a_HTML +slug: Learn/HTML/Introduction_to_HTML tags: - CodingScripting - Enlaces @@ -10,6 +10,7 @@ tags: - Texto - semántica translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/Introduccion_a_HTML ---
    {{LearnSidebar}}
    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 index e53bb01826..5e1f868f5a 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Marcando una Carta -slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter tags: - Cabecera - Codificación @@ -9,6 +9,7 @@ tags: - Principiante - Texto translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter ---
    {{LearnSidebar}}
    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 index 686940212e..3e86e166dd 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Estructuración de una Página de contenido -slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content tags: - Aprendizaje - Diseño @@ -12,6 +12,7 @@ tags: - Prototipado - semántica translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido ---
    {{LearnSidebar}}
    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 index f29638eb81..908d34bcc6 100644 --- 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 @@ -1,7 +1,8 @@ --- 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' +slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text +translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text +original_slug: Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text ---
    {{learnsidebar}}
    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 index f35a083987..c84019c672 100644 --- 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 @@ -1,13 +1,14 @@ --- title: 'Prueba tus habilidades: Texto básico HTML' -slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML' +slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics tags: - Aprendizaje - HTML - Principiante - Prueba tus habilidades - Texto -translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' +translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics +original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML ---
    {{learnsidebar}}
    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 index 0e8dc1bfaf..20e3e0f363 100644 --- 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 @@ -1,7 +1,8 @@ --- 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' +slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links +translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links +original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces ---
    {{learnsidebar}}
    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 index 6fc5f94ab0..6dd14ce1e1 100644 --- 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 @@ -1,6 +1,6 @@ --- title: ¿Qué hay en la cabecera? Metadatos en HTML -slug: Learn/HTML/Introduccion_a_HTML/Metados_en +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML tags: - Cabecera - CodingScripting @@ -15,6 +15,7 @@ tags: - lang - metadata translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Introduccion_a_HTML/Metados_en ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/html/tables/advanced/index.html b/files/es/learn/html/tables/advanced/index.html index a74817c5d4..6c008ab50b 100644 --- a/files/es/learn/html/tables/advanced/index.html +++ b/files/es/learn/html/tables/advanced/index.html @@ -1,7 +1,8 @@ --- title: Funciones avanzadas de las tablas HTML y accesibilidad -slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad +slug: Learn/HTML/Tables/Advanced translation_of: Learn/HTML/Tables/Advanced +original_slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/html/tables/basics/index.html b/files/es/learn/html/tables/basics/index.html index 7259adf427..c7af02ac17 100644 --- a/files/es/learn/html/tables/basics/index.html +++ b/files/es/learn/html/tables/basics/index.html @@ -1,7 +1,8 @@ --- title: Conceptos básicos de las tablas HTML -slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML +slug: Learn/HTML/Tables/Basics translation_of: Learn/HTML/Tables/Basics +original_slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/html/tables/index.html b/files/es/learn/html/tables/index.html index 7d04eb0cbf..39ef075b20 100644 --- a/files/es/learn/html/tables/index.html +++ b/files/es/learn/html/tables/index.html @@ -1,7 +1,8 @@ --- title: Tablas HTML -slug: Learn/HTML/Tablas +slug: Learn/HTML/Tables translation_of: Learn/HTML/Tables +original_slug: Learn/HTML/Tablas ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/html/tables/structuring_planet_data/index.html b/files/es/learn/html/tables/structuring_planet_data/index.html index e9868bb95a..8d8e219fa9 100644 --- a/files/es/learn/html/tables/structuring_planet_data/index.html +++ b/files/es/learn/html/tables/structuring_planet_data/index.html @@ -1,7 +1,8 @@ --- title: 'Evaluación: Estructurando datos planetarios' -slug: Learn/HTML/Tablas/Structuring_planet_data +slug: Learn/HTML/Tables/Structuring_planet_data translation_of: Learn/HTML/Tables/Structuring_planet_data +original_slug: Learn/HTML/Tablas/Structuring_planet_data ---
    {{LearnSidebar}}
    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 index 5f9bcc7c8b..052ddb8b78 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Construye tu propia función -slug: Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion +slug: Learn/JavaScript/Building_blocks/Build_your_own_function tags: - Aprender - Artículo @@ -11,6 +11,7 @@ tags: - Principiante - Tutorial translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +original_slug: Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/javascript/building_blocks/events/index.html b/files/es/learn/javascript/building_blocks/events/index.html index 7bdb81768a..5fc7ee8df5 100644 --- a/files/es/learn/javascript/building_blocks/events/index.html +++ b/files/es/learn/javascript/building_blocks/events/index.html @@ -1,7 +1,8 @@ --- title: Introducción a eventos -slug: Learn/JavaScript/Building_blocks/Eventos +slug: Learn/JavaScript/Building_blocks/Events translation_of: Learn/JavaScript/Building_blocks/Events +original_slug: Learn/JavaScript/Building_blocks/Eventos ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/javascript/building_blocks/image_gallery/index.html b/files/es/learn/javascript/building_blocks/image_gallery/index.html index 205f1a11aa..a4bad1842e 100644 --- a/files/es/learn/javascript/building_blocks/image_gallery/index.html +++ b/files/es/learn/javascript/building_blocks/image_gallery/index.html @@ -1,7 +1,8 @@ --- title: Galería de imágenes -slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes +slug: Learn/JavaScript/Building_blocks/Image_gallery translation_of: Learn/JavaScript/Building_blocks/Image_gallery +original_slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/javascript/building_blocks/looping_code/index.html b/files/es/learn/javascript/building_blocks/looping_code/index.html index e26509afc5..c1386a16ed 100644 --- a/files/es/learn/javascript/building_blocks/looping_code/index.html +++ b/files/es/learn/javascript/building_blocks/looping_code/index.html @@ -1,7 +1,8 @@ --- title: Bucles -slug: Learn/JavaScript/Building_blocks/Bucle_codigo +slug: Learn/JavaScript/Building_blocks/Looping_code translation_of: Learn/JavaScript/Building_blocks/Looping_code +original_slug: Learn/JavaScript/Building_blocks/Bucle_codigo ---
    {{LearnSidebar}}
    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 index fc73d4ebc9..931a5d1328 100644 --- a/files/es/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/es/learn/javascript/client-side_web_apis/introduction/index.html @@ -1,7 +1,8 @@ --- title: Introducción a las APIs web -slug: Learn/JavaScript/Client-side_web_APIs/Introducción +slug: Learn/JavaScript/Client-side_web_APIs/Introduction translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +original_slug: Learn/JavaScript/Client-side_web_APIs/Introducción ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/javascript/first_steps/math/index.html b/files/es/learn/javascript/first_steps/math/index.html index d9117ed211..9533ac05d8 100644 --- a/files/es/learn/javascript/first_steps/math/index.html +++ b/files/es/learn/javascript/first_steps/math/index.html @@ -1,6 +1,6 @@ --- title: Matemáticas básicas en JavaScript — números y operadores -slug: Learn/JavaScript/First_steps/Matemáticas +slug: Learn/JavaScript/First_steps/Math tags: - Aprender - Artículo @@ -12,9 +12,10 @@ tags: - Operadores - Principiante - incremento - - 'l10n:priority' + - l10n:priority - modulo translation_of: Learn/JavaScript/First_steps/Math +original_slug: Learn/JavaScript/First_steps/Matemáticas ---
    {{LearnSidebar}}
    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 index 58bb8e688a..c3b7d16dfe 100644 --- a/files/es/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/es/learn/javascript/first_steps/silly_story_generator/index.html @@ -1,6 +1,6 @@ --- title: Generador de historias absurdas -slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas +slug: Learn/JavaScript/First_steps/Silly_story_generator tags: - Arreglos - Cadenas @@ -8,6 +8,7 @@ tags: - Numeros - Principiante translation_of: Learn/JavaScript/First_steps/Silly_story_generator +original_slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas ---
    {{LearnSidebar}}
    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 index f919ac1ee3..05bd91d296 100644 --- 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 @@ -1,6 +1,6 @@ --- title: 'Prueba tus habilidades: Strings' -slug: 'Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings' +slug: Learn/JavaScript/First_steps/Test_your_skills:_Strings tags: - Cadenas - JavaScript @@ -9,7 +9,8 @@ tags: - Prueba tus habilidades - aprende - strings -translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Strings' +translation_of: Learn/JavaScript/First_steps/Test_your_skills:_Strings +original_slug: Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings ---
    {{learnsidebar}}
    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 index bd845c8681..f26d6116ea 100644 --- a/files/es/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/es/learn/javascript/first_steps/what_is_javascript/index.html @@ -1,6 +1,6 @@ --- title: ¿Qué es JavaScript? -slug: Learn/JavaScript/First_steps/Qué_es_JavaScript +slug: Learn/JavaScript/First_steps/What_is_JavaScript tags: - APIs - Aprender @@ -17,6 +17,7 @@ tags: - comentários - externo translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +original_slug: Learn/JavaScript/First_steps/Qué_es_JavaScript ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/javascript/objects/object_building_practice/index.html b/files/es/learn/javascript/objects/object_building_practice/index.html index 6dfaaf0d08..6814a34289 100644 --- a/files/es/learn/javascript/objects/object_building_practice/index.html +++ b/files/es/learn/javascript/objects/object_building_practice/index.html @@ -1,7 +1,8 @@ --- title: Ejercicio práctico de construcción de objetos -slug: Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos +slug: Learn/JavaScript/Objects/Object_building_practice translation_of: Learn/JavaScript/Objects/Object_building_practice +original_slug: Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/learning_and_getting_help/index.html b/files/es/learn/learning_and_getting_help/index.html index a7f06d90d8..e78bcbff0c 100644 --- a/files/es/learn/learning_and_getting_help/index.html +++ b/files/es/learn/learning_and_getting_help/index.html @@ -1,6 +1,6 @@ --- title: Aprender y obtener ayuda -slug: Learn/Aprender_y_obtener_ayuda +slug: Learn/Learning_and_getting_help tags: - Aprender - Desarrollo web @@ -8,6 +8,7 @@ tags: - conseguir ayuda - obtener ayuda translation_of: Learn/Learning_and_getting_help +original_slug: Learn/Aprender_y_obtener_ayuda ---

    {{learnsidebar}}

    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 index 782c328151..f8144877ba 100644 --- a/files/es/learn/server-side/configuring_server_mime_types/index.html +++ b/files/es/learn/server-side/configuring_server_mime_types/index.html @@ -1,12 +1,13 @@ --- title: Configurar correctamente los tipos MIME del servidor -slug: Configurar_correctamente_los_tipos_MIME_del_servidor +slug: Learn/Server-side/Configuring_server_MIME_types tags: - Desarrollo_Web - Estándares_Web - Seguridad - Todas_las_Categorías translation_of: Learn/Server-side/Configuring_server_MIME_types +original_slug: Configurar_correctamente_los_tipos_MIME_del_servidor ---

    diff --git a/files/es/learn/server-side/django/introduction/index.html b/files/es/learn/server-side/django/introduction/index.html index 484b311a2c..a1571a1d00 100644 --- a/files/es/learn/server-side/django/introduction/index.html +++ b/files/es/learn/server-side/django/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introducción a Django -slug: Learn/Server-side/Django/Introducción +slug: Learn/Server-side/Django/Introduction tags: - Aprendizaje - CodigoScript @@ -10,6 +10,7 @@ tags: - django - introducción translation_of: Learn/Server-side/Django/Introduction +original_slug: Learn/Server-side/Django/Introducción ---
    {{LearnSidebar}}
    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 index 05ce1f9451..db0a949c2d 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Visión General Cliente-Servidor -slug: Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor +slug: Learn/Server-side/First_steps/Client-Server_overview tags: - Aprendizaje - Codificación de scripts @@ -10,6 +10,7 @@ tags: - Servidor - introducción translation_of: Learn/Server-side/First_steps/Client-Server_overview +original_slug: Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/server-side/first_steps/index.html b/files/es/learn/server-side/first_steps/index.html index 19a5454b4b..d7893b51d3 100644 --- a/files/es/learn/server-side/first_steps/index.html +++ b/files/es/learn/server-side/first_steps/index.html @@ -1,6 +1,6 @@ --- title: Primeros Pasos en la Programación de Lado-Servidor -slug: Learn/Server-side/Primeros_pasos +slug: Learn/Server-side/First_steps tags: - Aprendizaje - Aterrizaje @@ -10,6 +10,7 @@ tags: - Programación lado servidor - introducción translation_of: Learn/Server-side/First_steps +original_slug: Learn/Server-side/Primeros_pasos ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/server-side/first_steps/introduction/index.html b/files/es/learn/server-side/first_steps/introduction/index.html index 0b0d2da59e..32d5f3363b 100644 --- a/files/es/learn/server-side/first_steps/introduction/index.html +++ b/files/es/learn/server-side/first_steps/introduction/index.html @@ -1,6 +1,6 @@ --- title: Introducción al lado servidor -slug: Learn/Server-side/Primeros_pasos/Introducción +slug: Learn/Server-side/First_steps/Introduction tags: - Aprendizaje - Codificación de scripts @@ -10,6 +10,7 @@ tags: - Servidor - introducción translation_of: Learn/Server-side/First_steps/Introduction +original_slug: Learn/Server-side/Primeros_pasos/Introducción ---
    {{LearnSidebar}}
    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 index 8c381a772e..6e23f8586d 100644 --- a/files/es/learn/server-side/first_steps/web_frameworks/index.html +++ b/files/es/learn/server-side/first_steps/web_frameworks/index.html @@ -1,6 +1,6 @@ --- title: Frameworks Web de lado servidor -slug: Learn/Server-side/Primeros_pasos/Web_frameworks +slug: Learn/Server-side/First_steps/Web_frameworks tags: - Aprendizaje - Codificación de scripts @@ -11,6 +11,7 @@ tags: - Servidor - introducción translation_of: Learn/Server-side/First_steps/Web_frameworks +original_slug: Learn/Server-side/Primeros_pasos/Web_frameworks ---
    {{LearnSidebar}}
    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 index c2630fc050..92ed22736a 100644 --- a/files/es/learn/server-side/first_steps/website_security/index.html +++ b/files/es/learn/server-side/first_steps/website_security/index.html @@ -1,6 +1,6 @@ --- title: Seguridad de Sitios Web -slug: Learn/Server-side/Primeros_pasos/seguridad_sitios_web +slug: Learn/Server-side/First_steps/Website_security tags: - Aprendizaje - Codificación de scripts @@ -12,6 +12,7 @@ tags: - Seguridad de sitios Web - introducción translation_of: Learn/Server-side/First_steps/Website_security +original_slug: Learn/Server-side/Primeros_pasos/seguridad_sitios_web ---
    {{LearnSidebar}}
    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 index e9bdd36eca..81a3a24914 100644 --- 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 @@ -1,10 +1,11 @@ --- title: Entendiendo los frameworks de JavaScript del lado del cliente -slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks tags: - Aprender - Principiante translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +original_slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks ---
    {{LearnSidebar}}
    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 index 09c28f11a9..121d2684d1 100644 --- 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 @@ -1,13 +1,15 @@ --- title: Primeros pasos en React slug: >- - Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started tags: - Aprender - Aprendiz - Principiante translation_of: >- Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +original_slug: >- + Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started ---
    {{LearnSidebar}}
    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 index ea24ac2a81..1e5640d9e3 100644 --- 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 @@ -1,8 +1,9 @@ --- title: Primeros pasos con Vue -slug: >- - Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +original_slug: >- + Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos ---
    {{LearnSidebar}}
    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 index 73bd6299a1..f9f0a26a7c 100644 --- a/files/es/learn/tools_and_testing/cross_browser_testing/index.html +++ b/files/es/learn/tools_and_testing/cross_browser_testing/index.html @@ -1,7 +1,8 @@ --- title: Cross browser testing -slug: Learn/Herramientas_y_pruebas/Cross_browser_testing +slug: Learn/Tools_and_testing/Cross_browser_testing translation_of: Learn/Tools_and_testing/Cross_browser_testing +original_slug: Learn/Herramientas_y_pruebas/Cross_browser_testing ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/tools_and_testing/github/index.html b/files/es/learn/tools_and_testing/github/index.html index 62646f1cc4..77d02cf0de 100644 --- a/files/es/learn/tools_and_testing/github/index.html +++ b/files/es/learn/tools_and_testing/github/index.html @@ -1,6 +1,6 @@ --- title: Git y GitHub -slug: Learn/Herramientas_y_pruebas/GitHub +slug: Learn/Tools_and_testing/GitHub tags: - Aprender - GitHub @@ -8,6 +8,7 @@ tags: - Web - git translation_of: Learn/Tools_and_testing/GitHub +original_slug: Learn/Herramientas_y_pruebas/GitHub ---
    {{LearnSidebar}}
    diff --git a/files/es/learn/tools_and_testing/index.html b/files/es/learn/tools_and_testing/index.html index a147c98f65..5c15d17096 100644 --- a/files/es/learn/tools_and_testing/index.html +++ b/files/es/learn/tools_and_testing/index.html @@ -1,6 +1,6 @@ --- title: Herramientas y pruebas -slug: Learn/Herramientas_y_pruebas +slug: Learn/Tools_and_testing tags: - Accesibilidad - Aprender @@ -17,6 +17,7 @@ tags: - Testing - automatización translation_of: Learn/Tools_and_testing +original_slug: Learn/Herramientas_y_pruebas ---

    {{LearnSidebar}}

    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 index 6221b0382f..a18738e8a6 100644 --- 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 @@ -1,6 +1,6 @@ --- title: Understanding client-side web development tools -slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools +slug: Learn/Tools_and_testing/Understanding_client-side_tools tags: - Aprender - CSS @@ -13,6 +13,7 @@ tags: - client-side - lado del cliente translation_of: Learn/Tools_and_testing/Understanding_client-side_tools +original_slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools ---
    {{LearnSidebar}}
    diff --git a/files/es/mdn/at_ten/index.html b/files/es/mdn/at_ten/index.html index 0e48e9e6ba..a5735ff01c 100644 --- a/files/es/mdn/at_ten/index.html +++ b/files/es/mdn/at_ten/index.html @@ -1,9 +1,10 @@ --- title: MDN en 10 -slug: MDN_en_diez +slug: MDN/At_ten tags: - MDN translation_of: MDN_at_ten +original_slug: MDN_en_diez ---
    Celebra 10 años documentando tu Web.
    diff --git a/files/es/mdn/contribute/processes/index.html b/files/es/mdn/contribute/processes/index.html index a408f11fb7..ab80694054 100644 --- a/files/es/mdn/contribute/processes/index.html +++ b/files/es/mdn/contribute/processes/index.html @@ -1,11 +1,12 @@ --- title: Procesos de documentación -slug: MDN/Contribute/Procesos +slug: MDN/Contribute/Processes tags: - Landing - MDN Meta - Procesos translation_of: MDN/Contribute/Processes +original_slug: MDN/Contribute/Procesos ---
    {{MDNSidebar}}
    {{IncludeSubnav("/es/docs/MDN")}}
    diff --git a/files/es/mdn/guidelines/conventions_definitions/index.html b/files/es/mdn/guidelines/conventions_definitions/index.html index c96e4b7ab2..b18eee9d73 100644 --- a/files/es/mdn/guidelines/conventions_definitions/index.html +++ b/files/es/mdn/guidelines/conventions_definitions/index.html @@ -1,6 +1,6 @@ --- title: MDN convenciones y definiciones -slug: MDN/Guidelines/Convenciones_y_definiciones +slug: MDN/Guidelines/Conventions_definitions tags: - Directrices - Documentación @@ -8,6 +8,7 @@ tags: - MDN - Meta MDN translation_of: MDN/Guidelines/Conventions_definitions +original_slug: MDN/Guidelines/Convenciones_y_definiciones ---
    {{MDNSidebar}}{{IncludeSubnav("/es/docs/MDN")}}
    diff --git a/files/es/mdn/guidelines/css_style_guide/index.html b/files/es/mdn/guidelines/css_style_guide/index.html index 7791d33e06..17e58b0086 100644 --- a/files/es/mdn/guidelines/css_style_guide/index.html +++ b/files/es/mdn/guidelines/css_style_guide/index.html @@ -1,11 +1,12 @@ --- title: Bloques de contenido -slug: MDN/Guidelines/Content_blocks +slug: MDN/Guidelines/CSS_style_guide tags: - MDN - Meta translation_of: MDN/Guidelines/CSS_style_guide translation_of_original: MDN/Structures/Content_blocks +original_slug: MDN/Guidelines/Content_blocks ---
    {{MDNSidebar}}

    This pages lists reusable content blocks.

    diff --git a/files/es/mdn/guidelines/writing_style_guide/index.html b/files/es/mdn/guidelines/writing_style_guide/index.html index 40bffd16ca..7f9255a324 100644 --- a/files/es/mdn/guidelines/writing_style_guide/index.html +++ b/files/es/mdn/guidelines/writing_style_guide/index.html @@ -1,10 +1,11 @@ --- title: Guía de estilo -slug: 'MDN/Guidelines/Project:Guía_de_estilo' +slug: MDN/Guidelines/Writing_style_guide tags: - Proyecto_MDC - Todas_las_Categorías translation_of: MDN/Guidelines/Writing_style_guide +original_slug: MDN/Guidelines/Project:Guía_de_estilo ---
    {{MDNSidebar}}
    diff --git a/files/es/mdn/structures/compatibility_tables/index.html b/files/es/mdn/structures/compatibility_tables/index.html index cd9a5097d2..73c3ef2464 100644 --- a/files/es/mdn/structures/compatibility_tables/index.html +++ b/files/es/mdn/structures/compatibility_tables/index.html @@ -2,7 +2,7 @@ title: >- Tablas de compatibilidad y repositorio de datos de compatibilidad del navegador (DCN) -slug: MDN/Structures/Tablas_de_compatibilidad +slug: MDN/Structures/Compatibility_tables tags: - Estructuras - Guía @@ -10,6 +10,7 @@ tags: - compatibilidad con el navegador - tablas de compatibilidad translation_of: MDN/Structures/Compatibility_tables +original_slug: MDN/Structures/Tablas_de_compatibilidad ---
    {{MDNSidebar}}
    diff --git a/files/es/mdn/structures/live_samples/index.html b/files/es/mdn/structures/live_samples/index.html index f5743b558e..c3f02940d8 100644 --- a/files/es/mdn/structures/live_samples/index.html +++ b/files/es/mdn/structures/live_samples/index.html @@ -1,7 +1,8 @@ --- title: Ejemplos ejecutables -slug: MDN/Structures/Ejemplos_ejecutables +slug: MDN/Structures/Live_samples translation_of: MDN/Structures/Live_samples +original_slug: MDN/Structures/Ejemplos_ejecutables ---
    {{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.

    diff --git a/files/es/mdn/structures/macros/other/index.html b/files/es/mdn/structures/macros/other/index.html index 532bc07fdc..c703a2f9cf 100644 --- a/files/es/mdn/structures/macros/other/index.html +++ b/files/es/mdn/structures/macros/other/index.html @@ -1,10 +1,11 @@ --- title: Otras macros -slug: MDN/Structures/Macros/Otras +slug: MDN/Structures/Macros/Other tags: - Macros - Referencia translation_of: MDN/Structures/Macros/Other +original_slug: MDN/Structures/Macros/Otras ---
    {{MDNSidebar}}
    diff --git a/files/es/mdn/tools/kumascript/index.html b/files/es/mdn/tools/kumascript/index.html index ed060eecd8..cac2778065 100644 --- a/files/es/mdn/tools/kumascript/index.html +++ b/files/es/mdn/tools/kumascript/index.html @@ -1,7 +1,8 @@ --- title: Introducción a KumaScript -slug: MDN/Tools/Introduction_to_KumaScript +slug: MDN/Tools/KumaScript translation_of: MDN/Tools/KumaScript +original_slug: MDN/Tools/Introduction_to_KumaScript ---
    {{MDNSidebar}}
    diff --git a/files/es/mdn/yari/index.html b/files/es/mdn/yari/index.html index b7b0de4fd9..894f384fc1 100644 --- a/files/es/mdn/yari/index.html +++ b/files/es/mdn/yari/index.html @@ -1,7 +1,8 @@ --- title: Kuma -slug: MDN/Kuma +slug: MDN/Yari translation_of: MDN/Kuma +original_slug: MDN/Kuma ---
    {{MDNSidebar}}
    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 index 685e282bf9..20abaa7585 100644 --- 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 @@ -1,9 +1,10 @@ --- title: Anatomía de una extension -slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension +slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension ---
    {{AddonSidebar}}
    diff --git a/files/es/mozilla/add-ons/webextensions/prerequisites/index.html b/files/es/mozilla/add-ons/webextensions/prerequisites/index.html index d022940dab..78cff72dcd 100644 --- a/files/es/mozilla/add-ons/webextensions/prerequisites/index.html +++ b/files/es/mozilla/add-ons/webextensions/prerequisites/index.html @@ -1,7 +1,8 @@ --- title: Prerequisitos -slug: Mozilla/Add-ons/WebExtensions/Prerequisitos +slug: Mozilla/Add-ons/WebExtensions/Prerequisites translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +original_slug: Mozilla/Add-ons/WebExtensions/Prerequisitos ---

    Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.

    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 index 55ce89a9c7..852314f536 100644 --- 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 @@ -1,9 +1,10 @@ --- title: Botón de la Barra de Herramientas -slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador +slug: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action tags: - WebExtension translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +original_slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador ---
    {{AddonSidebar}}
    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 index eca9f0ff30..558aae636e 100644 --- a/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.html +++ b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -1,10 +1,11 @@ --- title: ¿Qué son las extensiones? -slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions tags: - WebExtensions - extensiones translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +original_slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions ---
    {{AddonSidebar}}
    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 index d444b69f88..1a2ad67967 100644 --- a/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ b/files/es/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -1,10 +1,11 @@ --- title: Tu primera extensión -slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension tags: - Guía - WebExtension translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension ---
    {{AddonSidebar}}
    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 index 559320eca0..44fe75923e 100644 --- a/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/es/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -1,9 +1,10 @@ --- title: Tu segunda extensión -slug: Mozilla/Add-ons/WebExtensions/Tutorial +slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Tutorial ---
    {{AddonSidebar}}
    diff --git a/files/es/mozilla/developer_guide/build_instructions/index.html b/files/es/mozilla/developer_guide/build_instructions/index.html index 8322104d8e..afb282fee8 100644 --- a/files/es/mozilla/developer_guide/build_instructions/index.html +++ b/files/es/mozilla/developer_guide/build_instructions/index.html @@ -1,10 +1,11 @@ --- title: Compilar e instalar -slug: Compilar_e_instalar +slug: Mozilla/Developer_guide/Build_Instructions tags: - Documentación_de_compilado translation_of: Mozilla/Developer_guide/Build_Instructions translation_of_original: Build_and_Install +original_slug: Compilar_e_instalar ---

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

    diff --git a/files/es/mozilla/developer_guide/mozilla_build_faq/index.html b/files/es/mozilla/developer_guide/mozilla_build_faq/index.html index 6e0c380577..131d4c368f 100644 --- a/files/es/mozilla/developer_guide/mozilla_build_faq/index.html +++ b/files/es/mozilla/developer_guide/mozilla_build_faq/index.html @@ -1,10 +1,11 @@ --- title: Preguntas frecuentes sobre la compilación de Mozilla -slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla +slug: Mozilla/Developer_guide/Mozilla_build_FAQ tags: - Documentación_de_compilado - NecesitaRevisiónGramatical translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ +original_slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla ---

    Mira también:

    diff --git a/files/es/mozilla/developer_guide/source_code/cvs/index.html b/files/es/mozilla/developer_guide/source_code/cvs/index.html index 248231aee9..06e73631d4 100644 --- a/files/es/mozilla/developer_guide/source_code/cvs/index.html +++ b/files/es/mozilla/developer_guide/source_code/cvs/index.html @@ -1,9 +1,10 @@ --- title: Código fuente de Mozilla (CVS) -slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) +slug: Mozilla/Developer_guide/Source_Code/CVS tags: - Documentación_de_compilado translation_of: Mozilla/Developer_guide/Source_Code/CVS +original_slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(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.

    diff --git a/files/es/mozilla/firefox/releases/1.5/index.html b/files/es/mozilla/firefox/releases/1.5/index.html index 2372dd0f81..c79ae70942 100644 --- a/files/es/mozilla/firefox/releases/1.5/index.html +++ b/files/es/mozilla/firefox/releases/1.5/index.html @@ -1,6 +1,6 @@ --- title: Firefox 1.5 para Desarrolladores -slug: Firefox_1.5_para_Desarrolladores +slug: Mozilla/Firefox/Releases/1.5 tags: - CSS - Complementos @@ -18,6 +18,7 @@ tags: - XUL - extensiones translation_of: Mozilla/Firefox/Releases/1.5 +original_slug: Firefox_1.5_para_Desarrolladores ---
    {{FirefoxSidebar}}

    Firefox 1.5

    diff --git a/files/es/mozilla/firefox/releases/19/index.html b/files/es/mozilla/firefox/releases/19/index.html index bf38aea264..c5ebfd438a 100644 --- a/files/es/mozilla/firefox/releases/19/index.html +++ b/files/es/mozilla/firefox/releases/19/index.html @@ -1,7 +1,8 @@ --- title: Firefox 19 para Desarrolladores -slug: Firefox_19_para_desarrolladores +slug: Mozilla/Firefox/Releases/19 translation_of: Mozilla/Firefox/Releases/19 +original_slug: Firefox_19_para_desarrolladores ---
    {{FirefoxSidebar}}
    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 index 5b8c50bc83..75693c99a7 100644 --- 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 @@ -1,10 +1,11 @@ --- title: Añadir lectores de canales a Firefox -slug: Añadir_lectores_de_canales_a_Firefox +slug: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox tags: - RSS - Todas_las_Categorías translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox +original_slug: Añadir_lectores_de_canales_a_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.

    diff --git a/files/es/mozilla/firefox/releases/2/index.html b/files/es/mozilla/firefox/releases/2/index.html index 54da671995..75aa69c5f6 100644 --- a/files/es/mozilla/firefox/releases/2/index.html +++ b/files/es/mozilla/firefox/releases/2/index.html @@ -1,6 +1,6 @@ --- title: Firefox 2 para desarrolladores -slug: Firefox_2_para_desarrolladores +slug: Mozilla/Firefox/Releases/2 tags: - CSS - Complementos @@ -18,6 +18,7 @@ tags: - XUL - extensiones translation_of: Mozilla/Firefox/Releases/2 +original_slug: Firefox_2_para_desarrolladores ---
    {{FirefoxSidebar}}

    Nuevas características para desarrolladores en Firefox 2

    diff --git a/files/es/mozilla/firefox/releases/2/security_changes/index.html b/files/es/mozilla/firefox/releases/2/security_changes/index.html index 43b55fff7c..54ca7c208a 100644 --- a/files/es/mozilla/firefox/releases/2/security_changes/index.html +++ b/files/es/mozilla/firefox/releases/2/security_changes/index.html @@ -1,10 +1,11 @@ --- title: Seguridad en Firefox 2 -slug: Seguridad_en_Firefox_2 +slug: Mozilla/Firefox/Releases/2/Security_changes tags: - Seguridad - Todas_las_Categorías translation_of: Mozilla/Firefox/Releases/2/Security_changes +original_slug: Seguridad_en_Firefox_2 ---
    {{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.

    diff --git a/files/es/mozilla/firefox/releases/3.5/index.html b/files/es/mozilla/firefox/releases/3.5/index.html index 5043206fe8..4b64f3bb91 100644 --- a/files/es/mozilla/firefox/releases/3.5/index.html +++ b/files/es/mozilla/firefox/releases/3.5/index.html @@ -1,7 +1,8 @@ --- title: Firefox 3.5 para desarrolladores -slug: Firefox_3.5_para_desarrolladores +slug: Mozilla/Firefox/Releases/3.5 translation_of: Mozilla/Firefox/Releases/3.5 +original_slug: Firefox_3.5_para_desarrolladores ---
    {{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.

    diff --git a/files/es/mozilla/firefox/releases/3/dom_improvements/index.html b/files/es/mozilla/firefox/releases/3/dom_improvements/index.html index dcc39ab4a6..025f0676a1 100644 --- a/files/es/mozilla/firefox/releases/3/dom_improvements/index.html +++ b/files/es/mozilla/firefox/releases/3/dom_improvements/index.html @@ -1,11 +1,12 @@ --- title: Mejoras DOM en Firefox 3 -slug: Mejoras_DOM_en_Firefox_3 +slug: Mozilla/Firefox/Releases/3/DOM_improvements tags: - DOM - Firefox 3 - Todas_las_Categorías translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +original_slug: Mejoras_DOM_en_Firefox_3 ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(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 index 106a680dfa..dee3e1f3ab 100644 --- a/files/es/mozilla/firefox/releases/3/full_page_zoom/index.html +++ b/files/es/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -1,7 +1,8 @@ --- title: Zoom a página completa -slug: Zoom_a_página_completa +slug: Mozilla/Firefox/Releases/3/Full_page_zoom translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +original_slug: Zoom_a_página_completa ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(3) }} {{ Gecko_minversion_header(1.9) }}

    diff --git a/files/es/mozilla/firefox/releases/3/index.html b/files/es/mozilla/firefox/releases/3/index.html index 1456bfb969..a46efa65b3 100644 --- a/files/es/mozilla/firefox/releases/3/index.html +++ b/files/es/mozilla/firefox/releases/3/index.html @@ -1,9 +1,10 @@ --- title: Firefox 3 para desarrolladores -slug: Firefox_3_para_desarrolladores +slug: Mozilla/Firefox/Releases/3 tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3 +original_slug: Firefox_3_para_desarrolladores ---
    {{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.

    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 index 5dbc833d4a..51660068f7 100644 --- a/files/es/mozilla/firefox/releases/3/notable_bugs_fixed/index.html +++ b/files/es/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -1,9 +1,10 @@ --- title: Bugs importantes solucionados en Firefox 3 -slug: Bugs_importantes_solucionados_en_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Notable_bugs_fixed tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +original_slug: Bugs_importantes_solucionados_en_Firefox_3 ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(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 index 701a6640f8..66be9d4961 100644 --- a/files/es/mozilla/firefox/releases/3/svg_improvements/index.html +++ b/files/es/mozilla/firefox/releases/3/svg_improvements/index.html @@ -1,11 +1,12 @@ --- title: Mejoras SVG en Firefox 3 -slug: Mejoras_SVG_en_Firefox_3 +slug: Mozilla/Firefox/Releases/3/SVG_improvements tags: - Firefox 3 - SVG - Todas_las_Categorías translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +original_slug: Mejoras_SVG_en_Firefox_3 ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(3) }}

    diff --git a/files/es/mozilla/firefox/releases/3/templates/index.html b/files/es/mozilla/firefox/releases/3/templates/index.html index 499fa226a2..1cba453e1e 100644 --- a/files/es/mozilla/firefox/releases/3/templates/index.html +++ b/files/es/mozilla/firefox/releases/3/templates/index.html @@ -1,9 +1,10 @@ --- title: Plantillas en Firefox 3 -slug: Plantillas_en_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Templates tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Templates +original_slug: Plantillas_en_Firefox_3 ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(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 index fc3f91addd..4c50f8aabc 100644 --- a/files/es/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/es/mozilla/firefox/releases/3/updating_extensions/index.html @@ -1,9 +1,10 @@ --- title: Actualizar extensiones para Firefox 3 -slug: Actualizar_extensiones_para_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_extensions tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +original_slug: Actualizar_extensiones_para_Firefox_3 ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(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 index e81f21fa49..868d25f47b 100644 --- a/files/es/mozilla/firefox/releases/3/updating_web_applications/index.html +++ b/files/es/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -1,9 +1,10 @@ --- title: Actualizar aplicaciones web para Firefox 3 -slug: Actualizar_aplicaciones_web_para_Firefox_3 +slug: Mozilla/Firefox/Releases/3/Updating_web_applications tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +original_slug: Actualizar_aplicaciones_web_para_Firefox_3 ---
    {{FirefoxSidebar}}
    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 index e649db326a..172b327b44 100644 --- 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 @@ -1,11 +1,12 @@ --- title: Mejoras XUL en Firefox 3 -slug: Mejoras_XUL_en_Firefox_3 +slug: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 tags: - Firefox 3 - Todas_las_Categorías - XUL translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 +original_slug: Mejoras_XUL_en_Firefox_3 ---
    {{FirefoxSidebar}}

    {{ Fx_minversion_header(3) }}

    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 index e4c788c5bb..f4c2d0d435 100644 --- 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 @@ -1,8 +1,10 @@ --- title: Actualizar extensiones para Firefox 3 -slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 +slug: >- + orphaned/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 tags: - Firefox 3 +original_slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 ---