From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../accessibility_troubleshooting/index.html | 109 -- .../accessibility_troubleshooting/index.md | 109 ++ .../accessibility/css_and_javascript/index.html | 367 ---- .../accessibility/css_and_javascript/index.md | 367 ++++ .../index.html | 82 - .../index.md | 82 + files/fr/learn/accessibility/html/index.html | 529 ------ files/fr/learn/accessibility/html/index.md | 529 ++++++ files/fr/learn/accessibility/index.html | 57 - files/fr/learn/accessibility/index.md | 57 + files/fr/learn/accessibility/mobile/index.html | 310 --- files/fr/learn/accessibility/mobile/index.md | 310 +++ files/fr/learn/accessibility/multimedia/index.html | 366 ---- files/fr/learn/accessibility/multimedia/index.md | 366 ++++ .../learn/accessibility/wai-aria_basics/index.html | 426 ----- .../learn/accessibility/wai-aria_basics/index.md | 426 +++++ .../accessibility/what_is_accessibility/index.html | 197 -- .../accessibility/what_is_accessibility/index.md | 197 ++ .../available_text_editors/index.html | 291 --- .../available_text_editors/index.md | 291 +++ .../index.html | 177 -- .../index.md | 177 ++ .../common_questions/common_web_layouts/index.html | 126 -- .../common_questions/common_web_layouts/index.md | 126 ++ .../design_for_all_types_of_users/index.html | 247 --- .../design_for_all_types_of_users/index.md | 247 +++ .../how_does_the_internet_work/index.html | 96 - .../how_does_the_internet_work/index.md | 96 + .../how_much_does_it_cost/index.html | 160 -- .../how_much_does_it_cost/index.md | 160 ++ files/fr/learn/common_questions/index.html | 128 -- files/fr/learn/common_questions/index.md | 128 ++ .../index.html | 115 -- .../index.md | 115 ++ .../set_up_a_local_testing_server/index.html | 108 -- .../set_up_a_local_testing_server/index.md | 108 ++ .../thinking_before_coding/index.html | 181 -- .../thinking_before_coding/index.md | 181 ++ .../upload_files_to_a_web_server/index.html | 133 -- .../upload_files_to_a_web_server/index.md | 133 ++ .../common_questions/using_github_pages/index.html | 111 -- .../common_questions/using_github_pages/index.md | 111 ++ .../what_are_browser_developer_tools/index.html | 170 -- .../what_are_browser_developer_tools/index.md | 170 ++ .../what_are_hyperlinks/index.html | 95 - .../common_questions/what_are_hyperlinks/index.md | 95 + .../what_is_a_domain_name/index.html | 161 -- .../what_is_a_domain_name/index.md | 161 ++ .../common_questions/what_is_a_url/index.html | 155 -- .../learn/common_questions/what_is_a_url/index.md | 155 ++ .../what_is_a_web_server/index.html | 119 -- .../common_questions/what_is_a_web_server/index.md | 119 ++ .../what_is_accessibility/index.html | 92 - .../what_is_accessibility/index.md | 92 + .../what_software_do_i_need/index.html | 188 -- .../what_software_do_i_need/index.md | 188 ++ .../building_blocks/a_cool_looking_box/index.html | 99 - .../building_blocks/a_cool_looking_box/index.md | 99 + .../advanced_styling_effects/index.html | 425 ----- .../advanced_styling_effects/index.md | 425 +++++ .../backgrounds_and_borders/index.html | 316 ---- .../backgrounds_and_borders/index.md | 316 ++++ .../css/building_blocks/box_model_tasks/index.html | 85 - .../css/building_blocks/box_model_tasks/index.md | 85 + .../cascade_and_inheritance/index.html | 344 ---- .../cascade_and_inheritance/index.md | 344 ++++ .../creating_fancy_letterheaded_paper/index.html | 113 -- .../creating_fancy_letterheaded_paper/index.md | 113 ++ .../css/building_blocks/debugging_css/index.html | 203 -- .../css/building_blocks/debugging_css/index.md | 203 ++ .../fundamental_css_comprehension/index.html | 138 -- .../fundamental_css_comprehension/index.md | 138 ++ .../handling_different_text_directions/index.html | 158 -- .../handling_different_text_directions/index.md | 158 ++ files/fr/learn/css/building_blocks/index.html | 79 - files/fr/learn/css/building_blocks/index.md | 79 + .../building_blocks/overflowing_content/index.html | 124 -- .../building_blocks/overflowing_content/index.md | 124 ++ .../selectors/attribute_selectors/index.html | 156 -- .../selectors/attribute_selectors/index.md | 156 ++ .../selectors/combinators/index.html | 115 -- .../building_blocks/selectors/combinators/index.md | 115 ++ .../learn/css/building_blocks/selectors/index.html | 224 --- .../learn/css/building_blocks/selectors/index.md | 224 +++ .../pseudo-classes_and_pseudo-elements/index.html | 400 ---- .../pseudo-classes_and_pseudo-elements/index.md | 400 ++++ .../type_class_and_id_selectors/index.html | 118 -- .../selectors/type_class_and_id_selectors/index.md | 118 ++ .../building_blocks/sizing_items_in_css/index.html | 136 -- .../building_blocks/sizing_items_in_css/index.md | 136 ++ .../css/building_blocks/styling_tables/index.html | 308 --- .../css/building_blocks/styling_tables/index.md | 308 +++ .../css/building_blocks/the_box_model/index.html | 340 ---- .../css/building_blocks/the_box_model/index.md | 340 ++++ .../building_blocks/values_and_units/index.html | 394 ---- .../css/building_blocks/values_and_units/index.md | 394 ++++ files/fr/learn/css/css_layout/flexbox/index.html | 342 ---- files/fr/learn/css/css_layout/flexbox/index.md | 342 ++++ .../learn/css/css_layout/flexbox_skills/index.html | 100 - .../learn/css/css_layout/flexbox_skills/index.md | 100 + files/fr/learn/css/css_layout/floats/index.html | 474 ----- files/fr/learn/css/css_layout/floats/index.md | 474 +++++ .../fundamental_layout_comprehension/index.html | 82 - .../fundamental_layout_comprehension/index.md | 82 + files/fr/learn/css/css_layout/grids/index.html | 671 ------- files/fr/learn/css/css_layout/grids/index.md | 671 +++++++ files/fr/learn/css/css_layout/index.html | 86 - files/fr/learn/css/css_layout/index.md | 86 + .../learn/css/css_layout/introduction/index.html | 666 ------- .../fr/learn/css/css_layout/introduction/index.md | 666 +++++++ .../css_layout/legacy_layout_methods/index.html | 582 ------ .../css/css_layout/legacy_layout_methods/index.md | 582 ++++++ .../learn/css/css_layout/media_queries/index.html | 426 ----- .../fr/learn/css/css_layout/media_queries/index.md | 426 +++++ .../css_layout/multiple-column_layout/index.html | 381 ---- .../css/css_layout/multiple-column_layout/index.md | 381 ++++ .../fr/learn/css/css_layout/normal_flow/index.html | 109 -- files/fr/learn/css/css_layout/normal_flow/index.md | 109 ++ .../fr/learn/css/css_layout/positioning/index.html | 504 ----- files/fr/learn/css/css_layout/positioning/index.md | 504 +++++ .../practical_positioning_examples/index.html | 438 ----- .../practical_positioning_examples/index.md | 438 +++++ .../css/css_layout/responsive_design/index.html | 323 ---- .../css/css_layout/responsive_design/index.md | 323 ++++ .../supporting_older_browsers/index.html | 260 --- .../css_layout/supporting_older_browsers/index.md | 260 +++ .../css/first_steps/getting_started/index.html | 266 --- .../learn/css/first_steps/getting_started/index.md | 266 +++ .../first_steps/how_css_is_structured/index.html | 505 ----- .../css/first_steps/how_css_is_structured/index.md | 505 +++++ .../learn/css/first_steps/how_css_works/index.html | 149 -- .../learn/css/first_steps/how_css_works/index.md | 149 ++ files/fr/learn/css/first_steps/index.html | 56 - files/fr/learn/css/first_steps/index.md | 56 + .../using_your_new_knowledge/index.html | 106 -- .../first_steps/using_your_new_knowledge/index.md | 106 ++ .../learn/css/first_steps/what_is_css/index.html | 133 -- .../fr/learn/css/first_steps/what_is_css/index.md | 133 ++ .../learn/css/howto/create_fancy_boxes/index.html | 303 --- .../fr/learn/css/howto/create_fancy_boxes/index.md | 303 +++ files/fr/learn/css/howto/css_faq/index.html | 247 --- files/fr/learn/css/howto/css_faq/index.md | 247 +++ .../learn/css/howto/generated_content/index.html | 67 - .../fr/learn/css/howto/generated_content/index.md | 67 + files/fr/learn/css/howto/index.html | 84 - files/fr/learn/css/howto/index.md | 84 + files/fr/learn/css/index.html | 78 - files/fr/learn/css/index.md | 78 + .../learn/css/styling_text/fundamentals/index.html | 731 ------- .../learn/css/styling_text/fundamentals/index.md | 731 +++++++ files/fr/learn/css/styling_text/index.html | 48 - files/fr/learn/css/styling_text/index.md | 48 + .../css/styling_text/styling_links/index.html | 445 ----- .../learn/css/styling_text/styling_links/index.md | 445 +++++ .../css/styling_text/styling_lists/index.html | 393 ---- .../learn/css/styling_text/styling_lists/index.md | 393 ++++ .../styling_text/typesetting_a_homepage/index.html | 126 -- .../styling_text/typesetting_a_homepage/index.md | 126 ++ .../fr/learn/css/styling_text/web_fonts/index.html | 203 -- files/fr/learn/css/styling_text/web_fonts/index.md | 203 ++ .../learn/forms/advanced_form_styling/index.html | 462 ----- .../fr/learn/forms/advanced_form_styling/index.md | 462 +++++ .../forms/basic_native_form_controls/index.html | 691 ------- .../forms/basic_native_form_controls/index.md | 691 +++++++ files/fr/learn/forms/form_validation/index.html | 856 --------- files/fr/learn/forms/form_validation/index.md | 856 +++++++++ .../example_1/index.html | 421 ----- .../example_1/index.md | 421 +++++ .../example_2/index.html | 216 --- .../example_2/index.md | 216 +++ .../example_3/index.html | 248 --- .../example_3/index.md | 248 +++ .../example_4/index.html | 298 --- .../example_4/index.md | 298 +++ .../example_5/index.html | 291 --- .../example_5/index.md | 291 +++ .../how_to_build_custom_form_controls/index.html | 826 -------- .../how_to_build_custom_form_controls/index.md | 826 ++++++++ .../how_to_structure_a_web_form/example/index.html | 167 -- .../how_to_structure_a_web_form/example/index.md | 167 ++ .../forms/how_to_structure_a_web_form/index.html | 314 --- .../forms/how_to_structure_a_web_form/index.md | 314 +++ .../forms/html_forms_in_legacy_browsers/index.html | 221 --- .../forms/html_forms_in_legacy_browsers/index.md | 221 +++ files/fr/learn/forms/index.html | 80 - files/fr/learn/forms/index.md | 80 + .../index.html | 1992 -------------------- .../index.md | 1992 ++++++++++++++++++++ .../sending_and_retrieving_form_data/index.html | 344 ---- .../sending_and_retrieving_form_data/index.md | 344 ++++ .../sending_forms_through_javascript/index.html | 441 ----- .../sending_forms_through_javascript/index.md | 441 +++++ files/fr/learn/forms/styling_web_forms/index.html | 392 ---- files/fr/learn/forms/styling_web_forms/index.md | 392 ++++ .../learn/forms/your_first_form/example/index.html | 105 -- .../learn/forms/your_first_form/example/index.md | 105 ++ files/fr/learn/forms/your_first_form/index.html | 282 --- files/fr/learn/forms/your_first_form/index.md | 282 +++ files/fr/learn/front-end_web_developer/index.html | 190 -- files/fr/learn/front-end_web_developer/index.md | 190 ++ .../css_basics/index.html | 286 --- .../css_basics/index.md | 286 +++ .../dealing_with_files/index.html | 112 -- .../dealing_with_files/index.md | 112 ++ .../how_the_web_works/index.html | 110 -- .../how_the_web_works/index.md | 110 ++ .../html_basics/index.html | 229 --- .../html_basics/index.md | 229 +++ .../learn/getting_started_with_the_web/index.html | 61 - .../fr/learn/getting_started_with_the_web/index.md | 61 + .../installing_basic_software/index.html | 75 - .../installing_basic_software/index.md | 75 + .../javascript_basics/index.html | 411 ---- .../javascript_basics/index.md | 411 ++++ .../publishing_your_website/index.html | 123 -- .../publishing_your_website/index.md | 123 ++ .../the_web_and_web_standards/index.html | 171 -- .../the_web_and_web_standards/index.md | 171 ++ .../what_will_your_website_look_like/index.html | 109 -- .../what_will_your_website_look_like/index.md | 109 ++ files/fr/learn/html/cheatsheet/index.html | 284 --- files/fr/learn/html/cheatsheet/index.md | 284 +++ .../add_a_hit_map_on_top_of_an_image/index.html | 125 -- .../add_a_hit_map_on_top_of_an_image/index.md | 125 ++ .../author_fast-loading_html_pages/index.html | 119 -- .../howto/author_fast-loading_html_pages/index.md | 119 ++ .../html/howto/define_terms_with_html/index.html | 150 -- .../html/howto/define_terms_with_html/index.md | 150 ++ files/fr/learn/html/howto/index.html | 137 -- files/fr/learn/html/howto/index.md | 137 ++ .../html/howto/use_data_attributes/index.html | 80 - .../learn/html/howto/use_data_attributes/index.md | 80 + .../use_javascript_within_a_webpage/index.html | 98 - .../howto/use_javascript_within_a_webpage/index.md | 98 + files/fr/learn/html/index.html | 61 - files/fr/learn/html/index.md | 61 + .../advanced_text_formatting/index.html | 673 ------- .../advanced_text_formatting/index.md | 673 +++++++ .../creating_hyperlinks/index.html | 334 ---- .../creating_hyperlinks/index.md | 334 ++++ .../introduction_to_html/debugging_html/index.html | 194 -- .../introduction_to_html/debugging_html/index.md | 194 ++ .../document_and_website_structure/index.html | 291 --- .../document_and_website_structure/index.md | 291 +++ .../getting_started/index.html | 725 ------- .../introduction_to_html/getting_started/index.md | 725 +++++++ .../html_text_fundamentals/index.html | 951 ---------- .../html_text_fundamentals/index.md | 951 ++++++++++ .../fr/learn/html/introduction_to_html/index.html | 66 - files/fr/learn/html/introduction_to_html/index.md | 66 + .../marking_up_a_letter/index.html | 104 - .../marking_up_a_letter/index.md | 104 + .../structuring_a_page_of_content/index.html | 97 - .../structuring_a_page_of_content/index.md | 97 + .../the_head_metadata_in_html/index.html | 287 --- .../the_head_metadata_in_html/index.md | 287 +++ .../adding_vector_graphics_to_the_web/index.html | 180 -- .../adding_vector_graphics_to_the_web/index.md | 180 ++ .../images_in_html/index.html | 504 ----- .../images_in_html/index.md | 504 +++++ .../learn/html/multimedia_and_embedding/index.html | 72 - .../learn/html/multimedia_and_embedding/index.md | 72 + .../mozilla_splash_page/index.html | 111 -- .../mozilla_splash_page/index.md | 111 ++ .../other_embedding_technologies/index.html | 397 ---- .../other_embedding_technologies/index.md | 397 ++++ .../responsive_images/index.html | 236 --- .../responsive_images/index.md | 236 +++ .../video_and_audio_content/index.html | 315 ---- .../video_and_audio_content/index.md | 315 ++++ files/fr/learn/html/tables/advanced/index.html | 476 ----- files/fr/learn/html/tables/advanced/index.md | 476 +++++ files/fr/learn/html/tables/basics/index.html | 557 ------ files/fr/learn/html/tables/basics/index.md | 557 ++++++ files/fr/learn/html/tables/index.html | 44 - files/fr/learn/html/tables/index.md | 44 + .../html/tables/structuring_planet_data/index.html | 73 - .../html/tables/structuring_planet_data/index.md | 73 + files/fr/learn/index.html | 138 -- files/fr/learn/index.md | 138 ++ files/fr/learn/index/index.html | 12 - files/fr/learn/index/index.md | 12 + .../javascript/asynchronous/async_await/index.html | 546 ------ .../javascript/asynchronous/async_await/index.md | 546 ++++++ .../choosing_the_right_approach/index.html | 553 ------ .../choosing_the_right_approach/index.md | 553 ++++++ .../javascript/asynchronous/concepts/index.html | 165 -- .../javascript/asynchronous/concepts/index.md | 165 ++ files/fr/learn/javascript/asynchronous/index.html | 62 - files/fr/learn/javascript/asynchronous/index.md | 62 + .../javascript/asynchronous/introducing/index.html | 286 --- .../javascript/asynchronous/introducing/index.md | 286 +++ .../javascript/asynchronous/promises/index.html | 576 ------ .../javascript/asynchronous/promises/index.md | 576 ++++++ .../asynchronous/timeouts_and_intervals/index.html | 599 ------ .../asynchronous/timeouts_and_intervals/index.md | 599 ++++++ .../build_your_own_function/index.html | 243 --- .../build_your_own_function/index.md | 243 +++ .../building_blocks/conditionals/index.html | 623 ------ .../building_blocks/conditionals/index.md | 623 ++++++ .../javascript/building_blocks/events/index.html | 568 ------ .../javascript/building_blocks/events/index.md | 568 ++++++ .../building_blocks/functions/index.html | 393 ---- .../javascript/building_blocks/functions/index.md | 393 ++++ .../building_blocks/image_gallery/index.html | 162 -- .../building_blocks/image_gallery/index.md | 162 ++ .../fr/learn/javascript/building_blocks/index.html | 56 - files/fr/learn/javascript/building_blocks/index.md | 56 + .../building_blocks/looping_code/index.html | 856 --------- .../building_blocks/looping_code/index.md | 856 +++++++++ .../building_blocks/return_values/index.html | 183 -- .../building_blocks/return_values/index.md | 183 ++ .../client-side_storage/index.html | 882 --------- .../client-side_storage/index.md | 882 +++++++++ .../drawing_graphics/index.html | 923 --------- .../client-side_web_apis/drawing_graphics/index.md | 923 +++++++++ .../client-side_web_apis/fetching_data/index.html | 398 ---- .../client-side_web_apis/fetching_data/index.md | 398 ++++ .../javascript/client-side_web_apis/index.html | 52 - .../learn/javascript/client-side_web_apis/index.md | 52 + .../client-side_web_apis/introduction/index.html | 297 --- .../client-side_web_apis/introduction/index.md | 297 +++ .../manipulating_documents/index.html | 332 ---- .../manipulating_documents/index.md | 332 ++++ .../third_party_apis/index.html | 441 ----- .../client-side_web_apis/third_party_apis/index.md | 441 +++++ .../video_and_audio_apis/index.html | 519 ----- .../video_and_audio_apis/index.md | 519 +++++ .../first_steps/a_first_splash/index.html | 699 ------- .../javascript/first_steps/a_first_splash/index.md | 699 +++++++ .../learn/javascript/first_steps/arrays/index.html | 517 ----- .../learn/javascript/first_steps/arrays/index.md | 517 +++++ files/fr/learn/javascript/first_steps/index.html | 70 - files/fr/learn/javascript/first_steps/index.md | 70 + .../learn/javascript/first_steps/math/index.html | 450 ----- .../fr/learn/javascript/first_steps/math/index.md | 450 +++++ .../first_steps/silly_story_generator/index.html | 143 -- .../first_steps/silly_story_generator/index.md | 143 ++ .../javascript/first_steps/strings/index.html | 264 --- .../learn/javascript/first_steps/strings/index.md | 264 +++ .../test_your_skills_colon__arrays/index.html | 93 - .../test_your_skills_colon__arrays/index.md | 93 + .../first_steps/useful_string_methods/index.html | 461 ----- .../first_steps/useful_string_methods/index.md | 461 +++++ .../javascript/first_steps/variables/index.html | 418 ---- .../javascript/first_steps/variables/index.md | 418 ++++ .../first_steps/what_is_javascript/index.html | 406 ---- .../first_steps/what_is_javascript/index.md | 406 ++++ .../first_steps/what_went_wrong/index.html | 256 --- .../first_steps/what_went_wrong/index.md | 256 +++ files/fr/learn/javascript/index.html | 62 - files/fr/learn/javascript/index.md | 62 + .../adding_bouncing_balls_features/index.html | 209 -- .../adding_bouncing_balls_features/index.md | 209 ++ .../fr/learn/javascript/objects/basics/index.html | 258 --- files/fr/learn/javascript/objects/basics/index.md | 258 +++ files/fr/learn/javascript/objects/index.html | 70 - files/fr/learn/javascript/objects/index.md | 70 + .../javascript/objects/inheritance/index.html | 261 --- .../learn/javascript/objects/inheritance/index.md | 261 +++ files/fr/learn/javascript/objects/json/index.html | 338 ---- files/fr/learn/javascript/objects/json/index.md | 338 ++++ .../objects/object-oriented_js/index.html | 279 --- .../javascript/objects/object-oriented_js/index.md | 279 +++ .../objects/object_building_practice/index.html | 317 ---- .../objects/object_building_practice/index.md | 317 ++++ .../objects/object_prototypes/index.html | 245 --- .../javascript/objects/object_prototypes/index.md | 245 +++ files/fr/learn/performance/css/index.html | 84 - files/fr/learn/performance/css/index.md | 84 + files/fr/learn/performance/html/index.html | 82 - files/fr/learn/performance/html/index.md | 82 + files/fr/learn/performance/index.html | 81 - files/fr/learn/performance/index.md | 81 + .../performance/measuring_performance/index.html | 101 - .../performance/measuring_performance/index.md | 101 + files/fr/learn/performance/multimedia/index.html | 144 -- files/fr/learn/performance/multimedia/index.md | 144 ++ .../performance/why_web_performance/index.html | 100 - .../learn/performance/why_web_performance/index.md | 100 + .../learn/server-side/django/admin_site/index.html | 372 ---- .../learn/server-side/django/admin_site/index.md | 372 ++++ .../django/development_environment/index.html | 413 ---- .../django/development_environment/index.md | 413 ++++ files/fr/learn/server-side/django/forms/index.html | 651 ------- files/fr/learn/server-side/django/forms/index.md | 651 +++++++ .../server-side/django/generic_views/index.html | 635 ------- .../server-side/django/generic_views/index.md | 635 +++++++ .../learn/server-side/django/home_page/index.html | 429 ----- .../fr/learn/server-side/django/home_page/index.md | 429 +++++ files/fr/learn/server-side/django/index.html | 65 - files/fr/learn/server-side/django/index.md | 65 + .../server-side/django/introduction/index.html | 277 --- .../learn/server-side/django/introduction/index.md | 277 +++ .../fr/learn/server-side/django/models/index.html | 462 ----- files/fr/learn/server-side/django/models/index.md | 462 +++++ .../server-side/django/skeleton_website/index.html | 403 ---- .../server-side/django/skeleton_website/index.md | 403 ++++ .../fr/learn/server-side/django/testing/index.html | 956 ---------- files/fr/learn/server-side/django/testing/index.md | 956 ++++++++++ .../tutorial_local_library_website/index.html | 101 - .../django/tutorial_local_library_website/index.md | 101 + .../fr/learn/server-side/express_nodejs/index.html | 66 - files/fr/learn/server-side/express_nodejs/index.md | 66 + .../express_nodejs/introduction/index.html | 521 ----- .../express_nodejs/introduction/index.md | 521 +++++ .../first_steps/client-server_overview/index.html | 317 ---- .../first_steps/client-server_overview/index.md | 317 ++++ files/fr/learn/server-side/first_steps/index.html | 46 - files/fr/learn/server-side/first_steps/index.md | 46 + .../first_steps/introduction/index.html | 235 --- .../server-side/first_steps/introduction/index.md | 235 +++ .../first_steps/web_frameworks/index.html | 307 --- .../first_steps/web_frameworks/index.md | 307 +++ .../first_steps/website_security/index.html | 163 -- .../first_steps/website_security/index.md | 163 ++ files/fr/learn/server-side/index.html | 58 - files/fr/learn/server-side/index.md | 58 + .../client-side_javascript_frameworks/index.html | 175 -- .../client-side_javascript_frameworks/index.md | 175 ++ .../introduction/index.html | 405 ---- .../introduction/index.md | 405 ++++ .../main_features/index.html | 354 ---- .../main_features/index.md | 354 ++++ .../react_getting_started/index.html | 468 ----- .../react_getting_started/index.md | 468 +++++ .../react_todo_list_beginning/index.html | 603 ------ .../react_todo_list_beginning/index.md | 603 ++++++ .../vue_getting_started/index.html | 296 --- .../vue_getting_started/index.md | 296 +++ .../cross_browser_testing/accessibility/index.html | 685 ------- .../cross_browser_testing/accessibility/index.md | 685 +++++++ .../cross_browser_testing/html_and_css/index.html | 507 ----- .../cross_browser_testing/html_and_css/index.md | 507 +++++ .../cross_browser_testing/index.html | 48 - .../cross_browser_testing/index.md | 48 + .../cross_browser_testing/introduction/index.html | 207 -- .../cross_browser_testing/introduction/index.md | 207 ++ .../cross_browser_testing/javascript/index.html | 519 ----- .../cross_browser_testing/javascript/index.md | 519 +++++ .../testing_strategies/index.html | 362 ---- .../testing_strategies/index.md | 362 ++++ files/fr/learn/tools_and_testing/github/index.html | 95 - files/fr/learn/tools_and_testing/github/index.md | 95 + files/fr/learn/tools_and_testing/index.html | 43 - files/fr/learn/tools_and_testing/index.md | 43 + .../command_line/index.html | 488 ----- .../command_line/index.md | 488 +++++ .../understanding_client-side_tools/index.html | 39 - .../understanding_client-side_tools/index.md | 39 + 450 files changed, 65264 insertions(+), 65264 deletions(-) delete mode 100644 files/fr/learn/accessibility/accessibility_troubleshooting/index.html create mode 100644 files/fr/learn/accessibility/accessibility_troubleshooting/index.md delete mode 100644 files/fr/learn/accessibility/css_and_javascript/index.html create mode 100644 files/fr/learn/accessibility/css_and_javascript/index.md delete mode 100644 files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html create mode 100644 files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md delete mode 100644 files/fr/learn/accessibility/html/index.html create mode 100644 files/fr/learn/accessibility/html/index.md delete mode 100644 files/fr/learn/accessibility/index.html create mode 100644 files/fr/learn/accessibility/index.md delete mode 100644 files/fr/learn/accessibility/mobile/index.html create mode 100644 files/fr/learn/accessibility/mobile/index.md delete mode 100644 files/fr/learn/accessibility/multimedia/index.html create mode 100644 files/fr/learn/accessibility/multimedia/index.md delete mode 100644 files/fr/learn/accessibility/wai-aria_basics/index.html create mode 100644 files/fr/learn/accessibility/wai-aria_basics/index.md delete mode 100644 files/fr/learn/accessibility/what_is_accessibility/index.html create mode 100644 files/fr/learn/accessibility/what_is_accessibility/index.md delete mode 100644 files/fr/learn/common_questions/available_text_editors/index.html create mode 100644 files/fr/learn/common_questions/available_text_editors/index.md delete mode 100644 files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html create mode 100644 files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md delete mode 100644 files/fr/learn/common_questions/common_web_layouts/index.html create mode 100644 files/fr/learn/common_questions/common_web_layouts/index.md delete mode 100644 files/fr/learn/common_questions/design_for_all_types_of_users/index.html create mode 100644 files/fr/learn/common_questions/design_for_all_types_of_users/index.md delete mode 100644 files/fr/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/fr/learn/common_questions/how_does_the_internet_work/index.md delete mode 100644 files/fr/learn/common_questions/how_much_does_it_cost/index.html create mode 100644 files/fr/learn/common_questions/how_much_does_it_cost/index.md delete mode 100644 files/fr/learn/common_questions/index.html create mode 100644 files/fr/learn/common_questions/index.md delete mode 100644 files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md delete mode 100644 files/fr/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/fr/learn/common_questions/set_up_a_local_testing_server/index.md delete mode 100644 files/fr/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/fr/learn/common_questions/thinking_before_coding/index.md delete mode 100644 files/fr/learn/common_questions/upload_files_to_a_web_server/index.html create mode 100644 files/fr/learn/common_questions/upload_files_to_a_web_server/index.md delete mode 100644 files/fr/learn/common_questions/using_github_pages/index.html create mode 100644 files/fr/learn/common_questions/using_github_pages/index.md delete mode 100644 files/fr/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/fr/learn/common_questions/what_are_browser_developer_tools/index.md delete mode 100644 files/fr/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/fr/learn/common_questions/what_are_hyperlinks/index.md delete mode 100644 files/fr/learn/common_questions/what_is_a_domain_name/index.html create mode 100644 files/fr/learn/common_questions/what_is_a_domain_name/index.md delete mode 100644 files/fr/learn/common_questions/what_is_a_url/index.html create mode 100644 files/fr/learn/common_questions/what_is_a_url/index.md delete mode 100644 files/fr/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/fr/learn/common_questions/what_is_a_web_server/index.md delete mode 100644 files/fr/learn/common_questions/what_is_accessibility/index.html create mode 100644 files/fr/learn/common_questions/what_is_accessibility/index.md delete mode 100644 files/fr/learn/common_questions/what_software_do_i_need/index.html create mode 100644 files/fr/learn/common_questions/what_software_do_i_need/index.md delete mode 100644 files/fr/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/fr/learn/css/building_blocks/a_cool_looking_box/index.md delete mode 100644 files/fr/learn/css/building_blocks/advanced_styling_effects/index.html create mode 100644 files/fr/learn/css/building_blocks/advanced_styling_effects/index.md delete mode 100644 files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html create mode 100644 files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md delete mode 100644 files/fr/learn/css/building_blocks/box_model_tasks/index.html create mode 100644 files/fr/learn/css/building_blocks/box_model_tasks/index.md delete mode 100644 files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md delete mode 100644 files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md delete mode 100644 files/fr/learn/css/building_blocks/debugging_css/index.html create mode 100644 files/fr/learn/css/building_blocks/debugging_css/index.md delete mode 100644 files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md delete mode 100644 files/fr/learn/css/building_blocks/handling_different_text_directions/index.html create mode 100644 files/fr/learn/css/building_blocks/handling_different_text_directions/index.md delete mode 100644 files/fr/learn/css/building_blocks/index.html create mode 100644 files/fr/learn/css/building_blocks/index.md delete mode 100644 files/fr/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/fr/learn/css/building_blocks/overflowing_content/index.md delete mode 100644 files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md delete mode 100644 files/fr/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/combinators/index.md delete mode 100644 files/fr/learn/css/building_blocks/selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/index.md delete mode 100644 files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md delete mode 100644 files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md delete mode 100644 files/fr/learn/css/building_blocks/sizing_items_in_css/index.html create mode 100644 files/fr/learn/css/building_blocks/sizing_items_in_css/index.md delete mode 100644 files/fr/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/fr/learn/css/building_blocks/styling_tables/index.md delete mode 100644 files/fr/learn/css/building_blocks/the_box_model/index.html create mode 100644 files/fr/learn/css/building_blocks/the_box_model/index.md delete mode 100644 files/fr/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/fr/learn/css/building_blocks/values_and_units/index.md delete mode 100644 files/fr/learn/css/css_layout/flexbox/index.html create mode 100644 files/fr/learn/css/css_layout/flexbox/index.md delete mode 100644 files/fr/learn/css/css_layout/flexbox_skills/index.html create mode 100644 files/fr/learn/css/css_layout/flexbox_skills/index.md delete mode 100644 files/fr/learn/css/css_layout/floats/index.html create mode 100644 files/fr/learn/css/css_layout/floats/index.md delete mode 100644 files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html create mode 100644 files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md delete mode 100644 files/fr/learn/css/css_layout/grids/index.html create mode 100644 files/fr/learn/css/css_layout/grids/index.md delete mode 100644 files/fr/learn/css/css_layout/index.html create mode 100644 files/fr/learn/css/css_layout/index.md delete mode 100644 files/fr/learn/css/css_layout/introduction/index.html create mode 100644 files/fr/learn/css/css_layout/introduction/index.md delete mode 100644 files/fr/learn/css/css_layout/legacy_layout_methods/index.html create mode 100644 files/fr/learn/css/css_layout/legacy_layout_methods/index.md delete mode 100644 files/fr/learn/css/css_layout/media_queries/index.html create mode 100644 files/fr/learn/css/css_layout/media_queries/index.md delete mode 100644 files/fr/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 files/fr/learn/css/css_layout/multiple-column_layout/index.md delete mode 100644 files/fr/learn/css/css_layout/normal_flow/index.html create mode 100644 files/fr/learn/css/css_layout/normal_flow/index.md delete mode 100644 files/fr/learn/css/css_layout/positioning/index.html create mode 100644 files/fr/learn/css/css_layout/positioning/index.md delete mode 100644 files/fr/learn/css/css_layout/practical_positioning_examples/index.html create mode 100644 files/fr/learn/css/css_layout/practical_positioning_examples/index.md delete mode 100644 files/fr/learn/css/css_layout/responsive_design/index.html create mode 100644 files/fr/learn/css/css_layout/responsive_design/index.md delete mode 100644 files/fr/learn/css/css_layout/supporting_older_browsers/index.html create mode 100644 files/fr/learn/css/css_layout/supporting_older_browsers/index.md delete mode 100644 files/fr/learn/css/first_steps/getting_started/index.html create mode 100644 files/fr/learn/css/first_steps/getting_started/index.md delete mode 100644 files/fr/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/fr/learn/css/first_steps/how_css_is_structured/index.md delete mode 100644 files/fr/learn/css/first_steps/how_css_works/index.html create mode 100644 files/fr/learn/css/first_steps/how_css_works/index.md delete mode 100644 files/fr/learn/css/first_steps/index.html create mode 100644 files/fr/learn/css/first_steps/index.md delete mode 100644 files/fr/learn/css/first_steps/using_your_new_knowledge/index.html create mode 100644 files/fr/learn/css/first_steps/using_your_new_knowledge/index.md delete mode 100644 files/fr/learn/css/first_steps/what_is_css/index.html create mode 100644 files/fr/learn/css/first_steps/what_is_css/index.md delete mode 100644 files/fr/learn/css/howto/create_fancy_boxes/index.html create mode 100644 files/fr/learn/css/howto/create_fancy_boxes/index.md delete mode 100644 files/fr/learn/css/howto/css_faq/index.html create mode 100644 files/fr/learn/css/howto/css_faq/index.md delete mode 100644 files/fr/learn/css/howto/generated_content/index.html create mode 100644 files/fr/learn/css/howto/generated_content/index.md delete mode 100644 files/fr/learn/css/howto/index.html create mode 100644 files/fr/learn/css/howto/index.md delete mode 100644 files/fr/learn/css/index.html create mode 100644 files/fr/learn/css/index.md delete mode 100644 files/fr/learn/css/styling_text/fundamentals/index.html create mode 100644 files/fr/learn/css/styling_text/fundamentals/index.md delete mode 100644 files/fr/learn/css/styling_text/index.html create mode 100644 files/fr/learn/css/styling_text/index.md delete mode 100644 files/fr/learn/css/styling_text/styling_links/index.html create mode 100644 files/fr/learn/css/styling_text/styling_links/index.md delete mode 100644 files/fr/learn/css/styling_text/styling_lists/index.html create mode 100644 files/fr/learn/css/styling_text/styling_lists/index.md delete mode 100644 files/fr/learn/css/styling_text/typesetting_a_homepage/index.html create mode 100644 files/fr/learn/css/styling_text/typesetting_a_homepage/index.md delete mode 100644 files/fr/learn/css/styling_text/web_fonts/index.html create mode 100644 files/fr/learn/css/styling_text/web_fonts/index.md delete mode 100644 files/fr/learn/forms/advanced_form_styling/index.html create mode 100644 files/fr/learn/forms/advanced_form_styling/index.md delete mode 100644 files/fr/learn/forms/basic_native_form_controls/index.html create mode 100644 files/fr/learn/forms/basic_native_form_controls/index.md delete mode 100644 files/fr/learn/forms/form_validation/index.html create mode 100644 files/fr/learn/forms/form_validation/index.md delete mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md delete mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md delete mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md delete mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md delete mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md delete mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/index.md delete mode 100644 files/fr/learn/forms/how_to_structure_a_web_form/example/index.html create mode 100644 files/fr/learn/forms/how_to_structure_a_web_form/example/index.md delete mode 100644 files/fr/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/fr/learn/forms/how_to_structure_a_web_form/index.md delete mode 100644 files/fr/learn/forms/html_forms_in_legacy_browsers/index.html create mode 100644 files/fr/learn/forms/html_forms_in_legacy_browsers/index.md delete mode 100644 files/fr/learn/forms/index.html create mode 100644 files/fr/learn/forms/index.md delete mode 100644 files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html create mode 100644 files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md delete mode 100644 files/fr/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/fr/learn/forms/sending_and_retrieving_form_data/index.md delete mode 100644 files/fr/learn/forms/sending_forms_through_javascript/index.html create mode 100644 files/fr/learn/forms/sending_forms_through_javascript/index.md delete mode 100644 files/fr/learn/forms/styling_web_forms/index.html create mode 100644 files/fr/learn/forms/styling_web_forms/index.md delete mode 100644 files/fr/learn/forms/your_first_form/example/index.html create mode 100644 files/fr/learn/forms/your_first_form/example/index.md delete mode 100644 files/fr/learn/forms/your_first_form/index.html create mode 100644 files/fr/learn/forms/your_first_form/index.md delete mode 100644 files/fr/learn/front-end_web_developer/index.html create mode 100644 files/fr/learn/front-end_web_developer/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/css_basics/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/html_basics/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/javascript_basics/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md delete mode 100644 files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md delete mode 100644 files/fr/learn/html/cheatsheet/index.html create mode 100644 files/fr/learn/html/cheatsheet/index.md delete mode 100644 files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html create mode 100644 files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md delete mode 100644 files/fr/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/fr/learn/html/howto/author_fast-loading_html_pages/index.md delete mode 100644 files/fr/learn/html/howto/define_terms_with_html/index.html create mode 100644 files/fr/learn/html/howto/define_terms_with_html/index.md delete mode 100644 files/fr/learn/html/howto/index.html create mode 100644 files/fr/learn/html/howto/index.md delete mode 100644 files/fr/learn/html/howto/use_data_attributes/index.html create mode 100644 files/fr/learn/html/howto/use_data_attributes/index.md delete mode 100644 files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html create mode 100644 files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md delete mode 100644 files/fr/learn/html/index.html create mode 100644 files/fr/learn/html/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/fr/learn/html/introduction_to_html/getting_started/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md delete mode 100644 files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md delete mode 100644 files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md delete mode 100644 files/fr/learn/html/tables/advanced/index.html create mode 100644 files/fr/learn/html/tables/advanced/index.md delete mode 100644 files/fr/learn/html/tables/basics/index.html create mode 100644 files/fr/learn/html/tables/basics/index.md delete mode 100644 files/fr/learn/html/tables/index.html create mode 100644 files/fr/learn/html/tables/index.md delete mode 100644 files/fr/learn/html/tables/structuring_planet_data/index.html create mode 100644 files/fr/learn/html/tables/structuring_planet_data/index.md delete mode 100644 files/fr/learn/index.html create mode 100644 files/fr/learn/index.md delete mode 100644 files/fr/learn/index/index.html create mode 100644 files/fr/learn/index/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/async_await/index.html create mode 100644 files/fr/learn/javascript/asynchronous/async_await/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html create mode 100644 files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/concepts/index.html create mode 100644 files/fr/learn/javascript/asynchronous/concepts/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/index.html create mode 100644 files/fr/learn/javascript/asynchronous/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/introducing/index.html create mode 100644 files/fr/learn/javascript/asynchronous/introducing/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/promises/index.html create mode 100644 files/fr/learn/javascript/asynchronous/promises/index.md delete mode 100644 files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html create mode 100644 files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/build_your_own_function/index.html create mode 100644 files/fr/learn/javascript/building_blocks/build_your_own_function/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/conditionals/index.html create mode 100644 files/fr/learn/javascript/building_blocks/conditionals/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/events/index.html create mode 100644 files/fr/learn/javascript/building_blocks/events/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/functions/index.html create mode 100644 files/fr/learn/javascript/building_blocks/functions/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/image_gallery/index.html create mode 100644 files/fr/learn/javascript/building_blocks/image_gallery/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/index.html create mode 100644 files/fr/learn/javascript/building_blocks/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/looping_code/index.html create mode 100644 files/fr/learn/javascript/building_blocks/looping_code/index.md delete mode 100644 files/fr/learn/javascript/building_blocks/return_values/index.html create mode 100644 files/fr/learn/javascript/building_blocks/return_values/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/introduction/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/introduction/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md delete mode 100644 files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md delete mode 100644 files/fr/learn/javascript/first_steps/a_first_splash/index.html create mode 100644 files/fr/learn/javascript/first_steps/a_first_splash/index.md delete mode 100644 files/fr/learn/javascript/first_steps/arrays/index.html create mode 100644 files/fr/learn/javascript/first_steps/arrays/index.md delete mode 100644 files/fr/learn/javascript/first_steps/index.html create mode 100644 files/fr/learn/javascript/first_steps/index.md delete mode 100644 files/fr/learn/javascript/first_steps/math/index.html create mode 100644 files/fr/learn/javascript/first_steps/math/index.md delete mode 100644 files/fr/learn/javascript/first_steps/silly_story_generator/index.html create mode 100644 files/fr/learn/javascript/first_steps/silly_story_generator/index.md delete mode 100644 files/fr/learn/javascript/first_steps/strings/index.html create mode 100644 files/fr/learn/javascript/first_steps/strings/index.md delete mode 100644 files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html create mode 100644 files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md delete mode 100644 files/fr/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/fr/learn/javascript/first_steps/useful_string_methods/index.md delete mode 100644 files/fr/learn/javascript/first_steps/variables/index.html create mode 100644 files/fr/learn/javascript/first_steps/variables/index.md delete mode 100644 files/fr/learn/javascript/first_steps/what_is_javascript/index.html create mode 100644 files/fr/learn/javascript/first_steps/what_is_javascript/index.md delete mode 100644 files/fr/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/fr/learn/javascript/first_steps/what_went_wrong/index.md delete mode 100644 files/fr/learn/javascript/index.html create mode 100644 files/fr/learn/javascript/index.md delete mode 100644 files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html create mode 100644 files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md delete mode 100644 files/fr/learn/javascript/objects/basics/index.html create mode 100644 files/fr/learn/javascript/objects/basics/index.md delete mode 100644 files/fr/learn/javascript/objects/index.html create mode 100644 files/fr/learn/javascript/objects/index.md delete mode 100644 files/fr/learn/javascript/objects/inheritance/index.html create mode 100644 files/fr/learn/javascript/objects/inheritance/index.md delete mode 100644 files/fr/learn/javascript/objects/json/index.html create mode 100644 files/fr/learn/javascript/objects/json/index.md delete mode 100644 files/fr/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/fr/learn/javascript/objects/object-oriented_js/index.md delete mode 100644 files/fr/learn/javascript/objects/object_building_practice/index.html create mode 100644 files/fr/learn/javascript/objects/object_building_practice/index.md delete mode 100644 files/fr/learn/javascript/objects/object_prototypes/index.html create mode 100644 files/fr/learn/javascript/objects/object_prototypes/index.md delete mode 100644 files/fr/learn/performance/css/index.html create mode 100644 files/fr/learn/performance/css/index.md delete mode 100644 files/fr/learn/performance/html/index.html create mode 100644 files/fr/learn/performance/html/index.md delete mode 100644 files/fr/learn/performance/index.html create mode 100644 files/fr/learn/performance/index.md delete mode 100644 files/fr/learn/performance/measuring_performance/index.html create mode 100644 files/fr/learn/performance/measuring_performance/index.md delete mode 100644 files/fr/learn/performance/multimedia/index.html create mode 100644 files/fr/learn/performance/multimedia/index.md delete mode 100644 files/fr/learn/performance/why_web_performance/index.html create mode 100644 files/fr/learn/performance/why_web_performance/index.md delete mode 100644 files/fr/learn/server-side/django/admin_site/index.html create mode 100644 files/fr/learn/server-side/django/admin_site/index.md delete mode 100644 files/fr/learn/server-side/django/development_environment/index.html create mode 100644 files/fr/learn/server-side/django/development_environment/index.md delete mode 100644 files/fr/learn/server-side/django/forms/index.html create mode 100644 files/fr/learn/server-side/django/forms/index.md delete mode 100644 files/fr/learn/server-side/django/generic_views/index.html create mode 100644 files/fr/learn/server-side/django/generic_views/index.md delete mode 100644 files/fr/learn/server-side/django/home_page/index.html create mode 100644 files/fr/learn/server-side/django/home_page/index.md delete mode 100644 files/fr/learn/server-side/django/index.html create mode 100644 files/fr/learn/server-side/django/index.md delete mode 100644 files/fr/learn/server-side/django/introduction/index.html create mode 100644 files/fr/learn/server-side/django/introduction/index.md delete mode 100644 files/fr/learn/server-side/django/models/index.html create mode 100644 files/fr/learn/server-side/django/models/index.md delete mode 100644 files/fr/learn/server-side/django/skeleton_website/index.html create mode 100644 files/fr/learn/server-side/django/skeleton_website/index.md delete mode 100644 files/fr/learn/server-side/django/testing/index.html create mode 100644 files/fr/learn/server-side/django/testing/index.md delete mode 100644 files/fr/learn/server-side/django/tutorial_local_library_website/index.html create mode 100644 files/fr/learn/server-side/django/tutorial_local_library_website/index.md delete mode 100644 files/fr/learn/server-side/express_nodejs/index.html create mode 100644 files/fr/learn/server-side/express_nodejs/index.md delete mode 100644 files/fr/learn/server-side/express_nodejs/introduction/index.html create mode 100644 files/fr/learn/server-side/express_nodejs/introduction/index.md delete mode 100644 files/fr/learn/server-side/first_steps/client-server_overview/index.html create mode 100644 files/fr/learn/server-side/first_steps/client-server_overview/index.md delete mode 100644 files/fr/learn/server-side/first_steps/index.html create mode 100644 files/fr/learn/server-side/first_steps/index.md delete mode 100644 files/fr/learn/server-side/first_steps/introduction/index.html create mode 100644 files/fr/learn/server-side/first_steps/introduction/index.md delete mode 100644 files/fr/learn/server-side/first_steps/web_frameworks/index.html create mode 100644 files/fr/learn/server-side/first_steps/web_frameworks/index.md delete mode 100644 files/fr/learn/server-side/first_steps/website_security/index.html create mode 100644 files/fr/learn/server-side/first_steps/website_security/index.md delete mode 100644 files/fr/learn/server-side/index.html create mode 100644 files/fr/learn/server-side/index.md delete mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html create mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md delete mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html create mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md delete mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html create mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md delete mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html create mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md delete mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html create mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md delete mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html create mode 100644 files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/index.md delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md delete mode 100644 files/fr/learn/tools_and_testing/github/index.html create mode 100644 files/fr/learn/tools_and_testing/github/index.md delete mode 100644 files/fr/learn/tools_and_testing/index.html create mode 100644 files/fr/learn/tools_and_testing/index.md delete mode 100644 files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html create mode 100644 files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md delete mode 100644 files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html create mode 100644 files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html deleted file mode 100644 index 4a9aea28fd..0000000000 --- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 'Évaluation: dépannage d''accessibilité' -slug: Learn/Accessibility/Accessibility_troubleshooting -tags: - - Accessibilité - - Apprendre - - CSS - - Débutant - - HTML - - JavaScript -translation_of: Learn/Accessibility/Accessibility_troubleshooting -original_slug: Apprendre/a11y/Accessibility_troubleshooting ---- -

{{LearnSidebar}}
- {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.

- - - - - - - - - - - - -
Conditions préalables:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  previous articles in the course.
Objectif:Tester les connaissances de base sur les principes fondamentaux d'accessibilité.
- -

Point de départ

- - -

Pour lancer cette évaluation, vous devez aller chercher le  ZIP containing the files that comprise the example. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local

- -

Le site d'évaluation terminé devrait ressembler à ceci:

- -

- -

Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!

- -

Résumé du projet

- -

Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.

- -

Couleur

- -

Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?

- -

Semantic HTML

- -
    -
  1. Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.
    2. -
  2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
    3. -
  3. La partie du menu de navigation du site ( <div class="nav"></div>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
    4. -
- -
-

Note : Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.

-
- -

Les images

- -

Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?

- -

Le lecteur audio

- -
    -
  1. Le lecteur  <audio> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
    2. -
  2. Le lecteur  <audio> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
    3. -
- -

Les formulaires

- -
    -
  1. L'élément  <input> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
    2. -
  2. Les deux éléments  <input> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
    3. -
- -

Le contrôle afficher / masquer les commentaires

- -

Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?

- -

La table

- -

Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?

- -

Autres considérations?

- -

Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?

- -

Évaluation

- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la discussion thread for this exercise,  ou sur le canal IRC #mdn  sur Mozilla IRC. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!

- -

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md new file mode 100644 index 0000000000..4a9aea28fd --- /dev/null +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md @@ -0,0 +1,109 @@ +--- +title: 'Évaluation: dépannage d''accessibilité' +slug: Learn/Accessibility/Accessibility_troubleshooting +tags: + - Accessibilité + - Apprendre + - CSS + - Débutant + - HTML + - JavaScript +translation_of: Learn/Accessibility/Accessibility_troubleshooting +original_slug: Apprendre/a11y/Accessibility_troubleshooting +--- +

{{LearnSidebar}}
+ {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.

+ + + + + + + + + + + + +
Conditions préalables:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  previous articles in the course.
Objectif:Tester les connaissances de base sur les principes fondamentaux d'accessibilité.
+ +

Point de départ

+ + +

Pour lancer cette évaluation, vous devez aller chercher le  ZIP containing the files that comprise the example. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local

+ +

Le site d'évaluation terminé devrait ressembler à ceci:

+ +

+ +

Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!

+ +

Résumé du projet

+ +

Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.

+ +

Couleur

+ +

Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?

+ +

Semantic HTML

+ +
    +
  1. Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.
    2. +
  2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
    3. +
  3. La partie du menu de navigation du site ( <div class="nav"></div>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
    4. +
+ +
+

Note : Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.

+
+ +

Les images

+ +

Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?

+ +

Le lecteur audio

+ +
    +
  1. Le lecteur  <audio> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
    2. +
  2. Le lecteur  <audio> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
    3. +
+ +

Les formulaires

+ +
    +
  1. L'élément  <input> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
    2. +
  2. Les deux éléments  <input> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
    3. +
+ +

Le contrôle afficher / masquer les commentaires

+ +

Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?

+ +

La table

+ +

Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?

+ +

Autres considérations?

+ +

Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?

+ +

Évaluation

+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la discussion thread for this exercise,  ou sur le canal IRC #mdn  sur Mozilla IRC. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!

+ +

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/accessibility/css_and_javascript/index.html b/files/fr/learn/accessibility/css_and_javascript/index.html deleted file mode 100644 index 43455aa4be..0000000000 --- a/files/fr/learn/accessibility/css_and_javascript/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Meilleures pratiques d'accessibilité CSS et JavaScript -slug: Learn/Accessibility/CSS_and_JavaScript -tags: - - Accessibilité - - Apprendre - - Article - - CSS - - Codage des scripts - - Guide - - JavaScript - - contraste - - couleur - - discret -translation_of: Learn/Accessibility/CSS_and_JavaScript -original_slug: Apprendre/a11y/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -

CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.
- -

CSS et JavaScript, des technologies accessibles ?

- -

CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.

- -

CSS

- -

Commençons par regarder le CSS.

- -

Sémantique correcte et attentes de l'utilisateur

- -

Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article HTML : une bonne base pour l'accessibilité, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.

- -

Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.

- -

La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.

- -

Structure du contenu du texte "standard"

- -

Titres, paragraphes, listes — le contenu de texte de base de votre page :

- -
<h1>En-têtes</h1>
-
-<p>paragraphes</p>
-
-<ul>
-  <li>Ma liste</li>
-  <li>a deux éléments.</li>
-</ul>
- -

Quelques styles CSS typiques pourraient ressembler à ceci :

- -
h1 {
-  font-size: 5rem;
-}
-
-p, li {
-  line-height: 1.5;
-  font-size: 1.6rem;
-}
- -

Vous devriez :

- - - -

Voir Fondamentaux du texte HTML et  Introduction au style de texte pour plus d'informations.

- -

Texte mis en emphase

- -

On met en avant une portion de texte grâce au balises inline <em> :

- -
<p> L'eau est <em> très chaude </em>.</p>
-
-<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent  <strong>condensation</strong>.</p>
- -

Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :

- -
strong, em {
-  color: #a60000;
-}
- -

Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir Fondamentaux du texte HTML.

- -

Les abréviations

- -

Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :

- -
<p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :

- -
abbr {
-  color: #a60000;
-}
- -

Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir Abréviations.

- -

Liens

- -

Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :

- -
<p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>
- -

Un style de lien très simple est présenté ci-dessous :

- -
a {
-  color: #ff0000;
-}
-
-a:hover, a:visited, a:focus {
-  color: #a60000;
-  text-decoration: none;
-}
-
-a:active {
-  color: #000000;
-  background-color: #a60000;
-}
- -

Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :

- -

- -

- -

Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.

- -

Éléments form

- -

Éléments permettant aux utilisateurs de saisir des données sur des sites web :

- -
<div>
-  <label for="name">Entrez votre nom</label>
-  <input type="text" id="name" name="name">
-</div>
- -

Vous pouvez voir de bons exemples de CSS dans notre exemple form-css.html et (en direct).

- -

La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.

- -

Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.

- -

Tableaux

- -

Tableaux pour la présentation des données tabulées.

- -

Vous pouvez voir un bon exemple simple de  table-css.html et (en direct).

- -

En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur :nth-child(n) pour faciliter la lecture.

- -

Couleur et contraste de couleur

- -

Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.

- -

Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le vérificateur de contraste de couleur du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.

- -
-

Note : Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.

-
- -

Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.

- -

Cacher des choses

- -

Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre Exemple de boîte d'information à onglets (voir notre code source), nous avons trois panneaux d’informations, mais nous les positionnons les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser Tab et Entrée pour les sélectionner).

- -

- -

Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.

- -

Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.

- -
-

Note : Contenu invisible juste pour les utilisateurs de lecteur d'écran contient beaucoup plus de détails utiles concernant ce sujet.

-
- -

Accepter que les utilisateurs puissent remplacer les styles

- -

Acceptez que les utilisateurs puissent remplacer vos styles

- -

Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :

- - - -

Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.

- -

JavaScript

- -

JavaScript peut également compromettre l’accessibilité, selon son utilisation.

- -

Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.

- -

Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article HTML : une bonne base pour l'accessibilité, les principales considérations sont les suivantes :

- - - -

Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir Remettre l'accessibilité au clavier. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.

- -

Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de L'API WebGL : graphismes 2D et 3D pour le web sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des contrôles clavier faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.

- -

Le problème avec trop de JavaScript

- -

Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.

- -

En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.

- -

Le garder discret

- -

Lors de la création de votre contenu, gardez à l'esprit l'idée d'un JavaScript discret, en retrait. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.

- -

De bons exemples d'utilisation de JavaScript discret incluent :

- - - -

Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir form-validation.html (voir aussi la démonstration en direct). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.

- -

Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.

- -
-

Note : La validation côté serveur n'a pas été implémentée dans cette simple démonstration.

-
- -

Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :

- -
<label for="name"> Entrez votre nom :</label>
-<input type="text" name="name" id="name">
- -

Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :

- -
form.onsubmit = validate;
-
-function validate(e) {
-  errorList.innerHTML = '';
-  for(var i = 0; i < formItems.length; i++) {
-    var testItem = formItems[i];
-    if(testItem.input.value === '') {
-      errorField.style.left = '360px';
-      createLink(testItem);
-    }
-  }
-
-  if(errorList.innerHTML !== '') {
-    e.preventDefault();
-  }
-}
- -
-

Note : Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.

-
- -

La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (if(testItem.input.value === '')).

- -

Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (if(errorList.innerHTML !== '')) nous arrêtons la soumission du formulaire ( à l'aide de event.preventDefault()), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.

- -

Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste errorList.

- -
function createLink(testItem) {
- var listItem = document.createElement('li');
- var anchor = document.createElement('a');
- anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
- anchor.href = '#' + testItem.input.name;
- anchor.onclick = function() {
-   testItem.input.focus();
- };
- listItem.appendChild(anchor);
- errorList.appendChild(listItem);
-}
- -

Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.

- -
-

Note : La partie focus() de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc onclick/focus(). Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc onclick/focus() pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).

-
- -

De plus, le champ errorField est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page

- -

Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- -

Nous expliquerons ces attributs dans notre prochain article, qui couvre WAI-ARIA de manière beaucoup plus détaillée.

- -
-

Note : Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs required, min/minlength, et max/maxlength (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).

-
- -
-

Note : WebAIM's Validation de formulaire et récupération d'erreur utilisables et accessibles (EN) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.

-
- -

Autres problèmes d'accessibilité JavaScript

- -

Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.

- -

Événements spécifiques à la souris

- -

Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que mouseover, mouseout, dblclick, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.

- -

Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —focus et blur (event) fourniraient une accessibilité aux utilisateurs de clavier. 

- -

Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.

- -

Nous avons créé un exemple très simple, que vous pouvez trouver sur Exemple d'événements de souris et de clavier (voir aussi le code source). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :

- -
imgThumb.onmouseover = showImg;
-imgThumb.onmouseout = hideImg;
-
-imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;
- -

Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  tabindex="0" dessus.

- -

L'événement click est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement element.onclick après avoir  pressé Entrée  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir Remettre l'accessibilité au clavier).

- -

Résumé

- -

Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.

- -

Ensuite, WAI-ARIA !

- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md new file mode 100644 index 0000000000..43455aa4be --- /dev/null +++ b/files/fr/learn/accessibility/css_and_javascript/index.md @@ -0,0 +1,367 @@ +--- +title: Meilleures pratiques d'accessibilité CSS et JavaScript +slug: Learn/Accessibility/CSS_and_JavaScript +tags: + - Accessibilité + - Apprendre + - Article + - CSS + - Codage des scripts + - Guide + - JavaScript + - contraste + - couleur + - discret +translation_of: Learn/Accessibility/CSS_and_JavaScript +original_slug: Apprendre/a11y/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +

CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.
+ +

CSS et JavaScript, des technologies accessibles ?

+ +

CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.

+ +

CSS

+ +

Commençons par regarder le CSS.

+ +

Sémantique correcte et attentes de l'utilisateur

+ +

Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article HTML : une bonne base pour l'accessibilité, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.

+ +

Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.

+ +

La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.

+ +

Structure du contenu du texte "standard"

+ +

Titres, paragraphes, listes — le contenu de texte de base de votre page :

+ +
<h1>En-têtes</h1>
+
+<p>paragraphes</p>
+
+<ul>
+  <li>Ma liste</li>
+  <li>a deux éléments.</li>
+</ul>
+ +

Quelques styles CSS typiques pourraient ressembler à ceci :

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

Vous devriez :

+ + + +

Voir Fondamentaux du texte HTML et  Introduction au style de texte pour plus d'informations.

+ +

Texte mis en emphase

+ +

On met en avant une portion de texte grâce au balises inline <em> :

+ +
<p> L'eau est <em> très chaude </em>.</p>
+
+<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent  <strong>condensation</strong>.</p>
+ +

Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :

+ +
strong, em {
+  color: #a60000;
+}
+ +

Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir Fondamentaux du texte HTML.

+ +

Les abréviations

+ +

Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :

+ +
<p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :

+ +
abbr {
+  color: #a60000;
+}
+ +

Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir Abréviations.

+ +

Liens

+ +

Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :

+ +
<p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>
+ +

Un style de lien très simple est présenté ci-dessous :

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :

+ +

+ +

+ +

Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.

+ +

Éléments form

+ +

Éléments permettant aux utilisateurs de saisir des données sur des sites web :

+ +
<div>
+  <label for="name">Entrez votre nom</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

Vous pouvez voir de bons exemples de CSS dans notre exemple form-css.html et (en direct).

+ +

La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.

+ +

Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.

+ +

Tableaux

+ +

Tableaux pour la présentation des données tabulées.

+ +

Vous pouvez voir un bon exemple simple de  table-css.html et (en direct).

+ +

En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur :nth-child(n) pour faciliter la lecture.

+ +

Couleur et contraste de couleur

+ +

Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.

+ +

Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le vérificateur de contraste de couleur du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.

+ +
+

Note : Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.

+
+ +

Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.

+ +

Cacher des choses

+ +

Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre Exemple de boîte d'information à onglets (voir notre code source), nous avons trois panneaux d’informations, mais nous les positionnons les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser Tab et Entrée pour les sélectionner).

+ +

+ +

Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.

+ +

Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.

+ +
+

Note : Contenu invisible juste pour les utilisateurs de lecteur d'écran contient beaucoup plus de détails utiles concernant ce sujet.

+
+ +

Accepter que les utilisateurs puissent remplacer les styles

+ +

Acceptez que les utilisateurs puissent remplacer vos styles

+ +

Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :

+ + + +

Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.

+ +

JavaScript

+ +

JavaScript peut également compromettre l’accessibilité, selon son utilisation.

+ +

Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.

+ +

Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article HTML : une bonne base pour l'accessibilité, les principales considérations sont les suivantes :

+ + + +

Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir Remettre l'accessibilité au clavier. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.

+ +

Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de L'API WebGL : graphismes 2D et 3D pour le web sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des contrôles clavier faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.

+ +

Le problème avec trop de JavaScript

+ +

Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.

+ +

En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.

+ +

Le garder discret

+ +

Lors de la création de votre contenu, gardez à l'esprit l'idée d'un JavaScript discret, en retrait. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.

+ +

De bons exemples d'utilisation de JavaScript discret incluent :

+ + + +

Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir form-validation.html (voir aussi la démonstration en direct). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.

+ +

Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.

+ +
+

Note : La validation côté serveur n'a pas été implémentée dans cette simple démonstration.

+
+ +

Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :

+ +
<label for="name"> Entrez votre nom :</label>
+<input type="text" name="name" id="name">
+ +

Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :

+ +
form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(var i = 0; i < formItems.length; i++) {
+    var testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}
+ +
+

Note : Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.

+
+ +

La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (if(testItem.input.value === '')).

+ +

Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (if(errorList.innerHTML !== '')) nous arrêtons la soumission du formulaire ( à l'aide de event.preventDefault()), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.

+ +

Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste errorList.

+ +
function createLink(testItem) {
+ var listItem = document.createElement('li');
+ var anchor = document.createElement('a');
+ anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
+ anchor.href = '#' + testItem.input.name;
+ anchor.onclick = function() {
+   testItem.input.focus();
+ };
+ listItem.appendChild(anchor);
+ errorList.appendChild(listItem);
+}
+ +

Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.

+ +
+

Note : La partie focus() de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc onclick/focus(). Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc onclick/focus() pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).

+
+ +

De plus, le champ errorField est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page

+ +

Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

Nous expliquerons ces attributs dans notre prochain article, qui couvre WAI-ARIA de manière beaucoup plus détaillée.

+ +
+

Note : Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs required, min/minlength, et max/maxlength (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).

+
+ +
+

Note : WebAIM's Validation de formulaire et récupération d'erreur utilisables et accessibles (EN) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.

+
+ +

Autres problèmes d'accessibilité JavaScript

+ +

Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.

+ +

Événements spécifiques à la souris

+ +

Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que mouseover, mouseout, dblclick, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.

+ +

Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —focus et blur (event) fourniraient une accessibilité aux utilisateurs de clavier. 

+ +

Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.

+ +

Nous avons créé un exemple très simple, que vous pouvez trouver sur Exemple d'événements de souris et de clavier (voir aussi le code source). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  tabindex="0" dessus.

+ +

L'événement click est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement element.onclick après avoir  pressé Entrée  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir Remettre l'accessibilité au clavier).

+ +

Résumé

+ +

Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.

+ +

Ensuite, WAI-ARIA !

+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html deleted file mode 100644 index e81880d90d..0000000000 --- a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 'Testez vos compétences : l''accessibilité en CSS et JavaScript' -slug: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility -tags: - - Accessibility - - Assessment - - Beginner - - HTML - - JavaScript - - Learn - - test your skills -translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility ---- -
{{LearnSidebar}}
- -

L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les meilleures pratiques d'accessibilité en CSS et en JavaScript.

- -
-

Note : Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle ou Glitch pour travailler sur les exercices suivants.

-

Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section Évaluation ou aide supplémentaire en bas de la page.

-
- -

Accessibilité en CSS - Exercice 1

- -

Dans ce premier exercice, vous trouverez une liste de liens. Toutefois, leur accessibilité est assez mauvaise — impossible de savoir si ce sont effectivement des liens, ou encore de savoir lequel d'entre eux l'utilisateur survole.

- -

Vous pouvez partir du principe que l'ensemble des règles associées au sélecteur a sont fournies par un CMS, et qu'il vous est impossible de le modifier. Vous devrez donc créer de nouvelles règles pour permettre aux liens d'apparaître et de se comporter comme des liens, et permettre à l'utilisateur de savoir où il se trouve dans la liste.

- -

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple final :

- -

{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}

- -
-

Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

-
- -

Accessibilité en CSS - Exercice 2

- -

Dans ce nouvel exercice, vous démarrez avec une petite portion de contenu : de simples titres et paragraphes. On constate des problèmes d'accessibilité avec les couleurs et la taille du texte. Nous vous demandons de :

- -
    -
  1. Expliquez quels sont les problèmes et quelles sont les règles à suivre définissant les valeurs acceptables en termes de couleurs et de taille.
    2. -
  2. Choisir de nouvelles valeurs en termes de couleur et de taille de police pour corriger ce problème.
    3. -
  3. Mettre à jour le code CSS avec ces nouvelles valeurs pour résoudre le problème.
    4. -
  4. Tester le code pour s'assurer que le problème est désormais résolu. Décrivez quels outils ou méthodes vous avez utilisé pour choisir les nouvelles valeurs et tester le code.
    5. -
- -

Essayez de mettre à jour le code en direct ci-dessous pour reproduire l'exemple fini :

- -

{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}

- -
-

Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

-
- -

Accessibilité en JavaScript - Exercice 1

- -

Dans ce dernier exercice, vous avez un peu de JavaScript à écrire. Vous avez une application très simple qui affiche une liste de noms d'animaux. Cliquer sur l'un des noms d'animaux fait apparaître une description plus détaillée de l'animal dans un cadre sous la liste.

- -

Ce n'est hélas pas très accessible — dans l'état actuel des choses vous pouvez seulement utiliser la souris. Nous aimerions que vous ajoutiez du code HTML et JavaScript de façon à rendre l'application également utilisable avec un clavier.

- -
-

Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

-
- -

Évaluation ou aide supplémentaire

- -

Vous pouvez vous entraîner avec ces exemples dans les Éditeurs Interactifs ci-dessus.

- -

Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :

- -
    -
  1. Publiez votre travail dans un éditeur en ligne partageable, comme CodePen, jsFiddle ou Glitch. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ via les liens présents dans les sections ci-dessus.
    2. -
  2. Écrivez un message pour demander une évaluation et/ou de l'aide dans la catégorie Apprentissage (Learning) du forum de discussion de MDN. Votre message doit comprendre : -
      -
    • Un titre explicite, par exemple « Évaluation souhaitée pour le test d'Accessibilité CSS 1 ».
      • -
    • Des détails sur ce que vous avez déjà tenté, et ce que vous aimeriez que nous fassions, c'est-à-dire si vous bloquez et que vous avez besoin d'aide, ou si vous souhaitez qu'on évalue votre travail.
      • -
    • Un lien vers l'exemple que vous souhaitez voir évalué ou sur lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme précisé dans le point 1 ci-dessus). C'est une bonne pratique à adopter : il est très difficile d'aider quelqu'un à résoudre un problème de code si vous ne pouvez pas voir le code en question!
      • -
    • Un lien vers l'exercice en cours ou vers la page d'évaluation, de façon à ce que nous puissions trouver la question sur laquelle vous avez besoin d'un coup de main.
      • -
    -
    3. -
diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md new file mode 100644 index 0000000000..e81880d90d --- /dev/null +++ b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.md @@ -0,0 +1,82 @@ +--- +title: 'Testez vos compétences : l''accessibilité en CSS et JavaScript' +slug: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility +tags: + - Accessibility + - Assessment + - Beginner + - HTML + - JavaScript + - Learn + - test your skills +translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility +--- +
{{LearnSidebar}}
+ +

L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les meilleures pratiques d'accessibilité en CSS et en JavaScript.

+ +
+

Note : Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle ou Glitch pour travailler sur les exercices suivants.

+

Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section Évaluation ou aide supplémentaire en bas de la page.

+
+ +

Accessibilité en CSS - Exercice 1

+ +

Dans ce premier exercice, vous trouverez une liste de liens. Toutefois, leur accessibilité est assez mauvaise — impossible de savoir si ce sont effectivement des liens, ou encore de savoir lequel d'entre eux l'utilisateur survole.

+ +

Vous pouvez partir du principe que l'ensemble des règles associées au sélecteur a sont fournies par un CMS, et qu'il vous est impossible de le modifier. Vous devrez donc créer de nouvelles règles pour permettre aux liens d'apparaître et de se comporter comme des liens, et permettre à l'utilisateur de savoir où il se trouve dans la liste.

+ +

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple final :

+ +

{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}

+ +
+

Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

+
+ +

Accessibilité en CSS - Exercice 2

+ +

Dans ce nouvel exercice, vous démarrez avec une petite portion de contenu : de simples titres et paragraphes. On constate des problèmes d'accessibilité avec les couleurs et la taille du texte. Nous vous demandons de :

+ +
    +
  1. Expliquez quels sont les problèmes et quelles sont les règles à suivre définissant les valeurs acceptables en termes de couleurs et de taille.
    2. +
  2. Choisir de nouvelles valeurs en termes de couleur et de taille de police pour corriger ce problème.
    3. +
  3. Mettre à jour le code CSS avec ces nouvelles valeurs pour résoudre le problème.
    4. +
  4. Tester le code pour s'assurer que le problème est désormais résolu. Décrivez quels outils ou méthodes vous avez utilisé pour choisir les nouvelles valeurs et tester le code.
    5. +
+ +

Essayez de mettre à jour le code en direct ci-dessous pour reproduire l'exemple fini :

+ +

{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}

+ +
+

Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

+
+ +

Accessibilité en JavaScript - Exercice 1

+ +

Dans ce dernier exercice, vous avez un peu de JavaScript à écrire. Vous avez une application très simple qui affiche une liste de noms d'animaux. Cliquer sur l'un des noms d'animaux fait apparaître une description plus détaillée de l'animal dans un cadre sous la liste.

+ +

Ce n'est hélas pas très accessible — dans l'état actuel des choses vous pouvez seulement utiliser la souris. Nous aimerions que vous ajoutiez du code HTML et JavaScript de façon à rendre l'application également utilisable avec un clavier.

+ +
+

Note : Télécharger le code de départ de cet exercice pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.

+
+ +

Évaluation ou aide supplémentaire

+ +

Vous pouvez vous entraîner avec ces exemples dans les Éditeurs Interactifs ci-dessus.

+ +

Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :

+ +
    +
  1. Publiez votre travail dans un éditeur en ligne partageable, comme CodePen, jsFiddle ou Glitch. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ via les liens présents dans les sections ci-dessus.
    2. +
  2. Écrivez un message pour demander une évaluation et/ou de l'aide dans la catégorie Apprentissage (Learning) du forum de discussion de MDN. Votre message doit comprendre : +
      +
    • Un titre explicite, par exemple « Évaluation souhaitée pour le test d'Accessibilité CSS 1 ».
      • +
    • Des détails sur ce que vous avez déjà tenté, et ce que vous aimeriez que nous fassions, c'est-à-dire si vous bloquez et que vous avez besoin d'aide, ou si vous souhaitez qu'on évalue votre travail.
      • +
    • Un lien vers l'exemple que vous souhaitez voir évalué ou sur lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme précisé dans le point 1 ci-dessus). C'est une bonne pratique à adopter : il est très difficile d'aider quelqu'un à résoudre un problème de code si vous ne pouvez pas voir le code en question!
      • +
    • Un lien vers l'exercice en cours ou vers la page d'évaluation, de façon à ce que nous puissions trouver la question sur laquelle vous avez besoin d'un coup de main.
      • +
    +
    3. +
diff --git a/files/fr/learn/accessibility/html/index.html b/files/fr/learn/accessibility/html/index.html deleted file mode 100644 index 354bf4075f..0000000000 --- a/files/fr/learn/accessibility/html/index.html +++ /dev/null @@ -1,529 +0,0 @@ ---- -title: 'HTML : une bonne base pour l''accessibilité' -slug: Learn/Accessibility/HTML -tags: - - Accessibilité - - Article - - Clavier - - Débutant - - Forms - - HTML - - Liens - - a11y - - boutons - - sémantique -translation_of: Learn/Accessibility/HTML -original_slug: Apprendre/a11y/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
- -

Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base, compréhension basique de HTML (voir Introduction à HTML), et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.
- -

HTML et accessibilité

- -

Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.

- -

Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :

- -
<div>Lire la vidéo</div>
- -

Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :

- -
<button>Lire la vidéo</button>
- -

Non seulement  <button> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.

- -

Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :

- -
    -
  1. Facilite les développements — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.
    2. -
  2. Meilleur pour le mobile — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. 
    3. -
  3. Bon pour le SEO — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <div> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.
    4. -
- -

Continuons et jetons un œil au HTML accessible dans le détail.

- -
-

Note : C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour gérer les problèmes courants d'accessibilité pour plus de détails.

-
- -

Une bonne sémantique

- -

Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.

- -

En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.

- -

Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.

- -

L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.

- -

Contenus textuels

- -

L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :

- -
<h1>Mon titre</h1>
-
-<p>Ceci est la premère section de mon document.</p>
-
-<p>Je vais ajouter ici un autre paragraphe.</p>
-
-<ol>
-  <li>Voici</li>
-  <li>une liste pour</li>
-  <li>toi à lire.</li>
-</ol>
-
-<h2>Mon sous-titre</h2>
-
-<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p>
-
-<h2>Mon second sous-titre</h2>
-
-<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p>
- -

Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir la bonne sémantique). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :

- -
    -
  1. Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.
    2. -
  2. Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.
    3. -
  3. Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.
    4. -
  4. Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.
    5. -
- -

Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :

- -
<font size="7">Mon titre</font>
-<br><br>
-Ceci est la première section de mon document.
-<br><br>
-Je vais ajouter ici un autre paragraphe.
-<br><br>
-1. Voici
-<br><br>
-2. une liste pour
-<br><br>
-3. toi à lire.
-<br><br>
-<font size="5">Mon sous-titre</font>
-<br><br>
-<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.
- -

Si vous essayez notre version plus longue avec un lecteur d'écran (voir la mauvaise sémantique), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.

- -

Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.

- -

Utiliser un langage clair

- -

Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :

- - - -

Disposition des pages

- -

Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.

- -

Essayez notre exemple table-layout.html, qui ressemble à quelque chose comme ça :

- -
<table width="1200">
-      <!-- main heading row -->
-      <tr id="heading">
-        <td colspan="6">
-
-          <h1 align="center">Header</h1>
-
-        </td>
-      </tr>
-      <!-- nav menu row  -->
-      <tr id="nav" bgcolor="#ffffff">
-        <td width="200">
-          <a href="#" align="center">Home</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Our team</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Projects</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Contact</a>
-        </td>
-        <td width="300">
-          <form width="300">
-            <input type="search" name="q" placeholder="Search query" width="300">
-          </form>
-        </td>
-        <td width="100">
-          <button width="100">Go!</button>
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- main content and aside row -->
-      <tr id="main">
-        <td id="content" colspan="4" bgcolor="#ffffff">
-
-          <!-- main content goes here -->
-        </td>
-        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
-          <h2>Related</h2>
-
-          <!-- aside content goes here -->
-
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- footer row -->
-      <tr id="footer" bgcolor="#ffffff">
-        <td colspan="6">
-          <p>©Copyright 2050 by nobody. All rights reversed.</p>
-        </td>
-      </tr>
-    </table>
- -

Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.

- -

Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !

- -

Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  exemple plus moderne de structure de site Web, qui pourrait ressembler à ceci :

- -
<header>
-  <h1>Entête</h1>
-</header>
-
-<nav>
-  <!--  navigation principale ici  -->
-</nav>
-
-<!--  Voici le contenu principal de notre page  -->
-<main>
-
-  <!--  Il contient un article  -->
-  <article>
-    <h2>Intitulé de l'article</h2>
-
-    <!--  contenu de l'article ici  -->
-  </article>
-
-  <aside>
-    <h2>en relation</h2>
-
-    <!--  à part le contenu ici  -->
-  </aside>
-
-</main>
-
-<!--  Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. -->
-
-<footer>
-  <!--  contenu du pied de page ici  -->
-</footer>
- -

Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).

- -

Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir Référence des éléments HTML). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5 pour une idée de la prise en charge du lecteur d’écran).

- -
-

Note : Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.

-
- -

Contrôles de l'interface utilisateur

- -

Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.

- -

L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple accessibilité du clavier natif (voir le code source) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.

- -

- -

Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). 

- -
-

Note : Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment gérer les problèmes courants d'accessibilité pour plus de détails.

-
- -

Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :

- -
<h1>Liens</h1>
-
-<p> Ceci est un lien vers  <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p> Un autre lien, pour  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Boutons</h2>
-
-<p>
-  <button data-message="This is from the first button">Cliquez moi!</button>
-  <button data-message="This is from the second button"> Cliquez moi aussi !</button>
-  <button data-message="This is from the third button">Et moi!</button>
-</p>
-
-<h2>formulaire</h2>
-
-<form>
-  <div>
-    <label for="name"> Remplis ton nom :</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age"> Entrez votre âge :</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood"> Choisissez votre humeur :</label>
-    <select id="mood" name="mood">
-      <option>Heureux</option>
-      <option> Triste </option>
-      <option> Fâché </option>
-      <option> Préoccupé </option>
-    </select>
-  </div>
-</form>
- -

Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément {{htmlelement("label")}} pour les contrôles de formulaire).

- -

Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s, par exemple :

- -
<div data-message="This is from the first button"> Cliquez-moi!</div>
-<div data-message="This is from the second button">  Cliquez moi aussi!</div>
-<div data-message="This is from the third button"> Et moi!</div>
- -

Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.

- -

Remettre l'accessibilité au clavier

- -

Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple fake-div-buttons.html – voir également le source code). Ici, nous avons donné à nos faux boutons <div> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut tabindex="0" :

- -
<div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div>
-<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div>
-<div data-message="This is from the third button" tabindex="0"> Et moi!</div>
- -

Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour tabindex :

- - - -

Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-}
- -

Ici, nous ajoutons un écouteur à l’objet document pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété keyCode de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton onclick à l'aide de document.activeElement.onclick(). activeElement nous donne l'élément qui est actuellement ciblé sur la page.

- -
-

Note : N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), addEventListener ne fonctionnera pas.

-
- -

C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. Mieux vaut utiliser le bon élément pour le bon travail en premier lieu.

- -

Étiquettes de texte significatives

- -

Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.

- -

Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.

- -

- -

Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :

- -
<p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p>
- -

c'est un mauvais texte du lien :

- -
<p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
-
- -
-

Note : Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la création d'hyperliens. Vous pouvez également voir quelques bons et mauvais exemples dans Bons-liens.html et Mauvais-liens.html.

-
- -

Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :

- -
 Remplis ton nom : <input type="text" id="name" name="name">
- -

Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".

- -

Ce qui suit est un exemple bien meilleur :

- -
<div>
-  <label for="name">Entrez votre nom:</label>
-  <input type="text" id="name" name="name">
-</div>
- -

Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".

- -

- -

En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection

- -
-

Note : vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans exemple de bon formulaire et exemple de mauvais formulaire.

-
- -

Tableaux de données accessibles

- -

Une table de données de base peut être écrite avec un balisage très simple, par exemple :

- -
<table>
-  <tr>
-    <td>Nom</td>
-    <td>Age</td>
-    <td>Sexe</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Male</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Femelle</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Femelle</td>
-  </tr>
-</table>
- -

Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).

- -

Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :

- - - -
-

Note : voir notre article  Tableaux HTML : dispositions avancées et accessibilité pour plus de détails sur les tables de données accessibles.

-
- -

Alternatives textuelles

- -

Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.

- -

Nous avons un exemple simple écrit, accessible-image.html, comporte quatre copies de la même image :

- -
<img src="dinosaur.png">
-
-<img src="dinosaur.png"
-     alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées.">
-
-<img src="dinosaur.png"
-     alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."
-     title="Le dinosaure rouge de Mozilla ">
-
-
-<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
-
- -

La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.

- -
-

Note : c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !

-
- -

Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »

- -

Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé alt text n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs alt chaque fois que possible. Notez que le contenu de l'attribut alt doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.

- -

Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.

- -
-

Note : Lisez Les images en HTML et Images adaptatives pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.

-
- -

Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.

- -

- -

Jetons un autre coup d'oeil à la quatrième méthode :

- -
<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label"> Le Tyrannosaure rouge Mozilla  ... </p>
- -

Dans ce cas, nous n'utilisons pas du tout l'attribut alt Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un id puis nous avons utilisé l'attribut aria-labelledby pour : faire référence à cela id, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec alt.

- -
-

Note : aria-labelledby fait partie de la spécification WAI ARIA, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article WAI-ARIA basic.

-
- -

Autres mécanismes alternatifs de texte

- -

Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut longdesc destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :

- -
-<img src="dinosaur.png" longdesc="dino-info.html">
- -

Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.

- -

HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :

- -
<figure>
-  <img src="dinosaur.png" alt="Le Mozilla Tyrannosaurus ">
-  <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption>
-</figure>
- -

Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.

- -

Attributs alt vides

- -
-<h3>
-  <img src="article-icon.png" alt="">
-  Tyrannosaurus Rex: le roi des dinosaures 
-</h3>
- -

Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut  alt de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .

- -

La raison d'utiliser un vide alt au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun alt n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide alt sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.

- -
-

Note : si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.

-
- -

Résumé

- -

Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.

- -

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md new file mode 100644 index 0000000000..354bf4075f --- /dev/null +++ b/files/fr/learn/accessibility/html/index.md @@ -0,0 +1,529 @@ +--- +title: 'HTML : une bonne base pour l''accessibilité' +slug: Learn/Accessibility/HTML +tags: + - Accessibilité + - Article + - Clavier + - Débutant + - Forms + - HTML + - Liens + - a11y + - boutons + - sémantique +translation_of: Learn/Accessibility/HTML +original_slug: Apprendre/a11y/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base, compréhension basique de HTML (voir Introduction à HTML), et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.
+ +

HTML et accessibilité

+ +

Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.

+ +

Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :

+ +
<div>Lire la vidéo</div>
+ +

Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :

+ +
<button>Lire la vidéo</button>
+ +

Non seulement  <button> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.

+ +

Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :

+ +
    +
  1. Facilite les développements — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.
    2. +
  2. Meilleur pour le mobile — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. 
    3. +
  3. Bon pour le SEO — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <div> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.
    4. +
+ +

Continuons et jetons un œil au HTML accessible dans le détail.

+ +
+

Note : C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour gérer les problèmes courants d'accessibilité pour plus de détails.

+
+ +

Une bonne sémantique

+ +

Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.

+ +

En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.

+ +

Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.

+ +

L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.

+ +

Contenus textuels

+ +

L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :

+ +
<h1>Mon titre</h1>
+
+<p>Ceci est la premère section de mon document.</p>
+
+<p>Je vais ajouter ici un autre paragraphe.</p>
+
+<ol>
+  <li>Voici</li>
+  <li>une liste pour</li>
+  <li>toi à lire.</li>
+</ol>
+
+<h2>Mon sous-titre</h2>
+
+<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p>
+
+<h2>Mon second sous-titre</h2>
+
+<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p>
+ +

Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir la bonne sémantique). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :

+ +
    +
  1. Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.
    2. +
  2. Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.
    3. +
  3. Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.
    4. +
  4. Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.
    5. +
+ +

Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :

+ +
<font size="7">Mon titre</font>
+<br><br>
+Ceci est la première section de mon document.
+<br><br>
+Je vais ajouter ici un autre paragraphe.
+<br><br>
+1. Voici
+<br><br>
+2. une liste pour
+<br><br>
+3. toi à lire.
+<br><br>
+<font size="5">Mon sous-titre</font>
+<br><br>
+<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.
+ +

Si vous essayez notre version plus longue avec un lecteur d'écran (voir la mauvaise sémantique), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.

+ +

Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.

+ +

Utiliser un langage clair

+ +

Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :

+ + + +

Disposition des pages

+ +

Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.

+ +

Essayez notre exemple table-layout.html, qui ressemble à quelque chose comme ça :

+ +
<table width="1200">
+      <!-- main heading row -->
+      <tr id="heading">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- nav menu row  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- main content and aside row -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- main content goes here -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- aside content goes here -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- footer row -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.

+ +

Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !

+ +

Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  exemple plus moderne de structure de site Web, qui pourrait ressembler à ceci :

+ +
<header>
+  <h1>Entête</h1>
+</header>
+
+<nav>
+  <!--  navigation principale ici  -->
+</nav>
+
+<!--  Voici le contenu principal de notre page  -->
+<main>
+
+  <!--  Il contient un article  -->
+  <article>
+    <h2>Intitulé de l'article</h2>
+
+    <!--  contenu de l'article ici  -->
+  </article>
+
+  <aside>
+    <h2>en relation</h2>
+
+    <!--  à part le contenu ici  -->
+  </aside>
+
+</main>
+
+<!--  Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. -->
+
+<footer>
+  <!--  contenu du pied de page ici  -->
+</footer>
+ +

Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).

+ +

Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir Référence des éléments HTML). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5 pour une idée de la prise en charge du lecteur d’écran).

+ +
+

Note : Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.

+
+ +

Contrôles de l'interface utilisateur

+ +

Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.

+ +

L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple accessibilité du clavier natif (voir le code source) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.

+ +

+ +

Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). 

+ +
+

Note : Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment gérer les problèmes courants d'accessibilité pour plus de détails.

+
+ +

Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :

+ +
<h1>Liens</h1>
+
+<p> Ceci est un lien vers  <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p> Un autre lien, pour  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Boutons</h2>
+
+<p>
+  <button data-message="This is from the first button">Cliquez moi!</button>
+  <button data-message="This is from the second button"> Cliquez moi aussi !</button>
+  <button data-message="This is from the third button">Et moi!</button>
+</p>
+
+<h2>formulaire</h2>
+
+<form>
+  <div>
+    <label for="name"> Remplis ton nom :</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age"> Entrez votre âge :</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood"> Choisissez votre humeur :</label>
+    <select id="mood" name="mood">
+      <option>Heureux</option>
+      <option> Triste </option>
+      <option> Fâché </option>
+      <option> Préoccupé </option>
+    </select>
+  </div>
+</form>
+ +

Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément {{htmlelement("label")}} pour les contrôles de formulaire).

+ +

Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s, par exemple :

+ +
<div data-message="This is from the first button"> Cliquez-moi!</div>
+<div data-message="This is from the second button">  Cliquez moi aussi!</div>
+<div data-message="This is from the third button"> Et moi!</div>
+ +

Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.

+ +

Remettre l'accessibilité au clavier

+ +

Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple fake-div-buttons.html – voir également le source code). Ici, nous avons donné à nos faux boutons <div> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut tabindex="0" :

+ +
<div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div>
+<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div>
+<div data-message="This is from the third button" tabindex="0"> Et moi!</div>
+ +

Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour tabindex :

+ + + +

Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+}
+ +

Ici, nous ajoutons un écouteur à l’objet document pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété keyCode de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton onclick à l'aide de document.activeElement.onclick(). activeElement nous donne l'élément qui est actuellement ciblé sur la page.

+ +
+

Note : N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), addEventListener ne fonctionnera pas.

+
+ +

C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. Mieux vaut utiliser le bon élément pour le bon travail en premier lieu.

+ +

Étiquettes de texte significatives

+ +

Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.

+ +

Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.

+ +

+ +

Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :

+ +
<p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p>
+ +

c'est un mauvais texte du lien :

+ +
<p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
+
+ +
+

Note : Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la création d'hyperliens. Vous pouvez également voir quelques bons et mauvais exemples dans Bons-liens.html et Mauvais-liens.html.

+
+ +

Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :

+ +
 Remplis ton nom : <input type="text" id="name" name="name">
+ +

Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".

+ +

Ce qui suit est un exemple bien meilleur :

+ +
<div>
+  <label for="name">Entrez votre nom:</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".

+ +

+ +

En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection

+ +
+

Note : vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans exemple de bon formulaire et exemple de mauvais formulaire.

+
+ +

Tableaux de données accessibles

+ +

Une table de données de base peut être écrite avec un balisage très simple, par exemple :

+ +
<table>
+  <tr>
+    <td>Nom</td>
+    <td>Age</td>
+    <td>Sexe</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Male</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Femelle</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Femelle</td>
+  </tr>
+</table>
+ +

Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).

+ +

Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :

+ + + +
+

Note : voir notre article  Tableaux HTML : dispositions avancées et accessibilité pour plus de détails sur les tables de données accessibles.

+
+ +

Alternatives textuelles

+ +

Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.

+ +

Nous avons un exemple simple écrit, accessible-image.html, comporte quatre copies de la même image :

+ +
<img src="dinosaur.png">
+
+<img src="dinosaur.png"
+     alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées.">
+
+<img src="dinosaur.png"
+     alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."
+     title="Le dinosaure rouge de Mozilla ">
+
+
+<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
+
+ +

La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.

+ +
+

Note : c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !

+
+ +

Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »

+ +

Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé alt text n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs alt chaque fois que possible. Notez que le contenu de l'attribut alt doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.

+ +

Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.

+ +
+

Note : Lisez Les images en HTML et Images adaptatives pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.

+
+ +

Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.

+ +

+ +

Jetons un autre coup d'oeil à la quatrième méthode :

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label"> Le Tyrannosaure rouge Mozilla  ... </p>
+ +

Dans ce cas, nous n'utilisons pas du tout l'attribut alt Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un id puis nous avons utilisé l'attribut aria-labelledby pour : faire référence à cela id, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec alt.

+ +
+

Note : aria-labelledby fait partie de la spécification WAI ARIA, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article WAI-ARIA basic.

+
+ +

Autres mécanismes alternatifs de texte

+ +

Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut longdesc destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :

+ +
+<img src="dinosaur.png" longdesc="dino-info.html">
+ +

Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.

+ +

HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :

+ +
<figure>
+  <img src="dinosaur.png" alt="Le Mozilla Tyrannosaurus ">
+  <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption>
+</figure>
+ +

Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.

+ +

Attributs alt vides

+ +
+<h3>
+  <img src="article-icon.png" alt="">
+  Tyrannosaurus Rex: le roi des dinosaures 
+</h3>
+ +

Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut  alt de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .

+ +

La raison d'utiliser un vide alt au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun alt n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide alt sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.

+ +
+

Note : si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.

+
+ +

Résumé

+ +

Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.

+ +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

diff --git a/files/fr/learn/accessibility/index.html b/files/fr/learn/accessibility/index.html deleted file mode 100644 index 0b9b6f493f..0000000000 --- a/files/fr/learn/accessibility/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Accessibilité -slug: Learn/Accessibility -tags: - - ARIA - - Accessibilité - - Apprendre - - CSS - - Débutant - - HTML - - JavaScript -translation_of: Learn/Accessibility -original_slug: Apprendre/a11y ---- -
{{LearnSidebar}}
- -

Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

- -

Prérequis

- -

Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à HTML, CSS et JavaScript en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.

- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

-
- -

Guides

- -
-
Qu'est-ce que l'accessibilité ?
-
Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.
-
HTML : une bonne base pour l'accessibilité
-
Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.
-
Meilleures pratiques d'accessibilité CSS et JavaScript
-
Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.
-
Principes de base du WAI-ARIA
-
À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.
-
Accessibilité pour les contenus multimédias
-
Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
-
Accessibilité mobile
-
On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.
-
- -

Évaluations

- -
-
Diagnostic et amélioration de l'accessibilité
-
Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.
-
- -

Voir aussi

- - diff --git a/files/fr/learn/accessibility/index.md b/files/fr/learn/accessibility/index.md new file mode 100644 index 0000000000..0b9b6f493f --- /dev/null +++ b/files/fr/learn/accessibility/index.md @@ -0,0 +1,57 @@ +--- +title: Accessibilité +slug: Learn/Accessibility +tags: + - ARIA + - Accessibilité + - Apprendre + - CSS + - Débutant + - HTML + - JavaScript +translation_of: Learn/Accessibility +original_slug: Apprendre/a11y +--- +
{{LearnSidebar}}
+ +

Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

+ +

Prérequis

+ +

Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à HTML, CSS et JavaScript en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.

+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

+
+ +

Guides

+ +
+
Qu'est-ce que l'accessibilité ?
+
Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.
+
HTML : une bonne base pour l'accessibilité
+
Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.
+
Meilleures pratiques d'accessibilité CSS et JavaScript
+
Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.
+
Principes de base du WAI-ARIA
+
À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.
+
Accessibilité pour les contenus multimédias
+
Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
+
Accessibilité mobile
+
On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.
+
+ +

Évaluations

+ +
+
Diagnostic et amélioration de l'accessibilité
+
Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.
+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/accessibility/mobile/index.html b/files/fr/learn/accessibility/mobile/index.html deleted file mode 100644 index 62de168f05..0000000000 --- a/files/fr/learn/accessibility/mobile/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: Accessibilité mobile -slug: Learn/Accessibility/Mobile -tags: - - Accessibilité - - Article - - Débutant - - Mobile - - responsive - - toucher -translation_of: Learn/Accessibility/Mobile -original_slug: Apprendre/a11y/Mobile ---- -
-
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -

L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

- - - - - - - - - - - - -
Prerequisites:Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.
Objective:Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.
- -

Accessibilité sur les appareils mobiles

- -

L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

- -

De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

- -

Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

- -

Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

- - - -

Résumé des tests de lecteur d'écran sur Android et iOS

- -

Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

- -

Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

- -

Android TalkBack

- -

Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

- -

Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

- -

Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

- -

Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

- -
    -
  1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
    2. -
  2. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
    3. -
  3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
    4. -
  4. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.
    5. -
- -

Si vous souhaitez désactiver TalkBack:

- -
    -
  1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
    2. -
  2. Accédez à Accessibilité> TalkBack .
    3. -
  3. Accédez au commutateur et activez-le pour le désactiver. .
    4. -
- -

Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

- -

Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

- -

Déverrouiller le téléphone

- -

Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

- -

Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

- -

Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

- - - -

TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

- -

Pour accéder à ces menus:

- -
    -
  1. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
    2. -
  2. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
    3. -
  3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
    4. -
  4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
    5. -
- -

Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

- -

Parcourir des pages Web

- -

Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

- -

Par exemple, avec TalkBack activé:

- -
    -
  1. Ouvrez votre navigateur web.
    2. -
  2. Activer la barre d'URL.
    3. -
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: -
      -
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
      • -
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
      • -
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • -
    -
    4. -
  4. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
    5. -
  5. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
    6. -
  6. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
    7. -
  7. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
    8. -
  8. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
    9. -
- -

Note:  Voir  aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

- -

iOS VoiceOver

- -

Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

- -

Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

- -

Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

- -
    -
  1. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
    2. -
  2. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
    3. -
  3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
    4. -
  4. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
    5. -
  5. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.
    6. -
- -

Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

- -

Déverrouiller le téléphone

- -

Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

- -

Utiliser le rotor

- -

Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

- -
    -
  1. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
    2. -
  2. Une fois que vous avez trouvé l'option que vous voulez: -
      -
    • Relâchez vos doigts pour le sélectionner.
      • -
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.
      • -
    -
    3. -
- -

Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

- -

Parcourir des pages Web

- -

Essayons la navigation Web avec VoiceOver:

- -
    -
  1. Ouvrez votre navigateur web.
    2. -
  2. Activer la barre d'URL.
    3. -
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: -
      -
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
      • -
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
      • -
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • -
    -
    4. -
  4. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
    5. -
  5. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
    6. -
  6. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles: -
      -
    • Taux de parole : Modifiez le taux de parole.
      • -
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
      • -
    • En-têtes : déplacez-vous entre les en-têtes de la page.
      • -
    • Liens : permet de se déplacer entre les liens de la page.
      • -
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
      • -
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
      • -
    -
    7. -
  7. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
    8. -
- -

Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi Test Accessibility on Your Device with VoiceOver.

- -

Mécanismes de contrôle

- -

Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

- -

Par exemple, l'événement  click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

- -

Sinon, des événements spécifiques à la souris, tels que  mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

- -

Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

- -
div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
- -

Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

- -
div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
- -

Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

- -

Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

- -

Responsive design

- -

Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

- -

En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

- - - -

Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

- -

Considérations mobiles spécifiques

- -

Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

- -

Ne pas désactiver le zoom

- -

En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

- -
<meta name="viewport" content="user-scalable=no">
- -

Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

- -

Garder les menus accessibles

- -

Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

- -

Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

- -

Cliquez ici pour un  good hamburger menu example.

- -

Entrée utilisateur

- -

Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

- -

Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

- -

Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html  pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

- - - -

Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article feature detection article pour en savoir plus. .

- -

Résumé

- -

Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

- -

Voir également

- - - -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -
-

Dans ce module

- - -
-
diff --git a/files/fr/learn/accessibility/mobile/index.md b/files/fr/learn/accessibility/mobile/index.md new file mode 100644 index 0000000000..62de168f05 --- /dev/null +++ b/files/fr/learn/accessibility/mobile/index.md @@ -0,0 +1,310 @@ +--- +title: Accessibilité mobile +slug: Learn/Accessibility/Mobile +tags: + - Accessibilité + - Article + - Débutant + - Mobile + - responsive + - toucher +translation_of: Learn/Accessibility/Mobile +original_slug: Apprendre/a11y/Mobile +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +

L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

+ + + + + + + + + + + + +
Prerequisites:Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.
Objective:Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.
+ +

Accessibilité sur les appareils mobiles

+ +

L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

+ +

De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

+ +

Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

+ +

Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

+ + + +

Résumé des tests de lecteur d'écran sur Android et iOS

+ +

Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

+ +

Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

+ +

Android TalkBack

+ +

Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

+ +

Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

+ +

Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

+ +

Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

+ +
    +
  1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
    2. +
  2. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
    3. +
  3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
    4. +
  4. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.
    5. +
+ +

Si vous souhaitez désactiver TalkBack:

+ +
    +
  1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
    2. +
  2. Accédez à Accessibilité> TalkBack .
    3. +
  3. Accédez au commutateur et activez-le pour le désactiver. .
    4. +
+ +

Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

+ +

Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

+ +

Déverrouiller le téléphone

+ +

Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

+ +

Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

+ +

Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

+ + + +

TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

+ +

Pour accéder à ces menus:

+ +
    +
  1. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
    2. +
  2. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
    3. +
  3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
    4. +
  4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
    5. +
+ +

Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

+ +

Parcourir des pages Web

+ +

Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

+ +

Par exemple, avec TalkBack activé:

+ +
    +
  1. Ouvrez votre navigateur web.
    2. +
  2. Activer la barre d'URL.
    3. +
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: +
      +
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
      • +
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
      • +
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • +
    +
    4. +
  4. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
    5. +
  5. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
    6. +
  6. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
    7. +
  7. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
    8. +
  8. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
    9. +
+ +

Note:  Voir  aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

+ +

iOS VoiceOver

+ +

Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

+ +

Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

+ +

Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

+ +
    +
  1. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
    2. +
  2. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
    3. +
  3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
    4. +
  4. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
    5. +
  5. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.
    6. +
+ +

Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

+ +

Déverrouiller le téléphone

+ +

Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

+ +

Utiliser le rotor

+ +

Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

+ +
    +
  1. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
    2. +
  2. Une fois que vous avez trouvé l'option que vous voulez: +
      +
    • Relâchez vos doigts pour le sélectionner.
      • +
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.
      • +
    +
    3. +
+ +

Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

+ +

Parcourir des pages Web

+ +

Essayons la navigation Web avec VoiceOver:

+ +
    +
  1. Ouvrez votre navigateur web.
    2. +
  2. Activer la barre d'URL.
    3. +
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: +
      +
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
      • +
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
      • +
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • +
    +
    4. +
  4. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
    5. +
  5. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
    6. +
  6. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles: +
      +
    • Taux de parole : Modifiez le taux de parole.
      • +
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
      • +
    • En-têtes : déplacez-vous entre les en-têtes de la page.
      • +
    • Liens : permet de se déplacer entre les liens de la page.
      • +
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
      • +
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
      • +
    +
    7. +
  7. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
    8. +
+ +

Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi Test Accessibility on Your Device with VoiceOver.

+ +

Mécanismes de contrôle

+ +

Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

+ +

Par exemple, l'événement  click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

+ +

Sinon, des événements spécifiques à la souris, tels que  mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

+ +

Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

+ +

Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

+ +

Responsive design

+ +

Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

+ +

En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

+ + + +

Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

+ +

Considérations mobiles spécifiques

+ +

Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

+ +

Ne pas désactiver le zoom

+ +

En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

+ +
<meta name="viewport" content="user-scalable=no">
+ +

Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

+ +

Garder les menus accessibles

+ +

Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

+ +

Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

+ +

Cliquez ici pour un  good hamburger menu example.

+ +

Entrée utilisateur

+ +

Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

+ +

Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

+ +

Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html  pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

+ + + +

Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article feature detection article pour en savoir plus. .

+ +

Résumé

+ +

Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

+ +

Voir également

+ + + +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +
+

Dans ce module

+ + +
+
diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html deleted file mode 100644 index e957ae2002..0000000000 --- a/files/fr/learn/accessibility/multimedia/index.html +++ /dev/null @@ -1,366 +0,0 @@ ---- -title: Accessible multimedia -slug: Learn/Accessibility/Multimedia -tags: - - Accessibilité - - Apprendre - - Audio - - Débutant - - HTML - - Images - - JavaScript - - Multimedia - - Video -translation_of: Learn/Accessibility/Multimedia -original_slug: Apprendre/a11y/Multimedia ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
- -

Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.

- - - - - - - - - - - - -
Conditions requise:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de Qu'est ce que l'accessibilité?
Objectif:Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .
- -

Multimédia et accessibilité

- -

Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  WAI-ARIA l'attribut).

- -

Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.

- -

Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.

- -

Simple images

- -

Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article   HTML : une bonne base pour l'accessibilité  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.

- -

Par exemple:

- -
<img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees .">
-
- -

Commandes audio et vidéo accessibles

- -

La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .

- -

Le problème avec les contrôles HTML5 natifs

- -

Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  native-controls.html code source et en direct):

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a>  au lieu .</p>
-</audio>
-
-<br>
-
-<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
-</video>
- -

L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :

- -

Screenshot of Video Controls in Firefox

- -

Screenshot of Video Controls in Chrome

- -

Cependant, il y a des problèmes avec ces contrôles :

- - - -

Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.

- -

Création de contrôles audio et vidéo personnalisés

- -

La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .

- -

Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .

- -

Basic setup

- -

Tout d'abord, prenez une copie de notre  custom-controls-start.html, custom-controls.css, rabbit320.mp4, et rabbit320.webm fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .

- -

Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .

- -

Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:

- -
<section class="player">
-  <video controls>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
-  </video>
-
-  <div class="controls">
-    <button class="playpause">Play</button>
-    <button class="stop">Stop</button>
-    <button class="rwd">Rwd</button>
-    <button class="fwd">Fwd</button>
-    <div class="time">00:00</div>
-  </div>
-</section>
- -

JavaScript basic setup

- -

Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .

- -

Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:

- -
var playPauseBtn = document.querySelector('.playpause');
-var stopBtn = document.querySelector('.stop');
-var rwdBtn = document.querySelector('.rwd');
-var fwdBtn = document.querySelector('.fwd');
-var timeLabel = document.querySelector('.time');
- -

Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:

- -
var player = document.querySelector('video');
- -

Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.

- -

Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:

- -
player.removeAttribute('controls');
- -

Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.

- -

Câbler nos boutons

- -

Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:

- -
playPauseBtn.onclick = function() {
-  if(player.paused) {
-    player.play();
-    playPauseBtn.textContent = 'Pause';
-  } else {
-    player.pause();
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:

- -
stopBtn.onclick = function() {
-  player.pause();
-  player.currentTime = 0;
-  playPauseBtn.textContent = 'Play';
-};
- -

Il n'y a pas de fonction  stop()  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en pause()  et, dans le même temps, définissons la valeur currentTime sur 0.

- -

Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:

- -
rwdBtn.onclick = function() {
-  player.currentTime -= 3;
-};
-
-fwdBtn.onclick = function() {
-  player.currentTime += 3;
-  if(player.currentTime >= player.duration || player.paused) {
-    player.pause();
-    player.currentTime = 0;
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  currentTime chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.

- -

Notez que nous vérifions également si la durée  currentTime est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .

- -

Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:

- -
player.ontimeupdate = function() {
-  var minutes = Math.floor(player.currentTime / 60);
-  var seconds = Math.floor(player.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes<10) {
-    minuteValue = "0" + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds<10) {
-    secondValue = "0" + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  mediaTime = minuteValue + ":" + secondValue;
-  timeLabel.textContent = mediaTime;
-};
- -

Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.

- -

Lectures complémentaires

- -

Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:

- - - -

Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  custom-controls-oojs ( également voir le code source).

- -

Transcriptions audio

- -

Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.

- -

En termes de création de la transcription, vos options sont les suivantes:

- - - -

Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.

- -

Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.

- -

Exemples de transcription

- -

Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  Audio Transcription Sample 1 et choisissez plus > Transcript.

- -

Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  transcription audio-ui exemple (voir aussi le code source).

- -

Descriptions audio

- -

Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.

- -

Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.

- -

Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.

- -
-

Note : Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.

-
- -

Pistes de texte vidéo

- -

Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .

- -
-

Note : Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)

-
- -

Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:

- -

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

- -

Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple

- -

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

- -

Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:

- - - -

Implémentation de pistes de texte vidéo HTML5

- -

Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .

- -

Un fichier WebVTT typique ressemblera à ceci:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
- Ceci est le premier sous-titre.
-
-2
-00:00:30.739 --> 00:00:34.074
- C'est le deuxième .
-
-  ...
- -

Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

- - - -

Voici un exemple:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:

- -

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Pour plus de détails, veuillez lire  Ajouter des légendes et des sous titres à des vidéos HTML 5.  Vous trouverez un exemple  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le code source.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.

- -
-

Note : Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.

-
- -

Autre contenu multimédia

- -

Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:

- - - -

Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:

- - - -

Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.

- -

Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.

- -

Résumé

- -

Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.

- -

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

Dans ce module

- - - diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md new file mode 100644 index 0000000000..e957ae2002 --- /dev/null +++ b/files/fr/learn/accessibility/multimedia/index.md @@ -0,0 +1,366 @@ +--- +title: Accessible multimedia +slug: Learn/Accessibility/Multimedia +tags: + - Accessibilité + - Apprendre + - Audio + - Débutant + - HTML + - Images + - JavaScript + - Multimedia + - Video +translation_of: Learn/Accessibility/Multimedia +original_slug: Apprendre/a11y/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.

+ + + + + + + + + + + + +
Conditions requise:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de Qu'est ce que l'accessibilité?
Objectif:Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .
+ +

Multimédia et accessibilité

+ +

Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  WAI-ARIA l'attribut).

+ +

Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.

+ +

Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.

+ +

Simple images

+ +

Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article   HTML : une bonne base pour l'accessibilité  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.

+ +

Par exemple:

+ +
<img src="dinosaur.png"
+     alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees .">
+
+ +

Commandes audio et vidéo accessibles

+ +

La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .

+ +

Le problème avec les contrôles HTML5 natifs

+ +

Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  native-controls.html code source et en direct):

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a>  au lieu .</p>
+</audio>
+
+<br>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
+</video>
+ +

L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

Cependant, il y a des problèmes avec ces contrôles :

+ + + +

Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.

+ +

Création de contrôles audio et vidéo personnalisés

+ +

La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .

+ +

Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .

+ +

Basic setup

+ +

Tout d'abord, prenez une copie de notre  custom-controls-start.html, custom-controls.css, rabbit320.mp4, et rabbit320.webm fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .

+ +

Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .

+ +

Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:

+ +
<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
+  </video>
+
+  <div class="controls">
+    <button class="playpause">Play</button>
+    <button class="stop">Stop</button>
+    <button class="rwd">Rwd</button>
+    <button class="fwd">Fwd</button>
+    <div class="time">00:00</div>
+  </div>
+</section>
+ +

JavaScript basic setup

+ +

Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .

+ +

Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:

+ +
var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');
+ +

Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:

+ +
var player = document.querySelector('video');
+ +

Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.

+ +

Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:

+ +
player.removeAttribute('controls');
+ +

Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.

+ +

Câbler nos boutons

+ +

Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:

+ +
playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:

+ +
stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};
+ +

Il n'y a pas de fonction  stop()  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en pause()  et, dans le même temps, définissons la valeur currentTime sur 0.

+ +

Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:

+ +
rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime >= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  currentTime chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.

+ +

Notez que nous vérifions également si la durée  currentTime est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .

+ +

Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:

+ +
player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes<10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds<10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};
+ +

Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.

+ +

Lectures complémentaires

+ +

Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:

+ + + +

Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  custom-controls-oojs ( également voir le code source).

+ +

Transcriptions audio

+ +

Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.

+ +

En termes de création de la transcription, vos options sont les suivantes:

+ + + +

Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.

+ +

Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.

+ +

Exemples de transcription

+ +

Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  Audio Transcription Sample 1 et choisissez plus > Transcript.

+ +

Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  transcription audio-ui exemple (voir aussi le code source).

+ +

Descriptions audio

+ +

Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.

+ +

Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.

+ +

Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.

+ +
+

Note : Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.

+
+ +

Pistes de texte vidéo

+ +

Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .

+ +
+

Note : Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)

+
+ +

Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:

+ +

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+ +

Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple

+ +

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+ +

Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:

+ + + +

Implémentation de pistes de texte vidéo HTML5

+ +

Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .

+ +

Un fichier WebVTT typique ressemblera à ceci:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+ Ceci est le premier sous-titre.
+
+2
+00:00:30.739 --> 00:00:34.074
+ C'est le deuxième .
+
+  ...
+ +

Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

+ + + +

Voici un exemple:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:

+ +

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Pour plus de détails, veuillez lire  Ajouter des légendes et des sous titres à des vidéos HTML 5.  Vous trouverez un exemple  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le code source.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.

+ +
+

Note : Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.

+
+ +

Autre contenu multimédia

+ +

Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:

+ + + +

Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:

+ + + +

Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.

+ +

Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.

+ +

Résumé

+ +

Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.

+ +

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

Dans ce module

+ + + diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.html b/files/fr/learn/accessibility/wai-aria_basics/index.html deleted file mode 100644 index c7821400cf..0000000000 --- a/files/fr/learn/accessibility/wai-aria_basics/index.html +++ /dev/null @@ -1,426 +0,0 @@ ---- -title: Les bases de WAI-ARIA -slug: Learn/Accessibility/WAI-ARIA_basics -tags: - - ARIA - - Accessibilité - - Apprendre - - Article - - Débutant - - Guide - - HTML - - JavaScript - - WAI-ARIA - - sémantique -translation_of: Learn/Accessibility/WAI-ARIA_basics -original_slug: Apprendre/a11y/WAI-ARIA_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
- -

Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.

- - - - - - - - - - - - -
  Prerequis:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des articles précédents du cours.
Objectif :Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.
- -

Qu'est WAI-ARIA?

- -

Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.

- -

Un nouvel ensemble de problèmes

- -

Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.

- -

Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <div class="nav"> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .

- -

La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:

- -
<a href="#hidden" class="hidden">Passer à la navigation</a>
- -

Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.

- -

Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input pour rendre de tels contrôles:

- -
<input type="date">
-<input type="range">
- -

Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.

- -

Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.

- -

Entrez WAI-ARIA

- -

WAI-ARIA est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:

- - - -

Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.

- -
-

Note : Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la définition des rôles.

- -

La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  Définitions des états et des propriétés (tous les attributs aria- *).

-
- -

Où WAI-ARIA est supporté?

- -

Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:

- -
    -
  1. Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA
    2. -
  2. Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer
    3. -
- -

Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir Rough Guide: browsers, operating systems and screen reader support updated.

- -

Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.

- -
    -
  1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
    2. -
  2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    3. -
- -

In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.

- -
-

Note : Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see About jQuery UI: Deep accessibility support), ExtJS, and Dojo/Dijit.

-
- -

When should you use WAI-ARIA?

- -

We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:

- -
    -
  1. Signposts/Landmarks: ARIA's role attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
    2. -
  2. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
    3. -
  3. Enhancing keyboard accessibility: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using tabindex).
    4. -
  4. Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
    5. -
- -

One thing to remember though — you should only use WAI-ARIA when you need to! Ideally, you should always use native HTML features to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.

- -

But again, only use it when necessary!

- -
-

Note : Also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.

-
- -

Practical WAI-ARIA implementations

- -

In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.

- -

See our section on testing screenreaders for more information.

- -

Signposts/Landmarks

- -

WAI-ARIA adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our website-no-roles example (see it live) has the following structure:

- -
<header>
-  <h1>...</h1>
-  <nav>
-    <ul>...</ul>
-    <form>
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article>...</article>
-  <aside>...</aside>
-</main>
-
-<footer>...</footer>
- -

If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:

- - - -

If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.

- -

- -

However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input type="search">). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.

- -

Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see index.html and style.css), or navigating to our website-aria-roles example (see it live), which has a structure like this:

- -
<header>
-  <h1>...</h1>
-  <nav role="navigation">
-    <ul>...</ul>
-    <form role="search">
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article role="article">...</article>
-  <aside role="complementary">...</aside>
-</main>
-
-<footer>...</footer>
- -

We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.

- -
<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
- -

Now if we use VoiceOver to look at this example, we get some improvements:

- - - -

Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <div>s, you should definitely include the ARIA roles to provide these much needed semantics!

- -

The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.

- -

Dynamic content updates

- -

Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.

- -

The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like XMLHttpRequest, Fetch, or DOM APIs. These are sometimes referred to as live regions.

- -

Let's look at a quick example — see aria-no-live.html (also see it running live). In this example we have a simple random quote box:

- -
<section>
-  <h1>Random quote</h1>
-  <blockquote>
-    <p></p>
-  </blockquote>
-</section>
- -

Our JavaScript loads a JSON file via XMLHttpRequest containing a series of random quotes and their authors. Once that is done, we start up a setInterval() loop that loads a new random quote into the quote box every 10 seconds:

- -
var intervalID = window.setInterval(showQuote, 10000);
- -

This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.

- -

WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the aria-live property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:

- - - -

We'd like you to take a copy of aria-no-live.html and quotes.json, and update your <section> tag as follows:

- -
<section aria-live="assertive">
- -

This will cause a screenreader to read out the content as it is updated.

- -
-

Note : Most browsers will throw a security exception if you try to do an XMLHttpRequest call from a file:// URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example using GitHub, or a local web server like Python's SimpleHTTPServer.

-
- -

There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the aria-atomic property to the section. Update your <section> tag again, like so:

- -
<section aria-live="assertive" aria-atomic="true">
- -

The aria-atomic="true" attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.

- -
-

Note : You can see the finished example at aria-live.html (see it running live).

-
- -
-

Note : The aria-relevant property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.

-
- -

Enhancing keyboard accessibility

- -

As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box).

- -

However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.

- -

In terms of making non-focusable code focusable, WAI-ARIA extends the tabindex attribute with some new values:

- - - -

We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see Building keyboard accessibility back in.

- -

Accessibility of non-semantic controls

- -

This follows on from the previous section — when a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.

- -

Form validation and error alerts

- -

First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- - - -

We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?

- -
    -
  1. At this point, take a copy of our form-validation.html and validation.js files, and save them in a local directory.
    2. -
  2. Open them both in a text editor and have a look at how the code works.
    3. -
  3. First of all, add a paragraph just above the opening <form> tag, like the one below, and mark both the form <label>s with an asterisk. This is normally how we mark required fields for sighted users. - 
    <p>Fields marked with an asterisk (*) are required.</p>
    -
    4. -
  4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the aria-required attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <input> elements like so: - 
    <input type="text" name="name" id="name" aria-required="true">
-
-<input type="number" name="age" id="age" aria-required="true">
    -
    5. -
  5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
    6. -
  6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: - 
    <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
    -
    7. -
- -
-

Note : You can see the finished example live at form-validation-updated.html.

-
- -

WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.

- -

There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.

- -

If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:

- -
<p class="hidden-alert" aria-live="assertive"></p>
- -

which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too:

- -
function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length-1];
-  if(bool) {
-    instruItem.input.disabled = false;
-    instruItem.label.style.color = '#000';
-    instruItem.input.setAttribute('aria-disabled', 'false');
-    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
-  } else {
-    instruItem.input.disabled = true;
-    instruItem.label.style.color = '#999';
-    instruItem.input.setAttribute('aria-disabled', 'true');
-    instruItem.input.removeAttribute('aria-label');
-    hiddenAlert.textContent = 'Instruments played field now disabled.';
-  }
-}
- -

Describing non-semantic buttons as buttons

- -

A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see UI controls in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using tabindex and a bit of JavaScript.

- -

But what about screenreaders? They still won't see the elements as buttons. If we test our fake-div-buttons.html example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.

- -

We can fix this using a WAI-ARIA role. Make a local copy of fake-div-buttons.html, and add role="button" to each button <div>, for example:

- -
<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
- -

Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.

- -
-

Note : Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!

-
- -

Guiding users through complex widgets

- -

There are a whole host of other roles that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example combobox, slider, tabpanel, tree. You can see a number of userful examples in the Deque university code library, to give you an idea of how such controls can be made accessible.

- -

Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see Hiding things in our CSS and JavaScript accessibility article), which you can find at Tabbed info box example (see source code).

- -

This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.

- -

To improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). We've updated the structure of the tabbed interface like so:

- -
<ul role="tablist">
-  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
-</ul>
-<div class="panels">
-  <article class="active-panel" role="tabpanel" aria-hidden="false">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-</div>
- -
-

Note : The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.

-
- -

The new features are as follows:

- - - -

In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the aria-hidden settings (only the non-hidden tab ever has aria-hidden="false" set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.

- -
-

Note : If there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true"  attribute.

-
- -

Summary

- -

This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

- -

In this module

- - diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.md b/files/fr/learn/accessibility/wai-aria_basics/index.md new file mode 100644 index 0000000000..c7821400cf --- /dev/null +++ b/files/fr/learn/accessibility/wai-aria_basics/index.md @@ -0,0 +1,426 @@ +--- +title: Les bases de WAI-ARIA +slug: Learn/Accessibility/WAI-ARIA_basics +tags: + - ARIA + - Accessibilité + - Apprendre + - Article + - Débutant + - Guide + - HTML + - JavaScript + - WAI-ARIA + - sémantique +translation_of: Learn/Accessibility/WAI-ARIA_basics +original_slug: Apprendre/a11y/WAI-ARIA_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
+ +

Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.

+ + + + + + + + + + + + +
  Prerequis:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des articles précédents du cours.
Objectif :Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.
+ +

Qu'est WAI-ARIA?

+ +

Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.

+ +

Un nouvel ensemble de problèmes

+ +

Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.

+ +

Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <div class="nav"> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .

+ +

La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:

+ +
<a href="#hidden" class="hidden">Passer à la navigation</a>
+ +

Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.

+ +

Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input pour rendre de tels contrôles:

+ +
<input type="date">
+<input type="range">
+ +

Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.

+ +

Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.

+ +

Entrez WAI-ARIA

+ +

WAI-ARIA est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:

+ + + +

Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.

+ +
+

Note : Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la définition des rôles.

+ +

La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  Définitions des états et des propriétés (tous les attributs aria- *).

+
+ +

Où WAI-ARIA est supporté?

+ +

Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:

+ +
    +
  1. Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA
    2. +
  2. Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer
    3. +
+ +

Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir Rough Guide: browsers, operating systems and screen reader support updated.

+ +

Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.

+ +
    +
  1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
    2. +
  2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    3. +
+ +

In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.

+ +
+

Note : Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see About jQuery UI: Deep accessibility support), ExtJS, and Dojo/Dijit.

+
+ +

When should you use WAI-ARIA?

+ +

We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:

+ +
    +
  1. Signposts/Landmarks: ARIA's role attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
    2. +
  2. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
    3. +
  3. Enhancing keyboard accessibility: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using tabindex).
    4. +
  4. Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
    5. +
+ +

One thing to remember though — you should only use WAI-ARIA when you need to! Ideally, you should always use native HTML features to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.

+ +

But again, only use it when necessary!

+ +
+

Note : Also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.

+
+ +

Practical WAI-ARIA implementations

+ +

In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.

+ +

See our section on testing screenreaders for more information.

+ +

Signposts/Landmarks

+ +

WAI-ARIA adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our website-no-roles example (see it live) has the following structure:

+ +
<header>
+  <h1>...</h1>
+  <nav>
+    <ul>...</ul>
+    <form>
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article>...</article>
+  <aside>...</aside>
+</main>
+
+<footer>...</footer>
+ +

If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:

+ + + +

If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.

+ +

+ +

However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input type="search">). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.

+ +

Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see index.html and style.css), or navigating to our website-aria-roles example (see it live), which has a structure like this:

+ +
<header>
+  <h1>...</h1>
+  <nav role="navigation">
+    <ul>...</ul>
+    <form role="search">
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article role="article">...</article>
+  <aside role="complementary">...</aside>
+</main>
+
+<footer>...</footer>
+ +

We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.

+ +
<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
+ +

Now if we use VoiceOver to look at this example, we get some improvements:

+ + + +

Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <div>s, you should definitely include the ARIA roles to provide these much needed semantics!

+ +

The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.

+ +

Dynamic content updates

+ +

Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.

+ +

The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like XMLHttpRequest, Fetch, or DOM APIs. These are sometimes referred to as live regions.

+ +

Let's look at a quick example — see aria-no-live.html (also see it running live). In this example we have a simple random quote box:

+ +
<section>
+  <h1>Random quote</h1>
+  <blockquote>
+    <p></p>
+  </blockquote>
+</section>
+ +

Our JavaScript loads a JSON file via XMLHttpRequest containing a series of random quotes and their authors. Once that is done, we start up a setInterval() loop that loads a new random quote into the quote box every 10 seconds:

+ +
var intervalID = window.setInterval(showQuote, 10000);
+ +

This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.

+ +

WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the aria-live property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:

+ + + +

We'd like you to take a copy of aria-no-live.html and quotes.json, and update your <section> tag as follows:

+ +
<section aria-live="assertive">
+ +

This will cause a screenreader to read out the content as it is updated.

+ +
+

Note : Most browsers will throw a security exception if you try to do an XMLHttpRequest call from a file:// URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example using GitHub, or a local web server like Python's SimpleHTTPServer.

+
+ +

There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the aria-atomic property to the section. Update your <section> tag again, like so:

+ +
<section aria-live="assertive" aria-atomic="true">
+ +

The aria-atomic="true" attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.

+ +
+

Note : You can see the finished example at aria-live.html (see it running live).

+
+ +
+

Note : The aria-relevant property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.

+
+ +

Enhancing keyboard accessibility

+ +

As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box).

+ +

However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.

+ +

In terms of making non-focusable code focusable, WAI-ARIA extends the tabindex attribute with some new values:

+ + + +

We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see Building keyboard accessibility back in.

+ +

Accessibility of non-semantic controls

+ +

This follows on from the previous section — when a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.

+ +

Form validation and error alerts

+ +

First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ + + +

We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?

+ +
    +
  1. At this point, take a copy of our form-validation.html and validation.js files, and save them in a local directory.
    2. +
  2. Open them both in a text editor and have a look at how the code works.
    3. +
  3. First of all, add a paragraph just above the opening <form> tag, like the one below, and mark both the form <label>s with an asterisk. This is normally how we mark required fields for sighted users. + 
    <p>Fields marked with an asterisk (*) are required.</p>
    +
    4. +
  4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the aria-required attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <input> elements like so: + 
    <input type="text" name="name" id="name" aria-required="true">
+
+<input type="number" name="age" id="age" aria-required="true">
    +
    5. +
  5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
    6. +
  6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: + 
    <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
    +
    7. +
+ +
+

Note : You can see the finished example live at form-validation-updated.html.

+
+ +

WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.

+ +

There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.

+ +

If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:

+ +
<p class="hidden-alert" aria-live="assertive"></p>
+ +

which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too:

+ +
function toggleMusician(bool) {
+  var instruItem = formItems[formItems.length-1];
+  if(bool) {
+    instruItem.input.disabled = false;
+    instruItem.label.style.color = '#000';
+    instruItem.input.setAttribute('aria-disabled', 'false');
+    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = 'Instruments played field now disabled.';
+  }
+}
+ +

Describing non-semantic buttons as buttons

+ +

A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see UI controls in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using tabindex and a bit of JavaScript.

+ +

But what about screenreaders? They still won't see the elements as buttons. If we test our fake-div-buttons.html example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.

+ +

We can fix this using a WAI-ARIA role. Make a local copy of fake-div-buttons.html, and add role="button" to each button <div>, for example:

+ +
<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
+ +

Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.

+ +
+

Note : Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!

+
+ +

Guiding users through complex widgets

+ +

There are a whole host of other roles that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example combobox, slider, tabpanel, tree. You can see a number of userful examples in the Deque university code library, to give you an idea of how such controls can be made accessible.

+ +

Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see Hiding things in our CSS and JavaScript accessibility article), which you can find at Tabbed info box example (see source code).

+ +

This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.

+ +

To improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). We've updated the structure of the tabbed interface like so:

+ +
<ul role="tablist">
+  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
+</ul>
+<div class="panels">
+  <article class="active-panel" role="tabpanel" aria-hidden="false">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+</div>
+ +
+

Note : The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.

+
+ +

The new features are as follows:

+ + + +

In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the aria-hidden settings (only the non-hidden tab ever has aria-hidden="false" set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.

+ +
+

Note : If there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true"  attribute.

+
+ +

Summary

+ +

This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

+ +

In this module

+ + diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.html b/files/fr/learn/accessibility/what_is_accessibility/index.html deleted file mode 100644 index dc7376524e..0000000000 --- a/files/fr/learn/accessibility/what_is_accessibility/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Qu'est ce que l'accessibilité? -slug: Learn/Accessibility/What_is_accessibility -tags: - - Accessibilité - - Aide technique - - Apprendre - - Article - - CSS - - Clavier - - Débutant - - HTML - - JavaScript - - Lecteur d'écran - - Outils - - Utilisateurs -translation_of: Learn/Accessibility/What_is_accessibility -original_slug: Apprendre/a11y/What_is_accessibility ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
- -

Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.

- - - - - - - - - - - - -
Prérequis:Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.
Objectif:Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.
- -

Qu'est-ce donc que l'accessibilité?

- -

L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.

- -

On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.

- -

Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.

- -

L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :

- - - -

Quel genre de handicap devons nous envisager ?

- -

Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — vous n'êtes pas vos utilisateurs. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de technologies d'assistance).

- -
-

Note : L'aide-mémoire Handicap et santé de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »

-
- -

Les personnes ayant des troubles de la vue

- -

Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:

- - - -

Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre Guide pour tester les lecteurs d'écrans sur différents navigateurs (en) pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir Cécité et déficience visuelle). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.

- -

Les personnes ayant des troubles de l'audition

- -

Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en) ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.

- -

Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.

- -

Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire Surdité et déficience auditive de l'Organisation Mondiale de la Santé.

- -

Les personnes ayant des troubles de la mobilité

- -

Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.

- -

Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.

- -

En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche Tab ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section Test d'accessibilité avec le clavier intégré entre différents navigateurs(en).

- -

De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans de l'INSEE.

- -

Personnes ayant des déficiences cognitives

- -

La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  TDAH-trouble d'hyperactivité avec déficit de l'attention, TSA-trouble du spectre de l’autisme,  aux personnes atteintes de schizophrénie, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. 

- -

Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.

- -

Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :

- - - -

Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.

- -

En termes de statistiques, encore une fois, les chiffres sont importants. Le  rapport 2014 sur le statut d'invalidité (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .

- -
-

Note : La page cognitives de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. 

-
- -

Implémentation de l'accessibilité dans votre projet

- -

Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :

- - - -

Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.

- -

Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  alternative text  ou le texte du lien incorrect — voir Element relationships and context), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:

- - - -

Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.

- -

Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. 

- -

D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.

- -

Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.

- -
-

Note : Notre article  Gérer les problèmes courants d'accessibilité couvre les spécificités d'accessibilité qui doivent être testées plus en détail.

-
- -

Résumer :

- - - -

Directives d'accessibilité et loi

- -

Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.

- - - -

Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.

- -

Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.

- -

API d'accessibilité

- -

Les navigateurs web utilisent des API d’accessibilité spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée arborescence d'accessibilité.

- -

Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :

- - - -

Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  WAI-ARIA specification,  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de WAI-ARIA basics.

- -

Résumé

- -

Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md new file mode 100644 index 0000000000..dc7376524e --- /dev/null +++ b/files/fr/learn/accessibility/what_is_accessibility/index.md @@ -0,0 +1,197 @@ +--- +title: Qu'est ce que l'accessibilité? +slug: Learn/Accessibility/What_is_accessibility +tags: + - Accessibilité + - Aide technique + - Apprendre + - Article + - CSS + - Clavier + - Débutant + - HTML + - JavaScript + - Lecteur d'écran + - Outils + - Utilisateurs +translation_of: Learn/Accessibility/What_is_accessibility +original_slug: Apprendre/a11y/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+ +

Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.

+ + + + + + + + + + + + +
Prérequis:Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.
Objectif:Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.
+ +

Qu'est-ce donc que l'accessibilité?

+ +

L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.

+ +

On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.

+ +

Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.

+ +

L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :

+ + + +

Quel genre de handicap devons nous envisager ?

+ +

Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — vous n'êtes pas vos utilisateurs. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de technologies d'assistance).

+ +
+

Note : L'aide-mémoire Handicap et santé de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »

+
+ +

Les personnes ayant des troubles de la vue

+ +

Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:

+ + + +

Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre Guide pour tester les lecteurs d'écrans sur différents navigateurs (en) pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir Cécité et déficience visuelle). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.

+ +

Les personnes ayant des troubles de l'audition

+ +

Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en) ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.

+ +

Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.

+ +

Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire Surdité et déficience auditive de l'Organisation Mondiale de la Santé.

+ +

Les personnes ayant des troubles de la mobilité

+ +

Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.

+ +

Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.

+ +

En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche Tab ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section Test d'accessibilité avec le clavier intégré entre différents navigateurs(en).

+ +

De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans de l'INSEE.

+ +

Personnes ayant des déficiences cognitives

+ +

La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  TDAH-trouble d'hyperactivité avec déficit de l'attention, TSA-trouble du spectre de l’autisme,  aux personnes atteintes de schizophrénie, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. 

+ +

Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.

+ +

Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :

+ + + +

Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.

+ +

En termes de statistiques, encore une fois, les chiffres sont importants. Le  rapport 2014 sur le statut d'invalidité (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .

+ +
+

Note : La page cognitives de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. 

+
+ +

Implémentation de l'accessibilité dans votre projet

+ +

Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :

+ + + +

Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.

+ +

Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  alternative text  ou le texte du lien incorrect — voir Element relationships and context), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:

+ + + +

Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.

+ +

Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. 

+ +

D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.

+ +

Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.

+ +
+

Note : Notre article  Gérer les problèmes courants d'accessibilité couvre les spécificités d'accessibilité qui doivent être testées plus en détail.

+
+ +

Résumer :

+ + + +

Directives d'accessibilité et loi

+ +

Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.

+ + + +

Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.

+ +

Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.

+ +

API d'accessibilité

+ +

Les navigateurs web utilisent des API d’accessibilité spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée arborescence d'accessibilité.

+ +

Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :

+ + + +

Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  WAI-ARIA specification,  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de WAI-ARIA basics.

+ +

Résumé

+ +

Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

diff --git a/files/fr/learn/common_questions/available_text_editors/index.html b/files/fr/learn/common_questions/available_text_editors/index.html deleted file mode 100644 index 42107015ba..0000000000 --- a/files/fr/learn/common_questions/available_text_editors/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Choisir, installer et paramétrer un éditeur de texte -slug: Learn/Common_questions/Available_text_editors -tags: - - Beginner - - Composing - - Guide - - NeedsActiveLearning - - Tools -translation_of: Learn/Common_questions/Available_text_editors -original_slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte ---- -
{{IncludeSubnav("/fr/Apprendre")}}
-

Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.

- - - - - - - - - - - - -
Prérequis :Vous devriez déjà connaître les différents logiciels nécessaires pour construire un site web.
Objectif :Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.
- -

Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.

- -

La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.

- -

Voici quelques questions qui peuvent vous aider à choisir :

- - - -

Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.

- -
-

Note : Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.

-
- -

Voici un tableau de quelques éditeurs de texte connus :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉditeurLicencePrixSystème d'exploitationSupportDocumentationExtensible
AtomMIT/BSDGratuitWindows, Mac, LinuxForumManuel en ligneOui
BracketsMIT/BSDGratuitWindows, Mac, LinuxForum, IRCWiki GitHubOui
CodaPropriétaire99 $MacTwitter, Forum, e-maileBookOui
EmacsGPL 3GratuitWindows, Mac, LinuxFAQ, liste de diffusion (anglophone), News GroupManuel en ligne / Tutoriel en français depuis l'éditeur / pages sur Ubuntu-frOui
EspressoPropriétaire75 $MacFAQ, e-mailPas de documentation utilisateur mais il existe une documentation pour les extensions (plug-ins)Oui
GeditGPLGratuitWindows, Mac, LinuxListe de diffusion (anglophone), IRCManuel en ligne (en français) / Introduction sur Ubuntu-frOui
Komodo EditMPLGratuitWindows, Mac, LinuxForumManuel en ligneOui
Notepad++GPL modifiéeGratuitWindowsForumWikiOui
PSPadPropriétaireGratuitWindowsFAQ, ForumAide en ligneYes
Sublime TextPropriétaire$70Windows, Mac, LinuxForumDocumentation officielle, documentation officieuseOui
TextMatePropriétaire$50MacTwitter, IRC, liste de diffusion (anglophone), E-mailManuel en ligne, WikiOui
TextWranglerPropriétaireGratuitMacFAQ, ForumManuel PDFNon
VimLicence ouverte spécifiqueGratuitWindows, Mac, LinuxListe de diffusion (anglophone), tuppervim (communauté francophone)Manuel en ligne, tutoriel en français disponible depuis l'éditeur, introduction sur Ubuntu-fr (en français)Oui
- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Critères de choix

- -

Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?

- -

Quel est le système d'exploitation que j'utiliser pour travailler ?

- -

Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.

- -

Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).

- -

Quelles sont les technologies que je serai amené-e à manipuler ?

- -

De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :

- - - -

La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.

- -

Quelles sont les fonctionnalités de base dont j'ai besoin ?

- -

Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :

- - - -

Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?

- -

Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.

- -

Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (plugins) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.

- -

Si vous appréciez avoir de nombreuses fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour Integrated Development Environment en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :

- - - -

Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?

- -

Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :

- -
    -
  1. Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)
    2. -
  2. Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)
    3. -
- -

N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.

- -

Est-ce que l'apparence de mon éditeur est importante ?

- -

Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.

- -

Installation et paramétrage

- -

L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :

- - - -

Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les associations de fichiers. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :

- - - -

Prochaines étapes

- -

Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser votre environnement de travail ou vous pouvez aussi démarrer tout de suite et écrire votre première page web.

diff --git a/files/fr/learn/common_questions/available_text_editors/index.md b/files/fr/learn/common_questions/available_text_editors/index.md new file mode 100644 index 0000000000..42107015ba --- /dev/null +++ b/files/fr/learn/common_questions/available_text_editors/index.md @@ -0,0 +1,291 @@ +--- +title: Choisir, installer et paramétrer un éditeur de texte +slug: Learn/Common_questions/Available_text_editors +tags: + - Beginner + - Composing + - Guide + - NeedsActiveLearning + - Tools +translation_of: Learn/Common_questions/Available_text_editors +original_slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+

Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.

+ + + + + + + + + + + + +
Prérequis :Vous devriez déjà connaître les différents logiciels nécessaires pour construire un site web.
Objectif :Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.
+ +

Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.

+ +

La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.

+ +

Voici quelques questions qui peuvent vous aider à choisir :

+ + + +

Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.

+ +
+

Note : Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.

+
+ +

Voici un tableau de quelques éditeurs de texte connus :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉditeurLicencePrixSystème d'exploitationSupportDocumentationExtensible
AtomMIT/BSDGratuitWindows, Mac, LinuxForumManuel en ligneOui
BracketsMIT/BSDGratuitWindows, Mac, LinuxForum, IRCWiki GitHubOui
CodaPropriétaire99 $MacTwitter, Forum, e-maileBookOui
EmacsGPL 3GratuitWindows, Mac, LinuxFAQ, liste de diffusion (anglophone), News GroupManuel en ligne / Tutoriel en français depuis l'éditeur / pages sur Ubuntu-frOui
EspressoPropriétaire75 $MacFAQ, e-mailPas de documentation utilisateur mais il existe une documentation pour les extensions (plug-ins)Oui
GeditGPLGratuitWindows, Mac, LinuxListe de diffusion (anglophone), IRCManuel en ligne (en français) / Introduction sur Ubuntu-frOui
Komodo EditMPLGratuitWindows, Mac, LinuxForumManuel en ligneOui
Notepad++GPL modifiéeGratuitWindowsForumWikiOui
PSPadPropriétaireGratuitWindowsFAQ, ForumAide en ligneYes
Sublime TextPropriétaire$70Windows, Mac, LinuxForumDocumentation officielle, documentation officieuseOui
TextMatePropriétaire$50MacTwitter, IRC, liste de diffusion (anglophone), E-mailManuel en ligne, WikiOui
TextWranglerPropriétaireGratuitMacFAQ, ForumManuel PDFNon
VimLicence ouverte spécifiqueGratuitWindows, Mac, LinuxListe de diffusion (anglophone), tuppervim (communauté francophone)Manuel en ligne, tutoriel en français disponible depuis l'éditeur, introduction sur Ubuntu-fr (en français)Oui
+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Critères de choix

+ +

Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?

+ +

Quel est le système d'exploitation que j'utiliser pour travailler ?

+ +

Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.

+ +

Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).

+ +

Quelles sont les technologies que je serai amené-e à manipuler ?

+ +

De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :

+ + + +

La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.

+ +

Quelles sont les fonctionnalités de base dont j'ai besoin ?

+ +

Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :

+ + + +

Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?

+ +

Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.

+ +

Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (plugins) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.

+ +

Si vous appréciez avoir de nombreuses fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour Integrated Development Environment en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :

+ + + +

Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?

+ +

Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :

+ +
    +
  1. Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)
    2. +
  2. Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)
    3. +
+ +

N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.

+ +

Est-ce que l'apparence de mon éditeur est importante ?

+ +

Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.

+ +

Installation et paramétrage

+ +

L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :

+ + + +

Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les associations de fichiers. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :

+ + + +

Prochaines étapes

+ +

Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser votre environnement de travail ou vous pouvez aussi démarrer tout de suite et écrire votre première page web.

diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html deleted file mode 100644 index 179fa1519a..0000000000 --- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Tester le bon fonctionnement de votre site web -slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly -tags: - - Beginner - - Document - - Guide - - NeedsActiveLearning - - Web - - Web Development - - WebMechanics -translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly -original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web ---- -

Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment transférer des fichiers vers un serveur web.
Objectifs :Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.
- -

Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

- -

Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.

- -

Voyons donc comment diagnostiquer et résoudre ces problèmes.

- -

Pédagogie active

- -

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer !

- -

Aller plus loin

- -

Tester avec votre navigateur

- -

La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.

- -

Où est passée l'image ?

- -

Allons sur notre site web : http://demozilla.hebergeurexemple.net/. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !

- -

Oops, the ‘unicorn’ image is missing

- -

Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page :

- -

The image has a 404 error

- -

Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.

- -

Les status HTTP

- -

Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :

- -
-
 200 : OK
-
La ressource demandée a bien été transmise.
-
301 : Déplacée de façon permanente (Moved permanently)
-
La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.
-
304 : Non modifiée (Not modified)
-
La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.
-
403 : Accès interdit (Forbidden)
-
Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).
-
404 : Non trouvée (Not found)
-
Le message est plutôt explicite, nous en discuterons dans la suite de cet article.
-
500 : Erreur interne du serveur (Internal server error)
-
Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.
-
503 : Service indisponible (Service unavailable)
-
Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.
-
- - - -

Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.

- -

Corriger l'erreur 404

- -

Où est donc le problème ?

- -

Le list of images in our project

- -

À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML licornes.png plutôt que licorne.png. En corrigeant cette erreur avec l'attribut src

- -

Deleting the ‘s’

- -

Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

- -

The image loads corectly in the browser

- -

Et voilà, revenons sur les status {{Glossary("HTTP")}} :

- - - -

Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !

- -

Les erreurs fréquentes

- -

Les erreurs les plus fréquentes sont les suivantes.

- -

Des coquilles dans l'adresse

- -

Dans la capture suivante, nous avons voulu accéder à http://demozilla.hebergeurexemple.net/ mais nous avons oublié un « m » :

- -

Address unreachable

- -

L'adresse est introuvable… en effet.

- -

Les erreurs 404

- -

La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.

- -

Les erreurs JavaScript

- -

Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.

- -

Pour voir ces erreurs, ouvrez la console (Outils ➤ Développement web ➤ Console web) and puis rechargez la page:

- -

A Javascript error is shown in the Console

- -

Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans une autre série d'articles).

- -

D'autres points de contrôles

- -

Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».

- -

Qu'en est-il de la performance ?

- -

Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme webpagetest.org ou des modules complémentaires comme YSlow qui peuvent fournir des indications intéressantes :

- -

Yslow diagnostics

- -

Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.

- -

Est-ce que le serveur réagit suffisamment vite ?

- -

ping est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :

- -
$ ping mozilla.org
-PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
-64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
-64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
-64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
-^C
---- mozilla.org ping statistics ---
-4 packets transmitted, 4 packets received, 0.0% packet loss
-round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
- -

Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci Ctrl+C pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme ping contactera le serveur indéfiniment.

- -

Une checklist de base

- - - -

Prochaines étapes

- -

Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.

- - diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md new file mode 100644 index 0000000000..179fa1519a --- /dev/null +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md @@ -0,0 +1,177 @@ +--- +title: Tester le bon fonctionnement de votre site web +slug: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +tags: + - Beginner + - Document + - Guide + - NeedsActiveLearning + - Web + - Web Development + - WebMechanics +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web +--- +

Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment transférer des fichiers vers un serveur web.
Objectifs :Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.
+ +

Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

+ +

Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.

+ +

Voyons donc comment diagnostiquer et résoudre ces problèmes.

+ +

Pédagogie active

+ +

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer !

+ +

Aller plus loin

+ +

Tester avec votre navigateur

+ +

La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.

+ +

Où est passée l'image ?

+ +

Allons sur notre site web : http://demozilla.hebergeurexemple.net/. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !

+ +

Oops, the ‘unicorn’ image is missing

+ +

Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page :

+ +

The image has a 404 error

+ +

Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.

+ +

Les status HTTP

+ +

Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :

+ +
+
 200 : OK
+
La ressource demandée a bien été transmise.
+
301 : Déplacée de façon permanente (Moved permanently)
+
La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.
+
304 : Non modifiée (Not modified)
+
La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.
+
403 : Accès interdit (Forbidden)
+
Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).
+
404 : Non trouvée (Not found)
+
Le message est plutôt explicite, nous en discuterons dans la suite de cet article.
+
500 : Erreur interne du serveur (Internal server error)
+
Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.
+
503 : Service indisponible (Service unavailable)
+
Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.
+
+ + + +

Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.

+ +

Corriger l'erreur 404

+ +

Où est donc le problème ?

+ +

Le list of images in our project

+ +

À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML licornes.png plutôt que licorne.png. En corrigeant cette erreur avec l'attribut src

+ +

Deleting the ‘s’

+ +

Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

+ +

The image loads corectly in the browser

+ +

Et voilà, revenons sur les status {{Glossary("HTTP")}} :

+ + + +

Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !

+ +

Les erreurs fréquentes

+ +

Les erreurs les plus fréquentes sont les suivantes.

+ +

Des coquilles dans l'adresse

+ +

Dans la capture suivante, nous avons voulu accéder à http://demozilla.hebergeurexemple.net/ mais nous avons oublié un « m » :

+ +

Address unreachable

+ +

L'adresse est introuvable… en effet.

+ +

Les erreurs 404

+ +

La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.

+ +

Les erreurs JavaScript

+ +

Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.

+ +

Pour voir ces erreurs, ouvrez la console (Outils ➤ Développement web ➤ Console web) and puis rechargez la page:

+ +

A Javascript error is shown in the Console

+ +

Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans une autre série d'articles).

+ +

D'autres points de contrôles

+ +

Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».

+ +

Qu'en est-il de la performance ?

+ +

Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme webpagetest.org ou des modules complémentaires comme YSlow qui peuvent fournir des indications intéressantes :

+ +

Yslow diagnostics

+ +

Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.

+ +

Est-ce que le serveur réagit suffisamment vite ?

+ +

ping est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :

+ +
$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
+ +

Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci Ctrl+C pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme ping contactera le serveur indéfiniment.

+ +

Une checklist de base

+ + + +

Prochaines étapes

+ +

Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.

+ + diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html deleted file mode 100644 index 5fba68714b..0000000000 --- a/files/fr/learn/common_questions/common_web_layouts/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Conception d'une page web -slug: Learn/Common_questions/Common_web_layouts -tags: - - Beginner - - CSS - - Design - - HTML - - NeedsActiveLearning -translation_of: Learn/Common_questions/Common_web_layouts -original_slug: Apprendre/Concevoir_page_web ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.

- - - - - - - - - - - - -
Prérequis :Assurez-vous d'avoir d'abord identifié ce que vous souhaitez accomplir avec votre projet web.
Objectif :Apprendre où (et comment !) disposer des éléments dans vos pages web.
- -

Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.

- -

Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :

- -
-
En-tête
-
Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.
-
Contenu principal
-
Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.
-
Contenu secondaire
-
Il peut s'agir : -
    -
  1. d'informations complémentaires au contenu principal ;
    2. -
  2. d'informations partagées entre un sous-ensemble de pages ;
    3. -
  3. d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.
    4. -
-
-
Bas de page
-
Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.
-
- -

Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où 1 représente l'entête ; 2,  le bas de page ; A, le contenu principal ; et B1, B2, le contenu secondaire) :

- -

Dispostion à une colonne : particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.

- -

Example of a 1 column layout: Main on top and asides stacked beneath it.

- -

Disposition à deux colonnes : souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.

- -

 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.

- -

Disposition à trois colonnes : adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).

- -

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.

- -

Il est aussi possible de mélanger tous ces modèles classiques :

- -

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

- -

Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.

- -

Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.

- -

Pédagogie active

- -

Aucun exercice pratique n'est disponible actuellement. S.V.P., pensez à contribuer !

- -

Aller plus loin

- -

Regardons maintenant quelques exemples concrets tirés de sites connus.

- -

Disposition à une colonne

- -

Invision : un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.

- -

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

- -

Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.

- -

Disposition à deux colonnes

- -

Abduzeedo, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).

- -

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

- -

Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être directement relié.

- -

Attention, c'est un piège !

- -

MICA. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…

- -

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

- -

…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (float en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.

- -

Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.

- -

Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.

- -

Une disposition en apparence beaucoup plus complexe

- -

L'Opéra de Paris.

- -

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

- -

Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).

- -

Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.

- -

Prochaines étapes

- -

Deux options s'offrent maintenant à vous :

- - diff --git a/files/fr/learn/common_questions/common_web_layouts/index.md b/files/fr/learn/common_questions/common_web_layouts/index.md new file mode 100644 index 0000000000..5fba68714b --- /dev/null +++ b/files/fr/learn/common_questions/common_web_layouts/index.md @@ -0,0 +1,126 @@ +--- +title: Conception d'une page web +slug: Learn/Common_questions/Common_web_layouts +tags: + - Beginner + - CSS + - Design + - HTML + - NeedsActiveLearning +translation_of: Learn/Common_questions/Common_web_layouts +original_slug: Apprendre/Concevoir_page_web +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.

+ + + + + + + + + + + + +
Prérequis :Assurez-vous d'avoir d'abord identifié ce que vous souhaitez accomplir avec votre projet web.
Objectif :Apprendre où (et comment !) disposer des éléments dans vos pages web.
+ +

Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.

+ +

Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :

+ +
+
En-tête
+
Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.
+
Contenu principal
+
Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.
+
Contenu secondaire
+
Il peut s'agir : +
    +
  1. d'informations complémentaires au contenu principal ;
    2. +
  2. d'informations partagées entre un sous-ensemble de pages ;
    3. +
  3. d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.
    4. +
+
+
Bas de page
+
Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.
+
+ +

Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où 1 représente l'entête ; 2,  le bas de page ; A, le contenu principal ; et B1, B2, le contenu secondaire) :

+ +

Dispostion à une colonne : particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.

+ +

Example of a 1 column layout: Main on top and asides stacked beneath it.

+ +

Disposition à deux colonnes : souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.

+ +

 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.

+ +

Disposition à trois colonnes : adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).

+ +

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.

+ +

Il est aussi possible de mélanger tous ces modèles classiques :

+ +

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

+ +

Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.

+ +

Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.

+ +

Pédagogie active

+ +

Aucun exercice pratique n'est disponible actuellement. S.V.P., pensez à contribuer !

+ +

Aller plus loin

+ +

Regardons maintenant quelques exemples concrets tirés de sites connus.

+ +

Disposition à une colonne

+ +

Invision : un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.

+ +

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

+ +

Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.

+ +

Disposition à deux colonnes

+ +

Abduzeedo, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).

+ +

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

+ +

Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être directement relié.

+ +

Attention, c'est un piège !

+ +

MICA. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…

+ +

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

+ +

…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (float en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.

+ +

Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.

+ +

Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.

+ +

Une disposition en apparence beaucoup plus complexe

+ +

L'Opéra de Paris.

+ +

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

+ +

Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).

+ +

Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.

+ +

Prochaines étapes

+ +

Deux options s'offrent maintenant à vous :

+ + diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html deleted file mode 100644 index cecce85e86..0000000000 --- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Concevoir un site pour tous les types d'utilisateurs -slug: Learn/Common_questions/Design_for_all_types_of_users -tags: - - Accessibility - - Beginner - - Design - - Mobile - - NeedsActiveLearning -translation_of: Learn/Common_questions/Design_for_all_types_of_users -original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.

- - - - - - - - - - - - -
Prérequis :Avoir lu Qu'est-ce que l'accessibilité ? (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec l'anatomie d'une page web.
Objectifs :Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.
- -

Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Le contraste des couleurs

- -

Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.

- -

Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.

- -

Pour contrôler le contraste, vous pouvez télécharger et installer l'analyseur de contraste du Groupe Paciello.

- -
-

Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.

-
- -

Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :

- -

Colour contrast on this page: excellent!

- -

Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..

- -

Taille de police (ou taille de fonte)

- -

La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.

- -

Les unités absolues

- -

Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (px). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :

- -
body { font-size:16px; }
- -

… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».

- -

Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.

- -

Les unités relatives

- -

Également appelées unités proportionnelles, les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.

- -

Les unités relatives sont exprimées en em, % et rem:

- -
-
Les tailles exprimées en pourcentages : %
-
Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).
-
Les tailles exprimées en em : em
-
Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).
-
Les tailles exprimées en rem : rem
-
Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec em.
-
- -

Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (h1) dont la taille soit équivalente à 32px et qu'au sein de ce <h1> on ait un élément span avec une classe subheading, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).

- -

Voici le code HTML qu'on utilisera :

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>Tests sur les tailles de police</title>
-</head>
-<body>
-
-    <h1>Voici notre titre principal
-        <span class="subheading">Et voici notre sous-titre</span>
-    </h1>
-
-</body>
-</html>
- -

Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :

- -
body { font-size:100%; }
-/* 100% de la taille de base du navigateur, en
-général, le texte sera affiché sur 16 pixels */
-
-h1 { font-size:200%; }
-/* Deux fois la taille du corps de la page,
-soit 32 pixels */
-
-span.subheading { font-size:50%; }
-/* La moitié du h1,soit 16 pixels, ce qui revient
-à la taille de base originelle */
-
- -

Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :

- -
body { font-size:1em; }
-/* 1em = 100% de la taille de base du navigateur
-dans la plupart des cas ça correspondra à 16 pixels */
-
-h1 { font-size:2em; }
-/* deux fois la taille du coros, soit 32 pixels */
-
-span.subheading { font-size:0.5em; }
-/* la moitié de la taille de h1, 16 pixels
-ce qui revient à taille originelle */
- -

Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.

- -

C'est là qu'interviennent les rem. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :

- -
body { font-size:1em; }
-/* 1em = 100% de la taille de base du navigateur,
-soit 16 pixels dans la plupart des cas */
-
-h1 { font-size:2rem; }
-/* deux fois la taille du corps soit 32 pixels */
-
-span.subheading { font-size:1rem; }
-/* la taille originale */
- -

C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'Internet Explorer 9 et dans n'importe quel autre navigateur récent, n'hésitez pas à l'utiliser.

- -
-

Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

-
- -

Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?

- -

Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.

- -

Il est généralement conseillé de :

- - - -
-

Note : Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des ems, quitte à faire un peu de mathématique en chemin.

-
- -

Largeur de ligne

- -

Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.

- -

Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.

- -

Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>Tests sur les tailles de police</title>
-</head>
-<body>
-
-<div class="container">
-    <h1>Le titre principal
-        <span class="subheading">Et le sous-titre</span>
-    </h1>
-
-    <p>[Un grand texte qui s'étire sur plusieurs lignes]</p>
-</div>
-
-</body>
-</html>
- -

Ici, nous avons un div avec une classe container. Il est possible de mettre en forme le div en réglant sa largeur avec la propriété width ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété max-width. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété max-width pour avoir au maximum 70 caractères par ligne :

- -
div.container { max-width:70em; }
- -

Fournir un contenu alternative pour les images, les sons et les vidéos

- -

Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.

- -

Les images

- -

Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :

- - - -
-
Les images décoratives
-
Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut alt : <img src="deco.gif" alt=""> afin qu'elles n'encombrent pas le texte.
-
Les images informatives
-
Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut alt par rapport au contenu de l'image.
-
- -

Si l'image peut être décrite succintement, vous pouvez fournir un attribut alt qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut longdesc. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.

- -
-

Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

-
- -

Audio/Vidéo

- -

Il est également nécessaire de fournir des alternatives à du contenu multimédia.

- -
-
Sous-titrage
-
Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.
-
Transcription
-
Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.
-
- -

Compression des images

- -

Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :

- - - -

Prochaines étapes

- -

Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec les bases de l'ergonomie ou UX (User Experience en anglais).

diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md new file mode 100644 index 0000000000..cecce85e86 --- /dev/null +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md @@ -0,0 +1,247 @@ +--- +title: Concevoir un site pour tous les types d'utilisateurs +slug: Learn/Common_questions/Design_for_all_types_of_users +tags: + - Accessibility + - Beginner + - Design + - Mobile + - NeedsActiveLearning +translation_of: Learn/Common_questions/Design_for_all_types_of_users +original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.

+ + + + + + + + + + + + +
Prérequis :Avoir lu Qu'est-ce que l'accessibilité ? (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec l'anatomie d'une page web.
Objectifs :Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.
+ +

Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Le contraste des couleurs

+ +

Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.

+ +

Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.

+ +

Pour contrôler le contraste, vous pouvez télécharger et installer l'analyseur de contraste du Groupe Paciello.

+ +
+

Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.

+
+ +

Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :

+ +

Colour contrast on this page: excellent!

+ +

Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..

+ +

Taille de police (ou taille de fonte)

+ +

La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.

+ +

Les unités absolues

+ +

Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (px). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :

+ +
body { font-size:16px; }
+ +

… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».

+ +

Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.

+ +

Les unités relatives

+ +

Également appelées unités proportionnelles, les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.

+ +

Les unités relatives sont exprimées en em, % et rem:

+ +
+
Les tailles exprimées en pourcentages : %
+
Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).
+
Les tailles exprimées en em : em
+
Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).
+
Les tailles exprimées en rem : rem
+
Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec em.
+
+ +

Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (h1) dont la taille soit équivalente à 32px et qu'au sein de ce <h1> on ait un élément span avec une classe subheading, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).

+ +

Voici le code HTML qu'on utilisera :

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Tests sur les tailles de police</title>
+</head>
+<body>
+
+    <h1>Voici notre titre principal
+        <span class="subheading">Et voici notre sous-titre</span>
+    </h1>
+
+</body>
+</html>
+ +

Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :

+ +
body { font-size:100%; }
+/* 100% de la taille de base du navigateur, en
+général, le texte sera affiché sur 16 pixels */
+
+h1 { font-size:200%; }
+/* Deux fois la taille du corps de la page,
+soit 32 pixels */
+
+span.subheading { font-size:50%; }
+/* La moitié du h1,soit 16 pixels, ce qui revient
+à la taille de base originelle */
+
+ +

Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :

+ +
body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur
+dans la plupart des cas ça correspondra à 16 pixels */
+
+h1 { font-size:2em; }
+/* deux fois la taille du coros, soit 32 pixels */
+
+span.subheading { font-size:0.5em; }
+/* la moitié de la taille de h1, 16 pixels
+ce qui revient à taille originelle */
+ +

Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.

+ +

C'est là qu'interviennent les rem. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :

+ +
body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur,
+soit 16 pixels dans la plupart des cas */
+
+h1 { font-size:2rem; }
+/* deux fois la taille du corps soit 32 pixels */
+
+span.subheading { font-size:1rem; }
+/* la taille originale */
+ +

C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'Internet Explorer 9 et dans n'importe quel autre navigateur récent, n'hésitez pas à l'utiliser.

+ +
+

Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

+
+ +

Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?

+ +

Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.

+ +

Il est généralement conseillé de :

+ + + +
+

Note : Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des ems, quitte à faire un peu de mathématique en chemin.

+
+ +

Largeur de ligne

+ +

Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.

+ +

Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.

+ +

Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Tests sur les tailles de police</title>
+</head>
+<body>
+
+<div class="container">
+    <h1>Le titre principal
+        <span class="subheading">Et le sous-titre</span>
+    </h1>
+
+    <p>[Un grand texte qui s'étire sur plusieurs lignes]</p>
+</div>
+
+</body>
+</html>
+ +

Ici, nous avons un div avec une classe container. Il est possible de mettre en forme le div en réglant sa largeur avec la propriété width ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété max-width. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété max-width pour avoir au maximum 70 caractères par ligne :

+ +
div.container { max-width:70em; }
+ +

Fournir un contenu alternative pour les images, les sons et les vidéos

+ +

Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.

+ +

Les images

+ +

Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :

+ + + +
+
Les images décoratives
+
Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut alt : <img src="deco.gif" alt=""> afin qu'elles n'encombrent pas le texte.
+
Les images informatives
+
Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut alt par rapport au contenu de l'image.
+
+ +

Si l'image peut être décrite succintement, vous pouvez fournir un attribut alt qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut longdesc. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.

+ +
+

Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

+
+ +

Audio/Vidéo

+ +

Il est également nécessaire de fournir des alternatives à du contenu multimédia.

+ +
+
Sous-titrage
+
Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.
+
Transcription
+
Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.
+
+ +

Compression des images

+ +

Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :

+ + + +

Prochaines étapes

+ +

Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec les bases de l'ergonomie ou UX (User Experience en anglais).

diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.html b/files/fr/learn/common_questions/how_does_the_internet_work/index.html deleted file mode 100644 index 8a6850c59d..0000000000 --- a/files/fr/learn/common_questions/how_does_the_internet_work/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Le fonctionnement de l'Internet -slug: Learn/Common_questions/How_does_the_Internet_work -tags: - - Beginner - - Internet - - WebMechanics -translation_of: Learn/Common_questions/How_does_the_Internet_work -original_slug: Apprendre/Fonctionnement_Internet ---- -

Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.

- - - - - - - - - - - - -
Prérequis :Aucun, mais nous vous encourageons à lire l'article Commencez votre projet Web avant celui-ci.
Objectif :Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».
- -

Résumé

- -

L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.

- -

L'histoire des débuts de l'Internet est quelque peu nébuleuse. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.

- -

Pédagogie active

- - - -

Allons plus loin

- -

Un réseau de base

- -

Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions sont possibles sur les ordinateurs modernes.

- -
-

Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

-
- -

Two computers linked together

- -

Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!

- -

Ten computers all together

- -

Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle routeur. Ce routeur n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.

- -

Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.

- -

Ten computers with a router

- -

Un réseau de réseaux

- -

Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul routeur ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui, absolument, et en voici le résultat!

- -

Two routers linked together

- -

En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.

- -

Routers linked to routers

- -

Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé modem. Ce modem convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.

- -

A router linked to a modem

- -

Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des routeurs qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).

- -

Full Internet stack

- -

Localiser un ordinateur

- -

Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie Internet Protocol) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : 192.168.2.10  ou de lettres et de chiffres séparés par deux points. 2001:0db8:85a3:0000:0000:8a2e:0370:7334.

- -

C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé nom de domaine, est souvent associé aux adresses IP. Par example, google.com est le nom de domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.

- -

Show how a domain name can alias an IP address

- -

L'Internet et le web

- -

Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructure technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés serveurs Web) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'Internet est une infrastructure, alors que le Web est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.

- -

Étapes suivantes

- - diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.md b/files/fr/learn/common_questions/how_does_the_internet_work/index.md new file mode 100644 index 0000000000..8a6850c59d --- /dev/null +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.md @@ -0,0 +1,96 @@ +--- +title: Le fonctionnement de l'Internet +slug: Learn/Common_questions/How_does_the_Internet_work +tags: + - Beginner + - Internet + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +original_slug: Apprendre/Fonctionnement_Internet +--- +

Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.

+ + + + + + + + + + + + +
Prérequis :Aucun, mais nous vous encourageons à lire l'article Commencez votre projet Web avant celui-ci.
Objectif :Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».
+ +

Résumé

+ +

L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.

+ +

L'histoire des débuts de l'Internet est quelque peu nébuleuse. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.

+ +

Pédagogie active

+ + + +

Allons plus loin

+ +

Un réseau de base

+ +

Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions sont possibles sur les ordinateurs modernes.

+ +
+

Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

+
+ +

Two computers linked together

+ +

Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!

+ +

Ten computers all together

+ +

Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle routeur. Ce routeur n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.

+ +

Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.

+ +

Ten computers with a router

+ +

Un réseau de réseaux

+ +

Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul routeur ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui, absolument, et en voici le résultat!

+ +

Two routers linked together

+ +

En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.

+ +

Routers linked to routers

+ +

Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé modem. Ce modem convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.

+ +

A router linked to a modem

+ +

Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des routeurs qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).

+ +

Full Internet stack

+ +

Localiser un ordinateur

+ +

Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie Internet Protocol) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : 192.168.2.10  ou de lettres et de chiffres séparés par deux points. 2001:0db8:85a3:0000:0000:8a2e:0370:7334.

+ +

C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé nom de domaine, est souvent associé aux adresses IP. Par example, google.com est le nom de domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.

+ +

Show how a domain name can alias an IP address

+ +

L'Internet et le web

+ +

Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructure technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés serveurs Web) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'Internet est une infrastructure, alors que le Web est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.

+ +

Étapes suivantes

+ + diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.html b/files/fr/learn/common_questions/how_much_does_it_cost/index.html deleted file mode 100644 index 23d1f14f68..0000000000 --- a/files/fr/learn/common_questions/how_much_does_it_cost/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: 'Publier sur le Web : combien ça coûte ?' -slug: Learn/Common_questions/How_much_does_it_cost -tags: - - Beginner - - Learn - - WebMechanics -translation_of: Learn/Common_questions/How_much_does_it_cost -original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte ---- -

Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable connaître les logiciels nécessaires au développement web, les différences entre une page web, un site web, etc. et savoir ce qu'est un nom de domaine.
Objectifs :Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.
- -

Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).

- -

Aller plus loin

- -

Développer son site soi-même

- -

Logiciels

- -
Éditeurs de texte
- -

Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.

- -

De nombreux éditeurs sont gratuits : Bluefish, TextWrangler, Eclipse et Netbeans. Certains comme Sublime Text peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme PhpStorm peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme Microsoft Visual Studio peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.

- -

Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.

- -

Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (plugins) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.

- -
Éditeurs graphiques
- -

Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.

- -

Les éditeurs graphiques peuvent être gratuits (GIMP), payants (PaintShop Pro, moins de 100 € ) voire assez chers (Adobe Photoshop pour plusieurs centaines d'euros).

- -

Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.

- -
Éditeurs multimédia
- -

Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).

- -

Pour éditer des fichiers audio, il existe des logiciels gratuits (Audacity, Wavosaur) ou d'autres qui coûtent quelques centaines d'euros (Sony Sound Forge, Adobe Audition). Les logiciels d'édition vidéo peuvent être gratuits (PiTiVi, OpenShot pour Linux, iMovie pour Mac), coûter moins d'une centaine d'euros (Adobe Premiere Elements) ou coûter plusieurs centaines d'euros (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.

- -
Outils de publication : client {{Glossary("FTP")}}
- -

Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.

- -

Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.

- -

Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : FileZilla pour toutes les plateformes, WinSCP pour Windows, Cyberduck pour Mac et Windows et d'autres encore.

- -
-

Note : Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.

-
- - - -

Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez télécharger Firefox ou télécharger Google Chrome.

- -

Accès au Web

- -
Ordinateur / Modem
- -

Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. A minima vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.

- -

Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.

- -

Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.

- -
Accès Internet
- -

Assurez-vous d'avoir suffisamment de bande passante :

- - - -

Hébergement

- -
Comprendre ce qu'est la « bande passante »
- -

Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.

- -
-

Note : Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.

-
- -
Nom de domaine
- -

Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (1&1 et Gandi sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :

- - - -
Hébergement « maison » et hébergement « packagé »
- -

Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme Wordpress, Dotclear, spip, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.

- -

Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (Wordpress, Tumblr, Blogger). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.

- -
Hébergement gratuit et hébergement payant
- -

Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?

- -
    -
  1. Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.
    2. -
  2. Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.
    3. -
- -

Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.

- -

Agences web professionnelles et hébergement

- -

Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.
-
- Le coût d'un tel projet varie selon plusieurs facteurs :

- - - -

De plus, en ce qui concerne l'hébergement :

- - - -

Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.

- -

Prochaines étapes

- -

Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

- - diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.md b/files/fr/learn/common_questions/how_much_does_it_cost/index.md new file mode 100644 index 0000000000..23d1f14f68 --- /dev/null +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.md @@ -0,0 +1,160 @@ +--- +title: 'Publier sur le Web : combien ça coûte ?' +slug: Learn/Common_questions/How_much_does_it_cost +tags: + - Beginner + - Learn + - WebMechanics +translation_of: Learn/Common_questions/How_much_does_it_cost +original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte +--- +

Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable connaître les logiciels nécessaires au développement web, les différences entre une page web, un site web, etc. et savoir ce qu'est un nom de domaine.
Objectifs :Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.
+ +

Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).

+ +

Aller plus loin

+ +

Développer son site soi-même

+ +

Logiciels

+ +
Éditeurs de texte
+ +

Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.

+ +

De nombreux éditeurs sont gratuits : Bluefish, TextWrangler, Eclipse et Netbeans. Certains comme Sublime Text peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme PhpStorm peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme Microsoft Visual Studio peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.

+ +

Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.

+ +

Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (plugins) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.

+ +
Éditeurs graphiques
+ +

Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.

+ +

Les éditeurs graphiques peuvent être gratuits (GIMP), payants (PaintShop Pro, moins de 100 € ) voire assez chers (Adobe Photoshop pour plusieurs centaines d'euros).

+ +

Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.

+ +
Éditeurs multimédia
+ +

Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).

+ +

Pour éditer des fichiers audio, il existe des logiciels gratuits (Audacity, Wavosaur) ou d'autres qui coûtent quelques centaines d'euros (Sony Sound Forge, Adobe Audition). Les logiciels d'édition vidéo peuvent être gratuits (PiTiVi, OpenShot pour Linux, iMovie pour Mac), coûter moins d'une centaine d'euros (Adobe Premiere Elements) ou coûter plusieurs centaines d'euros (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.

+ +
Outils de publication : client {{Glossary("FTP")}}
+ +

Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.

+ +

Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.

+ +

Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : FileZilla pour toutes les plateformes, WinSCP pour Windows, Cyberduck pour Mac et Windows et d'autres encore.

+ +
+

Note : Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.

+
+ + + +

Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez télécharger Firefox ou télécharger Google Chrome.

+ +

Accès au Web

+ +
Ordinateur / Modem
+ +

Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. A minima vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.

+ +

Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.

+ +

Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.

+ +
Accès Internet
+ +

Assurez-vous d'avoir suffisamment de bande passante :

+ + + +

Hébergement

+ +
Comprendre ce qu'est la « bande passante »
+ +

Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.

+ +
+

Note : Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.

+
+ +
Nom de domaine
+ +

Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (1&1 et Gandi sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :

+ + + +
Hébergement « maison » et hébergement « packagé »
+ +

Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme Wordpress, Dotclear, spip, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.

+ +

Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (Wordpress, Tumblr, Blogger). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.

+ +
Hébergement gratuit et hébergement payant
+ +

Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?

+ +
    +
  1. Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.
    2. +
  2. Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.
    3. +
+ +

Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.

+ +

Agences web professionnelles et hébergement

+ +

Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.
+
+ Le coût d'un tel projet varie selon plusieurs facteurs :

+ + + +

De plus, en ce qui concerne l'hébergement :

+ + + +

Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.

+ +

Prochaines étapes

+ +

Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

+ + diff --git a/files/fr/learn/common_questions/index.html b/files/fr/learn/common_questions/index.html deleted file mode 100644 index 5e0ed2d208..0000000000 --- a/files/fr/learn/common_questions/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Questions fréquentes -slug: Learn/Common_questions -tags: - - Learn - - Web - - WebMechanics -translation_of: Learn/Common_questions -original_slug: Apprendre/Common_questions ---- -
{{LearnSidebar}}
- -

Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur HTML ou CSS.) Ces articles sont conçus pour être lus de manière indépendante.

- -

Comment le Web fonctionne

- -

Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.

- -
-
- Comment fonctionne Internet? -
-
Internet est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.
-
- Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche? -
-
Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.
-
- Qu'est-ce qu'une URL? -
-
Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.
-
- Qu'est-ce qu'un nom de domaine? -
-
Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.
-
- Qu'est-ce qu'un serveur Web? -
-
Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.
-
- Que sont les liens hypertextes? -
-
Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.
-
- -

Outils et installation

- -

Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.

- -
-
- Combien ça coûte de créer quelque chose sur le Web? -
-
Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).
-
- Quel logiciel est nécessaire pour construire un site web? -
-
Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.
-
- Quels sont les éditeurs disponibles? -
-
Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.
-
- Comment installer un environnement de base pour travailler? -
-
Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.
-
- Que sont les outils de développement du navigateur? -
-
Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.
-
- Comment être sûr que votre site fonctionne correctement? -
-
Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.
-
- Comment transférer des fichiers vers un serveur web? -
-
Cet article montre comment mettre son site en ligne en utilisant un outil FTP — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.
-
- Comment utiliser GitHub Pages? -
-
Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.
-
- Comment héberger son site sur Google App Engine? -
-
Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.
-
- Quels outils sont disponibles pour corriger et améliorer les performances du site web? -
-
Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.
-
- -

Conception et accessibilité

- -

Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.

- -
-
- Comment démarrer dans la conception  de mon site web? -
-
Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.
-
- Que contiennent les mises en page classiques? -
-
Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.
-
- Qu'est-ce-que l'accessibilité? -
-
Cet article est une introduction aux concepts de base de l'accessibilité web.
-
- Comment concevoir pour tous les types d'utilisateurs? -
-
Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.
-
- Quelles fonctionnalités HTML favorisent l'accessibilité? -
-
Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.
-
- -

Questions HTML, CSS et JavaScript

- -

Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:

- - diff --git a/files/fr/learn/common_questions/index.md b/files/fr/learn/common_questions/index.md new file mode 100644 index 0000000000..5e0ed2d208 --- /dev/null +++ b/files/fr/learn/common_questions/index.md @@ -0,0 +1,128 @@ +--- +title: Questions fréquentes +slug: Learn/Common_questions +tags: + - Learn + - Web + - WebMechanics +translation_of: Learn/Common_questions +original_slug: Apprendre/Common_questions +--- +
{{LearnSidebar}}
+ +

Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur HTML ou CSS.) Ces articles sont conçus pour être lus de manière indépendante.

+ +

Comment le Web fonctionne

+ +

Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.

+ +
+
+ Comment fonctionne Internet? +
+
Internet est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.
+
+ Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche? +
+
Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.
+
+ Qu'est-ce qu'une URL? +
+
Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.
+
+ Qu'est-ce qu'un nom de domaine? +
+
Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.
+
+ Qu'est-ce qu'un serveur Web? +
+
Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.
+
+ Que sont les liens hypertextes? +
+
Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.
+
+ +

Outils et installation

+ +

Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.

+ +
+
+ Combien ça coûte de créer quelque chose sur le Web? +
+
Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).
+
+ Quel logiciel est nécessaire pour construire un site web? +
+
Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.
+
+ Quels sont les éditeurs disponibles? +
+
Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.
+
+ Comment installer un environnement de base pour travailler? +
+
Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.
+
+ Que sont les outils de développement du navigateur? +
+
Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.
+
+ Comment être sûr que votre site fonctionne correctement? +
+
Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.
+
+ Comment transférer des fichiers vers un serveur web? +
+
Cet article montre comment mettre son site en ligne en utilisant un outil FTP — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.
+
+ Comment utiliser GitHub Pages? +
+
Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.
+
+ Comment héberger son site sur Google App Engine? +
+
Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.
+
+ Quels outils sont disponibles pour corriger et améliorer les performances du site web? +
+
Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.
+
+ +

Conception et accessibilité

+ +

Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.

+ +
+
+ Comment démarrer dans la conception  de mon site web? +
+
Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.
+
+ Que contiennent les mises en page classiques? +
+
Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.
+
+ Qu'est-ce-que l'accessibilité? +
+
Cet article est une introduction aux concepts de base de l'accessibilité web.
+
+ Comment concevoir pour tous les types d'utilisateurs? +
+
Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.
+
+ Quelles fonctionnalités HTML favorisent l'accessibilité? +
+
Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.
+
+ +

Questions HTML, CSS et JavaScript

+ +

Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:

+ + diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html deleted file mode 100644 index 9bbe2a62c4..0000000000 --- a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: >- - Quelle différence entre une page web, un site web, un serveur web et un moteur - de recherche ? -slug: Learn/Common_questions/Pages_sites_servers_and_search_engines -translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines -original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche ---- -

Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche. Ces termes sont souvent une source de confusion ou utilisés incorrectement : voyons leur signification.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable comprendre comment fonctionne Internet.
Objectif :Être capable de décrire les différences entre une page web, un site web, un serveur web et un moteur de recherche.
- -

Résumé

- -

Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (si vous êtes curieux, vous pouvez consulter notre glossaire). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentées, mais néanmoins distinctes. Il arrive que les termes correspondants soient utilisés, parfois à contresens, dans certains articles de presse ou autre : ce n'est pas surprenant de se mélanger les pinceaux.

- -

Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :

- -
-
Page web
-
Un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari). On parle aussi simplement de « pages ».
-
Site web
-
Un ensemble de pages web regroupées entre elles de différentes façons. On utilise également le terme « site » seul.
-
Serveur web
-
Un ordinateur qui héberge un site web sur Internet.
-
Moteur de recherche
-
Un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.). On accède aux moteurs de recherche via un navigateur web (en utilisant la barre d'adresse ou de recherche de ceux-ci) ou via une page web (par exemple bing.com ou duckduckgo.com).
-
- -

Prenons une analogie simple avec une bibliothèque. Voici une suite d'actions qu'on peut effectuer lorsqu'on se rend dans une bibliothèque :

- -
    -
  1. On parcourt un index de recherche afin de trouver le titre du livre qu'on veut.
    2. -
  2. On note la référence / le code du livre.
    3. -
  3. On se rend à la section correspondante de la bibliothèque, on trouve le rayonnage pour la section qui contient le code, on trouve le livre spécifique via son code.
    4. -
- -

Comparons maintenant la bibliothèque avec un serveur web :

- - - -

Pédagogie active

- -

Aucun contenu de pédagogie active n'est disponible pour le moment. S'il vous plaît, pensez à contribuer pour enrichir ce contenu !

- -

Allons plus loin

- -

Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.

- -

Page web

- -

Une page web est un document simple qui peut être affiché par un navigateur. Ce document est écrit à l'aide du langage HTML (nous en reparlerons plus en profondeur dans d'autres articles) et peut inclure diverses autres ressources telles que :

- - - -
-

Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers PDF ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

-
- -

Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :

- -

Exemple d'une adresse de page web dans la barre d'adresse du navigateur

- -

Un site web est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.

- -

Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée page d'accueil, du site web.

- -

Example du nom de domaine d'un site web dans la barre d'adresse du navigateur

- -

Les termes page web et site web sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un site web à page unique.

- -

Serveur web

- -

Un serveur web est un ordinateur hébergeant un ou plusieurs sites web. « Héberger » signifie que toutes les pages web et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le serveur web transmettra la page web du site web hébergé au navigateur de l'utilisateur.

- -

Attention à ne pas confondre site web et serveur web. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le serveur web ne répond pas et que, par conséquent, le site web n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme serveur web n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.

- -

Moteur de recherche

- -

Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le Web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'autres sites web.

- -

Il y en a plein : Google, Bing, Yandex, DuckDuckGo et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser celui qui vous convient le mieux.

- -

Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un navigateur est un logiciel qui affiche des pages web, alors qu'un moteur de recherche est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.

- -

Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :

- -

Exemple de Firefox nightly affichant par défaut une page Google page personnalisée

- -

Étapes suivantes

- - diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md new file mode 100644 index 0000000000..9bbe2a62c4 --- /dev/null +++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md @@ -0,0 +1,115 @@ +--- +title: >- + Quelle différence entre une page web, un site web, un serveur web et un moteur + de recherche ? +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche +--- +

Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche. Ces termes sont souvent une source de confusion ou utilisés incorrectement : voyons leur signification.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable comprendre comment fonctionne Internet.
Objectif :Être capable de décrire les différences entre une page web, un site web, un serveur web et un moteur de recherche.
+ +

Résumé

+ +

Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (si vous êtes curieux, vous pouvez consulter notre glossaire). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentées, mais néanmoins distinctes. Il arrive que les termes correspondants soient utilisés, parfois à contresens, dans certains articles de presse ou autre : ce n'est pas surprenant de se mélanger les pinceaux.

+ +

Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :

+ +
+
Page web
+
Un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari). On parle aussi simplement de « pages ».
+
Site web
+
Un ensemble de pages web regroupées entre elles de différentes façons. On utilise également le terme « site » seul.
+
Serveur web
+
Un ordinateur qui héberge un site web sur Internet.
+
Moteur de recherche
+
Un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.). On accède aux moteurs de recherche via un navigateur web (en utilisant la barre d'adresse ou de recherche de ceux-ci) ou via une page web (par exemple bing.com ou duckduckgo.com).
+
+ +

Prenons une analogie simple avec une bibliothèque. Voici une suite d'actions qu'on peut effectuer lorsqu'on se rend dans une bibliothèque :

+ +
    +
  1. On parcourt un index de recherche afin de trouver le titre du livre qu'on veut.
    2. +
  2. On note la référence / le code du livre.
    3. +
  3. On se rend à la section correspondante de la bibliothèque, on trouve le rayonnage pour la section qui contient le code, on trouve le livre spécifique via son code.
    4. +
+ +

Comparons maintenant la bibliothèque avec un serveur web :

+ + + +

Pédagogie active

+ +

Aucun contenu de pédagogie active n'est disponible pour le moment. S'il vous plaît, pensez à contribuer pour enrichir ce contenu !

+ +

Allons plus loin

+ +

Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.

+ +

Page web

+ +

Une page web est un document simple qui peut être affiché par un navigateur. Ce document est écrit à l'aide du langage HTML (nous en reparlerons plus en profondeur dans d'autres articles) et peut inclure diverses autres ressources telles que :

+ + + +
+

Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers PDF ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

+
+ +

Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :

+ +

Exemple d'une adresse de page web dans la barre d'adresse du navigateur

+ +

Un site web est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.

+ +

Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée page d'accueil, du site web.

+ +

Example du nom de domaine d'un site web dans la barre d'adresse du navigateur

+ +

Les termes page web et site web sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un site web à page unique.

+ +

Serveur web

+ +

Un serveur web est un ordinateur hébergeant un ou plusieurs sites web. « Héberger » signifie que toutes les pages web et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le serveur web transmettra la page web du site web hébergé au navigateur de l'utilisateur.

+ +

Attention à ne pas confondre site web et serveur web. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le serveur web ne répond pas et que, par conséquent, le site web n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme serveur web n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.

+ +

Moteur de recherche

+ +

Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le Web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'autres sites web.

+ +

Il y en a plein : Google, Bing, Yandex, DuckDuckGo et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser celui qui vous convient le mieux.

+ +

Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un navigateur est un logiciel qui affiche des pages web, alors qu'un moteur de recherche est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.

+ +

Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :

+ +

Exemple de Firefox nightly affichant par défaut une page Google page personnalisée

+ +

Étapes suivantes

+ + diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html deleted file mode 100644 index c38eff9431..0000000000 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Comment configurer un serveur de test local ? -slug: Learn/Common_questions/set_up_a_local_testing_server -tags: - - Apprendre - - Débutant - - Express - - Flask - - Node - - PHP - - Python - - Serveurs - - django - - lamp - - localhost -translation_of: Learn/Common_questions/set_up_a_local_testing_server -original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local ---- -

Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.
Objectif:Vous apprendrez à configurer un serveur de test local.
- -

Fichiers locaux contre fichiers distants

- -

Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant Fichier > Ouvrir... et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.

- -

Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par file:// suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par http:// ou https:// ; dans ce cas le fichier a été servi via HTTP.

- -

Le problème du test local

- -

Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :

- - - -

Créer un serveur HTTP local simple

- -

Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module SimpleHTTPServer de Python permet une mise en œuvre simple de cette solution.

- -

Voilà la marche à suivre :

- -
    -
  1. -

    Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :

    - -
      -
    • Allez à python.org
      • -
    • Sous Télécharger, cliquez le lien pour Python "3.xxx".
      • -
    • Tout en bas de la page,  télécharger le fichier pointé par le lien Windows x86 executable installer.
      • -
    • Exécuter ce programme quand le téléchargement est fini.
      • -
    • Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".
      • -
    • Cliquer Install, puis Fermer quand l'installation est complète.
      • -
    -
    2. -
  2. -

    Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :

    - - 
    python -V
    -
    3. -
  3. -

    Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    - - 
    #inclure le nom du dossier pour y s'y rendre,
-#par exemple
-cd Bureau
-# utiliser deux points pour remonter dans
-#le dossier parent si nécessaire
-cd ..
    -
    4. -
  4. -

    Entrer la commande pour démarrer le serveur dans ce dossier.

    - - 
    # Si la version de Python retournée est ultérieur à 3.X
-python3 -m http.server
-# Si la version de Python retournée est ultérieur à 2.X
-python -m SimpleHTTPServer
    -
    5. -
  5. -

    Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.

    -
    6. -
- -
-

Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

-
- -

Faire fonctionner localement des langages serveur

- -

Le module SimpleHTTPServer de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :

- - diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md new file mode 100644 index 0000000000..c38eff9431 --- /dev/null +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md @@ -0,0 +1,108 @@ +--- +title: Comment configurer un serveur de test local ? +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Apprendre + - Débutant + - Express + - Flask + - Node + - PHP + - Python + - Serveurs + - django + - lamp + - localhost +translation_of: Learn/Common_questions/set_up_a_local_testing_server +original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local +--- +

Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.
Objectif:Vous apprendrez à configurer un serveur de test local.
+ +

Fichiers locaux contre fichiers distants

+ +

Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant Fichier > Ouvrir... et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.

+ +

Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par file:// suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par http:// ou https:// ; dans ce cas le fichier a été servi via HTTP.

+ +

Le problème du test local

+ +

Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :

+ + + +

Créer un serveur HTTP local simple

+ +

Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module SimpleHTTPServer de Python permet une mise en œuvre simple de cette solution.

+ +

Voilà la marche à suivre :

+ +
    +
  1. +

    Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :

    + +
      +
    • Allez à python.org
      • +
    • Sous Télécharger, cliquez le lien pour Python "3.xxx".
      • +
    • Tout en bas de la page,  télécharger le fichier pointé par le lien Windows x86 executable installer.
      • +
    • Exécuter ce programme quand le téléchargement est fini.
      • +
    • Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".
      • +
    • Cliquer Install, puis Fermer quand l'installation est complète.
      • +
    +
    2. +
  2. +

    Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :

    + + 
    python -V
    +
    3. +
  3. +

    Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    + + 
    #inclure le nom du dossier pour y s'y rendre,
+#par exemple
+cd Bureau
+# utiliser deux points pour remonter dans
+#le dossier parent si nécessaire
+cd ..
    +
    4. +
  4. +

    Entrer la commande pour démarrer le serveur dans ce dossier.

    + + 
    # Si la version de Python retournée est ultérieur à 3.X
+python3 -m http.server
+# Si la version de Python retournée est ultérieur à 2.X
+python -m SimpleHTTPServer
    +
    5. +
  5. +

    Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.

    +
    6. +
+ +
+

Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

+
+ +

Faire fonctionner localement des langages serveur

+ +

Le module SimpleHTTPServer de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :

+ + diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.html b/files/fr/learn/common_questions/thinking_before_coding/index.html deleted file mode 100644 index 7756cfd9c5..0000000000 --- a/files/fr/learn/common_questions/thinking_before_coding/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Commencez votre projet Web -slug: Learn/Common_questions/Thinking_before_coding -tags: - - Beginner - - Composing - - Web -translation_of: Learn/Common_questions/Thinking_before_coding -original_slug: Apprendre/Commencez_votre_projet_web ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.

- - - - - - - - - - - - -
Prérequis Aucun
Objectif Apprendre à définir les objectifs pour donner une direction à votre projet.
- -

Pour commencer

- -

Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est ce que vous voulez accomplir. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.

- -

Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose 

- - - -

Se poser ces questions et y répondre constituent la conceptualisation du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.

- -

Pédagogie active

- -

Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

- -

Aller plus loin

- -

Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.
-
- La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.
-
- Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.

- -
-

Note : Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent l'idéation, la planification et la gestion de projet.

-
- -

Qu'est-ce que je veux accomplir exactement ?

- -

C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.

- -

Supposons que vous êtes un musicien. Vous pourriez souhaiter 

- - - -

Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important 

- -
    -
  1. Permettre aux gens d'écouter votre musique
    2. -
  2. Parler de votre musique.
    3. -
  3. Rencontrer d'autres musiciens.
    4. -
  4. Vendre des goodies.
    5. -
  5. Enseigner la musique à travers des vidéos.
    6. -
  6. Publier des photos de vos chats.
    7. -
- -

Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).

- -

Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.

- -

Comment un site web pourrait-il répondre à mes objectifs ?

- -

Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?

- -

Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.

- -

Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.

- -

Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de regrouper toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'interaction entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.

- -

Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.

- -

Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?

- -

Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.

- -

Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ObjectifsChoses à faire
Permettre aux gens d'écouter votre musique -
    -
  1. Enregistrer de la musique
    2. -
  2. Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)
    3. -
  3. Donner aux gens l'accès à votre musique sur une partie de votre site web
    4. -
-
Parler de votre musique -
    -
  1. Écrire quelques articles pour lancer la discussion
    2. -
  2. Définir l'apparence et le format des articles
    3. -
  3. Publier ces articles sur le site web (Comment faire cela ?)
    4. -
-
Rencontrer d'autres musiciens -
    -
  1. Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)
    2. -
  2. Définir comment les gens vont trouver ces moyens de contact à partir de votre site
    3. -
-
Vendre des goodies -
    -
  1. Créer les goodies
    2. -
  2. Stocker les goodies
    3. -
  3. Trouver un moyen de gérer l'expédition
    4. -
  4. Trouver un moyen de gérer le paiement
    5. -
  5. Faire un système sur votre site pour que les gens passe des commandes
    6. -
-
Enseigner la musique à travers des vidéos -
    -
  1. Enregistrer vos leçons vidéos
    2. -
  2. Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)
    3. -
  3. Donner aux gens l'accès à vos vidéos sur une partie de votre site web
    4. -
-
- -

Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.

- -

Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).

- -

Conclusion

- -

Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.

- -

Prochaines étapes

- - diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.md b/files/fr/learn/common_questions/thinking_before_coding/index.md new file mode 100644 index 0000000000..7756cfd9c5 --- /dev/null +++ b/files/fr/learn/common_questions/thinking_before_coding/index.md @@ -0,0 +1,181 @@ +--- +title: Commencez votre projet Web +slug: Learn/Common_questions/Thinking_before_coding +tags: + - Beginner + - Composing + - Web +translation_of: Learn/Common_questions/Thinking_before_coding +original_slug: Apprendre/Commencez_votre_projet_web +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.

+ + + + + + + + + + + + +
Prérequis Aucun
Objectif Apprendre à définir les objectifs pour donner une direction à votre projet.
+ +

Pour commencer

+ +

Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est ce que vous voulez accomplir. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.

+ +

Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose 

+ + + +

Se poser ces questions et y répondre constituent la conceptualisation du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.

+ +

Pédagogie active

+ +

Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

+ +

Aller plus loin

+ +

Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.
+
+ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.
+
+ Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.

+ +
+

Note : Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent l'idéation, la planification et la gestion de projet.

+
+ +

Qu'est-ce que je veux accomplir exactement ?

+ +

C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.

+ +

Supposons que vous êtes un musicien. Vous pourriez souhaiter 

+ + + +

Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important 

+ +
    +
  1. Permettre aux gens d'écouter votre musique
    2. +
  2. Parler de votre musique.
    3. +
  3. Rencontrer d'autres musiciens.
    4. +
  4. Vendre des goodies.
    5. +
  5. Enseigner la musique à travers des vidéos.
    6. +
  6. Publier des photos de vos chats.
    7. +
+ +

Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).

+ +

Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.

+ +

Comment un site web pourrait-il répondre à mes objectifs ?

+ +

Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?

+ +

Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.

+ +

Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.

+ +

Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de regrouper toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'interaction entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.

+ +

Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.

+ +

Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?

+ +

Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.

+ +

Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjectifsChoses à faire
Permettre aux gens d'écouter votre musique +
    +
  1. Enregistrer de la musique
    2. +
  2. Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)
    3. +
  3. Donner aux gens l'accès à votre musique sur une partie de votre site web
    4. +
+
Parler de votre musique +
    +
  1. Écrire quelques articles pour lancer la discussion
    2. +
  2. Définir l'apparence et le format des articles
    3. +
  3. Publier ces articles sur le site web (Comment faire cela ?)
    4. +
+
Rencontrer d'autres musiciens +
    +
  1. Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)
    2. +
  2. Définir comment les gens vont trouver ces moyens de contact à partir de votre site
    3. +
+
Vendre des goodies +
    +
  1. Créer les goodies
    2. +
  2. Stocker les goodies
    3. +
  3. Trouver un moyen de gérer l'expédition
    4. +
  4. Trouver un moyen de gérer le paiement
    5. +
  5. Faire un système sur votre site pour que les gens passe des commandes
    6. +
+
Enseigner la musique à travers des vidéos +
    +
  1. Enregistrer vos leçons vidéos
    2. +
  2. Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)
    3. +
  3. Donner aux gens l'accès à vos vidéos sur une partie de votre site web
    4. +
+
+ +

Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.

+ +

Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).

+ +

Conclusion

+ +

Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.

+ +

Prochaines étapes

+ + diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html deleted file mode 100644 index 56f5dbdfa3..0000000000 --- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Transférer des fichiers vers un serveur web -slug: Learn/Common_questions/Upload_files_to_a_web_server -tags: - - Beginner - - NeedsActiveLearning - - WebMechanics -translation_of: Learn/Common_questions/Upload_files_to_a_web_server -original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web ---- -

Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. 

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable comprendre ce qu'est un serveur web et comment fonctionnent les noms de domaines. Vous devriez également savoir mettre en place un environnement simple de développement web et savoir comment écrire une page web simple.
Objectifs :Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.
- -

Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

Mettre les mains sur un client FTP : FireFTP

- -

Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car c'est un module complémentaire.

- -
-

Note : Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

-
- -

Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :

- -
    -
  1. Menu de Firefox ➤ Developer ➤ FireFTP
    2. -
  2. Outils ➤ Développement web ➤ FireFTP
    3. -
- -

Vous devriez voir apparaître cette fenêtre :

- -

FireFTP : the interface, not connected to a server

- -

Se connecter

- -

Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : monsiteperso.hebergeurexemple.net.

- -

Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :

- -
-

Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.

- -

Votre compte est : demozilla

- -

Votre site sera accessible à cette adresse demozilla.hebergeurexemple.net

- -

Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :

- - -
- -

Tout d'abord, jetons un coup d'œil à http://demozilla.hebergeurexemple.net/ — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :

- -

Our demozilla personal website, seen in a browser: it's empty

- -
-

Note : Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».

-
- -

Pour connecter votre client FTP au serveur distant, cliquez sur le bouton « Créer un compte » de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :

- -

FireFTP: creating an account

- -

Ici et là-bas : la vue locale et la vue distante

- -

Vous pouvez ensuite vous connecter sur ce nouveau compte :

- -

The FTP interface, once logged

- -

Examinons cet écran :

- - - -

Transférer des fichiers vers le serveur

- -

Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous Public/htdocs pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :

- -

Changing to the htdocs folder on the remote server

- -

Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :

- -

The files show in the remote view: they have been pushed to the server

- -

Est-ce que mes fichiers sont bien en ligne ?

- -

Jusqu'ici tout va bien, vérifions quand même en tapant http://demozilla.hebergeurexemple.net/ dans la barre d'URL du navigateur :

- -

Here we go: our website is live!

- -

Et voilà ! Notre site est en ligne !

- -

D'autres méthodes pour transférer des fichiers

- -

Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :

- - - -

Prochaines étapes

- -

Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : vérifier que votre site fonctionne correctement.

diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md new file mode 100644 index 0000000000..56f5dbdfa3 --- /dev/null +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md @@ -0,0 +1,133 @@ +--- +title: Transférer des fichiers vers un serveur web +slug: Learn/Common_questions/Upload_files_to_a_web_server +tags: + - Beginner + - NeedsActiveLearning + - WebMechanics +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web +--- +

Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. 

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable comprendre ce qu'est un serveur web et comment fonctionnent les noms de domaines. Vous devriez également savoir mettre en place un environnement simple de développement web et savoir comment écrire une page web simple.
Objectifs :Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.
+ +

Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

Mettre les mains sur un client FTP : FireFTP

+ +

Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car c'est un module complémentaire.

+ +
+

Note : Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

+
+ +

Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :

+ +
    +
  1. Menu de Firefox ➤ Developer ➤ FireFTP
    2. +
  2. Outils ➤ Développement web ➤ FireFTP
    3. +
+ +

Vous devriez voir apparaître cette fenêtre :

+ +

FireFTP : the interface, not connected to a server

+ +

Se connecter

+ +

Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : monsiteperso.hebergeurexemple.net.

+ +

Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :

+ +
+

Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.

+ +

Votre compte est : demozilla

+ +

Votre site sera accessible à cette adresse demozilla.hebergeurexemple.net

+ +

Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :

+ + +
+ +

Tout d'abord, jetons un coup d'œil à http://demozilla.hebergeurexemple.net/ — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :

+ +

Our demozilla personal website, seen in a browser: it's empty

+ +
+

Note : Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».

+
+ +

Pour connecter votre client FTP au serveur distant, cliquez sur le bouton « Créer un compte » de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :

+ +

FireFTP: creating an account

+ +

Ici et là-bas : la vue locale et la vue distante

+ +

Vous pouvez ensuite vous connecter sur ce nouveau compte :

+ +

The FTP interface, once logged

+ +

Examinons cet écran :

+ + + +

Transférer des fichiers vers le serveur

+ +

Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous Public/htdocs pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :

+ +

Changing to the htdocs folder on the remote server

+ +

Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :

+ +

The files show in the remote view: they have been pushed to the server

+ +

Est-ce que mes fichiers sont bien en ligne ?

+ +

Jusqu'ici tout va bien, vérifions quand même en tapant http://demozilla.hebergeurexemple.net/ dans la barre d'URL du navigateur :

+ +

Here we go: our website is live!

+ +

Et voilà ! Notre site est en ligne !

+ +

D'autres méthodes pour transférer des fichiers

+ +

Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :

+ + + +

Prochaines étapes

+ +

Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : vérifier que votre site fonctionne correctement.

diff --git a/files/fr/learn/common_questions/using_github_pages/index.html b/files/fr/learn/common_questions/using_github_pages/index.html deleted file mode 100644 index 0a49b5cb64..0000000000 --- a/files/fr/learn/common_questions/using_github_pages/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Utiliser les pages GitHub -slug: Learn/Common_questions/Using_Github_pages -tags: - - Débutant - - GitHub - - Guide - - Web - - git -translation_of: Learn/Common_questions/Using_Github_pages -original_slug: Apprendre/Utiliser_les_pages_GitHub ---- -

GitHub est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version Git. Par défaut, le système est open source, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées gh-pages) qui sont une des fonctionnalités de GitHub.

- -

Publier du contenu

- -

GitHub est un outil très populaire et important à l'heure actuelle. Git est un logiciel de gestion de version reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : les pages GitHub. Celles-ci vous permettent de publier un site web sur Internet.

- -

Mettre en place Git et un compte GitHub

- -
    -
  1. Tout d'abord, installez Git sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.
    2. -
  2. Ensuite, inscrivez-vous sur GitHub. La procédure est plutôt simple.
    3. -
  3. Une fois inscrit, connectez vous à github.com avec votre nom d'utilisateur et votre mot de passe.
    4. -
- -
-

Note : Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.

-
- -

Préparer le code afin de l'envoyer vers GitHub

- -

Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé index.html.

- -

Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :

- -
    -
  1. Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé test-site, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande cd (qui signifie « change directory » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme test-site, vous pourrez taper : - - 
    cd Bureau/test-site
    -
    2. -
  2. Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git : - 
    git init
    -
    3. -
- -

Un aparté sur les interfaces en ligne de commande

- -

La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :

- -

Interface en ligne de commande

- -
-

Note : Il existe également des interfaces graphiques pour Git qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.

-
- -

Chaque système d'exploitation possède sa propre interface en ligne de commande  :

- - - -

La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.

- -

Créer un dépôt sur GitHub pour votre code

- -
    -
  1. Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option New Repository (qui signifie « Créer un nouveau dépôt »).
    2. -
  2. Sur la page qui s'affiche, dans le champ « Repository name », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir mon-premier-depot.
    3. -
  3. Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :
    -
    4. -
  4. Ensuite, cliquez sur « Create repository » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :
    -
    5. -
- -

Envoyer vos fichiers vers GitHub

- -
    -
  1. Sur cette page, une section vous intéresse particulièrement : « …or push an existing repository from the command line » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : - - 
    git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
    -
    2. -
  2. Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. - 
    git add --all
-git commit -m 'ajout des fichiers au dépôt'
    -
    3. -
  3. Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub : - 
    git push -u origin master
    -
    4. -
  4. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une branche gh-pages sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « Branch: master » (GitHub indique que vous êtes sur la branche master de votre dépôt). Dans la liste qui s'affiche, saisissez le texte gh-pages puis cliquez sur Create branch: gh-pages (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera nom-utilisateur.github.io/nom-du-depot. Dans mon exemple, l'URL est donc https://chrisdavidmills.github.io/my-repository. La page qui est affichée à cette URL est la page index.html contenue dans le dépôt.
    -
    5. -
  5. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
    6. -
- -
-

Note : Si vous êtes bloqué-e, n'hésitez pas à utiliser la page d'aide GitHub sur les pages GitHub qui est une excellente ressource (en anglais).

-
- -

Aller plus loin avec Git et GitHub

- -

Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :

- -
git add --all
-git commit -m 'Un autre commit'
-git push
- -

Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.

- -

Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les pages d'aide de GitHub (en anglais) ou encore le manuel Pro Git (en français).

diff --git a/files/fr/learn/common_questions/using_github_pages/index.md b/files/fr/learn/common_questions/using_github_pages/index.md new file mode 100644 index 0000000000..0a49b5cb64 --- /dev/null +++ b/files/fr/learn/common_questions/using_github_pages/index.md @@ -0,0 +1,111 @@ +--- +title: Utiliser les pages GitHub +slug: Learn/Common_questions/Using_Github_pages +tags: + - Débutant + - GitHub + - Guide + - Web + - git +translation_of: Learn/Common_questions/Using_Github_pages +original_slug: Apprendre/Utiliser_les_pages_GitHub +--- +

GitHub est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version Git. Par défaut, le système est open source, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées gh-pages) qui sont une des fonctionnalités de GitHub.

+ +

Publier du contenu

+ +

GitHub est un outil très populaire et important à l'heure actuelle. Git est un logiciel de gestion de version reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : les pages GitHub. Celles-ci vous permettent de publier un site web sur Internet.

+ +

Mettre en place Git et un compte GitHub

+ +
    +
  1. Tout d'abord, installez Git sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.
    2. +
  2. Ensuite, inscrivez-vous sur GitHub. La procédure est plutôt simple.
    3. +
  3. Une fois inscrit, connectez vous à github.com avec votre nom d'utilisateur et votre mot de passe.
    4. +
+ +
+

Note : Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.

+
+ +

Préparer le code afin de l'envoyer vers GitHub

+ +

Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé index.html.

+ +

Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :

+ +
    +
  1. Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé test-site, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande cd (qui signifie « change directory » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme test-site, vous pourrez taper : + + 
    cd Bureau/test-site
    +
    2. +
  2. Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git : + 
    git init
    +
    3. +
+ +

Un aparté sur les interfaces en ligne de commande

+ +

La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :

+ +

Interface en ligne de commande

+ +
+

Note : Il existe également des interfaces graphiques pour Git qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.

+
+ +

Chaque système d'exploitation possède sa propre interface en ligne de commande  :

+ + + +

La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.

+ +

Créer un dépôt sur GitHub pour votre code

+ +
    +
  1. Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option New Repository (qui signifie « Créer un nouveau dépôt »).
    2. +
  2. Sur la page qui s'affiche, dans le champ « Repository name », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir mon-premier-depot.
    3. +
  3. Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :
    +
    4. +
  4. Ensuite, cliquez sur « Create repository » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :
    +
    5. +
+ +

Envoyer vos fichiers vers GitHub

+ +
    +
  1. Sur cette page, une section vous intéresse particulièrement : « …or push an existing repository from the command line » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : + + 
    git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
    +
    2. +
  2. Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. + 
    git add --all
+git commit -m 'ajout des fichiers au dépôt'
    +
    3. +
  3. Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub : + 
    git push -u origin master
    +
    4. +
  4. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une branche gh-pages sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « Branch: master » (GitHub indique que vous êtes sur la branche master de votre dépôt). Dans la liste qui s'affiche, saisissez le texte gh-pages puis cliquez sur Create branch: gh-pages (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera nom-utilisateur.github.io/nom-du-depot. Dans mon exemple, l'URL est donc https://chrisdavidmills.github.io/my-repository. La page qui est affichée à cette URL est la page index.html contenue dans le dépôt.
    +
    5. +
  5. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
    6. +
+ +
+

Note : Si vous êtes bloqué-e, n'hésitez pas à utiliser la page d'aide GitHub sur les pages GitHub qui est une excellente ressource (en anglais).

+
+ +

Aller plus loin avec Git et GitHub

+ +

Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :

+ +
git add --all
+git commit -m 'Un autre commit'
+git push
+ +

Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.

+ +

Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les pages d'aide de GitHub (en anglais) ou encore le manuel Pro Git (en français).

diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html deleted file mode 100644 index b8b05fb694..0000000000 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Découvrir les outils de développement des navigateurs -slug: Learn/Common_questions/What_are_browser_developer_tools -tags: - - Beginner - - Browser - - CSS - - CodingScripting - - DevTools - - HTML - - JavaScript - - Learn -translation_of: Learn/Common_questions/What_are_browser_developer_tools -original_slug: Apprendre/Découvrir_outils_développement_navigateurs ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
{{Previous("Apprendre/Commencer_avec_le_web")}}
- -

Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

- -
-

Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

-
- -

Comment ouvrir les outils de développement d'un navigateur

- -

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

- -

Affichage de la fenêtre principale avec les devtools ouverts

- -

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

- - - -

Menu contextuel suite au clic-droit

- -

L'inspecteur : explorateur du DOM et éditeur CSS

- -

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

- -

Affichage de la fenêtre principale avec les devtools ouverts

- -

Si vous n'arrivez pas sur l'inspecteur :

- - - -

Manipuler l'inspecteur du DOM

- -

Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

- -

Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

- - - -

Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.

- -

Manipuler l'éditeur CSS

- -

Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

- -

- -

Ces fonctionnalités sont plutôt pratiques :

- - - -

Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :

- - - -

En savoir plus

- -

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

- - - -

La console JavaScript

- -

La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

- -

Console JavaScript

- -

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

- -
    -
  1. - 
    alert('Coucou !');
    -
    2. -
  2. - 
    document.querySelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var monImage = document.createElement('img');
-monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
-document.querySelector('h1').appendChild(monImage);
    -
    4. -
- -

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

- -
    -
  1. - 
    alert('coucou !);
    -
    2. -
  2. - 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var monImage = document.createElement('img');
-maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
-document.querySelector('h1').appendChild(monImage);
    -
    4. -
- -

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

- -

En savoir plus

- -

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

- - diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md new file mode 100644 index 0000000000..b8b05fb694 --- /dev/null +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md @@ -0,0 +1,170 @@ +--- +title: Découvrir les outils de développement des navigateurs +slug: Learn/Common_questions/What_are_browser_developer_tools +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - DevTools + - HTML + - JavaScript + - Learn +translation_of: Learn/Common_questions/What_are_browser_developer_tools +original_slug: Apprendre/Découvrir_outils_développement_navigateurs +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
{{Previous("Apprendre/Commencer_avec_le_web")}}
+ +

Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

+ +
+

Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

+
+ +

Comment ouvrir les outils de développement d'un navigateur

+ +

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

+ +

Affichage de la fenêtre principale avec les devtools ouverts

+ +

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

+ + + +

Menu contextuel suite au clic-droit

+ +

L'inspecteur : explorateur du DOM et éditeur CSS

+ +

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

+ +

Affichage de la fenêtre principale avec les devtools ouverts

+ +

Si vous n'arrivez pas sur l'inspecteur :

+ + + +

Manipuler l'inspecteur du DOM

+ +

Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

+ +

Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

+ + + +

Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.

+ +

Manipuler l'éditeur CSS

+ +

Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

+ +

+ +

Ces fonctionnalités sont plutôt pratiques :

+ + + +

Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :

+ + + +

En savoir plus

+ +

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

+ + + +

La console JavaScript

+ +

La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

+ +

Console JavaScript

+ +

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

+ +
    +
  1. + 
    alert('Coucou !');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var monImage = document.createElement('img');
+monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);
    +
    4. +
+ +

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

+ +
    +
  1. + 
    alert('coucou !);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var monImage = document.createElement('img');
+maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);
    +
    4. +
+ +

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

+ +

En savoir plus

+ +

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

+ + diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.html b/files/fr/learn/common_questions/what_are_hyperlinks/index.html deleted file mode 100644 index 584fc6b805..0000000000 --- a/files/fr/learn/common_questions/what_are_hyperlinks/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Le fonctionnement des liens sur le Web -slug: Learn/Common_questions/What_are_hyperlinks -tags: - - Beginner - - Infrastructure - - Navigation - - NeedsActiveLearning -translation_of: Learn/Common_questions/What_are_hyperlinks -original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web ---- -

Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.

- - - - - - - - - - - - -
Prérequis :Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Apprendre ce que sont les liens hypertexte et comprendre leur importance.
- -

Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :

- -
    -
  1. Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web
    2. -
  2. {{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL
    3. -
  3. {{Glossary("HTML")}} : un format de document qui permet d'intégrer des hyperliens (hyperlink est le terme anglais)
    4. -
- -

Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.

- -

Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.

- -

Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.

- -

Example of a basic display and effect of a link in a web page

- -

Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.

- -

Pédagogie active

- -

Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

- -

Aller plus loin

- -

Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :

- -

Les types de lien

- -
-
Les liens internes
-
Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.
-
Les liens sortants
-
Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.
-
Les liens entrants
-
Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.
-
- -

Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.

- -

Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).

- -

Les ancres

- -

La plupart des liens lient deux pages différentes. Les ancres permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.

- -

Example of a basic display and effect of an anchor in a web page

- -

Les liens et les moteurs de recherche

- -

Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.

- -

Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :

- - - -

Le SEO (pour Search Engine Optimization ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.

- -

Prochaines étapes

- -

Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !

- - diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.md b/files/fr/learn/common_questions/what_are_hyperlinks/index.md new file mode 100644 index 0000000000..584fc6b805 --- /dev/null +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.md @@ -0,0 +1,95 @@ +--- +title: Le fonctionnement des liens sur le Web +slug: Learn/Common_questions/What_are_hyperlinks +tags: + - Beginner + - Infrastructure + - Navigation + - NeedsActiveLearning +translation_of: Learn/Common_questions/What_are_hyperlinks +original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web +--- +

Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.

+ + + + + + + + + + + + +
Prérequis :Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Apprendre ce que sont les liens hypertexte et comprendre leur importance.
+ +

Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :

+ +
    +
  1. Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web
    2. +
  2. {{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL
    3. +
  3. {{Glossary("HTML")}} : un format de document qui permet d'intégrer des hyperliens (hyperlink est le terme anglais)
    4. +
+ +

Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.

+ +

Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.

+ +

Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.

+ +

Example of a basic display and effect of a link in a web page

+ +

Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.

+ +

Pédagogie active

+ +

Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

+ +

Aller plus loin

+ +

Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :

+ +

Les types de lien

+ +
+
Les liens internes
+
Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.
+
Les liens sortants
+
Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.
+
Les liens entrants
+
Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.
+
+ +

Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.

+ +

Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).

+ +

Les ancres

+ +

La plupart des liens lient deux pages différentes. Les ancres permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.

+ +

Example of a basic display and effect of an anchor in a web page

+ +

Les liens et les moteurs de recherche

+ +

Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.

+ +

Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :

+ + + +

Le SEO (pour Search Engine Optimization ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.

+ +

Prochaines étapes

+ +

Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !

+ + diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.html b/files/fr/learn/common_questions/what_is_a_domain_name/index.html deleted file mode 100644 index 16bfb9f969..0000000000 --- a/files/fr/learn/common_questions/what_is_a_domain_name/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Comprendre les noms de domaine -slug: Learn/Common_questions/What_is_a_domain_name -tags: - - Beginner - - Domain names - - Infrastructure - - Learn - - Web -translation_of: Learn/Common_questions/What_is_a_domain_name -original_slug: Apprendre/Comprendre_noms_de_domaine ---- -

Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.

- - - - - - - - - - - - -
Prérequis :Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.
Objectif :Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.
- -

Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.

- -

Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple 173.194.121.32). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.

- -

Pédagogie active

- -

Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

- - - -

Allons plus loin

- -

La structure d'un nom de domaine

- -

Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus de droite à gauche :

- -

Anatomy of the MDN domain name

- -

Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.

- -
-
{{Glossary("TLD")}} (Top-Level Domain en anglais qui signifie domaine de premier niveau)
-
Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).
-
Composant
-
Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou Secondary Level Domain (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : mozilla.org), on peut créer d'autres noms de domaines sous celui-ci (par exemple : developer.mozilla.org), ceux-ci sont parfois appelés « sous-domaines ».
-
- -

Acheter un nom de domaine

- -

Qui possède un nom de domaine ?

- -

Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.

- -

Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.

- -
-

Note : Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.

-
- -

Trouver un nom de domaine disponible

- -

Pour déterminer si un nom de domaine est disponible :

- - - -
$ whois mozilla.org
-Domain Name:MOZILLA.ORG
-Domain ID: D1409563-LROR
-Creation Date: 1998-01-24T05:00:00Z
-Updated Date: 2013-12-08T01:16:57Z
-Registry Expiry Date: 2015-01-23T05:00:00Z
-Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
-Sponsoring Registrar IANA ID: 292
-WHOIS Server:
-Referral URL:
-Domain Status: clientDeleteProhibited
-Domain Status: clientTransferProhibited
-Domain Status: clientUpdateProhibited
-Registrant ID:mmr-33684
-Registrant Name:DNS Admin
-Registrant Organization:Mozilla Foundation
-Registrant Street: 650 Castro St Ste 300
-Registrant City:Mountain View
-Registrant State/Province:CA
-Registrant Postal Code:94041
-Registrant Country:US
-Registrant Phone:+1.6509030800
-
- -

Comme on peut le voir ici, on ne peut pas réserver mozilla.org car ce nom de domaine est déjà réservé par la Fondation Mozilla.

- -

Essayons avec un autre, par exemple unnométrange.fr :

- -
> whois unnométrange.fr
-...
-%% No entries found in the AFNIC Database.
- -

On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs whois (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !

- -

Obtenir un nom de domaine

- -

Le processus est assez simple :

- -
    -
  1. Aller sur le site web d'un bureau d'enregistrement
    2. -
  2. Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse
    3. -
  3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !
    4. -
  4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.
    5. -
- -
-

Note : Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.

-
- -

Rafraîchissement du DNS

- -

Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».

- -
-

Note : Ce temps est parfois appelé temps de propagation. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.

-
- -

Comment fonctionne une requête DNS ?

- -

Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :

- -
    -
  1. Vous saisissez mozilla.org dans la barre d'adresse du navigateur.
    2. -
  2. Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.
    3. -
  3. Si votre ordinateur ne connait pas l'adresse IP associée au nom mozilla.org, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.
    4. -
  4. Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.
    5. -
- -

Explanation of the steps needed to obtain the result to a DNS request

- -
-

Note : Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.

-
- -

Étapes suivantes

- -

Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :

- - diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.md b/files/fr/learn/common_questions/what_is_a_domain_name/index.md new file mode 100644 index 0000000000..16bfb9f969 --- /dev/null +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.md @@ -0,0 +1,161 @@ +--- +title: Comprendre les noms de domaine +slug: Learn/Common_questions/What_is_a_domain_name +tags: + - Beginner + - Domain names + - Infrastructure + - Learn + - Web +translation_of: Learn/Common_questions/What_is_a_domain_name +original_slug: Apprendre/Comprendre_noms_de_domaine +--- +

Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.

+ + + + + + + + + + + + +
Prérequis :Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.
Objectif :Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.
+ +

Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.

+ +

Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple 173.194.121.32). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.

+ +

Pédagogie active

+ +

Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

+ + + +

Allons plus loin

+ +

La structure d'un nom de domaine

+ +

Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus de droite à gauche :

+ +

Anatomy of the MDN domain name

+ +

Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.

+ +
+
{{Glossary("TLD")}} (Top-Level Domain en anglais qui signifie domaine de premier niveau)
+
Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).
+
Composant
+
Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou Secondary Level Domain (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : mozilla.org), on peut créer d'autres noms de domaines sous celui-ci (par exemple : developer.mozilla.org), ceux-ci sont parfois appelés « sous-domaines ».
+
+ +

Acheter un nom de domaine

+ +

Qui possède un nom de domaine ?

+ +

Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.

+ +

Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.

+ +
+

Note : Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.

+
+ +

Trouver un nom de domaine disponible

+ +

Pour déterminer si un nom de domaine est disponible :

+ + + +
$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+
+ +

Comme on peut le voir ici, on ne peut pas réserver mozilla.org car ce nom de domaine est déjà réservé par la Fondation Mozilla.

+ +

Essayons avec un autre, par exemple unnométrange.fr :

+ +
> whois unnométrange.fr
+...
+%% No entries found in the AFNIC Database.
+ +

On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs whois (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !

+ +

Obtenir un nom de domaine

+ +

Le processus est assez simple :

+ +
    +
  1. Aller sur le site web d'un bureau d'enregistrement
    2. +
  2. Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse
    3. +
  3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !
    4. +
  4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.
    5. +
+ +
+

Note : Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.

+
+ +

Rafraîchissement du DNS

+ +

Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».

+ +
+

Note : Ce temps est parfois appelé temps de propagation. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.

+
+ +

Comment fonctionne une requête DNS ?

+ +

Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :

+ +
    +
  1. Vous saisissez mozilla.org dans la barre d'adresse du navigateur.
    2. +
  2. Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.
    3. +
  3. Si votre ordinateur ne connait pas l'adresse IP associée au nom mozilla.org, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.
    4. +
  4. Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.
    5. +
+ +

Explanation of the steps needed to obtain the result to a DNS request

+ +
+

Note : Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.

+
+ +

Étapes suivantes

+ +

Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :

+ + diff --git a/files/fr/learn/common_questions/what_is_a_url/index.html b/files/fr/learn/common_questions/what_is_a_url/index.html deleted file mode 100644 index 7f3cdf0877..0000000000 --- a/files/fr/learn/common_questions/what_is_a_url/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Comprendre les URL et leur structure -slug: Learn/Common_questions/What_is_a_URL -tags: - - Beginner - - Infrastructure - - Learn - - NeedsActiveLearning - - URL -translation_of: Learn/Common_questions/What_is_a_URL -original_slug: Apprendre/Comprendre_les_URL ---- -

Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment fonctionne Internet, ce qu'est une serveur web et les concepts sous-jacents aux liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.
- -

Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.

- -

URL signifie Uniform Resource Locator (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.

- -

Pédagogie active

- -

Il n'y a pour le moment pas d'élément de pédagogie active. N'hésitez pas à contribuer.

- -

Aller plus loin

- -

Les bases : l'anatomie d'une URL

- -

Voici quelques exemples d'URL :

- -
https://developer.mozilla.org
-https://developer.mozilla.org/fr/docs/Apprendre/
-https://developer.mozilla.org/fr/search?q=URL
- -

Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).

- -

Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :

- -
http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument
- -
-
Protocol
-
http:// correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme mailto: (qui permet d'ouvrir un client de messagerie électronique) ou ftp: qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.
-
Domaine Name
-
www.exemple.com correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).
-
Port
-
:80 correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.
-
Path to the file
-
/chemin/vers/monfichier.html est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».
-
Parameters
-
?clé1=valeur1&clé2=valeur2 sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.
-
Anchor
-
#QuelquePartDansLeDocument correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.
-
- -
-

Note : Il existe d'autres fragments et d'autres règles pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.

-
- -

On peut comparer les URL avec les adresses postales : le protocole représente le service postal qu'on souhaite utiliser, le nom de domaine correspond à la ville et le port au code postal, le chemin indique le bâtiment où la lettre doit être acheminée et les paramètres pourraient indique le numéro de l'appartement, enfin l'ancre désigne la personne à laquelle la lettre est adressée.

- -

Comment utiliser les URL

- -

N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !

- -

Le langage {{Glossary("HTML")}} — que nous verrons par la suite — permet de tirer parti des URL :

- - - -

D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.

- -

Les URL absolues et les URL relatives

- -

L'URL que nous avons disséquée avant est une URL absolue et il existe également des URL relatives. Expliquons ici cette différence.

- -

Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.

- -

Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole "/", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.

- -

Prenons quelques exemples concrets pour illustrer le concept.

- -

Exemples d'URL absolues

- -
-
URL complète
-

Exemple :

- 
https://developer.mozilla.org/fr/docs/Apprendre
-
-
Protocole implicite
-

Exemple :

- 
//developer.mozilla.org/fr/docs/Apprendre
-

Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.

-
-
Nom de domaine implicite
-

Exemple :

- 
/fr/docs/Apprendre
-

Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.

- -
-

Note : Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole.

-
-
-
- -

Exemples d'URL relatives

- -

Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  https://developer.mozilla.org/fr/docs/Apprendre

- -
-
Sous-ressources
-

Exemple :

- 
Compétences/Infrastructure/Comprendre_les_URL
-
- L'URL ne commence pas pas /, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL
-
Remonter dans l'arborescence des dossiers
-

Exemple :

- 
../CSS/display
- -

Dans ce cas, on utilise la convention, héritée du monde UNIX :  ../ indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display, qui peut être simplifiée en : https://developer.mozilla.org/fr/docs/CSS/display

-
-
- -

Les URL sémantiques

- -

Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des URL sémantiques.  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.

- -

Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :

- - - -

Prochaines étapes

- - diff --git a/files/fr/learn/common_questions/what_is_a_url/index.md b/files/fr/learn/common_questions/what_is_a_url/index.md new file mode 100644 index 0000000000..7f3cdf0877 --- /dev/null +++ b/files/fr/learn/common_questions/what_is_a_url/index.md @@ -0,0 +1,155 @@ +--- +title: Comprendre les URL et leur structure +slug: Learn/Common_questions/What_is_a_URL +tags: + - Beginner + - Infrastructure + - Learn + - NeedsActiveLearning + - URL +translation_of: Learn/Common_questions/What_is_a_URL +original_slug: Apprendre/Comprendre_les_URL +--- +

Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment fonctionne Internet, ce qu'est une serveur web et les concepts sous-jacents aux liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.
+ +

Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.

+ +

URL signifie Uniform Resource Locator (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.

+ +

Pédagogie active

+ +

Il n'y a pour le moment pas d'élément de pédagogie active. N'hésitez pas à contribuer.

+ +

Aller plus loin

+ +

Les bases : l'anatomie d'une URL

+ +

Voici quelques exemples d'URL :

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/fr/docs/Apprendre/
+https://developer.mozilla.org/fr/search?q=URL
+ +

Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).

+ +

Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :

+ +
http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument
+ +
+
Protocol
+
http:// correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme mailto: (qui permet d'ouvrir un client de messagerie électronique) ou ftp: qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.
+
Domaine Name
+
www.exemple.com correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).
+
Port
+
:80 correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.
+
Path to the file
+
/chemin/vers/monfichier.html est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».
+
Parameters
+
?clé1=valeur1&clé2=valeur2 sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.
+
Anchor
+
#QuelquePartDansLeDocument correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.
+
+ +
+

Note : Il existe d'autres fragments et d'autres règles pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.

+
+ +

On peut comparer les URL avec les adresses postales : le protocole représente le service postal qu'on souhaite utiliser, le nom de domaine correspond à la ville et le port au code postal, le chemin indique le bâtiment où la lettre doit être acheminée et les paramètres pourraient indique le numéro de l'appartement, enfin l'ancre désigne la personne à laquelle la lettre est adressée.

+ +

Comment utiliser les URL

+ +

N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !

+ +

Le langage {{Glossary("HTML")}} — que nous verrons par la suite — permet de tirer parti des URL :

+ + + +

D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.

+ +

Les URL absolues et les URL relatives

+ +

L'URL que nous avons disséquée avant est une URL absolue et il existe également des URL relatives. Expliquons ici cette différence.

+ +

Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.

+ +

Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole "/", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.

+ +

Prenons quelques exemples concrets pour illustrer le concept.

+ +

Exemples d'URL absolues

+ +
+
URL complète
+

Exemple :

+ 
https://developer.mozilla.org/fr/docs/Apprendre
+
+
Protocole implicite
+

Exemple :

+ 
//developer.mozilla.org/fr/docs/Apprendre
+

Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.

+
+
Nom de domaine implicite
+

Exemple :

+ 
/fr/docs/Apprendre
+

Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.

+ +
+

Note : Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole.

+
+
+
+ +

Exemples d'URL relatives

+ +

Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  https://developer.mozilla.org/fr/docs/Apprendre

+ +
+
Sous-ressources
+

Exemple :

+ 
Compétences/Infrastructure/Comprendre_les_URL
+
+ L'URL ne commence pas pas /, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL
+
Remonter dans l'arborescence des dossiers
+

Exemple :

+ 
../CSS/display
+ +

Dans ce cas, on utilise la convention, héritée du monde UNIX :  ../ indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display, qui peut être simplifiée en : https://developer.mozilla.org/fr/docs/CSS/display

+
+
+ +

Les URL sémantiques

+ +

Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des URL sémantiques.  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.

+ +

Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :

+ + + +

Prochaines étapes

+ + diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.html b/files/fr/learn/common_questions/what_is_a_web_server/index.html deleted file mode 100644 index 06cd177779..0000000000 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Qu'est-ce qu'un serveur web ? -slug: Learn/Common_questions/What_is_a_web_server -tags: - - Beginner - - Infrastructure - - Learn -translation_of: Learn/Common_questions/What_is_a_web_server -original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web ---- -

Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment Internet fonctionne, les différences entre une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.
- -

Un « serveur web » peut faire référence à des composants logiciels (software) ou à des composants matériels (hardware) ou à des composants logiciels et matériels qui fonctionnent ensemble.

- -
    -
  1. Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que mozilla.org.
    2. -
  2. Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera au minimum un serveur HTTP. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).
    3. -
- -

Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le document demandé, également grâce à HTTP.

- -

Basic representation of a client/server connection through HTTP

- -

Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.

- -

Un serveur web statique (aussi appelé une pile) est composé d'un ordinateur (matériel) et d'un serveur HTTP (logiciel). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.

- -

Un serveur web dynamique possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un serveur d'applications et une base de données. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.

- -

Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.

- -

Héberger des fichiers

- -

Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.

- -

D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :

- - - -

Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point dans cet article.

- -

Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira de transférer vos fichiers vers le serveur web.

- -

Communiquer via HTTP

- -

Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour HyperText Transfer Protocol en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.

- -

Ici, un protocole est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.

- -
-
Textuel
-
Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.
-
Sans état
-
Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).
-
- -

HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un article technique à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :

- - - -

Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.

- -
    -
  1. Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.
    2. -
  2. Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.
    3. -
  3. Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté les pages d'erreurs 404 de leurs sites).
    4. -
- -

Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

- -

Contenu statique et contenu dynamique

- -

En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.

- -

Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.

- -

Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle Kuma et est construit en Python (grâce au framework Django). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.

- -

Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour Content Management Systems en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).

- -

Prochaines étapes

- -

Maintenant que vous connaissez les serveurs web, vous pourriez :

- - diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md new file mode 100644 index 0000000000..06cd177779 --- /dev/null +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md @@ -0,0 +1,119 @@ +--- +title: Qu'est-ce qu'un serveur web ? +slug: Learn/Common_questions/What_is_a_web_server +tags: + - Beginner + - Infrastructure + - Learn +translation_of: Learn/Common_questions/What_is_a_web_server +original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web +--- +

Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment Internet fonctionne, les différences entre une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.
+ +

Un « serveur web » peut faire référence à des composants logiciels (software) ou à des composants matériels (hardware) ou à des composants logiciels et matériels qui fonctionnent ensemble.

+ +
    +
  1. Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que mozilla.org.
    2. +
  2. Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera au minimum un serveur HTTP. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).
    3. +
+ +

Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le document demandé, également grâce à HTTP.

+ +

Basic representation of a client/server connection through HTTP

+ +

Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.

+ +

Un serveur web statique (aussi appelé une pile) est composé d'un ordinateur (matériel) et d'un serveur HTTP (logiciel). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.

+ +

Un serveur web dynamique possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un serveur d'applications et une base de données. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.

+ +

Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.

+ +

Héberger des fichiers

+ +

Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.

+ +

D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :

+ + + +

Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point dans cet article.

+ +

Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira de transférer vos fichiers vers le serveur web.

+ +

Communiquer via HTTP

+ +

Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour HyperText Transfer Protocol en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.

+ +

Ici, un protocole est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.

+ +
+
Textuel
+
Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.
+
Sans état
+
Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).
+
+ +

HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un article technique à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :

+ + + +

Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.

+ +
    +
  1. Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.
    2. +
  2. Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.
    3. +
  3. Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté les pages d'erreurs 404 de leurs sites).
    4. +
+ +

Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

+ +

Contenu statique et contenu dynamique

+ +

En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.

+ +

Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.

+ +

Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle Kuma et est construit en Python (grâce au framework Django). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.

+ +

Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour Content Management Systems en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).

+ +

Prochaines étapes

+ +

Maintenant que vous connaissez les serveurs web, vous pourriez :

+ + diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.html b/files/fr/learn/common_questions/what_is_accessibility/index.html deleted file mode 100644 index 60991cfd2b..0000000000 --- a/files/fr/learn/common_questions/what_is_accessibility/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Qu'est-ce que l'accessibilité ? -slug: Learn/Common_questions/What_is_accessibility -tags: - - Accessibility - - Beginner - - Intro - - NeedsActiveLearning - - Web -translation_of: Learn/Common_questions/What_is_accessibility -original_slug: Apprendre/Accessibilité ---- -

Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.

- - - - - - - - - - - - -
Prérequis :Aucun.
Objectifs :Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.
- -

Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Principes généraux de l'accessibilité

- -

En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.

- -

Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité.

- -

L'accessibilité sur le Web

- -

Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.

- -

Prenons l'exemple de la vidéo :

- -
-
Déficience auditive
-
Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète. Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.
-
Déficience visuelle
-
Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.
-
Mise en pause
-
Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.
-
Utilisation du clavier
-
Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.
-
- -

Les bases de l'accessibilité web

- -

Afin qu'un page web soit un minimum accessible, il faut :

- - - -

Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.

- -

Les défendeurs de l'accessibilité

- -

Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (WAI ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.

- -

Plus de détails

- -

Vous pouvez vous référer à :

- - - -

Prochaines étapes

- -

L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.

- - diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.md b/files/fr/learn/common_questions/what_is_accessibility/index.md new file mode 100644 index 0000000000..60991cfd2b --- /dev/null +++ b/files/fr/learn/common_questions/what_is_accessibility/index.md @@ -0,0 +1,92 @@ +--- +title: Qu'est-ce que l'accessibilité ? +slug: Learn/Common_questions/What_is_accessibility +tags: + - Accessibility + - Beginner + - Intro + - NeedsActiveLearning + - Web +translation_of: Learn/Common_questions/What_is_accessibility +original_slug: Apprendre/Accessibilité +--- +

Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.

+ + + + + + + + + + + + +
Prérequis :Aucun.
Objectifs :Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.
+ +

Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Principes généraux de l'accessibilité

+ +

En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.

+ +

Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité.

+ +

L'accessibilité sur le Web

+ +

Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.

+ +

Prenons l'exemple de la vidéo :

+ +
+
Déficience auditive
+
Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète. Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.
+
Déficience visuelle
+
Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.
+
Mise en pause
+
Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.
+
Utilisation du clavier
+
Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.
+
+ +

Les bases de l'accessibilité web

+ +

Afin qu'un page web soit un minimum accessible, il faut :

+ + + +

Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.

+ +

Les défendeurs de l'accessibilité

+ +

Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (WAI ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.

+ +

Plus de détails

+ +

Vous pouvez vous référer à :

+ + + +

Prochaines étapes

+ +

L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.

+ + diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.html b/files/fr/learn/common_questions/what_software_do_i_need/index.html deleted file mode 100644 index 61d1cefa8f..0000000000 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: De quels logiciels ai-je besoin pour construire un site web ? -slug: Learn/Common_questions/What_software_do_I_need -tags: - - Beginner - - Learn - - NeedsActiveLearning - - WebMechanics -translation_of: Learn/Common_questions/What_software_do_I_need -original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web ---- -

Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.

- - - - - - - - - - - - -
Prérequis :Vous devriez déjà connaître la différence entre une page web, un serveur web et un moteur de recherche.
Objectifs :Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.
- -

La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :

- -
    -
  1. Créer et éditer des pages web
    2. -
  2. Téléverser (uploader) vos fichiers vers votre serveur web
    3. -
  3. Visualiser votre site web.
    4. -
- -

Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Créer et éditer des pages web

- -

Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme {{Glossary("RTF")}} vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.

- -

Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Système d'exploitationÉditeur natif par défautÉditeur tiers
Windows - - - -
Mac OS - - - -
Linux - - - -
Chrome OS - -
- -

Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :

- -

Screenshot of Notepad++.

- -

Transférer des fichiers vers un serveur web

- -

Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme RSync et Git/Github.

- -
-

Note : FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (Secure FTP) ou via RSync avec SSH.

-
- -

Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails dans un article à part. Voyons tout de même une liste de clients FTP basiques :

- - - - - - - - - - - - - - - - - - - - - - - -
Système d'exploitationLogiciel client FTP
WindowsWinSCPFileZilla (tout système d'exploitation)
LinuxNautilus (Gnome)
- Konqueror (KDE)
Mac OSCyberduck
- -

Visualiser des sites web

- -

Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De nombreux navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :

- - - -

Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme Opera, Dolphin ou UC Browser.

- -

Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme Browsershots ou Browserstack. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur modern.ie, une machine virtuelle prête à être utilisée).

- -

Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative Open Device Lab. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.

- -

Prochaines étapes

- - diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md new file mode 100644 index 0000000000..61d1cefa8f --- /dev/null +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md @@ -0,0 +1,188 @@ +--- +title: De quels logiciels ai-je besoin pour construire un site web ? +slug: Learn/Common_questions/What_software_do_I_need +tags: + - Beginner + - Learn + - NeedsActiveLearning + - WebMechanics +translation_of: Learn/Common_questions/What_software_do_I_need +original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web +--- +

Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.

+ + + + + + + + + + + + +
Prérequis :Vous devriez déjà connaître la différence entre une page web, un serveur web et un moteur de recherche.
Objectifs :Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.
+ +

La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :

+ +
    +
  1. Créer et éditer des pages web
    2. +
  2. Téléverser (uploader) vos fichiers vers votre serveur web
    3. +
  3. Visualiser votre site web.
    4. +
+ +

Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Créer et éditer des pages web

+ +

Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme {{Glossary("RTF")}} vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.

+ +

Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Système d'exploitationÉditeur natif par défautÉditeur tiers
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS + +
+ +

Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :

+ +

Screenshot of Notepad++.

+ +

Transférer des fichiers vers un serveur web

+ +

Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme RSync et Git/Github.

+ +
+

Note : FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (Secure FTP) ou via RSync avec SSH.

+
+ +

Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails dans un article à part. Voyons tout de même une liste de clients FTP basiques :

+ + + + + + + + + + + + + + + + + + + + + + + +
Système d'exploitationLogiciel client FTP
WindowsWinSCPFileZilla (tout système d'exploitation)
LinuxNautilus (Gnome)
+ Konqueror (KDE)
Mac OSCyberduck
+ +

Visualiser des sites web

+ +

Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De nombreux navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :

+ + + +

Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme Opera, Dolphin ou UC Browser.

+ +

Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme Browsershots ou Browserstack. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur modern.ie, une machine virtuelle prête à être utilisée).

+ +

Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative Open Device Lab. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.

+ +

Prochaines étapes

+ + diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html deleted file mode 100644 index da13496b05..0000000000 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Une boîte d'aspect rafraîchissant -slug: Learn/CSS/Building_blocks/A_cool_looking_box -tags: - - Apprentissage - - Arrière‑plans - - Boîte - - CSS - - Débutant - - Evaluation - - effets - - encadrement - - modèle de boîte -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box -original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.

- - - - - - - - - - - - -
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.
- -

Départ

- -

Pour débuter, vous devez :

- - - -
-

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

-
- -

Résumé du projet

- -

Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.

- -

Généralités

- - - -

Composition de la boîte

- -

Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :

- - - -

Exemple

- -

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

- -

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md new file mode 100644 index 0000000000..da13496b05 --- /dev/null +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md @@ -0,0 +1,99 @@ +--- +title: Une boîte d'aspect rafraîchissant +slug: Learn/CSS/Building_blocks/A_cool_looking_box +tags: + - Apprentissage + - Arrière‑plans + - Boîte + - CSS + - Débutant + - Evaluation + - effets + - encadrement + - modèle de boîte +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +original_slug: Apprendre/CSS/styliser_boites/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.

+ + + + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.
+ +

Départ

+ +

Pour débuter, vous devez :

+ + + +
+

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

+
+ +

Résumé du projet

+ +

Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.

+ +

Généralités

+ + + +

Composition de la boîte

+ +

Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :

+ + + +

Exemple

+ +

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

+ +

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html deleted file mode 100644 index 3d0b3c1fe5..0000000000 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Effets de boîte avancés -slug: Learn/CSS/Building_blocks/Advanced_styling_effects -tags: - - Article - - Boîtes - - CSS - - Codage - - Débutant - - Filtres - - Modes de mélange de couleurs - - Stylisation - - effets - - ombres de boîtes -translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects -original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.

- - - - - - - - - - - - -
Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
Objectif :Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.
- -

Ombres des boîtes

- -

Revenons au module Styling text — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.

- -

Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

- -

Ombre simple pour une boîte

- -

Débutons avec un exemple simple. D'abord, un peu de HTML :

- - -
<article class="simple">
-  <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
-</article>
- -

Puis la CSS:

- -
p {
-  margin: 0;
-}
-
-article {
-  max-width: 500px;
-  padding: 10px;
-  color: white ;
-  text-align: center;
-  background-color: red;
-  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
-}
-
-.simple {
-  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
-}
- - -

donnent le résultat suivant :

- -

{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}

- -

Notez les quatre éléments valeur de la propriété box-shadow :

- -
    -
  1. La première valeur est la mesure du décalage horizontal — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.
    2. -
  2. La deuxième valeur est la mesure du décalage vertical — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.
    3. -
  3. La troisième valeur est le rayon de flou — il représente la « quantité » de flou appliquée à l'ombre.
    4. -
  4. La valeur de la couleur : couleur de base de l'ombre.
    5. -
- -

Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.

- -

Ombres multiples pour une boîte

- -

Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

- - - - - - -

Nous obtenons le résultat suivant :

- -

{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}

- -

Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.

- -

Autres fonctionnalités des ombres de boîtes

- -

Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé inset — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.

- -

D'abord un HTML différent pour cet exemple :

- -
<button>Appuyez ici !</button>
- -
button {
-  width: 150px;
-  font-size: 1.1rem;
-  line-height: 2;
-  border-radius: 10px;
-  border: none;
-  background-image: linear-gradient(to bottom right, #777, #ddd);
-  box-shadow: 1px 1px 1px black,
-              inset 2px 3px 5px rgba(0,0,0,0.3),
-              inset -2px -3px 5px rgba(255,255,255,0.5);
-}
-
-button:focus, button:hover {
-  background-image: linear-gradient(to bottom right, #888, #eee);
-}
-
-button:active {
-  box-shadow: inset 2px 2px 1px black,
-              inset 2px 3px 5px rgba(0,0,0,0.3),
-              inset -2px -3px 5px rgba(255,255,255,0.5);
-}
- -

Et voici le résultat :

- -

{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}

- -

Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.

- -

Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.

- -
-

Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.

-
- -

Filtres

- -

Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles :  vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.

- -

Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété filter et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple drop-shadow() fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}}  et donne des effets analogues.  Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :

- -

Tout d'abord, un HTML simple :

- -
<p class="filter">Filtre</p>
-
-<p class="box-shadow">Ombre de boîte</p>
-
- -

Et maintenant un peu de CSS pour créer une ombre portée à chacun :

- -
p {
-  margin: 1rem auto;
-  padding: 20px;
-  text-align: center ;
-  width: 100px;
-  border: 5px dashed red;
-}
-
-.filter {
-  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
-  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
-}
-
-.box-shadow {
-  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
-}
- -

Vous obtiendrez le résultat suivant :

- -

{{ EmbedLiveSample('Filtres', '100%', 200) }}

- -

Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.

- -

Quelques autres points à noter :

- - - -
-

Note : Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.

-
- -

Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).

- -

Modes de mélange de couleurs

- -

Les modes de mélanges de couleurs des CSS  permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.

- -

Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :

- - - -

Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.

- -
-

Note : Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.

-
- -

background-blend-mode

- -

Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :

- -
<div>
-</div>
-<div class="multiply">
-</div>
- -

Maintenant la CSS — nous ajoutons aux <div> une image d'arrière‑plan sur un fond vert :

- -
div {
-  width: 250px;
-  height: 130px;
-  padding: 10px;
-  margin: 10px;
-  display: inline-block;
-  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
-  background-color: green;
-}
-
-.multiply {
-  background-blend-mode: multiply;
-}
- -

Le résultat obtenu est le suivant  — à gauche l'original et le mode mélange multiply à droite :

- -

{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}

- -

mix-blend-mode

- -

Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <div>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :

- -
<article>
-  Mode sans mélange
-  <div>
-
-  </div>
-  <div>
-  </div>
-</article>
-
-<article>
-  Mélange "multiply"
-  <div class="multiply-mix">
-
-  </div>
-  <div>
-  </div>
-</article>
- -

Voici la CSS avec laquelle nous stylisons :

- -
article {
-  width: 280px;
-  height: 180px;
-  margin: 10px;
-  position: relative;
-  display: inline-block;
-}
-
-div {
-  width: 250px;
-  height: 130px;
-  padding: 10px;
-  margin: 10px;
-}
-
-article div:first-child {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
-  background-color: green;
-}
-
-article div:last-child {
-  background-color: purple;
-  position: absolute;
-  bottom: -10px;
-  right: 0;
-  z-index: -1;
-}
-
-.multiply-mix {
-  mix-blend-mode: multiply;
-}
- -

Nous obtenons le résultat suivant :

- -

{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}

- -

Vous voyez ici que mix-blend-mode: multiply; a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <div> situé dessous.

- -
-

Note : Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module CSS Layout.

-
- -

-webkit-background-clip: text

- -

L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire -webkit-text-fill-color: transparent; cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur -webkit- même pour les navigateurs non-Webkit/Chrome :

- -
.text-clip {
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
- -

Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe -webkit- ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe -webkit- que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.

- -

Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.

- -
-

Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).

-
- -

Apprentissage actif : expérimenter certains effets

- -

À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.

- -

Si vous faites une erreur, vous pouvez toujours Réinitialiser l'exemple avec le bouton correspondant.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}

- -

Résumé

- -

Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md new file mode 100644 index 0000000000..3d0b3c1fe5 --- /dev/null +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.md @@ -0,0 +1,425 @@ +--- +title: Effets de boîte avancés +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Boîtes + - CSS + - Codage + - Débutant + - Filtres + - Modes de mélange de couleurs + - Stylisation + - effets + - ombres de boîtes +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.

+ + + + + + + + + + + + +
Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
Objectif :Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.
+ +

Ombres des boîtes

+ +

Revenons au module Styling text — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.

+ +

Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

+ +

Ombre simple pour une boîte

+ +

Débutons avec un exemple simple. D'abord, un peu de HTML :

+ + +
<article class="simple">
+  <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
+</article>
+ +

Puis la CSS:

+ +
p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white ;
+  text-align: center;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+}
+
+.simple {
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+}
+ + +

donnent le résultat suivant :

+ +

{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}

+ +

Notez les quatre éléments valeur de la propriété box-shadow :

+ +
    +
  1. La première valeur est la mesure du décalage horizontal — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.
    2. +
  2. La deuxième valeur est la mesure du décalage vertical — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.
    3. +
  3. La troisième valeur est le rayon de flou — il représente la « quantité » de flou appliquée à l'ombre.
    4. +
  4. La valeur de la couleur : couleur de base de l'ombre.
    5. +
+ +

Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.

+ +

Ombres multiples pour une boîte

+ +

Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

+ + + + + + +

Nous obtenons le résultat suivant :

+ +

{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}

+ +

Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.

+ +

Autres fonctionnalités des ombres de boîtes

+ +

Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé inset — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.

+ +

D'abord un HTML différent pour cet exemple :

+ +
<button>Appuyez ici !</button>
+ +
button {
+  width: 150px;
+  font-size: 1.1rem;
+  line-height: 2;
+  border-radius: 10px;
+  border: none;
+  background-image: linear-gradient(to bottom right, #777, #ddd);
+  box-shadow: 1px 1px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+
+button:focus, button:hover {
+  background-image: linear-gradient(to bottom right, #888, #eee);
+}
+
+button:active {
+  box-shadow: inset 2px 2px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+ +

Et voici le résultat :

+ +

{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}

+ +

Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.

+ +

Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.

+ +
+

Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.

+
+ +

Filtres

+ +

Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles :  vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.

+ +

Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété filter et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple drop-shadow() fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}}  et donne des effets analogues.  Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :

+ +

Tout d'abord, un HTML simple :

+ +
<p class="filter">Filtre</p>
+
+<p class="box-shadow">Ombre de boîte</p>
+
+ +

Et maintenant un peu de CSS pour créer une ombre portée à chacun :

+ +
p {
+  margin: 1rem auto;
+  padding: 20px;
+  text-align: center ;
+  width: 100px;
+  border: 5px dashed red;
+}
+
+.filter {
+  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+}
+
+.box-shadow {
+  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
+}
+ +

Vous obtiendrez le résultat suivant :

+ +

{{ EmbedLiveSample('Filtres', '100%', 200) }}

+ +

Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.

+ +

Quelques autres points à noter :

+ + + +
+

Note : Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.

+
+ +

Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).

+ +

Modes de mélange de couleurs

+ +

Les modes de mélanges de couleurs des CSS  permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.

+ +

Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :

+ + + +

Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.

+ +
+

Note : Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.

+
+ +

background-blend-mode

+ +

Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :

+ +
<div>
+</div>
+<div class="multiply">
+</div>
+ +

Maintenant la CSS — nous ajoutons aux <div> une image d'arrière‑plan sur un fond vert :

+ +
div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+.multiply {
+  background-blend-mode: multiply;
+}
+ +

Le résultat obtenu est le suivant  — à gauche l'original et le mode mélange multiply à droite :

+ +

{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}

+ +

mix-blend-mode

+ +

Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <div>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :

+ +
<article>
+  Mode sans mélange
+  <div>
+
+  </div>
+  <div>
+  </div>
+</article>
+
+<article>
+  Mélange "multiply"
+  <div class="multiply-mix">
+
+  </div>
+  <div>
+  </div>
+</article>
+ +

Voici la CSS avec laquelle nous stylisons :

+ +
article {
+  width: 280px;
+  height: 180px;
+  margin: 10px;
+  position: relative;
+  display: inline-block;
+}
+
+div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+}
+
+article div:first-child {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+article div:last-child {
+  background-color: purple;
+  position: absolute;
+  bottom: -10px;
+  right: 0;
+  z-index: -1;
+}
+
+.multiply-mix {
+  mix-blend-mode: multiply;
+}
+ +

Nous obtenons le résultat suivant :

+ +

{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}

+ +

Vous voyez ici que mix-blend-mode: multiply; a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <div> situé dessous.

+ +
+

Note : Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module CSS Layout.

+
+ +

-webkit-background-clip: text

+ +

L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire -webkit-text-fill-color: transparent; cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur -webkit- même pour les navigateurs non-Webkit/Chrome :

+ +
.text-clip {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+ +

Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe -webkit- ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe -webkit- que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.

+ +

Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.

+ +
+

Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).

+
+ +

Apprentissage actif : expérimenter certains effets

+ +

À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.

+ +

Si vous faites une erreur, vous pouvez toujours Réinitialiser l'exemple avec le bouton correspondant.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}

+ +

Résumé

+ +

Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html deleted file mode 100644 index 105df053a6..0000000000 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: Arrière-plans et bordures -slug: Learn/CSS/Building_blocks/Backgrounds_and_borders -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders -original_slug: Apprendre/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")}}
- -

Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.

- - - - - - - - - - - - -
Prérequis :Compétences informatique basiques, logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. )
Objectif :Apprendre comment mettre en forme l'arrière-plan et les bordures.
- -

Mettre en forme l'arrière-plan avec CSS

- -

La propriété CSS background est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

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

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

- -

Couleurs d'arrière-plan

- -

La propriété background-color définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

- -

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <span>.

- -

Expérimentez avec ce code, en faisant varier les valeurs <color> dans les différentes déclarations.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}

- -

Images d'arrière-plan

- -

La propriété background-image permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (balloons.jpg), l'autre avec comme fond une petite image représentant une étoile (star.png).

- -

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}

- -

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

- -

Contrôler la répétition de l'arrière-plan

- -

La propriété background-repeat permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

- - - -

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y et observez.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}

- -

Dimensionner l'image de fond

- -

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété background-size — avec comme valeur une longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

- -

On peut aussi utiliser les mots-clé :

- - - -

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

- -

Essayez ce qui suit :

- - - -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

Positionner l'image de fond

- -

La propriété background-position permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

- -
-

Note : La valeur par défaut de background-position est (0,0).

-
- -

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

- -

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page background-image) :

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-}
- -

Ainsi que des valeurs de longueurs, ou des pourcentages :

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-}
- -

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}

- -
-

Note : background-position est un raccourci pourbackground-position-x et background-position-y, qui permettent de fixer individuellement les positions sur chaque axe.

-
- -

Utiliser un dégradé comme arrière-plan

- -

Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété background-image.

- -

Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui-là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

- -

Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}

- -

Images de fond multiples

- -

Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour background-image, chacune séparé par une virgule.

- -

Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.

- -
-

Note : On peut joyeusement mélanger dégradés et images de fond classiques.

-
- -

Les autres propriétés background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière 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;
- -

Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur background-repeat de l' image1 sera no-repeat. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs background-position. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'image3 recevra la première valeur, et l'image4 recevra la seconde valeur.

- -

Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}

- -

Défilement de l'arrière-plan

- -

Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété background-attachment , qui peut prendre ces valeurs:

- - - -

La propriété background-attachment n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : background-attachment.html (vous pouvez également consulter le code source de cette démo).

- -

Utiliser la propriété raccourcie background

- -

Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété background. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.

- -

Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec no-repeat et un position et enfin une couleur d'arrière-plan.

- -

Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :

- - - -

N'hésitez pas à consulter la page de documentation pour background qui détaille ces différents points.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}

- -

Arrière-plans et accessibilité

- -

Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

- -

Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

- -

Bordures

- -

Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.

- -

On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété border :

- -
*.box {
-  border: 1px solid black;
-}*
- -

On peut aussi cibler un seul des côtés de la boîte, par exemple :

- -
.box {
-  border-top: 1px solid black;
-}
- -

Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

Pour la propriété qui concerne un des côtés :

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Note : Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes logiques qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera de la directionnalité du texte.

-
- -

Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}

- -

Coins arrondis

- -

On peut arrondir les coins d'une boîte avec la propriété border-radius ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.

- -

Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :

- -
.box {
-  border-radius: 10px;
-}
- -

Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de border-radius, vous y trouverez la syntaxe pour les différentes options.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}

- -

Testez vos compétences !

- -

Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :

- -
    -
  1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
    2. -
  2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
    3. -
  3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}

- -
-

Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

-
- -

Résumé

- -

Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

- -

Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrières-plans et bordures
    5. -
  5. Gérer la directionnalité du texte
    6. -
  6. Le dépassement du contenu
    7. -
  7. Valeurs et unités
    8. -
  8. Dimensionnement des objets en CSS
    9. -
  9. Images, médias, et formulaires
    10. -
  10. Mettre en forme les tableaux
    11. -
  11. Déboguer CSS
    12. -
  12. Organiser son code CSS
    13. -
\ No newline at end of file diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md new file mode 100644 index 0000000000..105df053a6 --- /dev/null +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -0,0 +1,316 @@ +--- +title: Arrière-plans et bordures +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +original_slug: Apprendre/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")}}
+ +

Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.

+ + + + + + + + + + + + +
Prérequis :Compétences informatique basiques, logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. )
Objectif :Apprendre comment mettre en forme l'arrière-plan et les bordures.
+ +

Mettre en forme l'arrière-plan avec CSS

+ +

La propriété CSS background est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

+ +
.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;
+}
+ +

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

+ +

Couleurs d'arrière-plan

+ +

La propriété background-color définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

+ +

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <span>.

+ +

Expérimentez avec ce code, en faisant varier les valeurs <color> dans les différentes déclarations.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}

+ +

Images d'arrière-plan

+ +

La propriété background-image permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (balloons.jpg), l'autre avec comme fond une petite image représentant une étoile (star.png).

+ +

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}

+ +

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

+ +

Contrôler la répétition de l'arrière-plan

+ +

La propriété background-repeat permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

+ + + +

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y et observez.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}

+ +

Dimensionner l'image de fond

+ +

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété background-size — avec comme valeur une longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

+ +

On peut aussi utiliser les mots-clé :

+ + + +

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

+ +

Essayez ce qui suit :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

Positionner l'image de fond

+ +

La propriété background-position permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

+ +
+

Note : La valeur par défaut de background-position est (0,0).

+
+ +

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

+ +

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page background-image) :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+}
+ +

Ainsi que des valeurs de longueurs, ou des pourcentages :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+}
+ +

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}

+ +
+

Note : background-position est un raccourci pourbackground-position-x et background-position-y, qui permettent de fixer individuellement les positions sur chaque axe.

+
+ +

Utiliser un dégradé comme arrière-plan

+ +

Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété background-image.

+ +

Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui-là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

+ +

Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}

+ +

Images de fond multiples

+ +

Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour background-image, chacune séparé par une virgule.

+ +

Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.

+ +
+

Note : On peut joyeusement mélanger dégradés et images de fond classiques.

+
+ +

Les autres propriétés background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière 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;
+ +

Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur background-repeat de l' image1 sera no-repeat. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs background-position. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'image3 recevra la première valeur, et l'image4 recevra la seconde valeur.

+ +

Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}

+ +

Défilement de l'arrière-plan

+ +

Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété background-attachment , qui peut prendre ces valeurs:

+ + + +

La propriété background-attachment n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : background-attachment.html (vous pouvez également consulter le code source de cette démo).

+ +

Utiliser la propriété raccourcie background

+ +

Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété background. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.

+ +

Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec no-repeat et un position et enfin une couleur d'arrière-plan.

+ +

Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :

+ + + +

N'hésitez pas à consulter la page de documentation pour background qui détaille ces différents points.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}

+ +

Arrière-plans et accessibilité

+ +

Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

+ +

Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

+ +

Bordures

+ +

Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.

+ +

On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété border :

+ +
*.box {
+  border: 1px solid black;
+}*
+ +

On peut aussi cibler un seul des côtés de la boîte, par exemple :

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

Pour la propriété qui concerne un des côtés :

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Note : Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes logiques qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera de la directionnalité du texte.

+
+ +

Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}

+ +

Coins arrondis

+ +

On peut arrondir les coins d'une boîte avec la propriété border-radius ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.

+ +

Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :

+ +
.box {
+  border-radius: 10px;
+}
+ +

Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de border-radius, vous y trouverez la syntaxe pour les différentes options.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}

+ +

Testez vos compétences !

+ +

Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :

+ +
    +
  1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
    2. +
  2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
    3. +
  3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}

+ +
+

Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

+
+ +

Résumé

+ +

Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

+ +

Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrières-plans et bordures
    5. +
  5. Gérer la directionnalité du texte
    6. +
  6. Le dépassement du contenu
    7. +
  7. Valeurs et unités
    8. +
  8. Dimensionnement des objets en CSS
    9. +
  9. Images, médias, et formulaires
    10. +
  10. Mettre en forme les tableaux
    11. +
  11. Déboguer CSS
    12. +
  12. Organiser son code CSS
    13. +
\ No newline at end of file diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.html b/files/fr/learn/css/building_blocks/box_model_tasks/index.html deleted file mode 100644 index 0d4034be70..0000000000 --- a/files/fr/learn/css/building_blocks/box_model_tasks/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'Testez vos connaissances : le modèle de boîte' -slug: Learn/CSS/Building_blocks/Box_Model_Tasks -tags: - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks ---- -
{{LearnSidebar}}
- -

L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.

- -
-

Note : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

-

Si vous bloquez, demandez-nous de l'aide : voir la section Évaluation et aide en bas de cette page.

-
- -

Modèle de boîte : numéro 1

- -

Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :

- -

Deux boîtes de la même taille

- -

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

- -
-

Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

-
- -

Modèle de boîte : numéro 2

- -

Dans cet exercice, ajoutez à la boîte :

- - - -

Une boîte avec une bordure pointillée

- -

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

- -
-

Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

-
- -

Modèle de boîte : numéro 3

- -

Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?

- -

Une boîte en ligne avec un espace entre elle et le texte qui l'entoure

- -

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

- -
-

Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

-
- -

Évaluation et aide

- -

Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.

- -

Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :

- -
    -
  1. Enregistrez votre travail dans un éditeur en ligne partageable, du type CodePen, JSFiddle ou Glitch. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.
    2. -
  2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie "Apprentissage" (Learning) du forum Discourse de MDN. Votre message doit inclure : -
      -
    • Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".
      • -
    • Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.
      • -
    • Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!
      • -
    • Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.
      • -
    -
    3. -
diff --git a/files/fr/learn/css/building_blocks/box_model_tasks/index.md b/files/fr/learn/css/building_blocks/box_model_tasks/index.md new file mode 100644 index 0000000000..0d4034be70 --- /dev/null +++ b/files/fr/learn/css/building_blocks/box_model_tasks/index.md @@ -0,0 +1,85 @@ +--- +title: 'Testez vos connaissances : le modèle de boîte' +slug: Learn/CSS/Building_blocks/Box_Model_Tasks +tags: + - Beginner + - CSS +translation_of: Learn/CSS/Building_blocks/Box_Model_Tasks +--- +
{{LearnSidebar}}
+ +

L'objectif de cet exercice est de vous aider à vérifier votre compréhension du modèle de boîte CSS.

+ +
+

Note : Vous pouvez tester des solutions dans les éditeurs interactifs présents sur cette page. Toutefois il peut toutefois être plus utile de télécharger le code et de passer par un éditeur en ligne comme CodePen, JSFiddle ou Glitch pour travailler sur les exercices.

+

Si vous bloquez, demandez-nous de l'aide : voir la section Évaluation et aide en bas de cette page.

+
+ +

Modèle de boîte : numéro 1

+ +

Regardez les deux boîtes ci-dessous : l'une utilise le modèle standard, tandis que l'autre utilise le modèle alternatif. Changez la largeur de la seconde boîte en ajoutant des règles à la classe .alternate, de façon à ce que sa largeur corresponde à la largeur visuelle de la première boîte. Le résultat final doit ressembler à l'image ci-dessous :

+ +

Deux boîtes de la même taille

+ +

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

+ +
+

Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

+
+ +

Modèle de boîte : numéro 2

+ +

Dans cet exercice, ajoutez à la boîte :

+ + + +

Une boîte avec une bordure pointillée

+ +

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

+ +
+

Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

+
+ +

Modèle de boîte : numéro 3

+ +

Dans cet exemple, l'élément en ligne possède une marge, un espacement intérieur et une bordure ; toutefois, les lignes au-dessus et en dessous débordent. Que pouvez-vous ajouter à votre code CSS pour que la taille de la marge, de l'espacement intérieur et de la bordure soient respectée par les autres lignes, tout en gardant l'élément en ligne ?

+ +

Une boîte en ligne avec un espace entre elle et le texte qui l'entoure

+ +

Essayez de mettre à jour le code direct ci-dessous pour reproduire l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

+ +
+

Note : Pour obtenir une évaluation ou aller plus loin dans votre travail, téléchargez le code de départ pour cet exercice pour pouvoir travailler avec votre propre éditeur ou avec un éditeur en ligne.

+
+ +

Évaluation et aide

+ +

Vous pouvez essayer ces exemples dans les éditeurs interactifs présents sur cette page.

+ +

Si vous souhaitez obtenir une évaluation de votre travail, ou si vous bloquez et que vous souhaitez obtenir de l'aide :

+ +
    +
  1. Enregistrez votre travail dans un éditeur en ligne partageable, du type CodePen, JSFiddle ou Glitch. Vous pouvez soit écrire le code vous-même, soit utiliser les fichiers de départ fournis dans chacune des sections ci-dessus.
    2. +
  2. Écrivez un message demandant une évaluation et/ou de l'aide dans la catégorie "Apprentissage" (Learning) du forum Discourse de MDN. Votre message doit inclure : +
      +
    • Un titre explicite, par exemple "Évaluation demandée pour le test de modèle de boîte CSS 1".
      • +
    • Des détails sur ce que vous avez déjà tenté, et ce que vous attendez de nous : par exemple, si vous bloquez et avez besoin d'aide, ou si vous souhaitez obtenir une évaluation de votre travail.
      • +
    • Un lien vers l'exemple que vous souhaitez voir évalué ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne partageable (comme mentionné dans l'étape 1 au-dessus). C'est une bonne habitude à prendre : il est très difficile d'aider quelqu'un qui rencontre un problème de codage… si vous ne pouvez pas voir leur code!
      • +
    • Un lien vers l'exercice en cours ou la page d'évaluation, de façon à ce qu'on puisse trouver la question pour laquelle vous avez besoin d'aide.
      • +
    +
    3. +
diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index 7bc80fb59e..0000000000 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,344 +0,0 @@ ---- -title: Cascade et héritage -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -tags: - - Apprendre - - CSS - - Cascade - - Débutant - - Héritage - - Règles - - ordre dans le source - - spécificité -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.

- -

Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.
- -

Règles contradictoires

- -

CSS est l'acronyme de Cascading Style Sheets, qu'on peut traduire par feuilles de style en cascade et la compréhension de ce premier mot cascading est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.

- -

À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La cascade, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.

- -

Le concept d'héritage est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.

- -

Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.

- -

La cascade

- -

À un niveau élémentaire, la cascade des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.

- -

Dans l'exemple ci-dessous deux règles pourraient s'appliquer à h1. Au final h1 est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Spécificité

- -

Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :

- - - -

Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à h1. Au final h1 est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.

- -

Héritage

- -

L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.

- -

Par exemple, si vous fixez une color et une font-family pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !

- -
-

Note : Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la section des spécifications de la propriété color, par exemple.

-
- -

Comprendre comment ces concepts se combinent

- -

Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !

- -

Comprendre l'héritage

- -

Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (padding) et une couleur de police pour la <ul> extérieure.

- -

La couleur est transmise aux enfants directs, et aussi enfants indirects — les <li> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe special à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !

- -

Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.

- -

Contrôler l'héritage

- -

CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.

- -
-
{{cssxref("inherit")}}
-
La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".
-
{{cssxref("initial")}}
-
La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à inherit.
-
{{cssxref("unset")}}
-
Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  inherit, sinon il est identique à initial.
-
- -
-

Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

-
- -
-

Note : Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.

-
- -

Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.

- -

Par exemple :

- -
    -
  1. Le deuxième item de la liste est dans la classe my-class-1. Cela définit la couleur de l'élément <a> qu'il contient à inherit. Si vous supprimez cette règle, quelle est la couleur du lien ?
    2. -
  2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.
    3. -
  3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément  <a> — par exemple a { color: red; } ?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Réinitialiser la valeur de toutes les propriétés

- -

En CSS, la propriété raccourci all peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (inherit, initial, unset, ou revert). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.

- -

Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <blockquote> lui-même, le second <blockquote> appartient à une classe qui définit la valeur de all à unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

Essayez de donner à all l'une des autres valeurs possibles et observez les changements.

- -

Comprendre la cascade

- -

Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.

- -

Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :

- -
    -
  1. Importance
    2. -
  2. Spécificité
    3. -
  3. Ordre d'apparition dans le source
    4. -
- -

Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.

- -

Ordre d'apparition dans le source 

- -

Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..

- -

Spécificité

- -

L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une spécificité plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.

- -

Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.

- -

Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.

- -

Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.

- -

Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :

- -
    -
  1. Milliers : ajouter 1 dans cette colonne si la déclaration apparaît dans un  {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.
    2. -
  2. Centaines : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
    3. -
  3. Dizaines : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.
    4. -
  4. Unités : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.
    5. -
- -
-

Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

-
- -

Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la référence MDN des sélecteurs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurMilliersCentainesDizainesUnitésSpécificité
h100010001
h1 + p::first-letter00030003
li > a[href*="fr"] > .inline-warning00220022
#identifiant01000100
pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément 10001000
- -

Avant de continuer, regardons un exemple en action.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.

- - - -
-

Note : Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

- -

Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.

-
- -

!important

- -

Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  !important mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.

- -

Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.

- -
    -
  1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.
    2. -
  2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
    3. -
  3. Les deux éléments sont dans la classe better, mais le deuxième a aussi l'{{htmlattrxref("id")}}  winning. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.
    4. -
  4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration !important dans la deuxième règle — écrit après  border: none,  ce mot-clé signifie que cette déclaration l'emporte sur le border définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
    5. -
- -
-

Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

-
- -

Il est utile de connaître  !important , ne serait-ce que pour le reconnaître dans le code des autres. Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours. !important modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.

- -

Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser !important. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.

- -

Où sont écrites les règles CSS

- -

Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.

- -

En résumé

- -

Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :

- -
    -
  1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).
    2. -
  2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).
    3. -
  3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).
    4. -
  4. Déclarations !important dans les feuilles de style d'auteur.
    5. -
  5. Déclarations !important dans les feuilles de style utilisateur.
    6. -
- -

Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant !important dans leurs règles.

- -

Activité : jouer dans la cascade

- -

Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <color>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.

- -

Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton Reset. Si vous êtes vraiment coincé, jetez un coup d'œil à la solution ici.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}

- -

À suivre

- -

Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.

- -

Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.

- -

En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    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/fr/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md new file mode 100644 index 0000000000..7bc80fb59e --- /dev/null +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -0,0 +1,344 @@ +--- +title: Cascade et héritage +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +tags: + - Apprendre + - CSS + - Cascade + - Débutant + - Héritage + - Règles + - ordre dans le source + - spécificité +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.

+ +

Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.
+ +

Règles contradictoires

+ +

CSS est l'acronyme de Cascading Style Sheets, qu'on peut traduire par feuilles de style en cascade et la compréhension de ce premier mot cascading est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.

+ +

À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La cascade, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.

+ +

Le concept d'héritage est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.

+ +

Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.

+ +

La cascade

+ +

À un niveau élémentaire, la cascade des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.

+ +

Dans l'exemple ci-dessous deux règles pourraient s'appliquer à h1. Au final h1 est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Spécificité

+ +

Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :

+ + + +

Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à h1. Au final h1 est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.

+ +

Héritage

+ +

L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.

+ +

Par exemple, si vous fixez une color et une font-family pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !

+ +
+

Note : Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la section des spécifications de la propriété color, par exemple.

+
+ +

Comprendre comment ces concepts se combinent

+ +

Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !

+ +

Comprendre l'héritage

+ +

Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (padding) et une couleur de police pour la <ul> extérieure.

+ +

La couleur est transmise aux enfants directs, et aussi enfants indirects — les <li> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe special à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !

+ +

Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.

+ +

Contrôler l'héritage

+ +

CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.

+ +
+
{{cssxref("inherit")}}
+
La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".
+
{{cssxref("initial")}}
+
La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à inherit.
+
{{cssxref("unset")}}
+
Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  inherit, sinon il est identique à initial.
+
+ +
+

Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

+
+ +
+

Note : Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.

+
+ +

Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.

+ +

Par exemple :

+ +
    +
  1. Le deuxième item de la liste est dans la classe my-class-1. Cela définit la couleur de l'élément <a> qu'il contient à inherit. Si vous supprimez cette règle, quelle est la couleur du lien ?
    2. +
  2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.
    3. +
  3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément  <a> — par exemple a { color: red; } ?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Réinitialiser la valeur de toutes les propriétés

+ +

En CSS, la propriété raccourci all peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (inherit, initial, unset, ou revert). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.

+ +

Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <blockquote> lui-même, le second <blockquote> appartient à une classe qui définit la valeur de all à unset.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Essayez de donner à all l'une des autres valeurs possibles et observez les changements.

+ +

Comprendre la cascade

+ +

Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.

+ +

Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :

+ +
    +
  1. Importance
    2. +
  2. Spécificité
    3. +
  3. Ordre d'apparition dans le source
    4. +
+ +

Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.

+ +

Ordre d'apparition dans le source 

+ +

Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..

+ +

Spécificité

+ +

L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une spécificité plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.

+ +

Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.

+ +

Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.

+ +

Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.

+ +

Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :

+ +
    +
  1. Milliers : ajouter 1 dans cette colonne si la déclaration apparaît dans un  {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.
    2. +
  2. Centaines : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
    3. +
  3. Dizaines : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.
    4. +
  4. Unités : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.
    5. +
+ +
+

Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

+
+ +

Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la référence MDN des sélecteurs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurMilliersCentainesDizainesUnitésSpécificité
h100010001
h1 + p::first-letter00030003
li > a[href*="fr"] > .inline-warning00220022
#identifiant01000100
pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément 10001000
+ +

Avant de continuer, regardons un exemple en action.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.

+ + + +
+

Note : Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

+ +

Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.

+
+ +

!important

+ +

Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  !important mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.

+ +

Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.

+ +
    +
  1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.
    2. +
  2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
    3. +
  3. Les deux éléments sont dans la classe better, mais le deuxième a aussi l'{{htmlattrxref("id")}}  winning. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.
    4. +
  4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration !important dans la deuxième règle — écrit après  border: none,  ce mot-clé signifie que cette déclaration l'emporte sur le border définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
    5. +
+ +
+

Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

+
+ +

Il est utile de connaître  !important , ne serait-ce que pour le reconnaître dans le code des autres. Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours. !important modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.

+ +

Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser !important. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.

+ +

Où sont écrites les règles CSS

+ +

Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.

+ +

En résumé

+ +

Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :

+ +
    +
  1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).
    2. +
  2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).
    3. +
  3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).
    4. +
  4. Déclarations !important dans les feuilles de style d'auteur.
    5. +
  5. Déclarations !important dans les feuilles de style utilisateur.
    6. +
+ +

Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant !important dans leurs règles.

+ +

Activité : jouer dans la cascade

+ +

Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <color>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.

+ +

Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton Reset. Si vous êtes vraiment coincé, jetez un coup d'œil à la solution ici.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}

+ +

À suivre

+ +

Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.

+ +

Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.

+ +

En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    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/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html deleted file mode 100644 index 720f34217f..0000000000 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Création d'un en-tête de papier à lettre élégant -slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper -tags: - - Arrière‑plan - - Boîte - - Boîtes - - CSS - - Codage - - Débutant - - Evaluation - - encadrement - - en‑tête de lettre - - lettre - - lettre avec en‑tête - - papier -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper -original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}
- -

Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.

- - - - - - - - - - - - -
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.
- -

Départ

- -

Pour débuter cet exercice, vous devez :

- - - -
-

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

-
- -

Résumé du projet

- -

Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :

- -

La lettre

- - - - - - - -

Astuces

- - - -

Exemple

- -

Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

- -

- -

 

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md new file mode 100644 index 0000000000..720f34217f --- /dev/null +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md @@ -0,0 +1,113 @@ +--- +title: Création d'un en-tête de papier à lettre élégant +slug: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +tags: + - Arrière‑plan + - Boîte + - Boîtes + - CSS + - Codage + - Débutant + - Evaluation + - encadrement + - en‑tête de lettre + - lettre + - lettre avec en‑tête + - papier +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +original_slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Apprendre/CSS/styliser_boites")}}
+ +

Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.

+ + + + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.
+ +

Départ

+ +

Pour débuter cet exercice, vous devez :

+ + + +
+

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

+
+ +

Résumé du projet

+ +

Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :

+ +

La lettre

+ + + + + + + +

Astuces

+ + + +

Exemple

+ +

Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

+ +

+ +

 

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.html b/files/fr/learn/css/building_blocks/debugging_css/index.html deleted file mode 100644 index e367a4cd59..0000000000 --- a/files/fr/learn/css/building_blocks/debugging_css/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Debugging CSS -slug: Learn/CSS/Building_blocks/Debugging_CSS -translation_of: Learn/CSS/Building_blocks/Debugging_CSS -original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
- -

Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.
- -

Comment accéder aux outils de développement du navigateur

- -

L'article Que sont les outils de développement de navigateurs est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.

- -

You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit Grid Layouts, Flexbox, and Shapes. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.

- -

In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using an example file. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.

- -

The DOM versus view source

- -

Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

- -

In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <h2> with an </h2>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.

- -

View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

- -

Inspecting the applied CSS

- -

Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.

- -

The example page for this tutorial with DevTools open.

- -

If you look at the Rules view to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.

- -

Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

- -

Click on the little arrow to expand the view, showing the different longhand properties and their values.

- -

You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example border-radius, and the CSS will stop applying.

- -

You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.

- -

The following video provides some useful tips on debugging CSS using the Firefox DevTools:

- -

{{EmbedYouTube("O3DAm82vIvU")}}

- -

Editing values

- -

In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.

- -

With box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.

- -

DevTools Styles Panel with a color picker open.

- -

Adding a new property

- -

You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.

- -

You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting font-size, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.

- -

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

- -
-

Note : There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at Examine and edit CSS.

-
- -

Understanding the box model

- -

In previous lessons we have discussed the Box Model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.

- -

The Layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.

- -

In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

- -

Compare the two boxes with classes box1 and box2. They both have the same width applied (400px), however box1 is visually wider. You can see in the layout panel that it is using content-box. This is the value that takes the size you give the element and then adds on the padding and border width.

- -

The element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case width: 400px.

- -

The Layout section of the DevTools

- -
-

Note : Find out more in Examining and Inspecting the Box Model.

-
- -

Solving specificity issues

- -

Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.

- -

In our example file there are two words that have been wrapped in an <em> element. One is displaying as orange and the other hotpink. In the CSS we have applied:

- -
em {
-  color: hotpink;
-  font-weight: bold;
-}
- -

Above that in the stylesheet however is a rule with a .special selector:

- -
.special {
-  color: orange;
-}
- -

As you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.

- -

Inspect the <em> with the class of .special and DevTools will show you that orange is the color that applies, and also shows you the color property applied to the em crossed out. You can now see that the class is overriding the element selector.

- -

Selecting an em and looking at DevTools to see what is over-riding the color.

- -

Find out more about the Firefox DevTools

- -

There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.

- -

Debugging problems in CSS

- -

DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.

- -

Take a step back from the problem

- -

Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.

- -

Do you have valid HTML and CSS?

- -

Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.

- - - -

Is the property and value supported by the browser you are testing in?

- -

Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.

- -

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

- -

You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.

- -

{{compat("css.shape-outside")}}

- -

Is something else overriding your CSS?

- -

This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.

- -

Make a reduced test case of the problem

- -

If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.

- -

A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.

- -

To create a reduced test case:

- -
    -
  1. If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like CodePen is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.
    2. -
  2. If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript does make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.
    3. -
  3. Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.
    4. -
  4. Remove any CSS that doesn't impact the issue.
    5. -
- -

In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.

- -

If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.

- -

In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's bugzilla site).

- -

As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    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/fr/learn/css/building_blocks/debugging_css/index.md b/files/fr/learn/css/building_blocks/debugging_css/index.md new file mode 100644 index 0000000000..e367a4cd59 --- /dev/null +++ b/files/fr/learn/css/building_blocks/debugging_css/index.md @@ -0,0 +1,203 @@ +--- +title: Debugging CSS +slug: Learn/CSS/Building_blocks/Debugging_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +original_slug: Apprendre/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.
+ +

Comment accéder aux outils de développement du navigateur

+ +

L'article Que sont les outils de développement de navigateurs est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.

+ +

You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit Grid Layouts, Flexbox, and Shapes. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.

+ +

In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using an example file. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.

+ +

The DOM versus view source

+ +

Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

+ +

In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <h2> with an </h2>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.

+ +

View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

+ +

Inspecting the applied CSS

+ +

Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.

+ +

The example page for this tutorial with DevTools open.

+ +

If you look at the Rules view to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.

+ +

Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

+ +

Click on the little arrow to expand the view, showing the different longhand properties and their values.

+ +

You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example border-radius, and the CSS will stop applying.

+ +

You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.

+ +

The following video provides some useful tips on debugging CSS using the Firefox DevTools:

+ +

{{EmbedYouTube("O3DAm82vIvU")}}

+ +

Editing values

+ +

In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.

+ +

With box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.

+ +

DevTools Styles Panel with a color picker open.

+ +

Adding a new property

+ +

You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.

+ +

You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting font-size, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.

+ +

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

+ +
+

Note : There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at Examine and edit CSS.

+
+ +

Understanding the box model

+ +

In previous lessons we have discussed the Box Model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.

+ +

The Layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.

+ +

In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

+ +

Compare the two boxes with classes box1 and box2. They both have the same width applied (400px), however box1 is visually wider. You can see in the layout panel that it is using content-box. This is the value that takes the size you give the element and then adds on the padding and border width.

+ +

The element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case width: 400px.

+ +

The Layout section of the DevTools

+ +
+

Note : Find out more in Examining and Inspecting the Box Model.

+
+ +

Solving specificity issues

+ +

Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.

+ +

In our example file there are two words that have been wrapped in an <em> element. One is displaying as orange and the other hotpink. In the CSS we have applied:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Above that in the stylesheet however is a rule with a .special selector:

+ +
.special {
+  color: orange;
+}
+ +

As you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.

+ +

Inspect the <em> with the class of .special and DevTools will show you that orange is the color that applies, and also shows you the color property applied to the em crossed out. You can now see that the class is overriding the element selector.

+ +

Selecting an em and looking at DevTools to see what is over-riding the color.

+ +

Find out more about the Firefox DevTools

+ +

There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.

+ +

Debugging problems in CSS

+ +

DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.

+ +

Take a step back from the problem

+ +

Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.

+ +

Do you have valid HTML and CSS?

+ +

Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.

+ + + +

Is the property and value supported by the browser you are testing in?

+ +

Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.

+ +

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

+ +

You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.

+ +

{{compat("css.shape-outside")}}

+ +

Is something else overriding your CSS?

+ +

This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.

+ +

Make a reduced test case of the problem

+ +

If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.

+ +

A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.

+ +

To create a reduced test case:

+ +
    +
  1. If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like CodePen is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.
    2. +
  2. If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript does make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.
    3. +
  3. Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.
    4. +
  4. Remove any CSS that doesn't impact the issue.
    5. +
+ +

In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.

+ +

If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.

+ +

In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's bugzilla site).

+ +

As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    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/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html deleted file mode 100644 index 114467a4f8..0000000000 --- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Compréhension des fondements des CSS -slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension -tags: - - CSS - - Codage - - Commentaires - - Débutant - - Evaluation - - Règles - - Style - - Syntaxe - - Sélecteurs - - modèle de boîte -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension -original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
- -

Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.

- - - - - - - - - - - - -
Prérequis :Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.
Objectif :Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.
- -

Point de départ

- -

Pour demarrer cet exercice, vous devez :

- - - -
-

Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style> dans l'élément head du document.

-
- -

Énoncé du projet

- -

Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.

- -

Construction de base :

- - - -

Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :

- - - -

Nouveaux jeux de règles à écrire :

- - - -
-

Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size différent placés entre eux et <html> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).

-
- -

Autres choses à prendre en considération :

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercise ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md new file mode 100644 index 0000000000..114467a4f8 --- /dev/null +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md @@ -0,0 +1,138 @@ +--- +title: Compréhension des fondements des CSS +slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +tags: + - CSS + - Codage + - Commentaires + - Débutant + - Evaluation + - Règles + - Style + - Syntaxe + - Sélecteurs + - modèle de boîte +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +original_slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
+ +

Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.

+ + + + + + + + + + + + +
Prérequis :Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.
Objectif :Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.
+ +

Point de départ

+ +

Pour demarrer cet exercice, vous devez :

+ + + +
+

Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style> dans l'élément head du document.

+
+ +

Énoncé du projet

+ +

Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.

+ +

Construction de base :

+ + + +

Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :

+ + + +

Nouveaux jeux de règles à écrire :

+ + + +
+

Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size différent placés entre eux et <html> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).

+
+ +

Autres choses à prendre en considération :

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercise ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html deleted file mode 100644 index 6d01ee3f41..0000000000 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Handling different text directions -slug: Learn/CSS/Building_blocks/Handling_different_text_directions -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions -original_slug: Apprendre/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")}}
- -

Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe).

- -

Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées modes d'écriture (writing modes en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.

- - - - - - - - - - - - -
Prérequis :Notions informatiques de base, avoir installé les logiciels de base, notions élémentaires sur la manipulation des fichiers, notions élémentaires sur HTML (voir l'introduction à HTML), et une idée du fonctionnement de CSS (voir les premiers pas en CSS.)
Objectif :Comprendre l'importance des modes d'écriture pour le CSS moderne.
- -

Que sont les modes d'écritures?

- -

Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété writing-mode nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.

- -

Dans l'exemple ci-dessous nous avons un titre affiché qui utilise writing-mode: vertical-rl. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

Les trois valeurs possibles pour la propriété writing-mode sont :

- - - -

La propriété writing-mode définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases.

- -

Modes d'écriture et disposition en bloc ou en ligne

- -

Nous avons déjà abordé la disposition en ligne et en bloc et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.

- -

Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise writing-mode: horizontal-tb, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise writing-mode: vertical-rl, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture horizontal-tb, la direction de bloc va de haut en bas  avec un mode d'écriture vertical-rl, la direction de bloc va de droite à gauche. Ainsi, la dimension de bloc correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La dimension en ligne correspond toujours à la direction selon laquelle les phrases sont écrites.

- -

Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal.

- -

Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture horizontal.

- -

Ce schéma illustre les deux dimensions pour un mode d'écriture vertical.

- -

Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture vertical.

- -

Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite.

- -

Direction

- -

En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite !

- -

Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de début et de fin, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS.

- -

Propriétés et valeurs logiques

- -

Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal.

- -

Reprenons nos deux boîtes : celle avec le mode d'écriture horizontal-tb et celle avec le mode d'écriture vertical-rl. Pour ces deux boîtes, on a défini width. Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.

- -

Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme width ou height par des versions logiques ou relatives au flux.

- -

La propriété logique qui correspond à width lorsqu'on utilise un mode d'écriture horizontal est appelée inline-size : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à height est quant à elle intitulée block-size et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé width par inline-size.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}}

- -

Propriétés logiques pour les marges, bordures et remplissages

- -

Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme margin-top, padding-left, et border-bottom. À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes.

- -

La propriété physique margin-top correspond à la propriété logique margin-block-start pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc.

- -

La propriété physique padding-left trouve son équivalent avec padding-inline-start, le remplissage (padding) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété border-bottom a quant à elle l'équivalent border-block-end qui représente la bordure sur à la fin de la dimension de bloc.

- -

Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après.

- -

Si vous changez le mode d'écriture des boîtes en modifiant la valeur de writing-mode sur le sélecteur .box afin de la passer à vertical-rl, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.

- -

Vous pouvez également voir que <h2> a une bordure avec border-bottom. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des propriétés et valeurs logiques.

- -

Valeurs logiques

- -

Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme top, right, bottom, et left. Ces valeurs disposent également d'équivalences logiques : block-start, inline-end, block-end, et inline-start.

- -

Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer left avec inline-start.

- -

Modifiez le mode d'écriture de cet exemple afin de le passer à vertical-rl pour voir ce qui se produit sur l'image. Modifiez inline-start à inline-end pour changer l'emplacement du flottement.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}}

- -

Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture.

- -
-

Note : Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour float. Si vous utilisez Google Chrome ou Microsoft Edge, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.

-
- -

Faut-il utiliser les propriétés physiques ou logiques ?

- -

Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou flexbox.

- -

Testez vos compétences !

- -

Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir Testez vos compétences : les modes d'écriture.

- -

Résumé

- -

Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal.

- -

Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrière-plans et bordures
    5. -
  5. Gestion de différentes directions de texte
    6. -
  6. Débordements de contenu
    7. -
  7. Valeurs et unités CSS
    8. -
  8. Définir la taille des éléments en CSS
    9. -
  9. Images, médias et éléments de formulaire
    10. -
  10. Mise en page de tableaux
    11. -
  11. Débogage de CSS
    12. -
  12. Organiser votre CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md new file mode 100644 index 0000000000..6d01ee3f41 --- /dev/null +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md @@ -0,0 +1,158 @@ +--- +title: Handling different text directions +slug: Learn/CSS/Building_blocks/Handling_different_text_directions +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +original_slug: Apprendre/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")}}
+ +

Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordures en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web a tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le français) que celles qui se lisent de droite à gauche (comme l'arabe).

+ +

Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le japonais) — Ces différentes directions sont appelées modes d'écriture (writing modes en anglais). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.

+ + + + + + + + + + + + +
Prérequis :Notions informatiques de base, avoir installé les logiciels de base, notions élémentaires sur la manipulation des fichiers, notions élémentaires sur HTML (voir l'introduction à HTML), et une idée du fonctionnement de CSS (voir les premiers pas en CSS.)
Objectif :Comprendre l'importance des modes d'écriture pour le CSS moderne.
+ +

Que sont les modes d'écritures?

+ +

Un mode d'écriture en CSS fait référence au sens d'écriture du texte : horizontal ou vertical. La propriété writing-mode nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.

+ +

Dans l'exemple ci-dessous nous avons un titre affiché qui utilise writing-mode: vertical-rl. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

Les trois valeurs possibles pour la propriété writing-mode sont :

+ + + +

La propriété writing-mode définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases.

+ +

Modes d'écriture et disposition en bloc ou en ligne

+ +

Nous avons déjà abordé la disposition en ligne et en bloc et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français.

+ +

Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise writing-mode: horizontal-tb, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise writing-mode: vertical-rl, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture horizontal-tb, la direction de bloc va de haut en bas  avec un mode d'écriture vertical-rl, la direction de bloc va de droite à gauche. Ainsi, la dimension de bloc correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La dimension en ligne correspond toujours à la direction selon laquelle les phrases sont écrites.

+ +

Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal.

+ +

Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture horizontal.

+ +

Ce schéma illustre les deux dimensions pour un mode d'écriture vertical.

+ +

Illustration de l'axe de bloc et de l'axe en ligne pour un mode d'écriture vertical.

+ +

Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les méthodes de disposition récentes, les notions de bloc et d'en ligne se révèlent cruciales. Nous y reviendrons par la suite.

+ +

Direction

+ +

En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite !

+ +

Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de début et de fin, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS.

+ +

Propriétés et valeurs logiques

+ +

Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal.

+ +

Reprenons nos deux boîtes : celle avec le mode d'écriture horizontal-tb et celle avec le mode d'écriture vertical-rl. Pour ces deux boîtes, on a défini width. Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal.

+ +

Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme width ou height par des versions logiques ou relatives au flux.

+ +

La propriété logique qui correspond à width lorsqu'on utilise un mode d'écriture horizontal est appelée inline-size : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à height est quant à elle intitulée block-size et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé width par inline-size.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}}

+ +

Propriétés logiques pour les marges, bordures et remplissages

+ +

Dans les deux précédentes leçons, nous avons abordé le modèle de boîte CSS et les bordures. Pour les propriétés qui régissent les marges, bordures et le remplissage, vous verrez de nombreuses propriétés physiques comme margin-top, padding-left, et border-bottom. À l'instar de la hauteur et de la largeur, ces propriétés disposent de propriétés logiques équivalentes.

+ +

La propriété physique margin-top correspond à la propriété logique margin-block-start pour un mode d'écriture horizontal. Cette propriété logique fera toujours référence à la marge située au début de la dimension de bloc.

+ +

La propriété physique padding-left trouve son équivalent avec padding-inline-start, le remplissage (padding) appliqué au début de la direction en ligne. Cela correspond à l'endroit où les phrases commencent pour le mode d'écriture courant. La propriété border-bottom a quant à elle l'équivalent border-block-end qui représente la bordure sur à la fin de la dimension de bloc.

+ +

Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci-après.

+ +

Si vous changez le mode d'écriture des boîtes en modifiant la valeur de writing-mode sur le sélecteur .box afin de la passer à vertical-rl, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.

+ +

Vous pouvez également voir que <h2> a une bordure avec border-bottom. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

Il existe de nombreuses propriétés détaillées pour gérer les différents aspects des bordures, vous pouvez voir l'ensemble des correspondances sur la page MDN des propriétés et valeurs logiques.

+ +

Valeurs logiques

+ +

Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme top, right, bottom, et left. Ces valeurs disposent également d'équivalences logiques : block-start, inline-end, block-end, et inline-start.

+ +

Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer left avec inline-start.

+ +

Modifiez le mode d'écriture de cet exemple afin de le passer à vertical-rl pour voir ce qui se produit sur l'image. Modifiez inline-start à inline-end pour changer l'emplacement du flottement.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 850)}}

+ +

Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que les marges sont correctement positionnées, quel que soit le mode d'écriture.

+ +
+

Note : Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour float. Si vous utilisez Google Chrome ou Microsoft Edge, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas.

+
+ +

Faut-il utiliser les propriétés physiques ou logiques ?

+ +

Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou flexbox.

+ +

Testez vos compétences !

+ +

Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir Testez vos compétences : les modes d'écriture.

+ +

Résumé

+ +

Les concepts expliqués ici revêtent une importance croissante en CSS. Comprendre les directions en ligne et de bloc, ainsi que la façon dont le flux de texte change selon le mode d'écriture vous sera désormais très utile. Vous aurez une meilleure compréhension de CSS, même si vous n'utilisez qu'un seul mode d'écriture horizontal.

+ +

Dans le prochain module, nous verrons comment les dépassements sont gérés en CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrière-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordements de contenu
    7. +
  7. Valeurs et unités CSS
    8. +
  8. Définir la taille des éléments en CSS
    9. +
  9. Images, médias et éléments de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage de CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/index.html b/files/fr/learn/css/building_blocks/index.html deleted file mode 100644 index 996ef6e24f..0000000000 --- a/files/fr/learn/css/building_blocks/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Blocs de base en CSS -slug: Learn/CSS/Building_blocks -tags: - - CSS - - Débutant - - Tutoriel -translation_of: Learn/CSS/Building_blocks -original_slug: Apprendre/CSS/Building_blocks ---- -
{{LearnSidebar}}
- -

Ce cours fait suite aux premiers pas avec CSS : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.
-
- L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme le style de texte et la mise en page CSS.

- -

Prérequis

- -

Avant de commencer ce cours, nous vous recommandons :

- -
    -
  1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.
    2. -
  2. De disposer d'un environnement de travail comme il est décrit dans l'article installation des outils de base et de savoir créer et gérer des fichiers (cf. leçon gérer les fichiers).
    3. -
  3. D'être suffisamment à votre aise avec HTML (voir le cours introduction au HTML).
    4. -
  4. D'avoir compris les bases du CSS telles qu'exposées dans le cours premiers pas avec CSS.
    5. -
- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.

- -
-

Note : Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.

-
- -
-
Cascade and inheritance (Cascade et héritage)
-
Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.
-
CSS selectors (sélecteurs CSS)
-
Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : - -
-
The box model (le modèle des boîtes)
-
Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.
-
Backgrounds and borders (arrières-plans et bordures)
-
Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.
-
Handling different text directions (manipuler les différentes directions du texte)
-
Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (writing modes). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .
-
Overflowing content (quand ça dépasse)
-
Autre concept important du CSS: le dépassement (overflow) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.
-
Values and units (valeurs et unités)
-
Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.
-
Sizing items in CSS (dimensionner les éléments en CSS)
-
Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.
-
Images, media, and form elements (images, médias et éléments de formulaires)
-
Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.
-
Mise en page des tableaux
-
Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.
-
Debugging CSS (déboguer le CSS)
-
Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.
-
Organizing your CSS (organiser votre CSS)
-
Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.
-
- -

Voir aussi

- -
-
Effets de boîte avancés
-
Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.
-
diff --git a/files/fr/learn/css/building_blocks/index.md b/files/fr/learn/css/building_blocks/index.md new file mode 100644 index 0000000000..996ef6e24f --- /dev/null +++ b/files/fr/learn/css/building_blocks/index.md @@ -0,0 +1,79 @@ +--- +title: Blocs de base en CSS +slug: Learn/CSS/Building_blocks +tags: + - CSS + - Débutant + - Tutoriel +translation_of: Learn/CSS/Building_blocks +original_slug: Apprendre/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Ce cours fait suite aux premiers pas avec CSS : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.
+
+ L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme le style de texte et la mise en page CSS.

+ +

Prérequis

+ +

Avant de commencer ce cours, nous vous recommandons :

+ +
    +
  1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.
    2. +
  2. De disposer d'un environnement de travail comme il est décrit dans l'article installation des outils de base et de savoir créer et gérer des fichiers (cf. leçon gérer les fichiers).
    3. +
  3. D'être suffisamment à votre aise avec HTML (voir le cours introduction au HTML).
    4. +
  4. D'avoir compris les bases du CSS telles qu'exposées dans le cours premiers pas avec CSS.
    5. +
+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.

+ +
+

Note : Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.

+
+ +
+
Cascade and inheritance (Cascade et héritage)
+
Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.
+
CSS selectors (sélecteurs CSS)
+
Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : + +
+
The box model (le modèle des boîtes)
+
Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.
+
Backgrounds and borders (arrières-plans et bordures)
+
Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.
+
Handling different text directions (manipuler les différentes directions du texte)
+
Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (writing modes). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .
+
Overflowing content (quand ça dépasse)
+
Autre concept important du CSS: le dépassement (overflow) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.
+
Values and units (valeurs et unités)
+
Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.
+
Sizing items in CSS (dimensionner les éléments en CSS)
+
Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.
+
Images, media, and form elements (images, médias et éléments de formulaires)
+
Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.
+
Mise en page des tableaux
+
Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.
+
Debugging CSS (déboguer le CSS)
+
Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.
+
Organizing your CSS (organiser votre CSS)
+
Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.
+
+ +

Voir aussi

+ +
+
Effets de boîte avancés
+
Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.
+
diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html deleted file mode 100644 index 6eb65c2dca..0000000000 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Débordements de contenu (overflow) -slug: Learn/CSS/Building_blocks/Overflowing_content -translation_of: Learn/CSS/Building_blocks/Overflowing_content -original_slug: Apprendre/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")}}
- -

Dans ce cours nous allons étudier un autre concept important en CSS : les débordements (overflows en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.

- - - - - - - - - - - - -
Prérequis :Connaissances élémentaires en informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée du fonctionnement de CSS.
Objectif :Comprendre le principe des débordements et comment les gérer.
- -

Qu'est-ce qu'un débordement ?

- -

Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs width et height (ou inline-size et block-size). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.

- -

CSS essaie d'éviter les pertes de données

- -

Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.

- -

Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur height. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

- -

Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

- -

Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?

- -

Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.

- -

Si vous avez défini une boîte avec des valeurs width ou height, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.

- -

Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant !

- -

La propriété overflow

- -

La propriété overflow est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est visible, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.

- -

Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir overflow: hidden pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

- -

Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez overflow: scroll alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.

- -

Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

- -

Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe y, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété overflow-y, qui définit overflow-y: scroll afin de faire défiler uniquement sur l'axe y.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

- -

Vous pourriez également faire défiler sur l'axe x en utilisant overflow-x, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés word-break ou overflow-wrap. En complément, certaines méthodes présentées dans le cours Définir la taille des éléments en CSS peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

- -

Comme pour scroll, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.

- -
-

Note : vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété overflow en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à overflow-x et le second à overflow-y. Sinon, overflow-x et overflow-y sont définis sur la même valeur. Par exemple, overflow: scroll hidden définira overflow-x sur scroll et overflow-y sur hidden.

-
- -

Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez overflow: auto. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.

- -

Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

- -

Overflow crée un "Block Formatting Context"

- -

Il existe un concept dans le CSS de Block Formatting Context (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de overflow comme scroll ou auto vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de overflow devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.

- -

Débordements indésirables en web design

- -

Les méthodes de mise en page modernes (comme étudiées dans le module La mise en page avec le CSS) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.

- -

Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'overflow pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.

- -

Testez vos compétences !

- -

Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) Testez vos compétences: overflow.

- -

Résumé

- -

Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrière-plans et bordures
    5. -
  5. Gestion de différentes directions de texte
    6. -
  6. Débordements de contenu
    7. -
  7. Valeurs et unités CSS
    8. -
  8. Définir la taille des éléments en CSS
    9. -
  9. Images, médias et éléments de formulaire
    10. -
  10. Mise en page de tableaux
    11. -
  11. Débogage de CSS
    12. -
  12. Organiser votre CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.md b/files/fr/learn/css/building_blocks/overflowing_content/index.md new file mode 100644 index 0000000000..6eb65c2dca --- /dev/null +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.md @@ -0,0 +1,124 @@ +--- +title: Débordements de contenu (overflow) +slug: Learn/CSS/Building_blocks/Overflowing_content +translation_of: Learn/CSS/Building_blocks/Overflowing_content +original_slug: Apprendre/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")}}
+ +

Dans ce cours nous allons étudier un autre concept important en CSS : les débordements (overflows en anglais). Un débordement de contenu correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.

+ + + + + + + + + + + + +
Prérequis :Connaissances élémentaires en informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée du fonctionnement de CSS.
Objectif :Comprendre le principe des débordements et comment les gérer.
+ +

Qu'est-ce qu'un débordement ?

+ +

Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs width et height (ou inline-size et block-size). Un dépassement correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas de dépassement fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.

+ +

CSS essaie d'éviter les pertes de données

+ +

Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.

+ +

Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur height. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?

+ +

Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.

+ +

Si vous avez défini une boîte avec des valeurs width ou height, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.

+ +

Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant !

+ +

La propriété overflow

+ +

La propriété overflow est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est visible, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.

+ +

Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir overflow: hidden pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez overflow: scroll alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.

+ +

Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe y, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété overflow-y, qui définit overflow-y: scroll afin de faire défiler uniquement sur l'axe y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

Vous pourriez également faire défiler sur l'axe x en utilisant overflow-x, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés word-break ou overflow-wrap. En complément, certaines méthodes présentées dans le cours Définir la taille des éléments en CSS peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

Comme pour scroll, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.

+ +
+

Note : vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété overflow en déclarant deux valeurs. Si deux mots clés sont spécifiés, le premier s'applique à overflow-x et le second à overflow-y. Sinon, overflow-x et overflow-y sont définis sur la même valeur. Par exemple, overflow: scroll hidden définira overflow-x sur scroll et overflow-y sur hidden.

+
+ +

Si vous souhaitez que les barres de défilement n'apparaissent que s'il y a plus de contenu que la boîte ne peut en contenir, utilisez overflow: auto. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs de bureau ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.

+ +

Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

Overflow crée un "Block Formatting Context"

+ +

Il existe un concept dans le CSS de Block Formatting Context (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur de overflow comme scroll ou auto vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de overflow devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.

+ +

Débordements indésirables en web design

+ +

Les méthodes de mise en page modernes (comme étudiées dans le module La mise en page avec le CSS) gèrent très bien le débordement. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un débordement ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.

+ +

Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'overflow pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.

+ +

Testez vos compétences !

+ +

Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) Testez vos compétences: overflow.

+ +

Résumé

+ +

Cette courte leçon a introduit le concept de débordement ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un débordement éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un débordement problématique.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrière-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordements de contenu
    7. +
  7. Valeurs et unités CSS
    8. +
  8. Définir la taille des éléments en CSS
    9. +
  9. Images, médias et éléments de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage de CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html deleted file mode 100644 index f56a321023..0000000000 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Sélecteurs d'attribut -slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut ---- -

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

- -

Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs d'attribut et comment les utiliser.
- -

Sélecteur de présence et de valeur

- -

Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple href), ou sur des correspondances variées avec la valeur d'un attribut donné

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurExempleDescription
[attr]a[title]Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.
[attr=value]a[href="https://example.com"]Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.
[attr~=value]p[class~="special"] -

Cible les éléments avec un attribut attr dont la valeur est exactement value, ou les éléments dont l'attribut attr contient une ou plusieurs valeurs, dont au moins une correspond à value.

- -

Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.

-
[attr|=value]div[lang|="zh"]Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.
- -

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Sélecteurs ciblant une sous-chaîne

- -

Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes box-warning et box-error, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut [class ^= "box-"] est là pour ça.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurExempleDescription
[attr^=value]li[class^="box-"]élément sélectionné quand la valeur value de l'attribut attr commence par la sous-chaîne value.
[attr$=value]li[class$="-box"]élément sélectionné quand la valeur de l'attribut attr finit par la sous-chaîne value.
[attr*=value ]li[class*="box"]élément sélectionné quand la
- la sous-chaîne value apparaît quelque part dans la valeur de l'attribut attr.
- -

L'exemple suivant montre ces sélecteurs en action :

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Sensibilité à la casse

- -

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur i avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (a = A). Sans le drapeau i, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.

- -

Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un a — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau insensible à la casse, il cible donc tous les éléments de la liste.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

-
- -

Pas suivants

- -

Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux sélecteurs de pseudo-classes et pseudo-éléments.

- -

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

- -

Dans ce cours

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrières-plans et bordures
    5. -
  5. Gérer la directionnalité du texte
    6. -
  6. Le dépassement du contenu
    7. -
  7. Valeurs et unités
    8. -
  8. Dimensionnement des objets en CSS
    9. -
  9. Images, médias, et formulaires
    10. -
  10. Mettre en forme les tableaux
    11. -
  11. Déboguer CSS
    12. -
  12. Organiser son code CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md new file mode 100644 index 0000000000..f56a321023 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -0,0 +1,156 @@ +--- +title: Sélecteurs d'attribut +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut +--- +

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

+ +

Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs d'attribut et comment les utiliser.
+ +

Sélecteur de présence et de valeur

+ +

Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple href), ou sur des correspondances variées avec la valeur d'un attribut donné

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleDescription
[attr]a[title]Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.
[attr=value]a[href="https://example.com"]Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.
[attr~=value]p[class~="special"] +

Cible les éléments avec un attribut attr dont la valeur est exactement value, ou les éléments dont l'attribut attr contient une ou plusieurs valeurs, dont au moins une correspond à value.

+ +

Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.

+
[attr|=value]div[lang|="zh"]Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.
+ +

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Sélecteurs ciblant une sous-chaîne

+ +

Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes box-warning et box-error, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut [class ^= "box-"] est là pour ça.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleDescription
[attr^=value]li[class^="box-"]élément sélectionné quand la valeur value de l'attribut attr commence par la sous-chaîne value.
[attr$=value]li[class$="-box"]élément sélectionné quand la valeur de l'attribut attr finit par la sous-chaîne value.
[attr*=value ]li[class*="box"]élément sélectionné quand la
+ la sous-chaîne value apparaît quelque part dans la valeur de l'attribut attr.
+ +

L'exemple suivant montre ces sélecteurs en action :

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Sensibilité à la casse

+ +

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur i avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (a = A). Sans le drapeau i, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.

+ +

Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un a — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau insensible à la casse, il cible donc tous les éléments de la liste.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

+
+ +

Pas suivants

+ +

Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux sélecteurs de pseudo-classes et pseudo-éléments.

+ +

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

+ +

Dans ce cours

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrières-plans et bordures
    5. +
  5. Gérer la directionnalité du texte
    6. +
  6. Le dépassement du contenu
    7. +
  7. Valeurs et unités
    8. +
  8. Dimensionnement des objets en CSS
    9. +
  9. Images, médias, et formulaires
    10. +
  10. Mettre en forme les tableaux
    11. +
  11. Déboguer CSS
    12. +
  12. Organiser son code CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html deleted file mode 100644 index ecef10ea21..0000000000 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Combinateurs -slug: Learn/CSS/Building_blocks/Selectors/Combinators -tags: - - CSS - - Sélecteurs - - combinateurs -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators -original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs ---- -

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

- -

Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.

- - - - - - - - - - - - -
Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
Objectif:En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.
- -

Combinateur descendant

- -

Le combinateur descendant— en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.

- -
body article p
-
- -

Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <p>, qui est à l'intérieur d'un élément de classe .box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Combinateur enfant

- -

Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <p> qui sont des enfants directs des éléments <article>:

- -
article > p
- -

Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <li> qui sont un enfant direct d'un <ul>, et leur ai donné une bordure supérieure.

- -

si vous supprimez le > qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <li> auront une bordure rouge.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Combinateur frère adjacents

- -

Le sélecteur de frère adjacent (+) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <img> qui viennent juste après les éléments <p>:

- -
p + img
- -

Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <h1>, et le stylisons.

- -

Si vous insérez un autre élément tel qu'un <h2> entre le <h1> et le <p>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Combinateur général de frères

- -

Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci:

- -
p ~ img
- -

Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après qu'il est sélectionné.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

Utilisation de combinateurs

- -

Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <ul>, je pourrais utiliser ce qui suit.

- -
ul > li[class="a"]  {  }
- -

Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.

- -

Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.

- -

Testez vos compétences!

- -

Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir Test your skills: Selectors.

- -

Passer à la suite

- -

Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le modèle de Boîte.

- -

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

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de Boîte
    4. -
  4. Arrières-plans et bordures
    5. -
  5. Gestion de différentes directions de texte
    6. -
  6. Débordement de contenu
    7. -
  7. Valeurs et unités
    8. -
  8. Taille des élements
    9. -
  9. Images, média, et élements de formulaire
    10. -
  10. Mise en page de tableaux
    11. -
  11. Débogage CSS
    12. -
  12. Organiser votre CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.md b/files/fr/learn/css/building_blocks/selectors/combinators/index.md new file mode 100644 index 0000000000..ecef10ea21 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.md @@ -0,0 +1,115 @@ +--- +title: Combinateurs +slug: Learn/CSS/Building_blocks/Selectors/Combinators +tags: + - CSS + - Sélecteurs + - combinateurs +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs +--- +

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

+ +

Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.

+ + + + + + + + + + + + +
Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
Objectif:En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.
+ +

Combinateur descendant

+ +

Le combinateur descendant— en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.

+ +
body article p
+
+ +

Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <p>, qui est à l'intérieur d'un élément de classe .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Combinateur enfant

+ +

Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <p> qui sont des enfants directs des éléments <article>:

+ +
article > p
+ +

Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <li> qui sont un enfant direct d'un <ul>, et leur ai donné une bordure supérieure.

+ +

si vous supprimez le > qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <li> auront une bordure rouge.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Combinateur frère adjacents

+ +

Le sélecteur de frère adjacent (+) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <img> qui viennent juste après les éléments <p>:

+ +
p + img
+ +

Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <h1>, et le stylisons.

+ +

Si vous insérez un autre élément tel qu'un <h2> entre le <h1> et le <p>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Combinateur général de frères

+ +

Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci:

+ +
p ~ img
+ +

Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après qu'il est sélectionné.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

Utilisation de combinateurs

+ +

Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <ul>, je pourrais utiliser ce qui suit.

+ +
ul > li[class="a"]  {  }
+ +

Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.

+ +

Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.

+ +

Testez vos compétences!

+ +

Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir Test your skills: Selectors.

+ +

Passer à la suite

+ +

Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le modèle de Boîte.

+ +

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

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de Boîte
    4. +
  4. Arrières-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordement de contenu
    7. +
  7. Valeurs et unités
    8. +
  8. Taille des élements
    9. +
  9. Images, média, et élements de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index ece86d8018..0000000000 --- a/files/fr/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Sélecteurs CSS -slug: Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -original_slug: Apprendre/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")}}
- -

Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
- -

Qu'est-ce qu'un sélecteur ?

- -

Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

- -

Du code où h1 est surligné.

- -

Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments h1, ou la classe .special.

- -

En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la spécification de niveau 3 pour les sélecteurs, une spécification mature, aussi la prise en charge par les navigateurs est excellente.

- -

Listes de sélecteurs

- -

Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un h1 et pour une classe .special, je pourrais écrire deux règles :

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :

- -
h1, .special {
-  color: blue;
-}
- -

L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :

- -
h1,
-.special {
-  color: blue;
-}
- -

Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}

- -

Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.

- -

Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le h1 sera mis en forme comme prévu.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni h1 ni les éléments de classe .special ne seront mis en forme.

- -
h1, ..special {
-  color: blue;
-}
- -

Types de sélecteurs

- -

On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.

- -

Sélecteurs de type, de classe, et d'ID

- -

Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <h1> :

- -
h1 { }
- -

On trouve aussi les sélecteurs ciblant une classe :

- -
.box { }
- -

ou un ID :

- -
#unique { }
- -

Sélecteurs d'attribut

- -

Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :

- -
a[title] { }
- -

Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :

- -
a[href="https://example.com"] { }
- -

Pseudo-classes et pseudo-éléments

- -

Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe :hover sélectionne un élément seulement s'il est survolé par le pointeur de la souris :

- -
a:hover { }
- -

Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, ::first-line sélectionne la première ligne d'un texte contenu dans un élément (un <p> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <span> et qu'après coup on appliquait un style sur cet élément.

- -
p::first-line { }
- -

Combinateurs

- -

Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <article> grâce au combinateur enfant (>) :

- -
article > p { }
- -

À faire ensuite

- -

Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section Apprendre ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les sélecteurs de type, de classe, et d'ID.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Table de référence des sélecteurs

- -

Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurExempleTutoriel CSS
Sélecteur de typeh1 { }Sélecteurs de type
Sélecteur universel* { }The universal selector
Sélecteur de classe.box { }Class selectors
Sélecteur d'ID#unique { }ID selectors
Sélecteur d'attributa[title] { }Attribute selectors
Pseudo-class selectorsp:first-child { }Pseudo-classes
Pseudo-element selectorsp::first-line { }Pseudo-elements
Sélecteur descendantarticle pDescendant combinator
Sélecteur enfantarticle > pChild combinator
Sélecteur de frère adjacenth1 + pAdjacent sibling
Sélecteur de frère généralh1 ~ pGeneral sibling
- -

Dans ce module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    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/fr/learn/css/building_blocks/selectors/index.md b/files/fr/learn/css/building_blocks/selectors/index.md new file mode 100644 index 0000000000..ece86d8018 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/index.md @@ -0,0 +1,224 @@ +--- +title: Sélecteurs CSS +slug: Learn/CSS/Building_blocks/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +original_slug: Apprendre/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")}}
+ +

Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
+ +

Qu'est-ce qu'un sélecteur ?

+ +

Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

+ +

Du code où h1 est surligné.

+ +

Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments h1, ou la classe .special.

+ +

En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la spécification de niveau 3 pour les sélecteurs, une spécification mature, aussi la prise en charge par les navigateurs est excellente.

+ +

Listes de sélecteurs

+ +

Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un h1 et pour une classe .special, je pourrais écrire deux règles :

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :

+ +
h1, .special {
+  color: blue;
+}
+ +

L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}

+ +

Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.

+ +

Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le h1 sera mis en forme comme prévu.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni h1 ni les éléments de classe .special ne seront mis en forme.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Types de sélecteurs

+ +

On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.

+ +

Sélecteurs de type, de classe, et d'ID

+ +

Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <h1> :

+ +
h1 { }
+ +

On trouve aussi les sélecteurs ciblant une classe :

+ +
.box { }
+ +

ou un ID :

+ +
#unique { }
+ +

Sélecteurs d'attribut

+ +

Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :

+ +
a[title] { }
+ +

Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classes et pseudo-éléments

+ +

Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe :hover sélectionne un élément seulement s'il est survolé par le pointeur de la souris :

+ +
a:hover { }
+ +

Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, ::first-line sélectionne la première ligne d'un texte contenu dans un élément (un <p> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <span> et qu'après coup on appliquait un style sur cet élément.

+ +
p::first-line { }
+ +

Combinateurs

+ +

Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <article> grâce au combinateur enfant (>) :

+ +
article > p { }
+ +

À faire ensuite

+ +

Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section Apprendre ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les sélecteurs de type, de classe, et d'ID.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Table de référence des sélecteurs

+ +

Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleTutoriel CSS
Sélecteur de typeh1 { }Sélecteurs de type
Sélecteur universel* { }The universal selector
Sélecteur de classe.box { }Class selectors
Sélecteur d'ID#unique { }ID selectors
Sélecteur d'attributa[title] { }Attribute selectors
Pseudo-class selectorsp:first-child { }Pseudo-classes
Pseudo-element selectorsp::first-line { }Pseudo-elements
Sélecteur descendantarticle pDescendant combinator
Sélecteur enfantarticle > pChild combinator
Sélecteur de frère adjacenth1 + pAdjacent sibling
Sélecteur de frère généralh1 ~ pGeneral sibling
+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    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/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html deleted file mode 100644 index 8e89104fdd..0000000000 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ /dev/null @@ -1,400 +0,0 @@ ---- -title: Pseudo-classes et pseudo-éléments -slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -tags: - - Apprendre - - CSS - - Débutant - - Pseudo - - Pseudo-class - - Pseudo-element - - Sélecteurs -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments ---- -

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

- -

Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.
- -

Qu'est ce qu'une pseudo-classe ?

- -

Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.

- -

Les pseudo-classes sont signalées par un mot clé commençant par deux points :

- -
:pseudo-class-name
- -

Exemple d'une pseudo-classe élémentaire 

- -

Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible dans tous les cas le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)

- -

{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :

- - - -

Pseudo-classes d'action utilisateur

- -

Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :

- -

:hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
- :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Qu'est ce qu'un pseudo-élément ?

- -

Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points ::.

- -
::pseudo-element-name
- -
-

Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.

-
- -

Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.

- -

Le pseudo-sélecteur d'éléments ::first-line  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Il agit comme si un <span> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.

- -

Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.

- -

Combiner pseudo-classes et pseudo-éléments

- -

Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child et ::first-line Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <p>, qui se trouve à l'intérieur d'un élément <article>

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Générer du contenu avec ::before et ::after

- -

Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

- -

Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément ::before en  ::after et voir le texte inséré à la fin de l'élément au lieu du début.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.

- -

Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.

- -

Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément ::before pseudo-element. Nous l'avons défini en display: block afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

L'utilisation des pseudo-éléments ::before et ::after avec la propriété content est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site CSS Arrow Please, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.

- -

Section de référence

- -

Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.

- -

Pseudo-classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurDescription
{{ Cssxref(":active") }}Matches when the user activates (for example clicks on) an element.
{{ Cssxref(":any-link") }}Matches both the :link and :visited states of a link.
{{ Cssxref(":blank") }}Matches an <input> element whose input value is empty.
{{ Cssxref(":checked") }}Matches a radio button or checkbox in the selected state.
{{ Cssxref(":current") }}Matches the element, or an ancestor of the element, that is currently being displayed.
{{ Cssxref(":default") }}Matches the one or more UI elements that are the default among a set of similar elements.
{{ Cssxref(":dir") }}Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
{{ Cssxref(":disabled") }}Matches user interface elements that are in an disabled state.
{{ Cssxref(":empty") }}Matches an element that has no children except optionally white space.
{{ Cssxref(":enabled") }}Matches user interface elements that are in an enabled state.
{{ Cssxref(":first") }}In Paged Media, matches the first page.
{{ Cssxref(":first-child") }}Matches an element that is first among its siblings.
{{ Cssxref(":first-of-type") }}Matches an element which is first of a certain type among its siblings.
{{ Cssxref(":focus") }}Matches when an element has focus.
{{ Cssxref(":focus-visible")}}Matches when an element has focus and the focus should be visible to the user.
{{ Cssxref(":focus-within") }}Matches an element with focus plus an element with a descendent that has focus.
{{ Cssxref(":future") }}Matches the elements after the current element.
{{ Cssxref(":hover") }}Matches when the user hovers over an element.
{{ Cssxref(":indeterminate") }}Matches UI elements whose value is in an indeterminate state, usually checkboxes.
{{ Cssxref(":in-range") }}Matches an element with a range when its value is in-range.
{{ Cssxref(":invalid") }}Matches an element, such as an <input>, in an invalid state.
{{ Cssxref(":lang") }}Matches an element based on language (value of the HTML lang attribute).
{{ Cssxref(":last-child") }}Matches an element which is last among its siblings.
{{ Cssxref(":last-of-type") }}Matches an element of a certain type that is last among its siblings.
{{ Cssxref(":left") }}In Paged Media, matches left-hand pages.
{{ Cssxref(":link")}}Matches unvisited links.
{{ Cssxref(":local-link")}}Matches links pointing to pages that are in the same site as the current document.
{{ Cssxref(":is", ":is()")}}Matches any of the selectors in the selector list that is passed in.
{{ Cssxref(":not") }}Matches things not matched by selectors that are passed in as a value to this selector.
{{ Cssxref(":nth-child") }}Matches elements from a list of siblings — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements) — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-last-child") }}Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":nth-last-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements), counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":only-child") }}Matches an element that has no siblings.
{{ Cssxref(":only-of-type") }}Matches an element that is the only one of its type among its siblings.
{{ Cssxref(":optional") }}Matches form elements that are not required.
{{ Cssxref(":out-of-range") }}Matches an element with a range when its value is out of range.
{{ Cssxref(":past") }}Matches the elements before the current element.
{{ Cssxref(":placeholder-shown") }}Matches an input element that is showing placeholder text.
{{ Cssxref(":playing") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
{{ Cssxref(":paused") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.
{{ Cssxref(":read-only") }}Matches an element if it is not user-alterable.
{{ Cssxref(":read-write") }}Matches an element if it is user-alterable.
{{ Cssxref(":required") }}Matches form elements that are required.
{{ Cssxref(":right") }}In Paged Media, matches right-hand pages.
{{ Cssxref(":root") }}Matches an element that is the root of the document.
{{ Cssxref(":scope") }}Matches any element that is a scope element.
{{ Cssxref(":valid") }}Matches an element such as an <input> element, in a valid state.
{{ Cssxref(":target") }}Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current URL fragment).
{{ Cssxref(":visited") }}Matches visited links.
- -

Pseudo-éléments

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurDescription
{{ Cssxref("::after") }}Matches a stylable element appearing after the originating element's actual content.
{{ Cssxref("::before") }}Matches a stylable element appearing before the originating element's actual content.
{{ Cssxref("::first-letter") }}Matches the first letter of the element.
{{ Cssxref("::first-line") }}Matches the first line of the containing element.
{{ Cssxref("::grammar-error") }}Matches a portion of the document containing a grammar error as flagged by the browser.
{{ Cssxref("::selection") }}Matches the portion of the document that has been selected.
{{ Cssxref("::spelling-error") }}Matches a portion of the document containing a spelling error as flagged by the browser.
- -

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

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    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/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md new file mode 100644 index 0000000000..8e89104fdd --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -0,0 +1,400 @@ +--- +title: Pseudo-classes et pseudo-éléments +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +tags: + - Apprendre + - CSS + - Débutant + - Pseudo + - Pseudo-class + - Pseudo-element + - Sélecteurs +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments +--- +

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

+ +

Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.
+ +

Qu'est ce qu'une pseudo-classe ?

+ +

Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.

+ +

Les pseudo-classes sont signalées par un mot clé commençant par deux points :

+ +
:pseudo-class-name
+ +

Exemple d'une pseudo-classe élémentaire 

+ +

Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible dans tous les cas le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)

+ +

{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :

+ + + +

Pseudo-classes d'action utilisateur

+ +

Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :

+ +

:hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
+ :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Qu'est ce qu'un pseudo-élément ?

+ +

Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points ::.

+ +
::pseudo-element-name
+ +
+

Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.

+
+ +

Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.

+ +

Le pseudo-sélecteur d'éléments ::first-line  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Il agit comme si un <span> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.

+ +

Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.

+ +

Combiner pseudo-classes et pseudo-éléments

+ +

Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child et ::first-line Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <p>, qui se trouve à l'intérieur d'un élément <article>

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Générer du contenu avec ::before et ::after

+ +

Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

+ +

Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément ::before en  ::after et voir le texte inséré à la fin de l'élément au lieu du début.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.

+ +

Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.

+ +

Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément ::before pseudo-element. Nous l'avons défini en display: block afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

L'utilisation des pseudo-éléments ::before et ::after avec la propriété content est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site CSS Arrow Please, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.

+ +

Section de référence

+ +

Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.

+ +

Pseudo-classes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurDescription
{{ Cssxref(":active") }}Matches when the user activates (for example clicks on) an element.
{{ Cssxref(":any-link") }}Matches both the :link and :visited states of a link.
{{ Cssxref(":blank") }}Matches an <input> element whose input value is empty.
{{ Cssxref(":checked") }}Matches a radio button or checkbox in the selected state.
{{ Cssxref(":current") }}Matches the element, or an ancestor of the element, that is currently being displayed.
{{ Cssxref(":default") }}Matches the one or more UI elements that are the default among a set of similar elements.
{{ Cssxref(":dir") }}Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
{{ Cssxref(":disabled") }}Matches user interface elements that are in an disabled state.
{{ Cssxref(":empty") }}Matches an element that has no children except optionally white space.
{{ Cssxref(":enabled") }}Matches user interface elements that are in an enabled state.
{{ Cssxref(":first") }}In Paged Media, matches the first page.
{{ Cssxref(":first-child") }}Matches an element that is first among its siblings.
{{ Cssxref(":first-of-type") }}Matches an element which is first of a certain type among its siblings.
{{ Cssxref(":focus") }}Matches when an element has focus.
{{ Cssxref(":focus-visible")}}Matches when an element has focus and the focus should be visible to the user.
{{ Cssxref(":focus-within") }}Matches an element with focus plus an element with a descendent that has focus.
{{ Cssxref(":future") }}Matches the elements after the current element.
{{ Cssxref(":hover") }}Matches when the user hovers over an element.
{{ Cssxref(":indeterminate") }}Matches UI elements whose value is in an indeterminate state, usually checkboxes.
{{ Cssxref(":in-range") }}Matches an element with a range when its value is in-range.
{{ Cssxref(":invalid") }}Matches an element, such as an <input>, in an invalid state.
{{ Cssxref(":lang") }}Matches an element based on language (value of the HTML lang attribute).
{{ Cssxref(":last-child") }}Matches an element which is last among its siblings.
{{ Cssxref(":last-of-type") }}Matches an element of a certain type that is last among its siblings.
{{ Cssxref(":left") }}In Paged Media, matches left-hand pages.
{{ Cssxref(":link")}}Matches unvisited links.
{{ Cssxref(":local-link")}}Matches links pointing to pages that are in the same site as the current document.
{{ Cssxref(":is", ":is()")}}Matches any of the selectors in the selector list that is passed in.
{{ Cssxref(":not") }}Matches things not matched by selectors that are passed in as a value to this selector.
{{ Cssxref(":nth-child") }}Matches elements from a list of siblings — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements) — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-last-child") }}Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":nth-last-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements), counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":only-child") }}Matches an element that has no siblings.
{{ Cssxref(":only-of-type") }}Matches an element that is the only one of its type among its siblings.
{{ Cssxref(":optional") }}Matches form elements that are not required.
{{ Cssxref(":out-of-range") }}Matches an element with a range when its value is out of range.
{{ Cssxref(":past") }}Matches the elements before the current element.
{{ Cssxref(":placeholder-shown") }}Matches an input element that is showing placeholder text.
{{ Cssxref(":playing") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
{{ Cssxref(":paused") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.
{{ Cssxref(":read-only") }}Matches an element if it is not user-alterable.
{{ Cssxref(":read-write") }}Matches an element if it is user-alterable.
{{ Cssxref(":required") }}Matches form elements that are required.
{{ Cssxref(":right") }}In Paged Media, matches right-hand pages.
{{ Cssxref(":root") }}Matches an element that is the root of the document.
{{ Cssxref(":scope") }}Matches any element that is a scope element.
{{ Cssxref(":valid") }}Matches an element such as an <input> element, in a valid state.
{{ Cssxref(":target") }}Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current URL fragment).
{{ Cssxref(":visited") }}Matches visited links.
+ +

Pseudo-éléments

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurDescription
{{ Cssxref("::after") }}Matches a stylable element appearing after the originating element's actual content.
{{ Cssxref("::before") }}Matches a stylable element appearing before the originating element's actual content.
{{ Cssxref("::first-letter") }}Matches the first letter of the element.
{{ Cssxref("::first-line") }}Matches the first line of the containing element.
{{ Cssxref("::grammar-error") }}Matches a portion of the document containing a grammar error as flagged by the browser.
{{ Cssxref("::selection") }}Matches the portion of the document that has been selected.
{{ Cssxref("::spelling-error") }}Matches a portion of the document containing a spelling error as flagged by the browser.
+ +

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

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    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/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html deleted file mode 100644 index 376bfcb1cd..0000000000 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Sélecteurs de type, de classe et d'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: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID ---- -

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

- -

Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
- -

Sélecteur de type

- -

Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <span>, <em> et <strong> est ainsi mise en forme.

- -

Essayez d'ajouter une règle CSS pour sélectionner l'élément <h1> et changer sa couleur en bleu.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

Le sélecteur universel

- -

Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.

- -

Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

- -

On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

- -
article :first-child {
-
-}
- -

On peut néanmoins confondre ce sélecteur avec article:first-child ciblant les éléments <article>  qui sont le premier descendant d'un élément.

- -

Pour éviter cette confusion, on peut ajouter le sélecteur universel * à  :first-child,  le fonctionnement de ce dernier sera plus clair : il cible tout élément premier descendant d'un élément <article> :

- -
article *:first-child {
-
-}
- -

Sélecteurs de classe

- -

Le sélecteur de classe commence par un point  . et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée .highlight et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Cibler des classes d'un élément donné

- -

On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe highlight met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.

- -

Cibler un élément appartenant à plus d'une classe

- -

Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.

- -

L'exemple ci-dessous présente trois <div> contenant chacun une note. Si la boîte est dans la classe  notebox elle a une bordure grise. Si de plus elle est dans la classe warning ou danger, on change la {{cssxref("border-color")}}.

- -

On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Sélecteurs d'ID

- -

Un sélecteur d'ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'id associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Note : Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.

-
- -

Prochain article

- -

Notre exploration des sélecteurs se poursuit par l'étude des sélecteurs d'attributs.

- -

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

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    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/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md new file mode 100644 index 0000000000..376bfcb1cd --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -0,0 +1,118 @@ +--- +title: Sélecteurs de type, de classe et d'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: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID +--- +

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

+ +

Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
+ +

Sélecteur de type

+ +

Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <span>, <em> et <strong> est ainsi mise en forme.

+ +

Essayez d'ajouter une règle CSS pour sélectionner l'élément <h1> et changer sa couleur en bleu.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

Le sélecteur universel

+ +

Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.

+ +

Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

+ +

On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

+ +
article :first-child {
+
+}
+ +

On peut néanmoins confondre ce sélecteur avec article:first-child ciblant les éléments <article>  qui sont le premier descendant d'un élément.

+ +

Pour éviter cette confusion, on peut ajouter le sélecteur universel * à  :first-child,  le fonctionnement de ce dernier sera plus clair : il cible tout élément premier descendant d'un élément <article> :

+ +
article *:first-child {
+
+}
+ +

Sélecteurs de classe

+ +

Le sélecteur de classe commence par un point  . et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée .highlight et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Cibler des classes d'un élément donné

+ +

On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe highlight met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.

+ +

Cibler un élément appartenant à plus d'une classe

+ +

Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.

+ +

L'exemple ci-dessous présente trois <div> contenant chacun une note. Si la boîte est dans la classe  notebox elle a une bordure grise. Si de plus elle est dans la classe warning ou danger, on change la {{cssxref("border-color")}}.

+ +

On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Sélecteurs d'ID

+ +

Un sélecteur d'ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'id associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Note : Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.

+
+ +

Prochain article

+ +

Notre exploration des sélecteurs se poursuit par l'étude des sélecteurs d'attributs.

+ +

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

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    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/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html deleted file mode 100644 index 74258dbe1b..0000000000 --- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Définir la taille des éléments en CSS -slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS -original_slug: Apprendre/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")}}
- -
Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.
- - - - - - - - - - - - -
Prérequis : -

Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.

-
Objectif :Découvrir comment spécifier la taille des éléments en CSS.
- -

La taille naturelle ou intrinsèque des choses

- -

Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une taille intrinsèque — qui provient de l'image elle-même.

- -

Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <img> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

- -

Un élément <div> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <div> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

- -

Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <div> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.

- -

Spécifier une taille

- -

Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de taille extrinsèque. Reprenons notre <div> de l'exemple précédent — nous pouvons lui donner une width spécifique et une height spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans notre précédente leçon sur le concept d'overflow, une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

- -

Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.

- -

Avec les pourcentages

- -

De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans la leçon sur les valeurs et unités en CSS, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

- -

En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <div> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <div> aurait normalement occupé dans l'élément parent.

- -

Marges et remplissage en pourcentages

- -

Si vous définissez les margins (marges extérieures) et les paddings (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété margin à 10% et la propriété padding à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

- -

On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !

- -

Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la taille en ligne — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.

- -

Tailles min- et max-

- -

En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait au moins une certaine hauteur, vous pourriez lui attribuer la propriété min-height. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.

- -

Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

- -

C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.

- -

Une utilisation courante de max-width consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.

- -

À titre d'exemple, si vous définissiez width: 100% sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.

- -

Si vous utilisez plutôt max-width : 100%, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.

- -

Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le width: 100% et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du max-width : 100% et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec max-width : 100% défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

- -

Cette technique est utilisée pour rendre les images responsive, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.

- -
-

Note : En savoir plus sur les techniques d'images responsives.

-
- -

Unités de la fenêtre d'affichage

- -

La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — vw pour viewport width (largeur de la fenêtre), et vh pour viewport height (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.

- -

1vh correspond à 1% de la hauteur de la fenêtre, 1vw à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre A, de font-size 10vh.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

- -

Si vous changez les valeurs vh et vw, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <iframe> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). Ouvrez l'exemple, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.

- -

Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.

- -

Testez vos compétences !

- -

Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir Tester vos compétences : Dimensionnement.

- -

Résumé

- -

Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez les dispositions en CSS, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrière-plans et bordures
    5. -
  5. Gestion de différentes directions de texte
    6. -
  6. Débordements de contenu
    7. -
  7. Valeurs et unités CSS
    8. -
  8. Définir la taille des éléments en CSS
    9. -
  9. Images, médias et éléments de formulaire
    10. -
  10. Mise en page de tableaux
    11. -
  11. Débogage de CSS
    12. -
  12. Organiser votre CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md new file mode 100644 index 0000000000..74258dbe1b --- /dev/null +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.md @@ -0,0 +1,136 @@ +--- +title: Définir la taille des éléments en CSS +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +original_slug: Apprendre/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")}}
+ +
Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.
+ + + + + + + + + + + + +
Prérequis : +

Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.

+
Objectif :Découvrir comment spécifier la taille des éléments en CSS.
+ +

La taille naturelle ou intrinsèque des choses

+ +

Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une taille intrinsèque — qui provient de l'image elle-même.

+ +

Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <img> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Un élément <div> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <div> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <div> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.

+ +

Spécifier une taille

+ +

Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de taille extrinsèque. Reprenons notre <div> de l'exemple précédent — nous pouvons lui donner une width spécifique et une height spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans notre précédente leçon sur le concept d'overflow, une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.

+ +

Avec les pourcentages

+ +

De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans la leçon sur les valeurs et unités en CSS, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <div> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <div> aurait normalement occupé dans l'élément parent.

+ +

Marges et remplissage en pourcentages

+ +

Si vous définissez les margins (marges extérieures) et les paddings (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété margin à 10% et la propriété padding à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !

+ +

Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la taille en ligne — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.

+ +

Tailles min- et max-

+ +

En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait au moins une certaine hauteur, vous pourriez lui attribuer la propriété min-height. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.

+ +

Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.

+ +

Une utilisation courante de max-width consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.

+ +

À titre d'exemple, si vous définissiez width: 100% sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.

+ +

Si vous utilisez plutôt max-width : 100%, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.

+ +

Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le width: 100% et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du max-width : 100% et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec max-width : 100% défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

Cette technique est utilisée pour rendre les images responsive, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.

+ +
+

Note : En savoir plus sur les techniques d'images responsives.

+
+ +

Unités de la fenêtre d'affichage

+ +

La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — vw pour viewport width (largeur de la fenêtre), et vh pour viewport height (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.

+ +

1vh correspond à 1% de la hauteur de la fenêtre, 1vw à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre A, de font-size 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

Si vous changez les valeurs vh et vw, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <iframe> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). Ouvrez l'exemple, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.

+ +

Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.

+ +

Testez vos compétences !

+ +

Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir Tester vos compétences : Dimensionnement.

+ +

Résumé

+ +

Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez les dispositions en CSS, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrière-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordements de contenu
    7. +
  7. Valeurs et unités CSS
    8. +
  8. Définir la taille des éléments en CSS
    9. +
  9. Images, médias et éléments de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage de CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 2543732c2a..0000000000 --- a/files/fr/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -title: Mise en page de tableaux -slug: Learn/CSS/Building_blocks/Styling_tables -tags: - - Article - - CSS - - Codage - - Débutant - - Guide - - HTML - - Style - - Tableaux -translation_of: Learn/CSS/Building_blocks/Styling_tables -original_slug: Apprendre/CSS/Building_blocks/Styling_tables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
- -

Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

- - - - - - - - - - - - -
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
- -

Un tableau HTML typique

- -

Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :

- -
<table>
-  <caption>Récapitulatif des groupes punk les plus célébres du RU</caption>
-  <thead>
-    <tr>
-      <th scope="col">Groupe</th>
-      <th scope="col">Année de formation</th>
-      <th scope="col">Nombre d'albums</th>
-      <th scope="col">Morceau le plus célèbre</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Buzzcocks</th>
-      <td>1976</td>
-      <td>9</td>
-      <td>Ever fallen in love (with someone you shouldn't've)</td>
-    </tr>
-    <tr>
-      <th scope="row">The Clash</th>
-      <td>1976</td>
-      <td>6</td>
-      <td>London Calling</td>
-    </tr>
-
-      ... quelques lignes supprimées pour condenser le texte
-
-    <tr>
-      <th scope="row">The Stranglers</th>
-      <td>1974</td>
-      <td>17</td>
-      <td>No More Heroes</td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <th scope="row" colspan="2">Total albums</th>
-      <td colspan="2">77</td>
-    </tr>
-  </tfoot>
-</table>
- -

Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

- -

Liste des groupes punk du Royaume Uni

- -

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

- -

Mettre en forme notre tableau

- -

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

- -
    -
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. -
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. -
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : - 
    <link href="style.css" rel="stylesheet" type="text/css">
    -
    4. -
- -

Espacement et disposition

- -

La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier style.css :

- -
/* espacement */
-
-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  border: 3px solid purple;
-}
-
-thead th:nth-child(1) {
-  width: 30%;
-}
-
-thead th:nth-child(2) {
-  width: 20%;
-}
-
-thead th:nth-child(3) {
-  width: 15%;
-}
-
-thead th:nth-child(4) {
-  width: 35%;
-}
-
-th, td {
-  padding: 20px;
-}
- -

Voici les choses les plus importantes à noter :

- -

Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.

- - - -

À ce stade, le tableau a déjà meilleure mine :

- -

Première mise en forme du tableau

- -

Simple typographie

- -

Maintenant, différencions un peu nos polices de caractère.

- -

Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.

- -

D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML head, juste au‑dessus de l'élément <link> déjà présent :

- -
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
- -

Puis ajoutons le CSS suivant dans le fichier style.css :

- -
/* typographie */
-
-html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
-}
-
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
-}
-
-th {
-  letter-spacing: 2px;
-}
-
-td {
-  letter-spacing: 1px;
-}
-
-tbody td {
-  text-align: center;
-}
-
-tfoot th {
-  text-align: right;
-}
- -

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

- - - -

Cela fait un peu plus propre :

- -

Deuxième mise en forme : modifications des polices de caractères.

- -

Graphisme et couleurs

- -

Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.

- -

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

- -
thead, tfoot {
-  background: url(leopardskin.jpg);
-  color: white;
-  text-shadow: 1px 1px 1px black;
-}
-
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
-  border: 3px solid purple;
-}
-
- -

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

- -

Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.

- -

Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.

- -

Zébrures

- -

Nous avons souhaité dédier un paragraphe séparé à la  mise en place de zèbrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style.css :

- -
tbody tr:nth-child(odd) {
-  background-color: #ff33cc;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #e495e4;
-}
-
-tbody tr {
-  background-image: url(noise.png);
-}
-
-table {
-  background-color: #ff33cc;
-}
- - - -

Et voici l'explosion de couleurs résultante :

- -

Troisième mise en forme : coloriage agressif

- -

Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

- -

Styliser l'intitulé

- -

Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style.css  :

- -
caption {
-  font-family: 'Rock Salt', cursive;
-  padding: 20px;
-  font-style: italic;
-  caption-side: bottom;
-  color: #666;
-  text-align: right;
-  letter-spacing: 1px;
-}
- -

Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

- -

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

- -

Apprentissage actif : mettez en page votre propre tableau

- -

Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.

- -

Quelques conseils rapides

- -

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

- - - -

Résumé

- -

Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md new file mode 100644 index 0000000000..2543732c2a --- /dev/null +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -0,0 +1,308 @@ +--- +title: Mise en page de tableaux +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - Article + - CSS + - Codage + - Débutant + - Guide + - HTML + - Style + - Tableaux +translation_of: Learn/CSS/Building_blocks/Styling_tables +original_slug: Apprendre/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

+ + + + + + + + + + + + +
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
+ +

Un tableau HTML typique

+ +

Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :

+ +
<table>
+  <caption>Récapitulatif des groupes punk les plus célébres du RU</caption>
+  <thead>
+    <tr>
+      <th scope="col">Groupe</th>
+      <th scope="col">Année de formation</th>
+      <th scope="col">Nombre d'albums</th>
+      <th scope="col">Morceau le plus célèbre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+      ... quelques lignes supprimées pour condenser le texte
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

+ +

Liste des groupes punk du Royaume Uni

+ +

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

+ +

Mettre en forme notre tableau

+ +

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

+ +
    +
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. +
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. +
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Espacement et disposition

+ +

La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier style.css :

+ +
/* espacement */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Voici les choses les plus importantes à noter :

+ +

Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.

+ + + +

À ce stade, le tableau a déjà meilleure mine :

+ +

Première mise en forme du tableau

+ +

Simple typographie

+ +

Maintenant, différencions un peu nos polices de caractère.

+ +

Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.

+ +

D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML head, juste au‑dessus de l'élément <link> déjà présent :

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Puis ajoutons le CSS suivant dans le fichier style.css :

+ +
/* typographie */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

+ + + +

Cela fait un peu plus propre :

+ +

Deuxième mise en forme : modifications des polices de caractères.

+ +

Graphisme et couleurs

+ +

Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.

+ +

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

+ +
thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

+ +

Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.

+ +

Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.

+ +

Zébrures

+ +

Nous avons souhaité dédier un paragraphe séparé à la  mise en place de zèbrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style.css :

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

Et voici l'explosion de couleurs résultante :

+ +

Troisième mise en forme : coloriage agressif

+ +

Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

+ +

Styliser l'intitulé

+ +

Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style.css  :

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

+ +

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

+ +

Apprentissage actif : mettez en page votre propre tableau

+ +

Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.

+ +

Quelques conseils rapides

+ +

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

+ + + +

Résumé

+ +

Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html deleted file mode 100644 index b099bc42fb..0000000000 --- a/files/fr/learn/css/building_blocks/the_box_model/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Le modèle de boîte -slug: Learn/CSS/Building_blocks/The_box_model -translation_of: Learn/CSS/Building_blocks/The_box_model -original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

En CSS, tout élément est inclus dans une boîte ("box" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.

- - - - - - - - - - - - -
Prérequis :Compétences informatique basiques, Logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS).
Objectif :Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.
- -

Les boîtes en ligne et boîte de bloc

- -

En CSS, il existe deux type de boîtes : les boîtes en bloc ("block boxes" en anglais) et les boîtes en ligne ("inline boxes" en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :

- -

Si une boîte est définie en bloc, elle suivra alors les règles suivantes :

- - - -

À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<h1>,<h2>, etc.) et les paragraphes (<p>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.

- -

Si une boîte est positionnée en ligne, alors :

- - - -

Les éléments <a>, utilisés pour les liens, ou encore <span>, <em> et <strong> sont tous des éléments qui s'affichent "en ligne" par défaut.

- -

Le type de boîte appliqué à un élément est défini par la valeur de la propriété display tel que block ou inline, et se réfère à la valeur extérieure de positionnement (ou "display" en anglais).

- -

Aparté : les positionnements intérieurs et extérieurs

- -

Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement intérieurs ("inner dipslay") et extérieurs ("outer display"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement extérieur qui détermine si la boîte est "en ligne" ou bien "en bloc".

- -

Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la disposition normale, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).

- -

Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur flex de la propriété display. Ainsi, si on donne la propriété display: flex; à un élément, son type de positionnement extérieur est "en bloc" (block), mais son type de positionnement intérieur est modifié en flex. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de Flexbox, dont on reparlera plus tard.

- -
-

Note : Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la Disposition en ligne et en bloc.

-
- -

Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que flex, ou encore grid.

- -

Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la disposition normale ("normal flow" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.

- -

Exemples de quelques types de positionnement

- -

Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (block). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.

- -

Le deuxième élément est une liste, qui est disposée selon la règle display: flex;. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.

- -

Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <span>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <span> une classe CSS nommée "block" qui lui attribue la propriété display: block;, ce qui explique la différence de mise en page observée.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}

- -

Nous avons dans cet exemple le comportement typique d'un élément en ligne (inline), observant chacune des règles énoncées plus haut : l'élément <span> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - en ligne donc - des autres éléments.

- -

Nous avons en suite un élément <ul> dont la propriété de positionnement est display: inline-flex;, ce qui fait du <ul> une boîte en ligne, contenant des éléments de liste (<li>) dipsosés en "flex".

- -

Pour finir, nous avons deux paragraphes, tous deux définis en display: inline;. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.

- -

Dans cet exemple, nous vous invitons à passer de display: inline; à display: block; ou encore de display: inline-flex; à display: flex; pour observer les modifications apportées par ces modes de positionnement.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

- -

Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété display qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.

- -

Pour le reste de la leçon, nous ne parlerons plus que du type de positionnement extérieur.

- -

Qu'est-ce que le modèle de boîte CSS ?

- -

Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la marge, la bordure, le padding (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.

- -

Les composants d'une boîte

- -

Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :

- - - -

Le schéma ci-dessous montre la structure de ces différentes couches:

- -

Diagramme du modèle de boîte

- -

Le modèle de boîte CSS standard

- -

Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (width) et de hauteur (height), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du padding et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans width et height pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.

- -

En prenant une boîte définie avec les valeurs suivantes de width, height, margin, border et padding :

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 10px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de padding et de border (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de width et de height.

- -

Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard.

- -
-

Note : La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.

-
- -

Le modèle de boîte CSS alternatif

- -

À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur totale de la boîte en comprenant le contenu, le padding et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du padding et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.

- -

Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif.

- -

Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété box-sizing: border-box; sur notre boîte. Cela revient à demander au navigateur de considérer la boîte de la bordure comme la zone d'effet de width et height, et non la boîte du contenu comme dans le modèle standard !

- -
.box {
-  box-sizing: border-box;
-}
- -

Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant box-sizing sur l'élément <html> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (inherit). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de l'article des Astuces CSS sur box-sizing.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

Note : Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !

-
- -

Manipuler les modèles de boîte

- -

Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe .box qui leur confère les mêmes valeurs pour les propriétés width, height, margin, border et padding. La seule différence est que la seconde boîte utilise le modèle alternatif.

- -

Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe .alternate) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

- -
-

Note : vous pouvez trouver une solution ici.

-
- -

Utiliser les outils de développement pour voir le modèle de boîte

- -

Les outils de développement de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !

- -

Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox

- -

Marges, remplissages (paddings), et bordures

- -

Nous avons déjà rencontré ensemble les propriétés margin, padding et border, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des raccourcis qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.

- -

Regardons de plus près ces nouvelles propriétés.

- -

Les marges

- -

La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.

- -

On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété margin, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :

- - - -

Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}

- -

La fusion des marges

- -

Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.

- -

Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un margin-bottom de 50 pixels. Le second paragraphe a un margin-top de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.

- -

Vous pouvez tester cette propriété par vous-même en modifiant la propriété margin-top du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété margin-bottom du premier paragraphe.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}

- -

Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée Maîtriser la fusion des marges. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.

- -

Les bordures

- -

La bordure se situe entre la marge et le remplissage (padding) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (width) et la hauteur (height) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.

- -

Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.

- -

Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété border.

- -

Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :

- - - -

Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :

- - - -

Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :

- - - -

Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}

- -

Le padding (remplissage)

- -

Le padding (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.

- -

On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété padding, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :

- - - -

Si vous modifiez les valeurs du padding sur la classe .box de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.

- -

Tentez aussi de modifier la valeur du padding dans la classe .container, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}

- -

Le modèle de boîte et la disposition en ligne

- -

Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <span> par exemple ?

- -

Dans l'exemple ci-après, nous avons un élément <span> inclus dans un paragraphe auquel on a défini les propriétés width, height, margin, border et padding. Vous pouvez alors observer que les paramètres width et height sont totalement ignorés. Les propriétés de margin, padding et border sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}

- -

le positionnement display: inline-block

- -

Il existe une valeur spéciale pour la propriété display, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés width et height, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).

- -

C'est la solution apportée par la disposition display: inline-block; qui emprunte des règles des deux dispositions pour satisfaire ces motivations :

- - - -

Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés width et height le définissent ainsi.

- -

Dans cet exemple, nous avons ajouté la propriété display: inline-block; à notre élément <span>. Changez donc la valeur en display: block; ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}

- -

Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le padding. l'élément <a> est par défaut "en ligne", comme un <span>, mais vous pouvez alors utiliser display: inline-block; pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.

- -

Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux liens <a> pour pouvoir modifier la couleur de fond (background-color) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <ul>. Ceci est dû au fait que <a> est un élément en ligne.

- -

Ajoutez la propriété display: inline-block; en utilisant le sélecteur .links-list a pour voir le respect du padding régler ce problème.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}

- -

Résumé

- -

À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !

- -

Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.

- -

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

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrières-plans et bordures
    5. -
  5. Gérer la directionnalité du texte
    6. -
  6. Le dépassement du contenu
    7. -
  7. Valeurs et unités
    8. -
  8. Dimensionnement des objets en CSS
    9. -
  9. Images, médias, et formulaires
    10. -
  10. Mettre en forme les tableaux
    11. -
  11. Déboguer CSS
    12. -
  12. Organiser son code CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.md b/files/fr/learn/css/building_blocks/the_box_model/index.md new file mode 100644 index 0000000000..b099bc42fb --- /dev/null +++ b/files/fr/learn/css/building_blocks/the_box_model/index.md @@ -0,0 +1,340 @@ +--- +title: Le modèle de boîte +slug: Learn/CSS/Building_blocks/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

En CSS, tout élément est inclus dans une boîte ("box" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.

+ + + + + + + + + + + + +
Prérequis :Compétences informatique basiques, Logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS).
Objectif :Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.
+ +

Les boîtes en ligne et boîte de bloc

+ +

En CSS, il existe deux type de boîtes : les boîtes en bloc ("block boxes" en anglais) et les boîtes en ligne ("inline boxes" en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :

+ +

Si une boîte est définie en bloc, elle suivra alors les règles suivantes :

+ + + +

À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<h1>,<h2>, etc.) et les paragraphes (<p>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.

+ +

Si une boîte est positionnée en ligne, alors :

+ + + +

Les éléments <a>, utilisés pour les liens, ou encore <span>, <em> et <strong> sont tous des éléments qui s'affichent "en ligne" par défaut.

+ +

Le type de boîte appliqué à un élément est défini par la valeur de la propriété display tel que block ou inline, et se réfère à la valeur extérieure de positionnement (ou "display" en anglais).

+ +

Aparté : les positionnements intérieurs et extérieurs

+ +

Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement intérieurs ("inner dipslay") et extérieurs ("outer display"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement extérieur qui détermine si la boîte est "en ligne" ou bien "en bloc".

+ +

Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la disposition normale, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).

+ +

Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur flex de la propriété display. Ainsi, si on donne la propriété display: flex; à un élément, son type de positionnement extérieur est "en bloc" (block), mais son type de positionnement intérieur est modifié en flex. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de Flexbox, dont on reparlera plus tard.

+ +
+

Note : Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la Disposition en ligne et en bloc.

+
+ +

Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que flex, ou encore grid.

+ +

Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la disposition normale ("normal flow" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.

+ +

Exemples de quelques types de positionnement

+ +

Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (block). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.

+ +

Le deuxième élément est une liste, qui est disposée selon la règle display: flex;. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.

+ +

Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <span>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <span> une classe CSS nommée "block" qui lui attribue la propriété display: block;, ce qui explique la différence de mise en page observée.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}

+ +

Nous avons dans cet exemple le comportement typique d'un élément en ligne (inline), observant chacune des règles énoncées plus haut : l'élément <span> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - en ligne donc - des autres éléments.

+ +

Nous avons en suite un élément <ul> dont la propriété de positionnement est display: inline-flex;, ce qui fait du <ul> une boîte en ligne, contenant des éléments de liste (<li>) dipsosés en "flex".

+ +

Pour finir, nous avons deux paragraphes, tous deux définis en display: inline;. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.

+ +

Dans cet exemple, nous vous invitons à passer de display: inline; à display: block; ou encore de display: inline-flex; à display: flex; pour observer les modifications apportées par ces modes de positionnement.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

+ +

Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété display qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.

+ +

Pour le reste de la leçon, nous ne parlerons plus que du type de positionnement extérieur.

+ +

Qu'est-ce que le modèle de boîte CSS ?

+ +

Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la marge, la bordure, le padding (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.

+ +

Les composants d'une boîte

+ +

Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :

+ + + +

Le schéma ci-dessous montre la structure de ces différentes couches:

+ +

Diagramme du modèle de boîte

+ +

Le modèle de boîte CSS standard

+ +

Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (width) et de hauteur (height), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du padding et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans width et height pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.

+ +

En prenant une boîte définie avec les valeurs suivantes de width, height, margin, border et padding :

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de padding et de border (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de width et de height.

+ +

Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard.

+ +
+

Note : La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.

+
+ +

Le modèle de boîte CSS alternatif

+ +

À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur totale de la boîte en comprenant le contenu, le padding et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du padding et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.

+ +

Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif.

+ +

Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété box-sizing: border-box; sur notre boîte. Cela revient à demander au navigateur de considérer la boîte de la bordure comme la zone d'effet de width et height, et non la boîte du contenu comme dans le modèle standard !

+ +
.box {
+  box-sizing: border-box;
+}
+ +

Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant box-sizing sur l'élément <html> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (inherit). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de l'article des Astuces CSS sur box-sizing.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

Note : Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !

+
+ +

Manipuler les modèles de boîte

+ +

Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe .box qui leur confère les mêmes valeurs pour les propriétés width, height, margin, border et padding. La seule différence est que la seconde boîte utilise le modèle alternatif.

+ +

Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe .alternate) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

+ +
+

Note : vous pouvez trouver une solution ici.

+
+ +

Utiliser les outils de développement pour voir le modèle de boîte

+ +

Les outils de développement de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !

+ +

Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox

+ +

Marges, remplissages (paddings), et bordures

+ +

Nous avons déjà rencontré ensemble les propriétés margin, padding et border, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des raccourcis qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.

+ +

Regardons de plus près ces nouvelles propriétés.

+ +

Les marges

+ +

La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.

+ +

On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété margin, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :

+ + + +

Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}

+ +

La fusion des marges

+ +

Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.

+ +

Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un margin-bottom de 50 pixels. Le second paragraphe a un margin-top de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.

+ +

Vous pouvez tester cette propriété par vous-même en modifiant la propriété margin-top du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété margin-bottom du premier paragraphe.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}

+ +

Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée Maîtriser la fusion des marges. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.

+ +

Les bordures

+ +

La bordure se situe entre la marge et le remplissage (padding) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (width) et la hauteur (height) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.

+ +

Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.

+ +

Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété border.

+ +

Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :

+ + + +

Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :

+ + + +

Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :

+ + + +

Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}

+ +

Le padding (remplissage)

+ +

Le padding (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.

+ +

On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété padding, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :

+ + + +

Si vous modifiez les valeurs du padding sur la classe .box de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.

+ +

Tentez aussi de modifier la valeur du padding dans la classe .container, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}

+ +

Le modèle de boîte et la disposition en ligne

+ +

Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <span> par exemple ?

+ +

Dans l'exemple ci-après, nous avons un élément <span> inclus dans un paragraphe auquel on a défini les propriétés width, height, margin, border et padding. Vous pouvez alors observer que les paramètres width et height sont totalement ignorés. Les propriétés de margin, padding et border sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}

+ +

le positionnement display: inline-block

+ +

Il existe une valeur spéciale pour la propriété display, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés width et height, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).

+ +

C'est la solution apportée par la disposition display: inline-block; qui emprunte des règles des deux dispositions pour satisfaire ces motivations :

+ + + +

Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés width et height le définissent ainsi.

+ +

Dans cet exemple, nous avons ajouté la propriété display: inline-block; à notre élément <span>. Changez donc la valeur en display: block; ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}

+ +

Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le padding. l'élément <a> est par défaut "en ligne", comme un <span>, mais vous pouvez alors utiliser display: inline-block; pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.

+ +

Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux liens <a> pour pouvoir modifier la couleur de fond (background-color) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <ul>. Ceci est dû au fait que <a> est un élément en ligne.

+ +

Ajoutez la propriété display: inline-block; en utilisant le sélecteur .links-list a pour voir le respect du padding régler ce problème.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}

+ +

Résumé

+ +

À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !

+ +

Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.

+ +

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

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrières-plans et bordures
    5. +
  5. Gérer la directionnalité du texte
    6. +
  6. Le dépassement du contenu
    7. +
  7. Valeurs et unités
    8. +
  8. Dimensionnement des objets en CSS
    9. +
  9. Images, médias, et formulaires
    10. +
  10. Mettre en forme les tableaux
    11. +
  11. Déboguer CSS
    12. +
  12. Organiser son code CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 7542b9e2e5..0000000000 --- a/files/fr/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Valeurs et unités CSS -slug: Learn/CSS/Building_blocks/Values_and_units -translation_of: Learn/CSS/Building_blocks/Values_and_units -original_slug: Apprendre/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")}}
- -

Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.
- -

Qu'est-ce qu'une valeur CSS ?

- -

Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <color> ou <length>. Quand vous voyez le type de valeur <color>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <color>.

- -
-

Note : Vous verrez également des valeurs CSS appelées types de données. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

-
- -
-

Note : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété color, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.

-
- -

Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction rgb() :

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <color> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions rgb(), etc. Vous pouvez utiliser n'importe quelle valeur <color> disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <color>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.

- -

Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.

- - -

Nombres, longueurs et pourcentages

- -

Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de donnéeDescription
<integer>Une valeur de type <integer> est un nombre entier comme 1024 ou -55.
<number>Une valeur de type <number> représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : 0.255, 128, ou -1.2.
<dimension>Une valeur de type <dimension> est une valeur de type <number> à laquelle est attachée une unité. Par exemple : 45deg, 5s, ou 10px. <dimension> est une catégorie de type qui inclut les types <length>, <angle>, <time>, et <resolution>.
<percentage>Une valeur de type <percentage> représente une fraction relative à une autre valeur. Par exemple : 50%. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent.
- -

Longueurs

- -

Le type numérique que vous rencontrerez le plus souvent est le type <length>. Par exemple : 10px (pixels) ou 30em. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.

- -

Unités de longueur absolue

- -

La liste qui suit contient uniquement des unités de longueur absolue. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitéNomÉquivalent à
cmCentimètres1cm = 38px = 25/64in
mmMillimètres1mm = 1/10th of 1cm
QQuarts de millimètre1Q = 1/40th of 1cm
inPouces (inches)1in = 2.54cm = 96px
pcPicas1pc = 1/6e de 1in
ptPoints1pt = 1/72e de 1in
pxPixels1px = 1/96th de 1in
- -

La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas cm (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est px (pixels).

- -

Unités de longueur relative

- -

Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (viewport). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitéRelative à
emPour les propriétés typographiques comme font-size, relative à la taille de la police de l'élément parent. Pour les autres propriétés comme width, relative à la taille de la police de l'élément;
exLa hauteur d'x de la police de l'élément.
chLa chasse/avance du glyphe « 0 » pour la police de l'élément.
remLa taille de la police pour l'élément racine.
lhLa hauteur de ligne pour l'élément.
vw1% de la largeur du viewport (la zone d'affichage).
vh1% de la hauteur du viewport (la zone d'affichage).
vmin1% de la plus petite dimension du viewport (la zone d'affichage).
vmax1% de la plus grande dimension du viewport (la zone d'affichage).
- -

Exploration d'un exemple

- -

Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété width définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements.

- -

La deuxième boîte a sa largeur définie avec l'unité vw (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du viewport. Ainsi, 10vw correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément <iframe>, cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre.

- -

La troisième boîte utilise les unités em. Ces unités sont relatives à la taille de la police. On a défini une taille de police de 1em sur l'élément <div> englobant et qui a la classe .wrapper. Passez cette valeur à 1.5em et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police.

- -

Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

ems et rems

- -

em et rem sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme la mise en forme du texte ou les dispositions CSS. L'exemple qui suit fournit une démonstration.

- -

Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe ems et que le second utilise une classe rems.

- -

Pour commencer, on définit la taille de la police à 16px sur l'élément <html>.

- -

Pour récapituler, l'unité em signifie « la taille de police de l'élément parent » pour ce qui concerne la typographie. Les éléments <li> à l'intérieur de <ul> et qui ont un attribut class avec ems prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de 1.3em soit 1,3 fois plus grand que la taille de police pour l'élément parent.

- -

Pour récapituler, l'unité rem signifie « la taille de police de l'élément racine » (rem est l'acronyme anglais de « root em » qu'on pourrait traduire par « em racine ».) Les éléments <li> à l'intérieur de <ul> et qui ont un attribut class avec rems prendront leur taille à partir de l'élément racine (<html>). Cela signifie que les niveaux successifs ne gagneront pas en largeur.

- -

Toutefois, si vous modifier la taille de la police avec font-size pour <html> dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent rem que celles qui utilisent em.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}}

- -

Pourcentages

- -

Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété font-size d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de font-size de l'élément parent. Si vous utilisez un pourcentage pour width, la valeur obtenue sera le pourcentage de la valeur de width pour l'élément parent.

- -

Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px.

- -

La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre !

- -

Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}}

- -

Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément <li> a font-size avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}}

- -

On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type <length-percentage>, on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que <length>, il n'est pas possible d'utiliser un pourcentage.

- -

Nombres

- -

Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, opacity qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre 0 (transparence complète) et 1 (complètement opaque).

- -

Dans l'exemple qui suit, essayez de modifier la valeur de la propriété opacity en utilisant différentes valeurs décimales entre 0 et 1 afin de voir comment la boîte et son contenu changent en opacité.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}}

- -
-

Note : Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.

-
- -

Couleur

- -

Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur.

- -

Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.

- -
-

Note : Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.

-
- -

Mots-clés pour les couleurs

- -

Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur <color>.

- -

Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.

- -

Valeurs RGB hexadécimales

- -

Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : 0123456789abcdef). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.

- -

Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}}

- -

Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.

- -

Les valeurs RGB et RGBA

- -

La troisième façon que nous aborderons ici est RGB (pour « Red, Green, Blue » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction rgb() à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.

- -

Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB :

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}}

- -

Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de 0 pour le canal alpha, la couleur sera complètement transparente tandis qu'avec 1, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.

- -
-

Note : Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété opacity dont nous avons parlé auparavant. Lorsqu'on utilise opacity, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.

-
- -

Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.

- -
-

Note : Avec la spécification CSS Colors Level 4, rgba() est un alias pour rgb() et hsla() est un alias pour hsl() (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions rgba() à des fonctions rgb() pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.

-
- -

Valeurs HSL et HSLA

- -

Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction hsl() prend des paramètres pour la teinte (hue en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment :

- - - -

On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}

- -

À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}}

- -

Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet !

- -

Images

- -

Le type de valeur <image> est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction url() qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé.

- -

Voici un exemple où on utilise une image et un dégradé pour la propriété CSS background-image.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}}

- -
-

Note : il existe d'autres valeurs possibles pour le type <image>, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données <image> si vous voulez en savoir plus.

-
- -

Position

- -

Le type de valeur <position> représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via background-position). Ces valeurs peuvent être indiquées avec des mots-clés comme top, left, bottom, right, et center afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte.

- -

Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera center par défaut.

- -

Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}}

- -

Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.

- -

Chaînes de caractères et identifiants

- -

Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple <color> qui peut utiliser des mots-clés comme red, black, rebeccapurple, et goldenrod). Si on veut être plus précis, on dira que ces mots-clés sont des identifiants, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères.

- -

À d'autres endroits en CSS, on utilise des chaînes de caractères, comme lorsqu'on définit du contenu généré. Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}}

- -

Functions

- -

Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : rgb(), hsl(), etc. La valeur utilisée pour récupérer une image à partir d'un fichier, url() est également une fonction.

- -

Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS calc(). Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution.

- -

Dans le prochain exemple, on utilise calc() afin que la boîte soit large de 20% + 100px. Les 20% sont calculés à partir de la largeur du conteneur parent : .wrapper et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise calc() pour indiquer au navigateur de réaliser ce calcul.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Testez vos compétences !

- -

Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur Testez vos compétences : valeurs et unités CSS.

- -

Résumé

- -

Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur la page de référence MDN sur les valeurs et unités CSS. Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons.

- -

La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN.

- -

Par exemple, comprendre le type <image> vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de boîte
    4. -
  4. Arrière-plans et bordures
    5. -
  5. Gestion de différentes directions de texte
    6. -
  6. Débordements de contenu
    7. -
  7. Valeurs et unités CSS
    8. -
  8. Définir la taille des éléments en CSS
    9. -
  9. Images, médias et éléments de formulaire
    10. -
  10. Mise en page de tableaux
    11. -
  11. Débogage de CSS
    12. -
  12. Organiser votre CSS
    13. -
diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.md b/files/fr/learn/css/building_blocks/values_and_units/index.md new file mode 100644 index 0000000000..7542b9e2e5 --- /dev/null +++ b/files/fr/learn/css/building_blocks/values_and_units/index.md @@ -0,0 +1,394 @@ +--- +title: Valeurs et unités CSS +slug: Learn/CSS/Building_blocks/Values_and_units +translation_of: Learn/CSS/Building_blocks/Values_and_units +original_slug: Apprendre/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")}}
+ +

Chaque propriété utilisée en CSS possède un type de valeur qui définit l'ensemble des valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon, nous allons observer quelques-uns des types de valeur les plus fréquemment utilisés, ainsi que leurs valeurs et unités les plus communes.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.
+ +

Qu'est-ce qu'une valeur CSS ?

+ +

Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que <color> ou <length>. Quand vous voyez le type de valeur <color>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <color>.

+ +
+

Note : Vous verrez également des valeurs CSS appelées types de données. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

+
+ +
+

Note : Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété color, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.

+
+ +

Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction rgb() :

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un type de valeur en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <color> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser — mot-clés, valeurs hex, fonctions rgb(), etc. Vous pouvez utiliser n'importe quelle valeur <color> disponible, en supposant qu'elle soit supportée par votre navigateur. La page MDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <color>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.

+ +

Observons quelques-uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.

+ + +

Nombres, longueurs et pourcentages

+ +

Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. Les types qui suivent sont classés comme numériques :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de donnéeDescription
<integer>Une valeur de type <integer> est un nombre entier comme 1024 ou -55.
<number>Une valeur de type <number> représente un nombre décimal (qui peut avoir ou ne pas avoir de partie décimale). Par exemple : 0.255, 128, ou -1.2.
<dimension>Une valeur de type <dimension> est une valeur de type <number> à laquelle est attachée une unité. Par exemple : 45deg, 5s, ou 10px. <dimension> est une catégorie de type qui inclut les types <length>, <angle>, <time>, et <resolution>.
<percentage>Une valeur de type <percentage> représente une fraction relative à une autre valeur. Par exemple : 50%. Les valeurs de pourcentages sont toujours relatives à une autre quantité. Ainsi, la longueur d'un élément pourra être relative à la longueur de son élément parent.
+ +

Longueurs

+ +

Le type numérique que vous rencontrerez le plus souvent est le type <length>. Par exemple : 10px (pixels) ou 30em. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront.

+ +

Unités de longueur absolue

+ +

La liste qui suit contient uniquement des unités de longueur absolue. Ces quantités ne sont pas relatives à quoi que ce soit d'autre et leur taille sera considérée comme constante.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitéNomÉquivalent à
cmCentimètres1cm = 38px = 25/64in
mmMillimètres1mm = 1/10th of 1cm
QQuarts de millimètre1Q = 1/40th of 1cm
inPouces (inches)1in = 2.54cm = 96px
pcPicas1pc = 1/6e de 1in
ptPoints1pt = 1/72e de 1in
pxPixels1px = 1/96th de 1in
+ +

La plupart de ces unités sont utiles pour l'impression plutôt que pour l'affichage sur un écran. Ainsi, on n'utilise généralement pas cm (centimètres) sur un écran. La seule unité ici que vous rencontrerez fréquemment est px (pixels).

+ +

Unités de longueur relative

+ +

Les unités de longueur relative permettent d'exprimer des quantités relatives à quelque chose d'autre comme la taille de la police de l'élément parent ou la taille de la zone d'affichage (viewport). L'avantage d'utiliser des unités relatives est qu'avec un peu d'organisation, on peut faire que la taille du texte ou d'autres éléments se mette à l'échelle, relativement à quelque chose d'autre sur la page. La plupart des unités les plus utiles pour le développement web sont présentes dans le tableau qui suit.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitéRelative à
emPour les propriétés typographiques comme font-size, relative à la taille de la police de l'élément parent. Pour les autres propriétés comme width, relative à la taille de la police de l'élément;
exLa hauteur d'x de la police de l'élément.
chLa chasse/avance du glyphe « 0 » pour la police de l'élément.
remLa taille de la police pour l'élément racine.
lhLa hauteur de ligne pour l'élément.
vw1% de la largeur du viewport (la zone d'affichage).
vh1% de la hauteur du viewport (la zone d'affichage).
vmin1% de la plus petite dimension du viewport (la zone d'affichage).
vmax1% de la plus grande dimension du viewport (la zone d'affichage).
+ +

Exploration d'un exemple

+ +

Dans l'exemple qui suit, vous pouvez observer le fonctionnement de certaines unités de longueur relative et absolue. La première boîte a la propriété width définie en pixels. Il s'agit d'une unité absolue et cette largeur restera donc la même, quels que soient les autres changements.

+ +

La deuxième boîte a sa largeur définie avec l'unité vw (relative à la largeur de la zone d'affichage). Cette valeur est relative à la largeur du viewport. Ainsi, 10vw correspondra à 10 pourcents de la largeur de la zone d'affichage. Si vous changez la largeur de la fenêtre de votre navigateur, la taille de cette boîte devrait changer. Toutefois, si l'exemple est intégré dans la page avec un élément <iframe>, cela ne fonctionnera pas. Pour voir concrètement le résultat, vous devrez ouvrir l'exemple dans un nouvel onglet avant d'ajuster la taille de votre fenêtre.

+ +

La troisième boîte utilise les unités em. Ces unités sont relatives à la taille de la police. On a défini une taille de police de 1em sur l'élément <div> englobant et qui a la classe .wrapper. Passez cette valeur à 1.5em et vous pourrez voir que la taille de la police de tous les éléments augmente mais que seul le dernier élément s'élargit du fait que sa largeur soit relative à cette taille de police.

+ +

Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autrement pour voir ce que ça donne.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems et rems

+ +

em et rem sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme la mise en forme du texte ou les dispositions CSS. L'exemple qui suit fournit une démonstration.

+ +

Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe ems et que le second utilise une classe rems.

+ +

Pour commencer, on définit la taille de la police à 16px sur l'élément <html>.

+ +

Pour récapituler, l'unité em signifie « la taille de police de l'élément parent » pour ce qui concerne la typographie. Les éléments <li> à l'intérieur de <ul> et qui ont un attribut class avec ems prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de 1.3em soit 1,3 fois plus grand que la taille de police pour l'élément parent.

+ +

Pour récapituler, l'unité rem signifie « la taille de police de l'élément racine » (rem est l'acronyme anglais de « root em » qu'on pourrait traduire par « em racine ».) Les éléments <li> à l'intérieur de <ul> et qui ont un attribut class avec rems prendront leur taille à partir de l'élément racine (<html>). Cela signifie que les niveaux successifs ne gagneront pas en largeur.

+ +

Toutefois, si vous modifier la taille de la police avec font-size pour <html> dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent rem que celles qui utilisent em.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}}

+ +

Pourcentages

+ +

Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourcentage est toujours relatif à une autre valeur. Ainsi, si vous définissez la propriété font-size d'un élément avec un pourcentage, ce pourcentage sera relatif à la valeur de font-size de l'élément parent. Si vous utilisez un pourcentage pour width, la valeur obtenue sera le pourcentage de la valeur de width pour l'élément parent.

+ +

Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px.

+ +

La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre !

+ +

Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}}

+ +

Le prochain exemple utilise des tailles de police définies en pourcentages. Chaque élément <li> a font-size avec 80%, ainsi les éléments de listes imbriqués deviennent de plus en plus petits en héritant de la taille de leur parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}}

+ +

On notera que, bien que de nombreuses propriétés acceptent une longueur ou un pourcentage, il en existe certaines qui n'acceptent que des longueurs. Vous pouvez voir cette information sur les pages de référence de chaque propriété sur MDN. Si les valeurs autorisées incluent le type <length-percentage>, on peut utiliser une longueur ou un pourcentage. Si les valeurs autorisées n'incluent que <length>, il n'est pas possible d'utiliser un pourcentage.

+ +

Nombres

+ +

Certains types de valeur acceptent des nombres, sans unité. Une telle propriété est, par exemple, opacity qui contrôle l'opacité d'un élément. Cette propriété acceptera une valeur numérique (sans unité) comprise entre 0 (transparence complète) et 1 (complètement opaque).

+ +

Dans l'exemple qui suit, essayez de modifier la valeur de la propriété opacity en utilisant différentes valeurs décimales entre 0 et 1 afin de voir comment la boîte et son contenu changent en opacité.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}}

+ +
+

Note : Lorsqu'on utilise un nombre pour une valeur en CSS, il ne doit pas être écrit avec des guillemets ou quotes autour.

+
+ +

Couleur

+ +

Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur.

+ +

Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS.

+ +
+

Note : Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes.

+
+ +

Mots-clés pour les couleurs

+ +

Dans la plupart des exemples de cette section d'apprentissage ou à d'autres endroits sur MDN, vous verrez des mots-clés utilisés pour définir des couleurs : il s'agit d'une méthode simple et compréhensible pour indiquer une couleur. Il existe de nombreux mots-clés, certains avec des noms plutôt amusants. Vous pouvez consulter la liste complète sur la page pour le type de valeur <color>.

+ +

Essayez de manipuler les différentes valeurs de couleur dans l'exemple ci-après afin de mieux comprendre comment celles-ci fonctionnent.

+ +

Valeurs RGB hexadécimales

+ +

Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : 0123456789abcdef). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles.

+ +

Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}}

+ +

Là encore, essayez de modifier les valeurs pour voir comment les couleurs varient.

+ +

Les valeurs RGB et RGBA

+ +

La troisième façon que nous aborderons ici est RGB (pour « Red, Green, Blue » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction rgb() à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple.

+ +

Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB :

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}}

+ +

Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de 0 pour le canal alpha, la couleur sera complètement transparente tandis qu'avec 1, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité.

+ +
+

Note : Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété opacity dont nous avons parlé auparavant. Lorsqu'on utilise opacity, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque.

+
+ +

Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

Dans cet exemple, essayez de modifier les valeurs pour le canal alpha afin de voir comment la couleur est modifiée.

+ +
+

Note : Avec la spécification CSS Colors Level 4, rgba() est un alias pour rgb() et hsla() est un alias pour hsl() (voir ci-après). Pour les navigateurs qui implémentent ce standard, ces fonctions synonymes acceptent les mêmes paramètres et se comportent de la même façon. Essayez de modifier l'exemple qui précède pour passer de fonctions rgba() à des fonctions rgb() pour voir si les couleurs fonctionnent toujours. Le style que vous utiliserez ne dépend que de vous mais séparer les définitions de couleurs transparentes et de couleurs non-transparentes fournira une prise en charge navigateur (légèrement) meilleure tout en explicitant visuellement (dans votre code) où les couleurs transparentes sont définies.

+
+ +

Valeurs HSL et HSLA

+ +

Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction hsl() prend des paramètres pour la teinte (hue en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment :

+ + + +

On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL :

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}

+ +

À l'instar de RGBA pour RGB, il existe un équivalent HSLA à HSL qui permet aussi d'indiquer une valeur pour le canal alpha. Voici un exemple où on a converti l'exemple RGBA afin d'utiliser des couleurs HSLA.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}}

+ +

Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet !

+ +

Images

+ +

Le type de valeur <image> est utilisé à chaque endroit où une image est une valeur valide. Il peut s'agir d'une image à proprement parler dans un fichier (avec une fonction url() qui utilisera l'adresse du fichier avec l'image) ou d'un dégradé.

+ +

Voici un exemple où on utilise une image et un dégradé pour la propriété CSS background-image.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}}

+ +
+

Note : il existe d'autres valeurs possibles pour le type <image>, toutefois celles-ci sont plus récentes et moins bien prises en charge par les navigateurs. Consultez la page MDN pour le type de données <image> si vous voulez en savoir plus.

+
+ +

Position

+ +

Le type de valeur <position> représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via background-position). Ces valeurs peuvent être indiquées avec des mots-clés comme top, left, bottom, right, et center afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte.

+ +

Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera center par défaut.

+ +

Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}}

+ +

Manipulez, modifiez ces valeurs pour voir comment décaler l'image dans le conteneur.

+ +

Chaînes de caractères et identifiants

+ +

Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple <color> qui peut utiliser des mots-clés comme red, black, rebeccapurple, et goldenrod). Si on veut être plus précis, on dira que ces mots-clés sont des identifiants, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères.

+ +

À d'autres endroits en CSS, on utilise des chaînes de caractères, comme lorsqu'on définit du contenu généré. Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}}

+ +

Functions

+ +

Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : rgb(), hsl(), etc. La valeur utilisée pour récupérer une image à partir d'un fichier, url() est également une fonction.

+ +

Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS calc(). Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution.

+ +

Dans le prochain exemple, on utilise calc() afin que la boîte soit large de 20% + 100px. Les 20% sont calculés à partir de la largeur du conteneur parent : .wrapper et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise calc() pour indiquer au navigateur de réaliser ce calcul.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Testez vos compétences !

+ +

Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur Testez vos compétences : valeurs et unités CSS.

+ +

Résumé

+ +

Voici un rapide tour des types de valeur et unités que vous pourrez rencontrer en CSS. Vous pouvez consulter la liste exhaustive des différents types sur la page de référence MDN sur les valeurs et unités CSS. Vous verrez de nombreuses types et valeurs à mesure que vous progresserez dans ces leçons.

+ +

La notion cruciale à garder en mémoire est que chaque propriété possède une liste de types de valeur autorisés et que chaque type de valeur possède une définition indiquant les valeurs possibles. Vous pourrez trouver toutes les informations et détails sur MDN.

+ +

Par exemple, comprendre le type <image> vous permettra de comprendre comment créer un dégradé de couleur. C'est utile mais ce n'est pas forcément évident de prime abord.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de boîte
    4. +
  4. Arrière-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordements de contenu
    7. +
  7. Valeurs et unités CSS
    8. +
  8. Définir la taille des éléments en CSS
    9. +
  9. Images, médias et éléments de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage de CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html deleted file mode 100644 index 17a2d6e00f..0000000000 --- a/files/fr/learn/css/css_layout/flexbox/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: Flexbox -slug: Learn/CSS/CSS_layout/Flexbox -tags: - - Apprentissage - - Article - - Boîtes modulables - - CSS - - Codage - - Disposition - - Débutant - - Guide - - Mise en page avec les CSS - - Mises en page - - flexbox -translation_of: Learn/CSS/CSS_layout/Flexbox -original_slug: Apprendre/CSS/CSS_layout/Flexbox ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
- -

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Apprendre à utiliser le système Flexbox pour créer des mises en page web.
- -

Pourquoi Flexbox ?

- -

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

- -

Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

- - - -

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

- -

Voici un exemple simple

- -

Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

- -

Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

- -

Échantillon d'utilisation de flexbox

- -

Détermination des éléments à disposer en boîtes flexibles

- -

Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur flex à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :

- -
section {
-  display: flex;
-}
- -

Voici le résultat :

- -

Échantillon d'utilisation de flexbox

- -

Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

- -
-

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

-
- -

Aparté sur le modèle flex

- -

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

- -

Terminologie pour les boîtes modulables

- - - -

Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.

- -

Colonnes ou lignes ?

- -

Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à row : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).

- -

Ajoutons la déclaration suivante dans la règle :

- -
flex-direction: column;
- -

Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.

- -
-

Note : Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs row-reverse et column-reverse. Expérimentez ces valeurs aussi !

-
- -

Enveloppement

- -

Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple flexbox-wrap0.html, essayez directement (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :

- -

Débordement des éléments modulables

- -

Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour section :

- -
flex-wrap: wrap;
- -

Essayons ; la disposition est bien meilleure avec cet ajout :

- -

Conditionnement des éléments modulablesNous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.

- -

Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en row-reverse — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.

- -

Forme abrégée « flex-flow »

- -

Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer

- -
flex-direction: row;
-flex-wrap: wrap;
- -

par

- -
flex-flow: row wrap;
- -

Taille modulable des éléments flex

- -

Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de flexbox0.html ou prenez une copie de flexbox1.html comme nouveau point de départ (voir en direct).

- -

Ajoutez d'abord la règle ci-dessous en fin de la CSS :

- -
article {
-  flex: 1;
-}
- -

Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.

- -

Maintenant ajoutons cette règle en-dessous de la précédente :

- -
article:nth-of-type(3) {
-  flex: 2;
-}
- -

Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.

- -

Vous pouvez également définir une valeur minimale de taille dans la valeur flex. Modifiez comme suit vos règles article existantes :

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 2 200px;
-}
- -

En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.

- -

Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.

- -

Modulation de la largeur

- -

Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.

- -

Flex : forme abrégée vs forme longue

- -

{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :

- - - -

Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.

- -

Alignement horizontal et vertical

- -

Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — flex-align0.html (voir aussi en direct). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.

- -

Alignement

- -

D'abord, faites une copie locale de cet exemple.

- -

Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :

- -
div {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.

- -

{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).

- - - -

Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:

- -
button:first-child {
-  align-self: flex-end;
-}
- -

Voyez l'effet obtenu, puis supprimez ensuite la règle.

- -

{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.

- - - -

N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.

- -

Ordonner les éléments flex

- -

Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.

- -

Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :

- -
button:first-child {
-  order: 1;
-}
- -

Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :

- - - -

Vous pouvez donner des valeurs négatives à order pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :

- -
button:last-child {
-  order: -1;
-}
- -

Boîtes flex imbriquées

- -

Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez complex-flexbox.html (à voir en direct également).

- -

Imbrications avec flexbox

- -

Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :

- -
section - article
-          article
-          article - div - button
-                    div   button
-                    div   button
-                          button
-                          button
- -

Regardez le code utilisé pour cette disposition.

- -

Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.

- -
section {
-  display: flex;
-}
- -

Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 3 200px;
-  display: flex;
-  flex-flow: column;
-}
-
- -

Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur flex:1 100px; pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.

- -
article:nth-of-type(3) div:first-child {
-  flex:1 100px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.

- -
button {
-  flex: 1;
-  margin: 5px;
-  font-size: 18px;
-  line-height: 1.5;
-}
- -

Compatibilité des navigateurs

- -

La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).

- -

Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.

- -

Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.

- -

Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

- -

Résumé

- -

Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.

- -
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md new file mode 100644 index 0000000000..17a2d6e00f --- /dev/null +++ b/files/fr/learn/css/css_layout/flexbox/index.md @@ -0,0 +1,342 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - Apprentissage + - Article + - Boîtes modulables + - CSS + - Codage + - Disposition + - Débutant + - Guide + - Mise en page avec les CSS + - Mises en page + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +original_slug: Apprendre/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+ +

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Apprendre à utiliser le système Flexbox pour créer des mises en page web.
+ +

Pourquoi Flexbox ?

+ +

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

+ +

Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

+ + + +

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

+ +

Voici un exemple simple

+ +

Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

+ +

Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

+ +

Échantillon d'utilisation de flexbox

+ +

Détermination des éléments à disposer en boîtes flexibles

+ +

Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur flex à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :

+ +
section {
+  display: flex;
+}
+ +

Voici le résultat :

+ +

Échantillon d'utilisation de flexbox

+ +

Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

+ +
+

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

+
+ +

Aparté sur le modèle flex

+ +

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

+ +

Terminologie pour les boîtes modulables

+ + + +

Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.

+ +

Colonnes ou lignes ?

+ +

Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à row : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).

+ +

Ajoutons la déclaration suivante dans la règle :

+ +
flex-direction: column;
+ +

Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.

+ +
+

Note : Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs row-reverse et column-reverse. Expérimentez ces valeurs aussi !

+
+ +

Enveloppement

+ +

Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple flexbox-wrap0.html, essayez directement (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :

+ +

Débordement des éléments modulables

+ +

Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour section :

+ +
flex-wrap: wrap;
+ +

Essayons ; la disposition est bien meilleure avec cet ajout :

+ +

Conditionnement des éléments modulablesNous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.

+ +

Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en row-reverse — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.

+ +

Forme abrégée « flex-flow »

+ +

Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

par

+ +
flex-flow: row wrap;
+ +

Taille modulable des éléments flex

+ +

Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de flexbox0.html ou prenez une copie de flexbox1.html comme nouveau point de départ (voir en direct).

+ +

Ajoutez d'abord la règle ci-dessous en fin de la CSS :

+ +
article {
+  flex: 1;
+}
+ +

Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.

+ +

Maintenant ajoutons cette règle en-dessous de la précédente :

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.

+ +

Vous pouvez également définir une valeur minimale de taille dans la valeur flex. Modifiez comme suit vos règles article existantes :

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.

+ +

Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.

+ +

Modulation de la largeur

+ +

Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.

+ +

Flex : forme abrégée vs forme longue

+ +

{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :

+ + + +

Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.

+ +

Alignement horizontal et vertical

+ +

Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — flex-align0.html (voir aussi en direct). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.

+ +

Alignement

+ +

D'abord, faites une copie locale de cet exemple.

+ +

Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.

+ +

{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).

+ + + +

Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Voyez l'effet obtenu, puis supprimez ensuite la règle.

+ +

{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.

+ + + +

N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.

+ +

Ordonner les éléments flex

+ +

Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.

+ +

Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :

+ +
button:first-child {
+  order: 1;
+}
+ +

Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :

+ + + +

Vous pouvez donner des valeurs négatives à order pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :

+ +
button:last-child {
+  order: -1;
+}
+ +

Boîtes flex imbriquées

+ +

Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez complex-flexbox.html (à voir en direct également).

+ +

Imbrications avec flexbox

+ +

Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Regardez le code utilisé pour cette disposition.

+ +

Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.

+ +
section {
+  display: flex;
+}
+ +

Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur flex:1 100px; pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.

+ +
button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilité des navigateurs

+ +

La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).

+ +

Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.

+ +

Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.

+ +

Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

+ +

Résumé

+ +

Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.

+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html deleted file mode 100644 index 4e473510b9..0000000000 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 'Testez vos compétences : Flexbox' -slug: Learn/CSS/CSS_layout/Flexbox_skills -translation_of: Learn/CSS/CSS_layout/Flexbox_skills -original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}
- -

Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.

- -
-

Note : You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
-
- If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

-
- -

Flex Layout One

- -

Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.

- -

Flex items laid out as a row with space between them.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

- -
-

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Flex Layout Two

- -

Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.

- -

Flex items laid out as three equal size columns with different amounts of content.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}

- -

Questions supplémentaires:

- - - -
-

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Flex Layout Three

- -

Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

- -

A box centered inside another box.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

- -
-

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Flex Layout Four

- -

Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
-  

- -

A set of items displayed as rows.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

- -
-

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Assessment or further help

- -

You can practice these examples in the Interactive Editors mentioned above.

- -

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. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".
      • -
    • Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.
      • -
    • A link to the example you want assessed or need help with, in an online editor. 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. -
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}

diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.md b/files/fr/learn/css/css_layout/flexbox_skills/index.md new file mode 100644 index 0000000000..4e473510b9 --- /dev/null +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.md @@ -0,0 +1,100 @@ +--- +title: 'Testez vos compétences : Flexbox' +slug: Learn/CSS/CSS_layout/Flexbox_skills +translation_of: Learn/CSS/CSS_layout/Flexbox_skills +original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}
+ +

Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.

+ +
+

Note : You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
+
+ If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Flex Layout One

+ +

Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.

+ +

Flex items laid out as a row with space between them.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

+ +
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Two

+ +

Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.

+ +

Flex items laid out as three equal size columns with different amounts of content.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}

+ +

Questions supplémentaires:

+ + + +
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Three

+ +

Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

+ +

A box centered inside another box.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

+ +
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Four

+ +

Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
+  

+ +

A set of items displayed as rows.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

+ +
+

Note : For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors mentioned above.

+ +

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. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".
      • +
    • Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.
      • +
    • A link to the example you want assessed or need help with, in an online editor. 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. +
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}

diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html deleted file mode 100644 index 386185ea62..0000000000 --- a/files/fr/learn/css/css_layout/floats/index.html +++ /dev/null @@ -1,474 +0,0 @@ ---- -title: Les boîtes flottantes -slug: Learn/CSS/CSS_layout/Floats -tags: - - Article - - Boîtes flottantes - - CSS - - Codage - - Débutant - - Dégagement - - Flotteurs - - Guide - - Mise en page - - colonnes - - multi‑colonne -translation_of: Learn/CSS/CSS_layout/Floats -original_slug: Apprendre/CSS/CSS_layout/Floats ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
- -

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

- - - - - - - - - - - - -
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée de la manière dont fonctionne CSS (étudiez Introduction au CSS.)
Objectif :Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété clear et autres méthodes de dégagement des boîtes flottantes.
- -

Contexte de boîtes flottantes

- -

La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

- -

Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

- -

Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.

- -

Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.

- -

Exemple simple de boîte flottante

- -

Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier index.html sur votre ordinateur initialisé avec un simple modèle HTML et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.

- -

Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

- -
<h1>Exemple simple de boîte flottante</h1>
-
-<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
-
-<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>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
- -

Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier .css séparé — comme vous voulez):

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.box {
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour .box :

- -
.box {
-  float: left;
-  margin-right: 15px;
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:

- -

Faire flotter la boîte

- -

Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant .box :

- - - -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.box {
-  float: left;
-  margin-right: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -

{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}

- -

Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.

- -

Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur right à la propriété float et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.

- -

Ajoutez une classe special au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.

- -
.special {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
- -

Visualiser le flottement

- -

Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :

- - - -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.box {
-  float: left;
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
-.special {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
- -

{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}

- -

Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.

- -

Dégagement des boîtes flottantes

- -

Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.

- -

Dans le HTML de l'exemple précédent, donnez la classe cleared au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :

- -
.cleared {
-  clear: left;
-}
-
- -
<h1>Exemple simple de boîte flottante</h1>
-
-<div class="box">Boîte flottante</div>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
-
-<p class="cleared">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>
-
-<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-
- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.box {
-  float: left;
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
-.cleared {
-  clear: left;
-}
-
- -

{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}

- -

Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  clear accepte les valeurs suivantes :

- - - -

Dégagement de boîtes autour d'une boîte flottante

- -

Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe wrapper.

- -
<div class="wrapper">
-  <div class="box">Boîte flottante</div>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
-</div>
-
- -

Dans la CSS, ajoutez la règle suivante pour la classe .wrapper et actualisez la page :

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
- -

Le problème

- -

Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.

- - - -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
-.box {
-  float: left;
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -

{{ EmbedLiveSample('Le_problème', '100%', 600) }}

- -

Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.

- -

Le « clearfix hack »

- -

La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur both à la propriété clear.

- -

Ajoutez ceci à la CSS de notre exemple :

- -
.wrapper::after {
-  content: "";
-  clear: both;
-  display: block;
-}
- -

Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <div> en dessous avec la règle clear: both.

- - - -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
-.box {
-  float: left;
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
-.wrapper::after {
-  content: "";
-  clear: both;
-  display: block;
-}
-
- -

{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}

- -

Utilisation du débordement

- -

Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de wrapper à autre chose que visible.

- -

Supprimez les éléments clearfix de la CSS su paragraphe précédent et, à la place, ajoutez overflow: auto aux règles pour wrapper. À nouveau, la boîte doit être dégagée.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  overflow: auto;
-}
- - - -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  overflow: auto;
-}
-
-.box {
-  float: left;
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -

{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}

- -

Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.

- -

« display: flow-root »

- -

La solution moderne de ce problème consiste à utiliser la valeur flow-root pour le propriété display. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez overflow: auto de la règle .wrapper et ajoutez display: flow-root. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  display: flow-root;
-}
- - - -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-  font: .9em/1.2 Arial, Helvetica, sans-serif
-}
-
-.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  display: flow-root;
-}
-
-.box {
-  float: left;
-  margin: 15px;
-  width: 150px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
-
- -

{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}

- -

Résumé

- -

Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/floats/index.md b/files/fr/learn/css/css_layout/floats/index.md new file mode 100644 index 0000000000..386185ea62 --- /dev/null +++ b/files/fr/learn/css/css_layout/floats/index.md @@ -0,0 +1,474 @@ +--- +title: Les boîtes flottantes +slug: Learn/CSS/CSS_layout/Floats +tags: + - Article + - Boîtes flottantes + - CSS + - Codage + - Débutant + - Dégagement + - Flotteurs + - Guide + - Mise en page + - colonnes + - multi‑colonne +translation_of: Learn/CSS/CSS_layout/Floats +original_slug: Apprendre/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

+ + + + + + + + + + + + +
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée de la manière dont fonctionne CSS (étudiez Introduction au CSS.)
Objectif :Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété clear et autres méthodes de dégagement des boîtes flottantes.
+ +

Contexte de boîtes flottantes

+ +

La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

+ +

Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

+ +

Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.

+ +

Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.

+ +

Exemple simple de boîte flottante

+ +

Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier index.html sur votre ordinateur initialisé avec un simple modèle HTML et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.

+ +

Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

+ +
<h1>Exemple simple de boîte flottante</h1>
+
+<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
+
+<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>
+
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ +

Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier .css séparé — comme vous voulez):

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour .box :

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:

+ +

Faire flotter la boîte

+ +

Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant .box :

+ + + +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +

{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}

+ +

Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.

+ +

Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur right à la propriété float et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.

+ +

Ajoutez une classe special au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

Visualiser le flottement

+ +

Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :

+ + + +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}

+ +

Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.

+ +

Dégagement des boîtes flottantes

+ +

Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.

+ +

Dans le HTML de l'exemple précédent, donnez la classe cleared au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :

+ +
.cleared {
+  clear: left;
+}
+
+ +
<h1>Exemple simple de boîte flottante</h1>
+
+<div class="box">Boîte flottante</div>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+
+<p class="cleared">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>
+
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+
+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.cleared {
+  clear: left;
+}
+
+ +

{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}

+ +

Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  clear accepte les valeurs suivantes :

+ + + +

Dégagement de boîtes autour d'une boîte flottante

+ +

Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe wrapper.

+ +
<div class="wrapper">
+  <div class="box">Boîte flottante</div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+
+ +

Dans la CSS, ajoutez la règle suivante pour la classe .wrapper et actualisez la page :

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

Le problème

+ +

Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.

+ + + +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +

{{ EmbedLiveSample('Le_problème', '100%', 600) }}

+ +

Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.

+ +

Le « clearfix hack »

+ +

La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur both à la propriété clear.

+ +

Ajoutez ceci à la CSS de notre exemple :

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <div> en dessous avec la règle clear: both.

+ + + +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+
+ +

{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}

+ +

Utilisation du débordement

+ +

Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de wrapper à autre chose que visible.

+ +

Supprimez les éléments clearfix de la CSS su paragraphe précédent et, à la place, ajoutez overflow: auto aux règles pour wrapper. À nouveau, la boîte doit être dégagée.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ + + +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +

{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}

+ +

Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.

+ +

« display: flow-root »

+ +

La solution moderne de ce problème consiste à utiliser la valeur flow-root pour le propriété display. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez overflow: auto de la règle .wrapper et ajoutez display: flow-root. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ + + +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+
+.box {
+  float: left;
+  margin: 15px;
+  width: 150px;
+  height: 150px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +

{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}

+ +

Résumé

+ +

Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html deleted file mode 100644 index 3694a00968..0000000000 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Compréhension fondamentale de la mise en page -slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension -translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension -original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension ---- -
{{LearnSidebar}}
- -

Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

- - - - - - - - - - - - -
Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
- -

dossier de projet

- -

Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

- -

- -

configuration de base

- -

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

- -

Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

- -

Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

- -

- -

Votre section de tâches

- -

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

- -
    -
  1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
    2. -
  2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
    3. -
  3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
    4. -
  4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
    5. -
  5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    6. -
- -

Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

- - - -

Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le canal IRC #mdn .

- -

Evaluation

- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le fil de discussion relatif à cet exercice ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

- -

Dans ce module Section

- - diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md new file mode 100644 index 0000000000..3694a00968 --- /dev/null +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -0,0 +1,82 @@ +--- +title: Compréhension fondamentale de la mise en page +slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension +--- +
{{LearnSidebar}}
+ +

Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

+ + + + + + + + + + + + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
+ +

dossier de projet

+ +

Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

+ +

+ +

configuration de base

+ +

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

+ +

Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

+ +

Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

+ +

+ +

Votre section de tâches

+ +

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

+ +
    +
  1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
    2. +
  2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
    3. +
  3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
    4. +
  4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
    5. +
  5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    6. +
+ +

Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

+ + + +

Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le canal IRC #mdn .

+ +

Evaluation

+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le fil de discussion relatif à cet exercice ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

+ +

Dans ce module Section

+ + diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html deleted file mode 100644 index 6a0d5da4ad..0000000000 --- a/files/fr/learn/css/css_layout/grids/index.html +++ /dev/null @@ -1,671 +0,0 @@ ---- -title: Grilles -slug: Learn/CSS/CSS_layout/Grids -tags: - - Apprendre - - Article - - CSS - - Codage - - Didacticiel - - Débutant - - Guide - - Mise en page - - Trames - - Trames CSS - - quadrillage du design - - structure du quadrillage - - système de trames -translation_of: Learn/CSS/CSS_layout/Grids -original_slug: Apprendre/CSS/CSS_layout/Grids ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
- -

« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).
Objectif :Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».
- -

Qu'est qu'une disposition en trame ?

- -

Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.

- -

La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément appelé gouttière.

- -

Schéma du quadrillage

- -

Création d'une trame CSS

- -

Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.

- -

Définition d'une trame

- -

Pour débuter, téléchargez et ouvrez le fichier de départ dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.

- -

Pour définir un tramage, on affecte la valeur grid à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :

- -
.container {
-    display: grid;
-}
- -

Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer display: grid fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.

- -

Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.

- -
.container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
-}
- -

Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.

- - - - - -
.container {
-  display: grid;
-  grid-template-columns: 200px 200px 200px;
-}
- -

{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}

- -

Trames adaptables avec l'unité « fr »

- -

En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.

- -

En changeant la liste des chaînes par la suivante, on crée trois chaînes de 1fr.

- -
.container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-}
- -

Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité fr ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-}
- -

La première chaîne obtient 2fr de l'espace disponible et les deux autres 1fr ; la première chaîne sera plus large. Il est possible de mélanger des unités fr et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.

- - - - - -

{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}

- -
-

Note : L'unité fr distribue l'espace disponible, et non sa totalité. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.

-
- -

Espaces entre pistes

- -

Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
-}
- -

Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité fr.

- - - -
<div class="container">
- <div>Un</div>
- <div>Deux</div>
- <div>Trois</div>
- <div>Quatre</div>
- <div>Cinq</div>
- <div>Six</div>
- <div>Sept</div>
-</div>
-
- - - -

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

- -
-

Note : Les propriétés *gap étaient traditionnellement préfixées par grid-, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.

-
- -
.container {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-gap: 20px;
-  gap: 20px;
-}
- -

Répétition des listes de pistes

- -

Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-}
- -

Nous obtenons 3 chaînes de 1fr de large, comme précédemment. La première valeur passée à la fonction repeat est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.

- -

Trame implicite et explicite

- -

Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec grid-template-columns ou grid-template-rows. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.

- -

Par défaut, les rangées de la trame implicite sont auto dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété grid-auto-rows avec une valeur de 100px dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.

- - - - - -
.container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 20px;
-}
- -

{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}

- -

La fonction minmax()

- -

Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'au moins 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.

- -

La fonction minmax nous permet de fixer une taille maximale et minimale pour une trame, par exemple minmax(100px, auto). La taille minimale est de 100 px, mais la maximale est auto — elle  s'agrandira selon le contenu. Changeons grid-auto-rows en utilisant une valeur minmax :

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
-}
- -

Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.

- -

Autant de chaînes que possibles

- -

Il est possible de combiner nos savoirs à propos des listes de pistes, la notation repeat et minmax() pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de grid-template-columns égale à repeat() avec le mot-clé auto-fill comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez minmax() avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.

- -

Essayez ceci dans le fichier avec la CSS ci-dessous :

- - - - - -
.container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  grid-auto-rows: minmax(100px, auto);
-  grid-gap: 20px;
-}
- -

{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}

- -

Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.

- -

Placement sur les lignes

- -

Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.

- -

Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :

- - - -

Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :

- - - -

Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un / — une barre inclinée.

- -

Pour débuter, téléchargez ce fichier. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.

- -

À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :

- -
header {
-  grid-column: 1 / 3;
-  grid-row: 1;
-}
-
-article {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-aside {
-  grid-column: 1;
-  grid-row: 2;
-}
-
-footer {
-  grid-column: 1 / 3;
-  grid-row: 3;
-}
- - - - - -

{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}

- -
-

Note : vous pouvez aussi utiliser la valeur -1 pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur -1 ne ciblera pas le rang de fin de trame implicite.

-
- -

Placer avec « grid-template-areas »

- -

Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.

- -

Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.

- -
.container {
-  display: grid;
-  grid-template-areas:
-      "header header"
-      "sidebar content"
-      "footer footer";
-  grid-template-columns: 1fr 3fr;
-  grid-gap: 20px;
-}
-
-header {
-  grid-area: header;
-}
-
-article {
-  grid-area: content;
-}
-
-aside {
-  grid-area: sidebar;
-}
-
-footer {
-  grid-area: footer;
-}
- -

Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !

- - - - - - -

{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}

- -

Les règles pour grid-template-areas sont les suivantes :

- - - -

Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.

- -

« CSS Grid » : une structure de quadrillage

- -

Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.

- -

Chargez le fichier de départ. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.

- -
header {
-  grid-column: 1 / 13;
-  grid-row: 1;
-}
-
-article {
-  grid-column: 4 / 13;
-  grid-row: 2;
-}
-
-aside {
-  grid-column: 1 / 4;
-  grid-row: 2;
-}
-
-footer {
-  grid-column: 1 / 13;
-  grid-row: 3;
-}
- - - - - -

{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}

- -

Si vous utilisez Firefox Grid Inspector (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.

- -

A 12 column grid overlaid on our design.

- -

Résumé

- -

Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.

- -

Voir également

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md new file mode 100644 index 0000000000..6a0d5da4ad --- /dev/null +++ b/files/fr/learn/css/css_layout/grids/index.md @@ -0,0 +1,671 @@ +--- +title: Grilles +slug: Learn/CSS/CSS_layout/Grids +tags: + - Apprendre + - Article + - CSS + - Codage + - Didacticiel + - Débutant + - Guide + - Mise en page + - Trames + - Trames CSS + - quadrillage du design + - structure du quadrillage + - système de trames +translation_of: Learn/CSS/CSS_layout/Grids +original_slug: Apprendre/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).
Objectif :Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».
+ +

Qu'est qu'une disposition en trame ?

+ +

Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.

+ +

La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément appelé gouttière.

+ +

Schéma du quadrillage

+ +

Création d'une trame CSS

+ +

Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.

+ +

Définition d'une trame

+ +

Pour débuter, téléchargez et ouvrez le fichier de départ dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.

+ +

Pour définir un tramage, on affecte la valeur grid à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :

+ +
.container {
+    display: grid;
+}
+ +

Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer display: grid fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.

+ +

Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.

+ + + + + +
.container {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+ +

{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}

+ +

Trames adaptables avec l'unité « fr »

+ +

En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.

+ +

En changeant la liste des chaînes par la suivante, on crée trois chaînes de 1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité fr ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

La première chaîne obtient 2fr de l'espace disponible et les deux autres 1fr ; la première chaîne sera plus large. Il est possible de mélanger des unités fr et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.

+ + + + + +

{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}

+ +
+

Note : L'unité fr distribue l'espace disponible, et non sa totalité. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.

+
+ +

Espaces entre pistes

+ +

Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité fr.

+ + + +
<div class="container">
+ <div>Un</div>
+ <div>Deux</div>
+ <div>Trois</div>
+ <div>Quatre</div>
+ <div>Cinq</div>
+ <div>Six</div>
+ <div>Sept</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

+ +
+

Note : Les propriétés *gap étaient traditionnellement préfixées par grid-, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Répétition des listes de pistes

+ +

Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

Nous obtenons 3 chaînes de 1fr de large, comme précédemment. La première valeur passée à la fonction repeat est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.

+ +

Trame implicite et explicite

+ +

Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec grid-template-columns ou grid-template-rows. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.

+ +

Par défaut, les rangées de la trame implicite sont auto dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété grid-auto-rows avec une valeur de 100px dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.

+ + + + + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+ +

{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}

+ +

La fonction minmax()

+ +

Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'au moins 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.

+ +

La fonction minmax nous permet de fixer une taille maximale et minimale pour une trame, par exemple minmax(100px, auto). La taille minimale est de 100 px, mais la maximale est auto — elle  s'agrandira selon le contenu. Changeons grid-auto-rows en utilisant une valeur minmax :

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.

+ +

Autant de chaînes que possibles

+ +

Il est possible de combiner nos savoirs à propos des listes de pistes, la notation repeat et minmax() pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de grid-template-columns égale à repeat() avec le mot-clé auto-fill comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez minmax() avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.

+ +

Essayez ceci dans le fichier avec la CSS ci-dessous :

+ + + + + +
.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+ +

{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}

+ +

Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.

+ +

Placement sur les lignes

+ +

Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.

+ +

Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :

+ + + +

Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :

+ + + +

Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un / — une barre inclinée.

+ +

Pour débuter, téléchargez ce fichier. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.

+ +

À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :

+ +
header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}
+ + + + + +

{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}

+ +
+

Note : vous pouvez aussi utiliser la valeur -1 pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur -1 ne ciblera pas le rang de fin de trame implicite.

+
+ +

Placer avec « grid-template-areas »

+ +

Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.

+ +

Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.

+ +
.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+ +

Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !

+ + + + + + +

{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}

+ +

Les règles pour grid-template-areas sont les suivantes :

+ + + +

Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.

+ +

« CSS Grid » : une structure de quadrillage

+ +

Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.

+ +

Chargez le fichier de départ. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.

+ +
header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+ + + + + +

{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}

+ +

Si vous utilisez Firefox Grid Inspector (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.

+ +

A 12 column grid overlaid on our design.

+ +

Résumé

+ +

Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.

+ +

Voir également

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html deleted file mode 100644 index b6b10499ce..0000000000 --- a/files/fr/learn/css/css_layout/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: La mise en page avec CSS -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Floating - - Grids - - Guide - - Landing - - Layout - - Learn - - Module - - Multiple column - - Positioning - - alignment - - flexbox - - float - - table -translation_of: Learn/CSS/CSS_layout -original_slug: Apprendre/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.

- -
-

Vous cherchez à devenir développeuse ou développeur web front-end ?

-

Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

-

Commencer -

-
- -

Prérequis

- -

Avant de commencer ce module, vous devriez déjà :

- -
    -
  1. Connaître les bases du HTML, telles qu'exposées dans le module Introduction au HTML.
    2. -
  2. Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans Introduction à CSS.
    3. -
  3. Savoir mettre en forme les boîtes.
    4. -
- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que JSBin ou Glitch

-
- -

Guides

- -

Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.

- -
-
Introduction à la mise en page en CSS
-
Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de display — et présente certains des concepts que nous couvrirons dans de ce module.
-
Flux normal des éléments
-
Les éléments se placent d'eux‑même sur les pages web selon un flux normal sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier.
-
Flexbox
-
Flexbox est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS.
-
Grilles
-
Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS.
-
Le flottement
-
À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété float fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article.
-
Le positionnement
-
Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS position et comment les utiliser.
-
Disposition en colonnes
-
Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité.
-
Responsive design
-
Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « responsive design » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode.
-
Guide pour débuter avec les media queries
-
Les media queries (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les media queries puis appliquerons cela à un exemple pour le rendre réactif.
-
Méthodes de mise en page historiques
-
Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique.
-
Prise en charge des anciens navigateurs
-
-

Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens.

-
-
Compréhension des fondamentaux de la mise en page
-
Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web.
-
- -

Voir aussi

- -
-
Exemples pratiques de positionnement
-
Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.
-
diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md new file mode 100644 index 0000000000..b6b10499ce --- /dev/null +++ b/files/fr/learn/css/css_layout/index.md @@ -0,0 +1,86 @@ +--- +title: La mise en page avec CSS +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - Positioning + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +original_slug: Apprendre/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.

+ +
+

Vous cherchez à devenir développeuse ou développeur web front-end ?

+

Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+

Commencer +

+
+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez déjà :

+ +
    +
  1. Connaître les bases du HTML, telles qu'exposées dans le module Introduction au HTML.
    2. +
  2. Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans Introduction à CSS.
    3. +
  3. Savoir mettre en forme les boîtes.
    4. +
+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que JSBin ou Glitch

+
+ +

Guides

+ +

Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.

+ +
+
Introduction à la mise en page en CSS
+
Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de display — et présente certains des concepts que nous couvrirons dans de ce module.
+
Flux normal des éléments
+
Les éléments se placent d'eux‑même sur les pages web selon un flux normal sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier.
+
Flexbox
+
Flexbox est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS.
+
Grilles
+
Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS.
+
Le flottement
+
À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété float fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article.
+
Le positionnement
+
Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS position et comment les utiliser.
+
Disposition en colonnes
+
Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité.
+
Responsive design
+
Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « responsive design » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode.
+
Guide pour débuter avec les media queries
+
Les media queries (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les media queries puis appliquerons cela à un exemple pour le rendre réactif.
+
Méthodes de mise en page historiques
+
Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique.
+
Prise en charge des anciens navigateurs
+
+

Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens.

+
+
Compréhension des fondamentaux de la mise en page
+
Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web.
+
+ +

Voir aussi

+ +
+
Exemples pratiques de positionnement
+
Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.
+
diff --git a/files/fr/learn/css/css_layout/introduction/index.html b/files/fr/learn/css/css_layout/introduction/index.html deleted file mode 100644 index c295efa170..0000000000 --- a/files/fr/learn/css/css_layout/introduction/index.html +++ /dev/null @@ -1,666 +0,0 @@ ---- -title: Introduction à la mise en page en CSS -slug: Learn/CSS/CSS_layout/Introduction -tags: - - Apprendre - - Article - - Boîtes flexibles - - CSS - - Débutant - - Flottants - - Flux - - Grille - - Intro - - Mise en page - - Positionnement - - Tableaux -translation_of: Learn/CSS/CSS_layout/Introduction -original_slug: Apprendre/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}
- -

Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.
- -

Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:

- - - -

Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.

- -

Cours normal

- -

Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:

- -
<p>J'aime mon chat.</p>
-
-<ul>
-  <li>Acheter des croquettes</li>
-  <li>Exercice</li>
-  <li>Haut les cœurs, ami</li>
-</ul>
-
-<p>La fin !</p>
- -

Par défaut, le navigateur affichera ce code ainsi :

- -

{{ EmbedLiveSample('Cours_normal', '100%', 200) }}

- -

Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.

- -

Les éléments disposés en empilement sont désignés comme étant des éléments blocs, par opposition aux éléments en ligne qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.

- -
-

Note : « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.

-
- -

Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.

- -

Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :

- - - -

La propriété « display »

- -

Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété display. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété display. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est display: block. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est display: inline par défaut.

- -

Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est display: block par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de display pour inline, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.

- -

En plus de pouvoir changer la présentation par défaut en faisant passer un élément de block à inline et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de display. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont display: flex et display: grid.

- -

Flexbox

- -

Flexbox est l'abréviation pour Flexible Box Layout Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser flexbox, appliquez display: flex à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments flex. Voyons cela avec un simple exemple.

- -

Le balisage HTML ci-dessous crée un élément conteneur de la classe wrapper, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.

- -

Utiliser display: flex

- -

Mais nous ajoutons display: flex sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des éléments flex et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est row. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est stretch. Ce qui signifie que les éléments se casent dans la hauteur du conteneur flex défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.

- - - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-</div>
-
- -

{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}

- -

Définir la propriété flex

- -

En plus des propriétés ci-dessus applicables au conteneur flex, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.

- -

À titre d'exemple, nous pouvons donner la valeur 1 à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.

- - - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Un</div>
-    <div class="box2">Deux</div>
-    <div class="box3">Trois</div>
-</div>
-
- -

{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}

- -
-

Note : Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur Flexbox.

-
- -

Disposition en trame

- -

Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.

- -

À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à display — display: grid. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre display: grid, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de 1fr chacune et deux lignes de 100px. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.

- -

Utiliser display: grid

- - - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Un</div>
-    <div class="box2">Deux</div>
-    <div class="box3">Trois</div>
-    <div class="box4">Quatre</div>
-    <div class="box5">Cinq</div>
-    <div class="box6">Six</div>
-</div>
-
- -

{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}

- -

Placer des objets sur la grille

- -

Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.

- - - -
.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">Un</div>
-    <div class="box2">Deux</div>
-    <div class="box3">Trois</div>
-</div>
-
- - -

{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}

- -
-

Note : Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article Disposition tramée.

-
- -

La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.

- -

Flotteurs (boîtes flottantes)

- -

Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.

- -

La propriété {{cssxref("float")}} a quatre valeurs possibles :

- - - -

Dans l'exemple ci‑dessous nous faisons flotter un élément <div> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.

- - - -
<h1>Exemple simple de boîte flottante</h1>
-
-<div class="box">Boîte flottante</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('Flotteurs_boîtes_flottantes', '100%', 600) }}

- -
-

Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les Méthodes de mise en page traditionnelles.

-
- -

Techniques de positionnement

- -

Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.

- -

Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.

- -

Il y a cinq types de positionnement à connaître :

- - - -

Exemple simple de positionnement

- -

Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:

- -
<h1>Positionnement</h1>
-
-<p>Je suis un élément de niveau bloc de base.</p>
-<p class="positioned">Je suis un élément de niveau bloc de base.</p>
-<p>Je suis un élément de niveau bloc de base.</p>
- -

Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :

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

Le rendu est le suivant:

- -

{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}

- -

Positionnement relatif

- -

Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :

- -
.positioned {
-  position: relative;
-  top: 30px;
-  left: 30px;
-}
- -

Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur relative — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.

- -

Ajouter ce code donne le résultat suivant :

- - - - - -
.positioned {
-  position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
- -

{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}

- -

Positionnement absolu

- -

Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.

- -

En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :

- -
.positioned {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-}
- -

Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur absolute et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :

- - - - - -
.positioned {
-  position: absolute;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
- -

{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}

- -

C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le positionnement.

- -

Positionnement fixé

- -

Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.

- -

Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété position: fixed.

- -
<h1>Positionnement fixé</h1>
-
-<div class="positioned">Fixé</div>
-
-<p>Paragraphe 1.</p>
-<p>Paragraphe 2.</p>
-<p>Paragraphe 3.</p>
-
- - - - - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
- -

{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}

- -

Positionnement collant

- -

Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété position: sticky, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si position: fixed lui était appliqué.

- - - - - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
- -

{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}

- -
-

Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

-
- -

Les tableaux CSS

- -

Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).

- -

La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».

- -

Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.

- -
<form>
-  <p>Tout d'abord, dites‑nous votre nom et votre âge.</p>
-  <div>
-    <label for="fname">Prénom :</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Nom :</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Âge :</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.

- -

Notez que les propriétés display: table-caption; et caption-side: bottom; ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments input dans le code source. Voilà une bonne dose de souplesse.

- -
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: 400px;
-  color: #999;
-  font-style: italic;
-}
- -

Ce qui nous donne le résultat suivant:

- -

{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}

- -

Vous pouvez également examiner cet exemple directement à css-tables-example.html (voyez le code source également).

- -

Disposition sur plusieurs colonnes

- -

Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.

- -

Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.

- -

Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <div> de la classe container.

- -
<div class="container">
-    <h1>Disposition en colonnes</h1>
-
-    <p>Paragraphe 1.</p>
-    <p>Paragraphe 2.</p>
-
-</div>
-
- -

Noux utilisons une propriété column-width de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.

- - - - - -
    .container {
-        column-width: 200px;
-    }
- -

{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}

- -

Résumé

- -

Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !

- -

{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md new file mode 100644 index 0000000000..c295efa170 --- /dev/null +++ b/files/fr/learn/css/css_layout/introduction/index.md @@ -0,0 +1,666 @@ +--- +title: Introduction à la mise en page en CSS +slug: Learn/CSS/CSS_layout/Introduction +tags: + - Apprendre + - Article + - Boîtes flexibles + - CSS + - Débutant + - Flottants + - Flux + - Grille + - Intro + - Mise en page + - Positionnement + - Tableaux +translation_of: Learn/CSS/CSS_layout/Introduction +original_slug: Apprendre/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}
+ +

Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.
+ +

Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:

+ + + +

Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.

+ +

Cours normal

+ +

Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:

+ +
<p>J'aime mon chat.</p>
+
+<ul>
+  <li>Acheter des croquettes</li>
+  <li>Exercice</li>
+  <li>Haut les cœurs, ami</li>
+</ul>
+
+<p>La fin !</p>
+ +

Par défaut, le navigateur affichera ce code ainsi :

+ +

{{ EmbedLiveSample('Cours_normal', '100%', 200) }}

+ +

Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.

+ +

Les éléments disposés en empilement sont désignés comme étant des éléments blocs, par opposition aux éléments en ligne qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.

+ +
+

Note : « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.

+
+ +

Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.

+ +

Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :

+ + + +

La propriété « display »

+ +

Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété display. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété display. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est display: block. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est display: inline par défaut.

+ +

Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est display: block par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de display pour inline, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.

+ +

En plus de pouvoir changer la présentation par défaut en faisant passer un élément de block à inline et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de display. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont display: flex et display: grid.

+ +

Flexbox

+ +

Flexbox est l'abréviation pour Flexible Box Layout Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser flexbox, appliquez display: flex à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments flex. Voyons cela avec un simple exemple.

+ +

Le balisage HTML ci-dessous crée un élément conteneur de la classe wrapper, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.

+ +

Utiliser display: flex

+ +

Mais nous ajoutons display: flex sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des éléments flex et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est row. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est stretch. Ce qui signifie que les éléments se casent dans la hauteur du conteneur flex défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.

+ + + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +

{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}

+ +

Définir la propriété flex

+ +

En plus des propriétés ci-dessus applicables au conteneur flex, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.

+ +

À titre d'exemple, nous pouvons donner la valeur 1 à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.

+ + + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+</div>
+
+ +

{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}

+ +
+

Note : Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur Flexbox.

+
+ +

Disposition en trame

+ +

Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.

+ +

À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à display — display: grid. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre display: grid, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de 1fr chacune et deux lignes de 100px. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.

+ +

Utiliser display: grid

+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+    <div class="box4">Quatre</div>
+    <div class="box5">Cinq</div>
+    <div class="box6">Six</div>
+</div>
+
+ +

{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}

+ +

Placer des objets sur la grille

+ +

Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.

+ + + +
.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">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+</div>
+
+ + +

{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}

+ +
+

Note : Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article Disposition tramée.

+
+ +

La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.

+ +

Flotteurs (boîtes flottantes)

+ +

Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.

+ +

La propriété {{cssxref("float")}} a quatre valeurs possibles :

+ + + +

Dans l'exemple ci‑dessous nous faisons flotter un élément <div> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.

+ + + +
<h1>Exemple simple de boîte flottante</h1>
+
+<div class="box">Boîte flottante</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('Flotteurs_boîtes_flottantes', '100%', 600) }}

+ +
+

Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les Méthodes de mise en page traditionnelles.

+
+ +

Techniques de positionnement

+ +

Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.

+ +

Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.

+ +

Il y a cinq types de positionnement à connaître :

+ + + +

Exemple simple de positionnement

+ +

Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:

+ +
<h1>Positionnement</h1>
+
+<p>Je suis un élément de niveau bloc de base.</p>
+<p class="positioned">Je suis un élément de niveau bloc de base.</p>
+<p>Je suis un élément de niveau bloc de base.</p>
+ +

Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :

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

Le rendu est le suivant:

+ +

{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}

+ +

Positionnement relatif

+ +

Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur relative — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.

+ +

Ajouter ce code donne le résultat suivant :

+ + + + + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+ +

{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}

+ +

Positionnement absolu

+ +

Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.

+ +

En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur absolute et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :

+ + + + + +
.positioned {
+  position: absolute;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+ +

{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}

+ +

C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le positionnement.

+ +

Positionnement fixé

+ +

Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.

+ +

Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété position: fixed.

+ +
<h1>Positionnement fixé</h1>
+
+<div class="positioned">Fixé</div>
+
+<p>Paragraphe 1.</p>
+<p>Paragraphe 2.</p>
+<p>Paragraphe 3.</p>
+
+ + + + + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+ +

{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}

+ +

Positionnement collant

+ +

Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété position: sticky, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si position: fixed lui était appliqué.

+ + + + + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+ +

{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}

+ +
+

Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

+
+ +

Les tableaux CSS

+ +

Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).

+ +

La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».

+ +

Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.

+ +
<form>
+  <p>Tout d'abord, dites‑nous votre nom et votre âge.</p>
+  <div>
+    <label for="fname">Prénom :</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Nom :</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Âge :</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.

+ +

Notez que les propriétés display: table-caption; et caption-side: bottom; ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments input dans le code source. Voilà une bonne dose de souplesse.

+ +
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: 400px;
+  color: #999;
+  font-style: italic;
+}
+ +

Ce qui nous donne le résultat suivant:

+ +

{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}

+ +

Vous pouvez également examiner cet exemple directement à css-tables-example.html (voyez le code source également).

+ +

Disposition sur plusieurs colonnes

+ +

Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.

+ +

Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.

+ +

Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <div> de la classe container.

+ +
<div class="container">
+    <h1>Disposition en colonnes</h1>
+
+    <p>Paragraphe 1.</p>
+    <p>Paragraphe 2.</p>
+
+</div>
+
+ +

Noux utilisons une propriété column-width de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.

+ + + + + +
    .container {
+        column-width: 200px;
+    }
+ +

{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}

+ +

Résumé

+ +

Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !

+ +

{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html deleted file mode 100644 index e78ffa385a..0000000000 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html +++ /dev/null @@ -1,582 +0,0 @@ ---- -title: Méthodes de mises en page traditionnelles -slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods -tags: - - Apprendre - - Boîtes flottantes - - CSS - - Disposition - - Débutant - - Guide - - Héritage - - systèmes de trames -translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods -original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.

- - - - - - - - - - - - -
Prérequis:Les fondamentaux du HTML (voyez Introduction au HTML) et une idée du fonctionnement de CSS (voyez Introduction à CSS et Styles de boîtes).
Objectif:Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.
- -

Mise en page et systèmes de trames avant CSS Grid Layout

- -

Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».

- -

Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.

- -

Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.

- -

Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.

- -

Disposition sur deux colonnes

- -

Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier index.html sur l'ordinateur, en le remplissant avec le modèle HTML simple et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.

- -

Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de body par ceci :

- -
<h1>Exemple de disposition sur 2 colonnes</h1>
-<div>
-  <h2>Première colonne</h2>
-  <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>
-</div>
-
-<div>
-  <h2>Seconde colonne</h2>
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
-</div>
- -

Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.

- -

Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-}
- -

Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :

- -
div:nth-of-type(1) {
-  width: 48%;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-}
- -

Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :

- -
div:nth-of-type(1) {
-  width: 48%;
-  float: left;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-  float: right;
-}
- -

En mettant tout ensemble, voici le résultat :

- -

Exemple complet

- - - - - -

{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}

- -

Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une disposition fluide, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.

- -
-

Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

-
- -

Ancienne création d'un cadre de trames

- -

La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le dégagement des boîtes flottantes.

- -

Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.

- -

Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.

- -

Une simple trame de largeurs fixes

- -

Créons d'abord une trame à colonnes à largeur fixe.

- -

Commençons par faire une copie locale du fichier exemple simple-grid.html qui comporte le balisage suivant dans body.

- -
<div class="wrapper">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col span1">13</div>
-    <div class="col span6">14</div>
-    <div class="col span3">15</div>
-    <div class="col span2">16</div>
-  </div>
-</div>
- -

Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.

- -

- -

À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à border-box sur tous les éléments du site (voir Modification totale du modèle de boîte pour plus d'explications).

- -
* {
-  box-sizing: border-box;
-}
-
-body {
-  width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 20px;
-}
- -

Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :

- -
.row {
-  clear: both;
-}
- -

Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.

- -

Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.

- -

Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.

- -

L'étape suivante consiste à créer un règle pour la classe .col la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et  une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :

- -
.col {
-  float: left;
-  margin-left: 20px;
-  width: 60px;
-  background: rgb(255, 150, 150);
-}
- -

La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.

- -
-

Note : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.

-
- -

Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.

- -

Ajoutez ce qui suit en bas de la CSS :

- -
/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */
-.col.span2 { width: 140px; }
-/* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */
-.col.span3 { width: 220px; }
-/* et ainsi de suite... */
-.col.span4 { width: 300px; }
-.col.span5 { width: 380px; }
-.col.span6 { width: 460px; }
-.col.span7 { width: 540px; }
-.col.span8 { width: 620px; }
-.col.span9 { width: 700px; }
-.col.span10 { width: 780px; }
-.col.span11 { width: 860px; }
-.col.span12 { width: 940px; }
- -

Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.

- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

-
- -

Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :

- -
<div class="row">
-  <div class="col span8">13</div>
-  <div class="col span4">14</div>
-</div>
- -

Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !

- -

Creation d'une trame fluide

- -

Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.

- -

L'équation qui transforme une largeur fixe en pourcentage est la suivante :

- -
cible / contexte = résultat
- -

Pour la largeur de la première colonne, la largeur cible est de 60 pixels et le contexte est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.

- -
60 / 960 = 0.0625
- -

Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.

- -

En faisant de même pour la largeur de la gouttière :

- -
20 / 960 = 0.02083333333
- -

Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle .col et de {{cssxref("padding-right")}} dans la règle .wrapper.

- -

Mise à jour de la trame

- -

Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de simple-grid-finished.html comme point de départ.

- -

Mettez à jour la deuxième règle CSS (avec le sélecteur .wrapper) comme suit :

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
- -

Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.

- -

Ensuite, mettez à jour les quatre règles CSS (du sélecteur .col) ainsi :

- -
.col {
-  float: left;
-  margin-left: 2.08333333%;
-  width: 6.25%;
-  background: rgb(255, 150, 150);
-}
- -

Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes  les règles .col.span en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.

- -

Mettez à jour le bloc bas des règles CSS avec ce qui suit :

- -
/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */
-.col.span2 { width: 14.58333333%; }
-/* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */
-.col.span3 { width: 22.91666666%; }
-/* Et ainsi de suite... */
-.col.span4 { width: 31.24999999%; }
-.col.span5 { width: 39.58333332%; }
-.col.span6 { width: 47.91666665%; }
-.col.span7 { width: 56.24999998%; }
-.col.span8 { width: 64.58333331%; }
-.col.span9 { width: 72.91666664%; }
-.col.span10 { width: 81.24999997%; }
-.col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }
- -

Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.

- -
-

Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

-
- -

Faciliter les calculs avec la fonction calc()

- -

Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir cet exemple dans le didacticiel MediaRecorder API.

- -

Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction calc() nous permet de faire ce calcul dans la valeur width même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :

- -
.col.span4 {
-  width: calc((6.25%*4) + (2.08333333%*3));
-}
- -

Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :

- -
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
-.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
-.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
-.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
-.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
-.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
-.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
-.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
-.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
-.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
- -
-

Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

-
- -
-

Note : Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction calc(), même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.

-
- -

Systèmes de trames « sémantiques » vs. « non sémantiques »

- -

Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes span2, span3, etc.

- -

Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe content que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe span8, ce qui vous donne une règle :

- -
.content {
-  width: calc((6.25%*8) + (2.08333333%*7));
-}
- -
-

Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

-
- -

Décalage du conteneur d'une trame

- -

La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe offset pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !

- -

Essayons.

- -

Démarrons avec le code précédent ou utilisons le fichier fluid-grid.html comme point de départ.

- -

Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :

- -
.offset-by-one {
-  margin-left: calc(6.25% + (2.08333333%*2));
-}
- -

Ou, si vous préférez calculer le pourcentage vous-même, utilisez :

- -
.offset-by-one {
-  margin-left: 10.41666666%;
-}
- -

Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :

- -
<div class="col span6">14</div>
- -

remplacez‑le par :

- -
<div class="col span5 offset-by-one">14</div>
- -
-

Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

-
- -

Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple fluid-grid-offset.html (voir aussi l'exécution directement). L'exemple terminé doit ressembler à ceci :

- -

- -
-

Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

-
- -

Limitations des trames de boîtes flottantes

- -

En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.

- -

N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.

- -

La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..

- -

Trames Flexbox ?

- -

Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.

- -

Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes wrapper, row et col :

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
-
-
-.row {
-  display: flex;
-}
-
-.col {
-  margin-left: 2.08333333%;
-  margin-bottom: 1em;
-  width: 6.25%;
-  flex: 1 1 auto;
-  background: rgb(255,150,150);
-}
- -

Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code flexbox-grid.html (voir aussi en  exécution directe).

- -

Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées  pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à display : flex.

- -

Pour .col nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à auto. Comme la valeur {{cssxref("width")}} de l'élément est fixée, auto utilisera cette valeur en tant que valeur de flex-basis.

- -

Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.

- -

- -

Pour corriger cela, nous avons encore besoin d'inclure les classes span pour donner une largeur qui remplave la valeur donnée par flex-basis pour cet élément.

- -

Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.

- -

Flexbox est un design mono-dimensionnel par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes et pour les lignes, ce qui signifie que si nous utilisons Flexbox pour  une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.

- -

Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.

- -

Systèmes de trame tierces parties

- -

Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que Bootstrap et Foundation incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.

- -

Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.

- -

Commençons par visiter le site web de Skeleton et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers skeleton.css et normalize.css dans un nouveau répertoire.

- -

Faites une copie de html-skeleton.html et enregistrez le dans le même répertoire que skeleton.css et normalize.css.

- -

Incorporez les .css skeleton et normalize dans la page HTML, en ajoutant ce qui suit dans head :

- -
<link href="normalize.css" rel="stylesheet">
-<link href="skeleton.css" rel="stylesheet">
- -

Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.

- -
-

Note : Normalize est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.

-
- -

Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :

- -
<div class="container">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col">13</div>
-    <div class="col">14</div>
-    <div class="col">15</div>
-    <div class="col">16</div>
-  </div>
-</div>
- -

Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe container — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.

- -

Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on se sert de cette classe. L'élément <div> est centré en utilisant la valeur auto pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur border-box comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.

- -
.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
- -

Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <div> supplémentaire ou d'un autre élément de la classe row imbriqué entre le <div> de content et les véritables conteneurs <div> de contenu. Nous avons aussi déjà fait cela.

- -

Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes one column pour qu'elles se répartissent à raison de une par colonne.

- -

Ajoutez maintenant cet extrait de lignes de code :

- -
<div class="container">
-  <div class="row">
-    <div class="one column">1</div>
-    <div class="one column">2</div>
-    <div class="one column">3</div>
-    /* and so on */
-  </div>
-</div>
- -

Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :

- -
<div class="row">
-  <div class="one column">13</div>
-  <div class="six columns">14</div>
-  <div class="three columns">15</div>
-  <div class="two columns">16</div>
-</div>
- -

Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.

- -
-

Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

-
- -

Si vous regardez dans le fichier skeleton.css vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.

- -
.three.columns { width: 22%; }
- -

Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.

- -

Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.

- -

Résumé

- -

Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences  entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md new file mode 100644 index 0000000000..e78ffa385a --- /dev/null +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -0,0 +1,582 @@ +--- +title: Méthodes de mises en page traditionnelles +slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods +tags: + - Apprendre + - Boîtes flottantes + - CSS + - Disposition + - Débutant + - Guide + - Héritage + - systèmes de trames +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (voyez Introduction au HTML) et une idée du fonctionnement de CSS (voyez Introduction à CSS et Styles de boîtes).
Objectif:Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.
+ +

Mise en page et systèmes de trames avant CSS Grid Layout

+ +

Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».

+ +

Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.

+ +

Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.

+ +

Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.

+ +

Disposition sur deux colonnes

+ +

Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier index.html sur l'ordinateur, en le remplissant avec le modèle HTML simple et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.

+ +

Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de body par ceci :

+ +
<h1>Exemple de disposition sur 2 colonnes</h1>
+<div>
+  <h2>Première colonne</h2>
+  <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>
+</div>
+
+<div>
+  <h2>Seconde colonne</h2>
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+ +

Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.

+ +

Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+ +

Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :

+ +
div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}
+ +

Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :

+ +
div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+ +

En mettant tout ensemble, voici le résultat :

+ +

Exemple complet

+ + + + + +

{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}

+ +

Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une disposition fluide, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.

+ +
+

Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

+
+ +

Ancienne création d'un cadre de trames

+ +

La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le dégagement des boîtes flottantes.

+ +

Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.

+ +

Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.

+ +

Une simple trame de largeurs fixes

+ +

Créons d'abord une trame à colonnes à largeur fixe.

+ +

Commençons par faire une copie locale du fichier exemple simple-grid.html qui comporte le balisage suivant dans body.

+ +
<div class="wrapper">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col span1">13</div>
+    <div class="col span6">14</div>
+    <div class="col span3">15</div>
+    <div class="col span2">16</div>
+  </div>
+</div>
+ +

Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.

+ +

+ +

À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à border-box sur tous les éléments du site (voir Modification totale du modèle de boîte pour plus d'explications).

+ +
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}
+ +

Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :

+ +
.row {
+  clear: both;
+}
+ +

Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.

+ +

Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.

+ +

Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.

+ +

L'étape suivante consiste à créer un règle pour la classe .col la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et  une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :

+ +
.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}
+ +

La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.

+ +
+

Note : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.

+
+ +

Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.

+ +

Ajoutez ce qui suit en bas de la CSS :

+ +
/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */
+.col.span2 { width: 140px; }
+/* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */
+.col.span3 { width: 220px; }
+/* et ainsi de suite... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }
+ +

Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.

+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

+
+ +

Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :

+ +
<div class="row">
+  <div class="col span8">13</div>
+  <div class="col span4">14</div>
+</div>
+ +

Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !

+ +

Creation d'une trame fluide

+ +

Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.

+ +

L'équation qui transforme une largeur fixe en pourcentage est la suivante :

+ +
cible / contexte = résultat
+ +

Pour la largeur de la première colonne, la largeur cible est de 60 pixels et le contexte est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.

+ +
60 / 960 = 0.0625
+ +

Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.

+ +

En faisant de même pour la largeur de la gouttière :

+ +
20 / 960 = 0.02083333333
+ +

Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle .col et de {{cssxref("padding-right")}} dans la règle .wrapper.

+ +

Mise à jour de la trame

+ +

Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de simple-grid-finished.html comme point de départ.

+ +

Mettez à jour la deuxième règle CSS (avec le sélecteur .wrapper) comme suit :

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+ +

Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.

+ +

Ensuite, mettez à jour les quatre règles CSS (du sélecteur .col) ainsi :

+ +
.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}
+ +

Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes  les règles .col.span en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.

+ +

Mettez à jour le bloc bas des règles CSS avec ce qui suit :

+ +
/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */
+.col.span3 { width: 22.91666666%; }
+/* Et ainsi de suite... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }
+ +

Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.

+ +
+

Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

+
+ +

Faciliter les calculs avec la fonction calc()

+ +

Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir cet exemple dans le didacticiel MediaRecorder API.

+ +

Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction calc() nous permet de faire ce calcul dans la valeur width même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :

+ +
.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}
+ +

Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :

+ +
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+ +
+

Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

+
+ +
+

Note : Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction calc(), même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.

+
+ +

Systèmes de trames « sémantiques » vs. « non sémantiques »

+ +

Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes span2, span3, etc.

+ +

Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe content que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe span8, ce qui vous donne une règle :

+ +
.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}
+ +
+

Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

+
+ +

Décalage du conteneur d'une trame

+ +

La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe offset pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !

+ +

Essayons.

+ +

Démarrons avec le code précédent ou utilisons le fichier fluid-grid.html comme point de départ.

+ +

Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :

+ +
.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}
+ +

Ou, si vous préférez calculer le pourcentage vous-même, utilisez :

+ +
.offset-by-one {
+  margin-left: 10.41666666%;
+}
+ +

Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :

+ +
<div class="col span6">14</div>
+ +

remplacez‑le par :

+ +
<div class="col span5 offset-by-one">14</div>
+ +
+

Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

+
+ +

Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple fluid-grid-offset.html (voir aussi l'exécution directement). L'exemple terminé doit ressembler à ceci :

+ +

+ +
+

Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

+
+ +

Limitations des trames de boîtes flottantes

+ +

En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.

+ +

N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.

+ +

La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..

+ +

Trames Flexbox ?

+ +

Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.

+ +

Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes wrapper, row et col :

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}
+ +

Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code flexbox-grid.html (voir aussi en  exécution directe).

+ +

Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées  pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à display : flex.

+ +

Pour .col nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à auto. Comme la valeur {{cssxref("width")}} de l'élément est fixée, auto utilisera cette valeur en tant que valeur de flex-basis.

+ +

Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.

+ +

+ +

Pour corriger cela, nous avons encore besoin d'inclure les classes span pour donner une largeur qui remplave la valeur donnée par flex-basis pour cet élément.

+ +

Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.

+ +

Flexbox est un design mono-dimensionnel par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes et pour les lignes, ce qui signifie que si nous utilisons Flexbox pour  une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.

+ +

Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.

+ +

Systèmes de trame tierces parties

+ +

Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que Bootstrap et Foundation incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.

+ +

Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.

+ +

Commençons par visiter le site web de Skeleton et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers skeleton.css et normalize.css dans un nouveau répertoire.

+ +

Faites une copie de html-skeleton.html et enregistrez le dans le même répertoire que skeleton.css et normalize.css.

+ +

Incorporez les .css skeleton et normalize dans la page HTML, en ajoutant ce qui suit dans head :

+ +
<link href="normalize.css" rel="stylesheet">
+<link href="skeleton.css" rel="stylesheet">
+ +

Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.

+ +
+

Note : Normalize est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.

+
+ +

Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :

+ +
<div class="container">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col">13</div>
+    <div class="col">14</div>
+    <div class="col">15</div>
+    <div class="col">16</div>
+  </div>
+</div>
+ +

Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe container — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.

+ +

Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on se sert de cette classe. L'élément <div> est centré en utilisant la valeur auto pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur border-box comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.

+ +
.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+ +

Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <div> supplémentaire ou d'un autre élément de la classe row imbriqué entre le <div> de content et les véritables conteneurs <div> de contenu. Nous avons aussi déjà fait cela.

+ +

Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes one column pour qu'elles se répartissent à raison de une par colonne.

+ +

Ajoutez maintenant cet extrait de lignes de code :

+ +
<div class="container">
+  <div class="row">
+    <div class="one column">1</div>
+    <div class="one column">2</div>
+    <div class="one column">3</div>
+    /* and so on */
+  </div>
+</div>
+ +

Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :

+ +
<div class="row">
+  <div class="one column">13</div>
+  <div class="six columns">14</div>
+  <div class="three columns">15</div>
+  <div class="two columns">16</div>
+</div>
+ +

Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.

+ +
+

Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

+
+ +

Si vous regardez dans le fichier skeleton.css vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.

+ +
.three.columns { width: 22%; }
+ +

Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.

+ +

Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.

+ +

Résumé

+ +

Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences  entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html deleted file mode 100644 index f629d17eb3..0000000000 --- a/files/fr/learn/css/css_layout/media_queries/index.html +++ /dev/null @@ -1,426 +0,0 @@ ---- -title: Guide du débutant des Media Queries -slug: Learn/CSS/CSS_layout/Media_queries -translation_of: Learn/CSS/CSS_layout/Media_queries -original_slug: Apprendre/CSS/CSS_layout/Media_queries ---- -

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.

- - - - - - - - - - - - -
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)
Objective:To understand how to use media queries, and the most common approach for using them to create responsive designs.
- -

Media Query Basics

- -

The simplest media query syntax looks like this:

- -
@media media-type and (media-feature-rule) {
-  /* CSS rules go here */
-}
- -

It consists of:

- - - -

Media types

- -

The possible types of media you can specify are:

- - - -

The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.

- -
@media print {
-    body {
-        font-size: 12pt;
-    }
-}
- -
-

Note : the media type here is different from the so-called {{glossary("MIME type")}}.

-
- -
-

Note : there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.

-
- -
-

Note : Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.

-
- -

Media feature rules

- -

After specifying the type, you can then target a media feature with a rule.

- -

Width and height

- -

The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.

- -

These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.

- -
@media screen and (width: 600px) {
-    body {
-        color: red;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use max-width:

- -
@media screen and (max-width: 400px) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone.

- -

There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at Using Media Queries: Media Features.

- -

Orientation

- -

One well-supported media feature is orientation, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.

- -
@media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.

- -

Use of pointing devices

- -

As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

- -
@media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.

- -

Also in Level 4 is the pointer media feature. This takes three possible values, none, fine and coarse. A fine pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A coarse pointer is your finger on a touchscreen. The value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.

- -

Using pointer can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.

- -

More complex media queries

- -

With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.

- -

"and" logic in media queries

- -

To combine media features you can use and in much the same way as we have used and above to combine a media type and feature. For example, we might want to test for a min-width and orientation. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.

- -
@media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

"or" logic in media queries

- -

If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.

- -
@media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

"not" logic in media queries

- -

You can negate an entire media query by using the not operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.

- -
@media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

How to choose breakpoints

- -

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.

- -

There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints.

- -

The Responsive Design Mode in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

- -

A screenshot of a layout in a mobile view in Firefox DevTools.

- -

Active learning: mobile first responsive design

- -

Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as mobile first responsive design and is quite often the best approach to follow.

- -

The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.

- -

The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.

- -

Walkthrough: a simple mobile-first layout

- -

Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.

- -
* {
-    box-sizing: border-box;
-}
-
-body {
-    width: 90%;
-    margin: 2em auto;
-    font: 1em/1.3 Arial, Helvetica, sans-serif;
-}
-
-a:link,
-a:visited {
-    color: #333;
-}
-
-nav ul,
-aside ul {
-    list-style: none;
-    padding: 0;
-}
-
-nav a:link,
-nav a:visited {
-    background-color: rgba(207, 232, 220, 0.2);
-    border: 2px solid rgb(79, 185, 227);
-    text-decoration: none;
-    display: block;
-    padding: 10px;
-    color: #333;
-    font-weight: bold;
-}
-
-nav a:hover {
-    background-color: rgba(207, 232, 220, 0.7);
-}
-
-.related {
-    background-color: rgba(79, 185, 227, 0.3);
-    border: 1px solid rgb(79, 185, 227);
-    padding: 10px;
-}
-
-.sidebar {
-    background-color: rgba(207, 232, 220, 0.5);
-    padding: 10px;
-}
-
-article {
-    margin-bottom: 1em;
-}
-
- -

We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.

- -
<body>
-    <div class="wrapper">
-      <header>
-        <nav>
-          <ul>
-            <li><a href="">About</a></li>
-            <li><a href="">Contact</a></li>
-            <li><a href="">Meet the team</a></li>
-            <li><a href="">Blog</a></li>
-          </ul>
-        </nav>
-      </header>
-      <main>
-        <article>
-          <div class="content">
-            <h1>Veggies!</h1>
-            <p>
-              ...
-            </p>
-          </div>
-          <aside class="related">
-            <p>
-              ...
-            </p>
-          </aside>
-        </article>
-
-        <aside class="sidebar">
-          <h2>External vegetable-based links</h2>
-          <ul>
-            <li>
-              ...
-            </li>
-          </ul>
-        </aside>
-      </main>
-
-      <footer><p>&copy;2019</p></footer>
-    </div>
-  </body>
-
- -

This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.

- -

Open step 1 in the browser, or view the source.

- -

If you want to follow on and implement this example as we go, make a local copy of step1.html on your computer.

- -

From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.

- -

Add the below code into the bottom of your step1.html CSS.

- -
@media screen and (min-width: 40em) {
-    article {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    nav ul {
-        display: flex;
-    }
-
-    nav li {
-        flex: 1;
-    }
-}
-
- -

This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.

- -

Open step 2 in the browser, or view the source.

- -

Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.

- -

Again, add the below code into the bottom of your step1.html CSS.

- -
@media screen and (min-width: 70em) {
-    main {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    article {
-        margin-bottom: 0;
-    }
-
-    footer {
-        border-top: 1px solid #ccc;
-        margin-top: 2em;
-    }
-}
-
- -

Open step 3 in the browser, or view the source.

- -

If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.

- -

Do you really need a media query?

- -

Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.

- -

This could be achieved using the following:

- -
<ul class="grid">
-    <li>
-        <h2>Card 1</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 2</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 3</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 4</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 5</h2>
-        <p>...</p>
-    </li>
-</ul>
- -
.grid {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-.grid li {
-    border: 1px solid #666;
-    padding: 10px;
-}
- -

Open the grid layout example in the browser, or view the source.

- -

With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see Test your skills: Responsive Web Design.

- -

Summary

- -

In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.

- -

You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the pointer media feature.

- -

You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/fr/learn/css/css_layout/media_queries/index.md b/files/fr/learn/css/css_layout/media_queries/index.md new file mode 100644 index 0000000000..f629d17eb3 --- /dev/null +++ b/files/fr/learn/css/css_layout/media_queries/index.md @@ -0,0 +1,426 @@ +--- +title: Guide du débutant des Media Queries +slug: Learn/CSS/CSS_layout/Media_queries +translation_of: Learn/CSS/CSS_layout/Media_queries +original_slug: Apprendre/CSS/CSS_layout/Media_queries +--- +

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.

+ + + + + + + + + + + + +
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)
Objective:To understand how to use media queries, and the most common approach for using them to create responsive designs.
+ +

Media Query Basics

+ +

The simplest media query syntax looks like this:

+ +
@media media-type and (media-feature-rule) {
+  /* CSS rules go here */
+}
+ +

It consists of:

+ + + +

Media types

+ +

The possible types of media you can specify are:

+ + + +

The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.

+ +
@media print {
+    body {
+        font-size: 12pt;
+    }
+}
+ +
+

Note : the media type here is different from the so-called {{glossary("MIME type")}}.

+
+ +
+

Note : there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.

+
+ +
+

Note : Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.

+
+ +

Media feature rules

+ +

After specifying the type, you can then target a media feature with a rule.

+ +

Width and height

+ +

The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.

+ +

These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.

+ +
@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use max-width:

+ +
@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone.

+ +

There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at Using Media Queries: Media Features.

+ +

Orientation

+ +

One well-supported media feature is orientation, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.

+ +
@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.

+ +

Use of pointing devices

+ +

As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

+ +
@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.

+ +

Also in Level 4 is the pointer media feature. This takes three possible values, none, fine and coarse. A fine pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A coarse pointer is your finger on a touchscreen. The value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.

+ +

Using pointer can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.

+ +

More complex media queries

+ +

With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.

+ +

"and" logic in media queries

+ +

To combine media features you can use and in much the same way as we have used and above to combine a media type and feature. For example, we might want to test for a min-width and orientation. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.

+ +
@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

"or" logic in media queries

+ +

If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.

+ +
@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

"not" logic in media queries

+ +

You can negate an entire media query by using the not operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.

+ +
@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

How to choose breakpoints

+ +

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.

+ +

There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints.

+ +

The Responsive Design Mode in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

+ +

A screenshot of a layout in a mobile view in Firefox DevTools.

+ +

Active learning: mobile first responsive design

+ +

Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as mobile first responsive design and is quite often the best approach to follow.

+ +

The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.

+ +

The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.

+ +

Walkthrough: a simple mobile-first layout

+ +

Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.

+ +
* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+
+ +

We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.

+ +
<body>
+    <div class="wrapper">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="">About</a></li>
+            <li><a href="">Contact</a></li>
+            <li><a href="">Meet the team</a></li>
+            <li><a href="">Blog</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <article>
+          <div class="content">
+            <h1>Veggies!</h1>
+            <p>
+              ...
+            </p>
+          </div>
+          <aside class="related">
+            <p>
+              ...
+            </p>
+          </aside>
+        </article>
+
+        <aside class="sidebar">
+          <h2>External vegetable-based links</h2>
+          <ul>
+            <li>
+              ...
+            </li>
+          </ul>
+        </aside>
+      </main>
+
+      <footer><p>&copy;2019</p></footer>
+    </div>
+  </body>
+
+ +

This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.

+ +

Open step 1 in the browser, or view the source.

+ +

If you want to follow on and implement this example as we go, make a local copy of step1.html on your computer.

+ +

From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.

+ +

Add the below code into the bottom of your step1.html CSS.

+ +
@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+
+ +

This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.

+ +

Open step 2 in the browser, or view the source.

+ +

Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.

+ +

Again, add the below code into the bottom of your step1.html CSS.

+ +
@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}
+
+ +

Open step 3 in the browser, or view the source.

+ +

If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.

+ +

Do you really need a media query?

+ +

Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.

+ +

This could be achieved using the following:

+ +
<ul class="grid">
+    <li>
+        <h2>Card 1</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 2</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 3</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 4</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 5</h2>
+        <p>...</p>
+    </li>
+</ul>
+ +
.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}
+ +

Open the grid layout example in the browser, or view the source.

+ +

With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see Test your skills: Responsive Web Design.

+ +

Summary

+ +

In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.

+ +

You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the pointer media feature.

+ +

You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html deleted file mode 100644 index 248c788e2b..0000000000 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -title: Disposition sur plusieurs colonnes -slug: Learn/CSS/CSS_layout/Multiple-column_Layout -tags: - - Apprendre - - Apprentissage - - CSS - - Colonnes multiples - - Disposition - - Débutant - - Guide - - Multi-col -translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout -original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
- -

Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

- - - - - - - - - - - - -
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.
- -

Un exemple élémentaire

- -

Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « multicol ». Vous pourrez effectuer le suivi de cet article en  téléchargeant le fichier de depart multicol et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.

- -

Notre point de départ contient un HTML très simple ; une enveloppe de la classe container dans laquelle nous avons placé un en‑tête et quelques paragraphes.

- -

L'élément {{htmlelement("div")}} de la classe container sera notre conteneur multi‑colonnes. Nous basculons dans une disposition multicol en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété column-count crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :

- -
.container {
-  column-count: 3;
-}
-
- -

Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.

- - - -
<div class="container">
-  <h1>Simple exemple <i>multicol</i></h1>
-
-  <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>
-
-  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
-  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
-  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.</p>
-</div>
-
- -

{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}

- -

Définir column-width

- -

Modifiez la CSS pour utiliser column-width ainsi :

- -
.container {
-  column-width: 200px;
-}
-
- -

Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.

- - - - - -

{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}

- -

Style des colonnes

- -

Les colonnes créées avec multicol ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :

- - - -

En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété column-gap :

- -
.container {
-  column-width: 200px;
-  column-gap: 20px;
-}
- -

Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec column-rule. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, column-rule, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.

- -
.container {
-  column-count: 3;
-  column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
-}
- -

Ajoutons des règles pour les divers styles et couleurs.

- - - - - -

{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}

- -

Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  column-gap. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.

- -

Colonnes et coupures

- -

Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur multicol, il est découpé en colonnes de texte pour permettre cette disposition.

- -

Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé multicol pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.

- - - - - - -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
- -

{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}

- -

Utiliser break-inside

- -

Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

- -

Il est également préférable d'ajouter l'ancienne propriété page-break-inside: avoid pour une meilleure prise en charge par les divers navigateurs.

- -
.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

Actualisez la page et les boîtes devraient rester entières.

- - - - - -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
- -

{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}

- -

Résumé

- -

Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.md b/files/fr/learn/css/css_layout/multiple-column_layout/index.md new file mode 100644 index 0000000000..248c788e2b --- /dev/null +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.md @@ -0,0 +1,381 @@ +--- +title: Disposition sur plusieurs colonnes +slug: Learn/CSS/CSS_layout/Multiple-column_Layout +tags: + - Apprendre + - Apprentissage + - CSS + - Colonnes multiples + - Disposition + - Débutant + - Guide + - Multi-col +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
+ +

Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.
+ +

Un exemple élémentaire

+ +

Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « multicol ». Vous pourrez effectuer le suivi de cet article en  téléchargeant le fichier de depart multicol et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.

+ +

Notre point de départ contient un HTML très simple ; une enveloppe de la classe container dans laquelle nous avons placé un en‑tête et quelques paragraphes.

+ +

L'élément {{htmlelement("div")}} de la classe container sera notre conteneur multi‑colonnes. Nous basculons dans une disposition multicol en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété column-count crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :

+ +
.container {
+  column-count: 3;
+}
+
+ +

Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.

+ + + +
<div class="container">
+  <h1>Simple exemple <i>multicol</i></h1>
+
+  <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>
+
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
+  cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
+  dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+
+ +

{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}

+ +

Définir column-width

+ +

Modifiez la CSS pour utiliser column-width ainsi :

+ +
.container {
+  column-width: 200px;
+}
+
+ +

Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.

+ + + + + +

{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}

+ +

Style des colonnes

+ +

Les colonnes créées avec multicol ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :

+ + + +

En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété column-gap :

+ +
.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+ +

Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec column-rule. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, column-rule, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.

+ +
.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}
+ +

Ajoutons des règles pour les divers styles et couleurs.

+ + + + + +

{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}

+ +

Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  column-gap. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.

+ +

Colonnes et coupures

+ +

Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur multicol, il est découpé en colonnes de texte pour permettre cette disposition.

+ +

Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé multicol pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.

+ + + + + + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+ +

{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}

+ +

Utiliser break-inside

+ +

Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

+ +

Il est également préférable d'ajouter l'ancienne propriété page-break-inside: avoid pour une meilleure prise en charge par les divers navigateurs.

+ +
.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

Actualisez la page et les boîtes devraient rester entières.

+ + + + + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+ +

{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}

+ +

Résumé

+ +

Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html deleted file mode 100644 index b0edfa8415..0000000000 --- a/files/fr/learn/css/css_layout/normal_flow/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Cours normal -slug: Learn/CSS/CSS_layout/Normal_Flow -translation_of: Learn/CSS/CSS_layout/Normal_Flow -original_slug: Apprendre/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}

- -

Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont les CSS fonctionnent (étudiez Introduction aux CSS).
Objectif :Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.
- -

Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.

- -

Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.

- -

Disposition des éléments par défaut

- -

Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.

- -

Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec display: bloc ; (ou même display: inline-block ; qui mélange les caractéristiques des deux).

- -

Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.

- -

Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.

- -

Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.

- -

Voici un exemple simple expliquant cela :

- -

Exemple

- -
<h2>Cours d'un document de base</h2>
-
-<p>Je suis un élément de niveau bloc de base.
- Mes éléments de niveau bloc adjacents sont sur de
- nouvelles lignes en dessous de moi.</p>
-
-<p>Par défaut, nous occupons 100% de la largeur
- de notre élément parent et nous sommes aussi hauts
- que notre contenu enfant. Nos largeur et hauteur totales
- sont égales à la largeur/hauteur de notre
- contenu + remplissage + encadrement.</p>
-
-<p>Nous sommes séparés de nos marges.
- Comme il y a fusion des marges, nous sommes séparés
- par la largeur de l'une de nos marges et non les deux.</p>
-
-<p>Des éléments inline <span>comme celui-ci</span> ou
- <span>celui‑là</span> sont placés sur la même ligne et
- les nœuds de texte adjacents, s'il y a de la place sur
- la même ligne. Les débordements des éléments inline
- <span>sont placés sur une nouvelle ligne si possible
- (comme celle‑ci contenant du texte)</span>, sinon ils
- sont placés sur une nouvelle ligne, comme cette image :
- <img src="long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
- -

{{ EmbedLiveSample('Exemple', '100%', 500) }}

- -

Résumé

- -

Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/normal_flow/index.md b/files/fr/learn/css/css_layout/normal_flow/index.md new file mode 100644 index 0000000000..b0edfa8415 --- /dev/null +++ b/files/fr/learn/css/css_layout/normal_flow/index.md @@ -0,0 +1,109 @@ +--- +title: Cours normal +slug: Learn/CSS/CSS_layout/Normal_Flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +original_slug: Apprendre/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}

+ +

Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont les CSS fonctionnent (étudiez Introduction aux CSS).
Objectif :Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.
+ +

Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.

+ +

Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.

+ +

Disposition des éléments par défaut

+ +

Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.

+ +

Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec display: bloc ; (ou même display: inline-block ; qui mélange les caractéristiques des deux).

+ +

Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.

+ +

Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.

+ +

Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.

+ +

Voici un exemple simple expliquant cela :

+ +

Exemple

+ +
<h2>Cours d'un document de base</h2>
+
+<p>Je suis un élément de niveau bloc de base.
+ Mes éléments de niveau bloc adjacents sont sur de
+ nouvelles lignes en dessous de moi.</p>
+
+<p>Par défaut, nous occupons 100% de la largeur
+ de notre élément parent et nous sommes aussi hauts
+ que notre contenu enfant. Nos largeur et hauteur totales
+ sont égales à la largeur/hauteur de notre
+ contenu + remplissage + encadrement.</p>
+
+<p>Nous sommes séparés de nos marges.
+ Comme il y a fusion des marges, nous sommes séparés
+ par la largeur de l'une de nos marges et non les deux.</p>
+
+<p>Des éléments inline <span>comme celui-ci</span> ou
+ <span>celui‑là</span> sont placés sur la même ligne et
+ les nœuds de texte adjacents, s'il y a de la place sur
+ la même ligne. Les débordements des éléments inline
+ <span>sont placés sur une nouvelle ligne si possible
+ (comme celle‑ci contenant du texte)</span>, sinon ils
+ sont placés sur une nouvelle ligne, comme cette image :
+ <img src="long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('Exemple', '100%', 500) }}

+ +

Résumé

+ +

Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html deleted file mode 100644 index 8485a78f70..0000000000 --- a/files/fr/learn/css/css_layout/positioning/index.html +++ /dev/null @@ -1,504 +0,0 @@ ---- -title: Le positionnement -slug: Learn/CSS/CSS_layout/Positioning -tags: - - Agencement - - Article - - CSS - - Codage de script - - Disposition - - Débutant - - Guide - - Mise en page - - Positionnement - - absolu - - fixe - - relatif - - statique -translation_of: Learn/CSS/CSS_layout/Positioning -original_slug: Apprendre/CSS/CSS_layout/Le_positionnement ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
- -

Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.

- - - - - - - - - - - - -
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Savoir comment fonctionne le positionnement avec les CSS.
- -

Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de 0_basic-flow.html sur le dépôt Github (code source ici) et utilisez-le comme point de départ.

- -

Introduction au positionnement

- -

Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.

- -

Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.

- -

Positionnement « static »

- -

Le positionnement static est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».

- -

Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe positioned pour le deuxième {{htmlelement("p")}} dans le HTML:

- -
<p class="positioned"> ... </p>
- -

Puis ajoutez la règle suivante au bas de votre CSS:

- -
.positioned {
-  position: static;
-  background: yellow; }
- -

Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !

- -
-

Note : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».

-
- -

Positionnement « relative »

- -

Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

- -
position: relative;
- -

Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.

- -

Présentation de « top », « bottom », « left » et « right »

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positioned dans la CSS :

- -
top: 30px;
-left: 30px;
- -
-

Note : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.

-
- -

Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :

- - - - - -

{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}

- -

Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.

- -
-

Note : à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).

-
- -

Positionnement « absolute »

- -

Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code :

- -
position: absolute;
- -

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :

- - - - - -

{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}

- -

Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.

- -

Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)

- -
-

Note : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...

-
- -
-

Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

-
- -
-

Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).

-
- -

Contextes de positionnement

- -

Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément le contexte de positionnement de l'élément.

- -

Nous pouvons changer ce contexte de positionnement — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:

- -
position: relative;
- -

Cela devrait donner le résultat suivant:

- - - - - -

{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}

- -

À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.

- -
-

Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).

-
- -

Présentation du z-index

- -

Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?

- -

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe .positioned original, là où les deux se chevauchent. C'est parce que le paragraphe .positioned est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.

- -

Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe z. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).

- -

Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un z-index  auto, qui est effectivement 0.

- -

Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :

- -
z-index: 1;
- -

Voici maintenant l'exemple terminé :

- - - - - -

{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}

- -

Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.

- -
-

Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).

-
- -

Positionnement « fixed »

- -

Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.

- -

Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de p:nth-of-type(1) et .positioned de la CSS.

- -

Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

Maintenant, donnez la position fixed à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

top: 0; est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique margin: 0 auto; pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.

- -

Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

Voici l'exemple terminé :

- - - - - -

{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}

- -
-

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).

-
- -

« position: sticky »

- -

Il y a une autre valeur de positionnement disponible appelée position : sticky. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.

- - -

Exemple simple

- - - - - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
- - -

{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}

- -

Index déroulant

- -

Une utilisation courante pleine d'intérêt de position: sticky permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :

- -
<h1>Positionnement collant</h1>
-
-<dl>
-    <dt>A</dt>
-    <dd>Abeille</dd>
-    <dd>Abricot</dd>
-    <dd>Altimètre</dd>
-    <dd>Avion</dd>
-    <dt>B</dt>
-    <dd>Banane</dd>
-    <dd>Betterave</dd>
-    <dd>Bœuf</dd>
-    <dd>Bouvreuil</dd>
-    <dd>Buzzard</dd>
-    <dt>C</dt>
-    <dd>Calculateur</dd>
-    <dd>Camera</dd>
-    <dd>Cane</dd>
-    <dd>Chameau</dd>
-    <dt>D</dt>
-    <dd>Dime</dd>
-    <dd>Dindon</dd>
-    <dd>Drapeau</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Eau</dd>
-    <dd>Éléphant</dd>
-    <dd>Escadrille</dd>
-</dl>
-
- -

Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute position : sticky à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- - - -

{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}

- -
-

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).

-
- -

Résumé

- -

Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

- -

Voir aussi

- - - -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md new file mode 100644 index 0000000000..8485a78f70 --- /dev/null +++ b/files/fr/learn/css/css_layout/positioning/index.md @@ -0,0 +1,504 @@ +--- +title: Le positionnement +slug: Learn/CSS/CSS_layout/Positioning +tags: + - Agencement + - Article + - CSS + - Codage de script + - Disposition + - Débutant + - Guide + - Mise en page + - Positionnement + - absolu + - fixe + - relatif + - statique +translation_of: Learn/CSS/CSS_layout/Positioning +original_slug: Apprendre/CSS/CSS_layout/Le_positionnement +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+ +

Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Savoir comment fonctionne le positionnement avec les CSS.
+ +

Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de 0_basic-flow.html sur le dépôt Github (code source ici) et utilisez-le comme point de départ.

+ +

Introduction au positionnement

+ +

Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.

+ +

Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.

+ +

Positionnement « static »

+ +

Le positionnement static est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».

+ +

Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe positioned pour le deuxième {{htmlelement("p")}} dans le HTML:

+ +
<p class="positioned"> ... </p>
+ +

Puis ajoutez la règle suivante au bas de votre CSS:

+ +
.positioned {
+  position: static;
+  background: yellow; }
+ +

Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !

+ +
+

Note : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».

+
+ +

Positionnement « relative »

+ +

Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

+ +
position: relative;
+ +

Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.

+ +

Présentation de « top », « bottom », « left » et « right »

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positioned dans la CSS :

+ +
top: 30px;
+left: 30px;
+ +
+

Note : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.

+
+ +

Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :

+ + + + + +

{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}

+ +

Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.

+ +
+

Note : à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).

+
+ +

Positionnement « absolute »

+ +

Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code :

+ +
position: absolute;
+ +

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :

+ + + + + +

{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}

+ +

Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.

+ +

Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)

+ +
+

Note : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...

+
+ +
+

Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

+
+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).

+
+ +

Contextes de positionnement

+ +

Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément le contexte de positionnement de l'élément.

+ +

Nous pouvons changer ce contexte de positionnement — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:

+ +
position: relative;
+ +

Cela devrait donner le résultat suivant:

+ + + + + +

{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}

+ +

À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.

+ +
+

Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).

+
+ +

Présentation du z-index

+ +

Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?

+ +

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe .positioned original, là où les deux se chevauchent. C'est parce que le paragraphe .positioned est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.

+ +

Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe z. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).

+ +

Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un z-index  auto, qui est effectivement 0.

+ +

Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :

+ +
z-index: 1;
+ +

Voici maintenant l'exemple terminé :

+ + + + + +

{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}

+ +

Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.

+ +
+

Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).

+
+ +

Positionnement « fixed »

+ +

Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.

+ +

Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de p:nth-of-type(1) et .positioned de la CSS.

+ +

Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Maintenant, donnez la position fixed à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

top: 0; est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique margin: 0 auto; pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.

+ +

Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

Voici l'exemple terminé :

+ + + + + +

{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}

+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).

+
+ +

« position: sticky »

+ +

Il y a une autre valeur de positionnement disponible appelée position : sticky. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.

+ + +

Exemple simple

+ + + + + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+ + +

{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}

+ +

Index déroulant

+ +

Une utilisation courante pleine d'intérêt de position: sticky permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :

+ +
<h1>Positionnement collant</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Abeille</dd>
+    <dd>Abricot</dd>
+    <dd>Altimètre</dd>
+    <dd>Avion</dd>
+    <dt>B</dt>
+    <dd>Banane</dd>
+    <dd>Betterave</dd>
+    <dd>Bœuf</dd>
+    <dd>Bouvreuil</dd>
+    <dd>Buzzard</dd>
+    <dt>C</dt>
+    <dd>Calculateur</dd>
+    <dd>Camera</dd>
+    <dd>Cane</dd>
+    <dd>Chameau</dd>
+    <dt>D</dt>
+    <dd>Dime</dd>
+    <dd>Dindon</dd>
+    <dd>Drapeau</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Eau</dd>
+    <dd>Éléphant</dd>
+    <dd>Escadrille</dd>
+</dl>
+
+ +

Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute position : sticky à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ + + +

{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}

+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).

+
+ +

Résumé

+ +

Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

+ +

Voir aussi

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.html b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html deleted file mode 100644 index b496e93796..0000000000 --- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.html +++ /dev/null @@ -1,438 +0,0 @@ ---- -title: Exemples pratiques de positionnement -slug: Learn/CSS/CSS_layout/Practical_positioning_examples -translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples -original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement ---- -
{{LearnSidebar}}
- -

Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux en HTML (étudier Une introduction au HTML), et une idée du fonctionnement du CSS (étudier Une introduction à CSS.)
Objectif :Avoir une idée des aspects pratiques du positionnement
- -

Une boîte d'information à onglets

- -

Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :

- -

- -
-

Note : Vous pouvez voir l'exemple fini en démonstration sur la page info-box.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

-
- -

On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (Single Page Apps) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.

- -
-

Note : Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que XMLHttpRequest. Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.

-
- -

Pour commencer, effectuez une copie locale du fichier HTML de départ — info-box-start.html. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :

- -
-<section class="info-box">
-  <ul>
-    <li><a href="#" class="active">Onglet 1</a></li>
-    <li><a href="#">Onglet 2</a></li>
-    <li><a href="#">Onglet 3</a></li>
-  </ul>
-  <div class="panels">
-    <article class="active-panel">
-      <h2>Premier onglet</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
-    </article>
-    <article>
-      <h2>Deuxième onglet</h2>
-
-      <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p>
-    </article>
-    <article>
-      <h2>Troisième onglet</h2>
-
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p>
-
-      <ol>
-        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
-        <li>Aliquam ut porttitor urna.</li>
-        <li>Nulla facilisi</li>
-      </ol>
-    </article>
-  </div>
-</section>
-
- -

Nous avons un élément <section> avec une class info-box, qui contient un élément <ul> et un élément <div>. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément div contient trois éléments <article>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

- -

L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre quelques bases de JavaScript dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.

- -

Configuration générale

- -

Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <style> :

- -
-html {
-  font-family: sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
-
- -

Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle border-box box-sizing, pour surcharger la marge par défaut de <body>.

- -

Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :

- -
-.info-box {
-  width: 450px;
-  height: 400px;
-  margin: 0 auto;
-}
-
- -

Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce margin: 0 auto. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs.

- -

Mettre en forme les onglets

- -

On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de padding-left et margin-top pour la liste non-ordonnée :

- -
-.info-box ul {
-  padding-left: 0;
-  margin-top: 0;
-}
- -
-

Note : On utilise ici un sélecteur de descendants avec .info-box au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.

-
- -

Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété list-style-type est placée à none afin de ne plus avoir les puces et width vaut 150px afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a> ont display avec la valeur inline-block afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.

- -

Ajoutez le fragment de CSS qui suit :

- -
-.info-box li {
-  float: left;
-  list-style-type: none;
-  width: 150px;
-}
-
-.info-box li a {
-  display: inline-block;
-  text-decoration: none;
-  width: 100%;
-  line-height: 3;
-  background-color: red;
-  color: black;
-  text-align: center;
-}
-
- -

Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états :focus et :hover afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut class avec la valeur active est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites :

- -
-.info-box li a:focus, .info-box li a:hover {
-  background-color: #a60000;
-  color: white;
-}
-
-.info-box li a.active {
-  background-color: #a60000;
-  color: white;
-}
-
- -

Mettre en forme les panneaux

- -

La suite consiste à mettre en forme les panneaux de contenu. Allons-y !

- -

Pour commencer, ajoutez la règle suivante qui met en forme le conteneur .panels <div>. Ici, on définit une hauteur fixe avec height afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit position relative sur l'élément <div> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <html>) pour la mise en forme. Enfin, on utilise clear pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.

- -
-.info-box .panels {
-  height: 352px;
-  position: relative;
-  clear: both;
-}
-
- -

Dans cette section, nous allons mettre en forme les éléments <article> qui forment les panneaux. La première règle va fixer position absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <div> avec top et left. C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte (color), ainsi qu'une couleur d'arrière-plan (background-color).

- -

La deuxième règle ajoutée indique qu'un panneau avec une classe (class) valant active-panel aura une valeur de z-index à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un z-index qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.

- -
-.info-box article {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 352px;
-  padding: 10px;
-  color: white;
-  background-color: #a60000;
-}
-
-.info-box .active-panel {
-  z-index: 1;
-}
-
- -

Ajouter notre JavaScript

- -

La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes <script> (elles se situent après le contenu HTML) :

- -
-let tabs = document.querySelectorAll('.info-box li a');
-let panels = document.querySelectorAll('.info-box article');
-
-for(let i = 0; i < tabs.length; i++) {
-  let tab = tabs[i];
-  setTabHandler(tab, i);
-}
-
-function setTabHandler(tab, tabPos) {
-  tab.onclick = function() {
-    for(let i = 0; i < tabs.length; i++) {
-      tabs[i].className = '';
-    }
-
-    tab.className = 'active';
-
-    for(let i = 0; i < panels.length; i++) {
-      panels[i].className = '';
-    }
-
-    panels[tabPos].className = 'active-panel';
-  }
-}
-
- -

Ce code effectue les actions suivantes :

- - - -

Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.

- -

Une boîte d'information à onglets avec une position fixe

- -

Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :

- -

- -
-

Note : Vous pouvez voir l'exemple fini en démonstration sur la page fixed-info-box.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

-
- -

Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier info-box.html depuis le dépôt GitHub.

- -

Ajouts au HTML

- -

Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section (<section>) suivante juste après la balise ouvrante <body> et avant la section existante :

- -
-<section class="fake-content">
-  <h1>Faux contenu</h1>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
-</section>
-
- -
-

Note : N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.

-
- -

Modifications au CSS existant

- -

Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant .info-box afin de se débarrasser de margin: 0 auto; (on ne veut plus que la boîte soit centrée) et d'ajouter position: fixed; avant de l'attacher au haut de la zone d'affichage du navigateur avec top.

- -

Voici ce à quoi ça devrait ressembler :

- -
-.info-box {
-  width: 450px;
-  height: 400px;
-  position: fixed;
-  top: 0;
-}
-
- -

Mettre en forme le contenu principal

- -

Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :

- -
-.fake-content {
-  background-color: #a60000;
-  color: white;
-  padding: 10px;
-  height: 2000px;
-  margin-left: 470px;
-}
-
- -

Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec background-color, color, et le même remplissage (padding) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (margin-left) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste.

- -

Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.

- -

Un panneau glissant masqué

- -

Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.

- -

Voilà ce à quoi ressemblera notre exemple terminé :

- -

- -
-

Note : Vous pouvez voir l'exemple fini en démonstration sur la page hidden-info-panel.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

-
- -

Pour commencer, enregistrez le fichier hidden-info-panel-start.html sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier :

- -
-<label for="toggle">❔</label>
-<input type="checkbox" id="toggle">
-<aside>
-
-  ...
-
-</aside>
-
- -

Pour commencer, nous avons un élément <label> et un élément <input>. Les éléments <label> sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher <input> grâce aux attributs for et id.

- -
-

Note : Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.

-
- -

Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <label> est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse bidouille de la case à cocher qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément <aside> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).

- -

Dans les sections qui suivent, nous expliquerons comment cela fonctionne.

- -

Mettre en forme les éléments de formulaire

- -

Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises <style> :

- -
-label[for="toggle"] {
-  font-size: 3rem;
-  position: absolute;
-  top: 4px;
-  right: 5px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-input[type="checkbox"] {
-  position: absolute;
-  top: -100px;
-}
-
- -

La première règle met en forme <label>, on y trouve :

- - - -

La deuxième règle applique position absolute sur la case à cocher <input> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.

- -

Mettre en forme le panneau

- -

Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :

- -
-aside {
-  background-color: #a60000;
-  color: white;
-
-  width: 340px;
-  height: 100%;
-  padding: 0 20px;
-
-  position: fixed;
-  top: 0;
-  right: -370px;
-
-  transition: 0.6s all;
-}
-
- -

Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :

- - - -

Définir l'état coché

- -

Voici le dernier fragment de CSS à ajouter, là encore à la fin :

- -
-input[type=checkbox]:checked + aside {
-  right: 0px;
-}
-
- -

Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément <aside> adjacent à l'élément <input>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe :checked). Lorsque c'est le cas, on définit la propriété right de l'élément <aside> à 0px, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.

- -

Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.

- -

Résumé

- -

Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées flexbox.

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md new file mode 100644 index 0000000000..b496e93796 --- /dev/null +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md @@ -0,0 +1,438 @@ +--- +title: Exemples pratiques de positionnement +slug: Learn/CSS/CSS_layout/Practical_positioning_examples +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement +--- +
{{LearnSidebar}}
+ +

Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux en HTML (étudier Une introduction au HTML), et une idée du fonctionnement du CSS (étudier Une introduction à CSS.)
Objectif :Avoir une idée des aspects pratiques du positionnement
+ +

Une boîte d'information à onglets

+ +

Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :

+ +

+ +
+

Note : Vous pouvez voir l'exemple fini en démonstration sur la page info-box.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

+
+ +

On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (Single Page Apps) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.

+ +
+

Note : Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que XMLHttpRequest. Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.

+
+ +

Pour commencer, effectuez une copie locale du fichier HTML de départ — info-box-start.html. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :

+ +
+<section class="info-box">
+  <ul>
+    <li><a href="#" class="active">Onglet 1</a></li>
+    <li><a href="#">Onglet 2</a></li>
+    <li><a href="#">Onglet 3</a></li>
+  </ul>
+  <div class="panels">
+    <article class="active-panel">
+      <h2>Premier onglet</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
+    </article>
+    <article>
+      <h2>Deuxième onglet</h2>
+
+      <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p>
+    </article>
+    <article>
+      <h2>Troisième onglet</h2>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p>
+
+      <ol>
+        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+        <li>Aliquam ut porttitor urna.</li>
+        <li>Nulla facilisi</li>
+      </ol>
+    </article>
+  </div>
+</section>
+
+ +

Nous avons un élément <section> avec une class info-box, qui contient un élément <ul> et un élément <div>. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément div contient trois éléments <article>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

+ +

L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre quelques bases de JavaScript dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.

+ +

Configuration générale

+ +

Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <style> :

+ +
+html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+ +

Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle border-box box-sizing, pour surcharger la marge par défaut de <body>.

+ +

Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :

+ +
+.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}
+
+ +

Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce margin: 0 auto. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs.

+ +

Mettre en forme les onglets

+ +

On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de padding-left et margin-top pour la liste non-ordonnée :

+ +
+.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+ +
+

Note : On utilise ici un sélecteur de descendants avec .info-box au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.

+
+ +

Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété list-style-type est placée à none afin de ne plus avoir les puces et width vaut 150px afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a> ont display avec la valeur inline-block afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.

+ +

Ajoutez le fragment de CSS qui suit :

+ +
+.info-box li {
+  float: left;
+  list-style-type: none;
+  width: 150px;
+}
+
+.info-box li a {
+  display: inline-block;
+  text-decoration: none;
+  width: 100%;
+  line-height: 3;
+  background-color: red;
+  color: black;
+  text-align: center;
+}
+
+ +

Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états :focus et :hover afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut class avec la valeur active est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites :

+ +
+.info-box li a:focus, .info-box li a:hover {
+  background-color: #a60000;
+  color: white;
+}
+
+.info-box li a.active {
+  background-color: #a60000;
+  color: white;
+}
+
+ +

Mettre en forme les panneaux

+ +

La suite consiste à mettre en forme les panneaux de contenu. Allons-y !

+ +

Pour commencer, ajoutez la règle suivante qui met en forme le conteneur .panels <div>. Ici, on définit une hauteur fixe avec height afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit position relative sur l'élément <div> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <html>) pour la mise en forme. Enfin, on utilise clear pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.

+ +
+.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}
+
+ +

Dans cette section, nous allons mettre en forme les éléments <article> qui forment les panneaux. La première règle va fixer position absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <div> avec top et left. C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte (color), ainsi qu'une couleur d'arrière-plan (background-color).

+ +

La deuxième règle ajoutée indique qu'un panneau avec une classe (class) valant active-panel aura une valeur de z-index à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un z-index qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.

+ +
+.info-box article {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 352px;
+  padding: 10px;
+  color: white;
+  background-color: #a60000;
+}
+
+.info-box .active-panel {
+  z-index: 1;
+}
+
+ +

Ajouter notre JavaScript

+ +

La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes <script> (elles se situent après le contenu HTML) :

+ +
+let tabs = document.querySelectorAll('.info-box li a');
+let panels = document.querySelectorAll('.info-box article');
+
+for(let i = 0; i < tabs.length; i++) {
+  let tab = tabs[i];
+  setTabHandler(tab, i);
+}
+
+function setTabHandler(tab, tabPos) {
+  tab.onclick = function() {
+    for(let i = 0; i < tabs.length; i++) {
+      tabs[i].className = '';
+    }
+
+    tab.className = 'active';
+
+    for(let i = 0; i < panels.length; i++) {
+      panels[i].className = '';
+    }
+
+    panels[tabPos].className = 'active-panel';
+  }
+}
+
+ +

Ce code effectue les actions suivantes :

+ + + +

Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.

+ +

Une boîte d'information à onglets avec une position fixe

+ +

Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :

+ +

+ +
+

Note : Vous pouvez voir l'exemple fini en démonstration sur la page fixed-info-box.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

+
+ +

Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier info-box.html depuis le dépôt GitHub.

+ +

Ajouts au HTML

+ +

Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section (<section>) suivante juste après la balise ouvrante <body> et avant la section existante :

+ +
+<section class="fake-content">
+  <h1>Faux contenu</h1>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+  <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p>
+</section>
+
+ +
+

Note : N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.

+
+ +

Modifications au CSS existant

+ +

Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant .info-box afin de se débarrasser de margin: 0 auto; (on ne veut plus que la boîte soit centrée) et d'ajouter position: fixed; avant de l'attacher au haut de la zone d'affichage du navigateur avec top.

+ +

Voici ce à quoi ça devrait ressembler :

+ +
+.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}
+
+ +

Mettre en forme le contenu principal

+ +

Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :

+ +
+.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}
+
+ +

Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec background-color, color, et le même remplissage (padding) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (margin-left) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste.

+ +

Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.

+ +

Un panneau glissant masqué

+ +

Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.

+ +

Voilà ce à quoi ressemblera notre exemple terminé :

+ +

+ +
+

Note : Vous pouvez voir l'exemple fini en démonstration sur la page hidden-info-panel.html (code source). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.

+
+ +

Pour commencer, enregistrez le fichier hidden-info-panel-start.html sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier :

+ +
+<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
+
+  ...
+
+</aside>
+
+ +

Pour commencer, nous avons un élément <label> et un élément <input>. Les éléments <label> sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher <input> grâce aux attributs for et id.

+ +
+

Note : Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.

+
+ +

Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <label> est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse bidouille de la case à cocher qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément <aside> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).

+ +

Dans les sections qui suivent, nous expliquerons comment cela fonctionne.

+ +

Mettre en forme les éléments de formulaire

+ +

Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises <style> :

+ +
+label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+
+ +

La première règle met en forme <label>, on y trouve :

+ + + +

La deuxième règle applique position absolute sur la case à cocher <input> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.

+ +

Mettre en forme le panneau

+ +

Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :

+ +
+aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}
+
+ +

Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :

+ + + +

Définir l'état coché

+ +

Voici le dernier fragment de CSS à ajouter, là encore à la fin :

+ +
+input[type=checkbox]:checked + aside {
+  right: 0px;
+}
+
+ +

Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément <aside> adjacent à l'élément <input>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe :checked). Lorsque c'est le cas, on définit la propriété right de l'élément <aside> à 0px, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.

+ +

Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.

+ +

Résumé

+ +

Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées flexbox.

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html deleted file mode 100644 index 312eea3059..0000000000 --- a/files/fr/learn/css/css_layout/responsive_design/index.html +++ /dev/null @@ -1,323 +0,0 @@ ---- -title: Responsive design -slug: Learn/CSS/CSS_layout/Responsive_Design -tags: - - Images - - Media Queries - - RWD - - Responsive web design - - Typographie - - flexbox - - grid - - grille fluide -translation_of: Learn/CSS/CSS_layout/Responsive_Design -original_slug: Apprendre/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}
- -

Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.

- - - - - - - - - - - - -
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (édutier Premiers pas en CSS et Blocs de base en CSS.)
Objectif:Comprendre les concepts fondamentaux et l'histoire du responsive design.
- -

Historique de la mise en page des sites Web

- -

A une époque, vous aviez deux options pour concevoir un site Web :

- - - -

Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.

- -Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. - -
-

Note : Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.

-
- -

Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.

- -Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. - -
-

Note : Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

-
- -
-

Note : Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

-
- -

Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.

- -

De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.

- -

Mise en page flexible avant le responsive design

- -

Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé Mise en page en fonction de la résolution, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.

- -

Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.

- -

Responsive design

- -

Le terme de responsive design a été inventé par Ethan Marcotte en 2010, et décrit la combinaison de trois techniques.

- -
    -
  1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, Fluid Grids (publié en 2009 sur A List Apart).
    2. -
  2. La deuxième technique était l'idée d'images fluides. En utilisant une technique très simple de réglage de la propriété max-width à 100%,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.
    3. -
  3. Le troisième élément clé était la media query. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.
    4. -
- -

Il est important de comprendre que le responsive web design n'est pas une technologie à part - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.
-
- Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.

- -

Media Queries

- -

Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.

- -

Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur .container ne sera appliqué que si ces deux éléments sont vrais.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.

- -

Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.

- -

Pour en savoir plus, consultez la documentation MDN pour les Media Queries.

- -

Grilles flexibles

- -

Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.

- -

En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.

- -

Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser floats. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.

- -
target / context = result 
-
- -

Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur Méthodes de mises en page traditionnelles. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.

- -

L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :
-  

- -A mobile view of the layout with boxes stacked on top of each other vertically. - -

Sur des écrans plus larges, ils se positionnent sur deux colonnes :

- -A desktop view of a layout with two columns. - -
-

Note : Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.

-
- -

Techniques modernes de mise en page

- -

Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.

- -

Multicol

- -

La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un column-count, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.

- -
.container {
-  column-count: 3;
-} 
-
- -

Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de flex-grow et flex-shrink  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.

- -

Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation flex: 1 comme décrit dans la rubrique de mise en page Flexbox: Taille modulable des éléments flex.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Note : À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : exemple, code source.

-
- -

CSS grid

- -

Dans la mise en page en grille CSS, l'unité fr permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de 1fr. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section Trames adaptables avec l'unité "fr".

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Note : La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.

-
- -

Images responsives

- -

L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :

- -
img {
-  max-width: 100%:
-} 
-
- -

Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.

- -

Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} srcset et sizes  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.

- -

Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.

- -

Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.

- -

Typographie responsive

- -

L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.

- -

Dans cet exemple, nous voulons fixer notre titre de niveau 1 à 4rem, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.

- -

Sur un mobile, le titre est plus petit :

- -A stacked layout with a small heading size. - -

Sur le bureau cependant, nous voyons la plus grande taille de titre :

- -A two column layout with a large heading. - -
-

Note : Voir cet exemple en action : exemple, code source.

-
- -

Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.

- -

Utilisation d'unités de visualisation pour une typographie réactive

- -

Une approche intéressante consiste à utiliser l'unité viewport vw pour permettre une typographie réactive. 1vw est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de vw, elle sera toujours liée à la taille de la fenêtre.

- -
h1 {
-  font-size: 6vw;
-}
- -

Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité vw, car ce texte est toujours lié à la taille de la fenêtre de visualisation. Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.

- -

Il existe une solution, et elle consiste à utiliser calc(). Si vous ajoutez l'unité vw à un ensemble de valeurs utilisant une taille fixe telle que ems ou rems, le texte sera toujours zoomable. En fait, l'unité vw s'ajoute à cette valeur zoomée :

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.

- -
-

Note : Voir un exemple de cela en action : exemple, code source.

-
- -

Le méta-tag du viewport

- -

Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <head> du document.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.

- -

Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.

- -

Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.

- -

Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant width = device-width, vous remplacez la largeur par défaut d'Apple de width = 960px par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.

- -

Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.

- -

Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.

- - - -

Vous devriez éviter d'utiliser minimum-scale, maximum-scale, et en particulier la définition de user-scalable sur no. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.

- -
-

Note : Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @viewport — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.

-
- -

Sommaire

- -

Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.

- -

Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.

- -

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md new file mode 100644 index 0000000000..312eea3059 --- /dev/null +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -0,0 +1,323 @@ +--- +title: Responsive design +slug: Learn/CSS/CSS_layout/Responsive_Design +tags: + - Images + - Media Queries + - RWD + - Responsive web design + - Typographie + - flexbox + - grid + - grille fluide +translation_of: Learn/CSS/CSS_layout/Responsive_Design +original_slug: Apprendre/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}
+ +

Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.

+ + + + + + + + + + + + +
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (édutier Premiers pas en CSS et Blocs de base en CSS.)
Objectif:Comprendre les concepts fondamentaux et l'histoire du responsive design.
+ +

Historique de la mise en page des sites Web

+ +

A une époque, vous aviez deux options pour concevoir un site Web :

+ + + +

Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.

+ +Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. + +
+

Note : Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.

+
+ +

Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.

+ +Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. + +
+

Note : Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

+
+ +
+

Note : Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

+
+ +

Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.

+ +

De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.

+ +

Mise en page flexible avant le responsive design

+ +

Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé Mise en page en fonction de la résolution, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.

+ +

Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.

+ +

Responsive design

+ +

Le terme de responsive design a été inventé par Ethan Marcotte en 2010, et décrit la combinaison de trois techniques.

+ +
    +
  1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, Fluid Grids (publié en 2009 sur A List Apart).
    2. +
  2. La deuxième technique était l'idée d'images fluides. En utilisant une technique très simple de réglage de la propriété max-width à 100%,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.
    3. +
  3. Le troisième élément clé était la media query. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.
    4. +
+ +

Il est important de comprendre que le responsive web design n'est pas une technologie à part - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.
+
+ Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.

+ +

Media Queries

+ +

Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.

+ +

Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur .container ne sera appliqué que si ces deux éléments sont vrais.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.

+ +

Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.

+ +

Pour en savoir plus, consultez la documentation MDN pour les Media Queries.

+ +

Grilles flexibles

+ +

Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.

+ +

En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.

+ +

Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser floats. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.

+ +
target / context = result 
+
+ +

Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur Méthodes de mises en page traditionnelles. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.

+ +

L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :
+  

+ +A mobile view of the layout with boxes stacked on top of each other vertically. + +

Sur des écrans plus larges, ils se positionnent sur deux colonnes :

+ +A desktop view of a layout with two columns. + +
+

Note : Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.

+
+ +

Techniques modernes de mise en page

+ +

Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.

+ +

Multicol

+ +

La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un column-count, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de flex-grow et flex-shrink  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.

+ +

Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation flex: 1 comme décrit dans la rubrique de mise en page Flexbox: Taille modulable des éléments flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Note : À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : exemple, code source.

+
+ +

CSS grid

+ +

Dans la mise en page en grille CSS, l'unité fr permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de 1fr. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section Trames adaptables avec l'unité "fr".

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Note : La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.

+
+ +

Images responsives

+ +

L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.

+ +

Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} srcset et sizes  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.

+ +

Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.

+ +

Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.

+ +

Typographie responsive

+ +

L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.

+ +

Dans cet exemple, nous voulons fixer notre titre de niveau 1 à 4rem, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.

+ +

Sur un mobile, le titre est plus petit :

+ +A stacked layout with a small heading size. + +

Sur le bureau cependant, nous voyons la plus grande taille de titre :

+ +A two column layout with a large heading. + +
+

Note : Voir cet exemple en action : exemple, code source.

+
+ +

Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.

+ +

Utilisation d'unités de visualisation pour une typographie réactive

+ +

Une approche intéressante consiste à utiliser l'unité viewport vw pour permettre une typographie réactive. 1vw est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de vw, elle sera toujours liée à la taille de la fenêtre.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité vw, car ce texte est toujours lié à la taille de la fenêtre de visualisation. Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.

+ +

Il existe une solution, et elle consiste à utiliser calc(). Si vous ajoutez l'unité vw à un ensemble de valeurs utilisant une taille fixe telle que ems ou rems, le texte sera toujours zoomable. En fait, l'unité vw s'ajoute à cette valeur zoomée :

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.

+ +
+

Note : Voir un exemple de cela en action : exemple, code source.

+
+ +

Le méta-tag du viewport

+ +

Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <head> du document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.

+ +

Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.

+ +

Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.

+ +

Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant width = device-width, vous remplacez la largeur par défaut d'Apple de width = 960px par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.

+ +

Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.

+ +

Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.

+ + + +

Vous devriez éviter d'utiliser minimum-scale, maximum-scale, et en particulier la définition de user-scalable sur no. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.

+ +
+

Note : Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @viewport — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.

+
+ +

Sommaire

+ +

Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.

+ +

Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.

+ +

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html deleted file mode 100644 index 1aeb151ae9..0000000000 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Prise en charge des anciens navigateurs -slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers -tags: - - Apprendre - - Beginner - - CSS - - Débutant - - Guide - - Layout - - Learn - - feature queries - - flexbox - - float - - grid - - legacy -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers -original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.

- - - - - - - - - - - - -
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Premiers pas avec CSS et Blocs de base en CSS.)
Objectif :Comprendre comment assurer la prise en charge, de vos mises en page, sur les anciens navigateurs qui pourraient ne pas supporter les fonctionnalités que vous souhaitez utiliser.
- -

Quel est le terrain des navigateurs pour votre site ?

- -

Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que Statcounter qui peuvent fournir des statistiques filtrées par région.

- -

Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique.

- -

Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ?

- -

Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété.

- -

Capture d'un tableau de compatibilité d'une page sur MDN où on voit en vert les versions initiales compatibles et en rouge les navigateurs sans prise en charge

- -

Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site Can I Use. Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur.

- -

Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs.

- -

Prendre en charge ne veut pas dire « ressembler à la même chose »

- -

Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens.

- -

Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?

- -

Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement.

- -

Création de substituts en CSS

- -

Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des techniques historiques que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent.

- -

Dans l'exemple ci-dessous, nous avons fait flotter trois <div> pour les afficher en ligne. Tout navigateur qui ne prend pas en charge CSS Grid Layout verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de display : grid, et la mise en page flottante est utilisée.

- -

Exemple

-

CSS

-
* {
-  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;
-}
-
- -

HTML

-
<div class="wrapper">
-  <div class="item">Item One</div>
-  <div class="item">Item Two</div>
-  <div class="item">Item Three</div>
-</div>
-
- -{{EmbedLiveSample('Example_1', '', '150')}} - -
-

Note : La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.

-
- -

Méthodes de substitution

- -

Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer.

- -
-
float et clear
-
Comme indiqué ci-dessus, les propriétés float et clear cessent d'affecter la mise en page si les éléments ciblés par float ou clear deviennent des éléments d'une grille ou d'une zone flexible.
-
display : inline-block
-
Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a display : inline-block défini mais devient ensuite un élément flexible ou d'une grille, le comportement inline-block est ignoré.
-
display: table
-
La méthode de création de tableaux CSS décrite dans l'introduction de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées.
-
Mise en page à colonnes multiples
-
Pour certaines mises en page, vous pourriez utiliser multi-col comme solution de substitution, si votre conteneur a l'une des propriétés column-* définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas.
-
Flexbox comme solution de repli pour la grille
-
Flexbox bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété flex appliquée aux enfants sera ignorée.
-
- -

Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur.

- -

Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite.

- -

Exemple

-

CSS

-
* {
-  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%;
-}
-
- -

HTML

-
<div class="wrapper">
-  <div class="item">Item One</div>
-  <div class="item">Item Two</div>
-  <div class="item">Item Three</div>
-</div>
-
- -

{{EmbedLiveSample('Example_2', '', '150')}}

- -

Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.

- -

Requêtes de fonctionnalités

- -

Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page.

- -

Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur auto si nous savons que nous avons un support de grille.

- -

Exemple

-

CSS

-
* {
-  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;
-  }
-}
-
- -

HTML

-
<div class="wrapper">
-  <div class="item">Item One</div>
-  <div class="item">Item Two</div>
-  <div class="item">Item Three</div>
-</div>
-
- -

{{EmbedLiveSample('Example_3', '', '150')}}

- -

La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.

- -

La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible.

- -

Anciennes versions de Flexbox

- -

Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe -ms- pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; ce guide utile vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs.

- -

La version préfixée d'IE10 et 11 de Grid

- -

La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille moderne, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées -ms-, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne.

- -

Le guide Les grilles CSS et l'amélioration progressive peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge.

- -

Test des anciens navigateurs

- -

La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module Test sur plusieurs navigateurs.

- -

Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition une gamme de machines virtuelles à télécharger gratuitement. Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows.

- -

Résumé

- -

Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md new file mode 100644 index 0000000000..1aeb151ae9 --- /dev/null +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md @@ -0,0 +1,260 @@ +--- +title: Prise en charge des anciens navigateurs +slug: Learn/CSS/CSS_layout/Supporting_Older_Browsers +tags: + - Apprendre + - Beginner + - CSS + - Débutant + - Guide + - Layout + - Learn + - feature queries + - flexbox + - float + - grid + - legacy +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.

+ + + + + + + + + + + + +
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Premiers pas avec CSS et Blocs de base en CSS.)
Objectif :Comprendre comment assurer la prise en charge, de vos mises en page, sur les anciens navigateurs qui pourraient ne pas supporter les fonctionnalités que vous souhaitez utiliser.
+ +

Quel est le terrain des navigateurs pour votre site ?

+ +

Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que Statcounter qui peuvent fournir des statistiques filtrées par région.

+ +

Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique.

+ +

Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ?

+ +

Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété.

+ +

Capture d'un tableau de compatibilité d'une page sur MDN où on voit en vert les versions initiales compatibles et en rouge les navigateurs sans prise en charge

+ +

Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site Can I Use. Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur.

+ +

Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs.

+ +

Prendre en charge ne veut pas dire « ressembler à la même chose »

+ +

Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens.

+ +

Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?

+ +

Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement.

+ +

Création de substituts en CSS

+ +

Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des techniques historiques que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent.

+ +

Dans l'exemple ci-dessous, nous avons fait flotter trois <div> pour les afficher en ligne. Tout navigateur qui ne prend pas en charge CSS Grid Layout verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de display : grid, et la mise en page flottante est utilisée.

+ +

Exemple

+

CSS

+
* {
+  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;
+}
+
+ +

HTML

+
<div class="wrapper">
+  <div class="item">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +{{EmbedLiveSample('Example_1', '', '150')}} + +
+

Note : La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.

+
+ +

Méthodes de substitution

+ +

Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer.

+ +
+
float et clear
+
Comme indiqué ci-dessus, les propriétés float et clear cessent d'affecter la mise en page si les éléments ciblés par float ou clear deviennent des éléments d'une grille ou d'une zone flexible.
+
display : inline-block
+
Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a display : inline-block défini mais devient ensuite un élément flexible ou d'une grille, le comportement inline-block est ignoré.
+
display: table
+
La méthode de création de tableaux CSS décrite dans l'introduction de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées.
+
Mise en page à colonnes multiples
+
Pour certaines mises en page, vous pourriez utiliser multi-col comme solution de substitution, si votre conteneur a l'une des propriétés column-* définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas.
+
Flexbox comme solution de repli pour la grille
+
Flexbox bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété flex appliquée aux enfants sera ignorée.
+
+ +

Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur.

+ +

Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite.

+ +

Exemple

+

CSS

+
* {
+  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%;
+}
+
+ +

HTML

+
<div class="wrapper">
+  <div class="item">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{EmbedLiveSample('Example_2', '', '150')}}

+ +

Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.

+ +

Requêtes de fonctionnalités

+ +

Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page.

+ +

Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur auto si nous savons que nous avons un support de grille.

+ +

Exemple

+

CSS

+
* {
+  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;
+  }
+}
+
+ +

HTML

+
<div class="wrapper">
+  <div class="item">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{EmbedLiveSample('Example_3', '', '150')}}

+ +

La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.

+ +

La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible.

+ +

Anciennes versions de Flexbox

+ +

Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe -ms- pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; ce guide utile vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs.

+ +

La version préfixée d'IE10 et 11 de Grid

+ +

La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille moderne, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées -ms-, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne.

+ +

Le guide Les grilles CSS et l'amélioration progressive peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge.

+ +

Test des anciens navigateurs

+ +

La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module Test sur plusieurs navigateurs.

+ +

Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition une gamme de machines virtuelles à télécharger gratuitement. Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows.

+ +

Résumé

+ +

Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/first_steps/getting_started/index.html b/files/fr/learn/css/first_steps/getting_started/index.html deleted file mode 100644 index 9bbccc2107..0000000000 --- a/files/fr/learn/css/first_steps/getting_started/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Démarrer avec CSS -slug: Learn/CSS/First_steps/Getting_started -tags: - - CSS - - Classes - - Débutant - - Element - - Etat - - Syntaxe - - Sélecteurs -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")}}
- -

Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.

- - - - - - - - - - - - -
Prérequis :Connaissances élémentaires en informatique, suite logicielle de base installée, compréhension élémentaire du  travail avec des fichiers, des bases en HTML (cf. Introduction à HTML.)
Objectif :Comprendre comment associer une feuille de style CSS à un document HTML, savoir appliquer quelques règles simples de mise en forme d'un texte.
- -

D'abord un peu de HTML

- -

Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom index.html.

- -
<!doctype html>
-<html lang="fr">
-<head>
-    <meta charset="utf-8">
-    <title>Démarrer avec CSS</title>
-</head>
-
-<body>
-
-    <h1>Je suis un titre de niveau un</h1>
-
-    <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span>
- et aussi un <a href="http://example.com">lien</a>.</p>
-
-    <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p>
-
-    <ul>
-        <li>Item un</li>
-        <li>Item deux</li>
-        <li>Item <em>trois</em></li>
-    </ul>
-
-</body>
-
-</html>
-
- -
-

Note : Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.

-
- -

Ajouter CSS à notre document

- -

Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée  — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.

- -

Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom styles.css. L'extension .css indique que c'est un fichier CSS.

- -

Pour lier styles.css à index.html ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :

- -
<link rel="stylesheet" href="styles.css">
- -

Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut rel ; la valeur de l'attribut href donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans styles.css. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :

- -
h1 {
-  color: red;
-}
- -

Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.

- -

Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer styles.css sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.

- -

Mettre en forme des éléments HTML

- -

En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML.

- -

Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur p. Voilà la règle pour passer en vert tous les paragraphes :

- -
p {
-  color: green;
-}
- -

On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :

- -
p, li {
-    color: green;
-}
- -

Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

- -

Changer le comportement par défaut des éléments

- -

Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.

- -

On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre <ul>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :

- -
li {
-  list-style-type: none;
-}
- -

Ajoutez cette règle dans votre CSS et testez en l'effet.

- -

Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété list-style-type. Dans la page pour list-style-type vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page.

- -

En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur square pour obtenir des puces carrées.

- -

Ajouter une classe

- -

Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe.

- -

Dans le document HTML, ajouter un  attribut class au deuxième item de la liste :

- -
<ul>
-  <li>Item un</li>
-  <li class="special">Item deux</li>
-  <li>Item <em>trois</em></li>
-</ul>
- -

Dans votre CSS vous pouvez maintenant cibler la classe special grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :

- -
.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat.

- -

Vous pouvez attribuer la classe special à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément <span> du premier paragraphe.

- -

Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe  :

- -
li.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Cette syntaxe signifie "s'applique à tous les éléments li dont l'attribut class a la valeur special ". Cette règle ne s'applique alors plus à l'élément <span> ou à tout autre élément dont l'attribut class a la valeur special mais qui n'est pas un <li>. Pour que la règle s'applique aussi au <span>  il faudrait l'ajouter dans la liste des sélecteurs :

- -
li.special,
-span.special {
-  color: orange;
-  font-weight: bold;
-}
- -

Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique.

- -

Style en fonction de la position

- -

Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments <em> — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le <em> imbriqué dans l'élément <li> avec un combinateur descendant qui prend la forme suivante : deux sélecteurs séparés par un espace.

- -

Ajoutez la règle suivante à votre feuille de style :

- -
li em {
-  color: rebeccapurple;
-}
- -

Ce sélecteur cible tout élément <em> à l'intérieur (descendant) d'un <li>. Ainsi, dans notre exemple, le <em> dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé.

- -

On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un +  (le combinateur de frères et sœurs adjacents) entre les sélecteurs.

- -

Ajoutez cette règle à votre feuille de style :

- -
h1 + p {
-  font-size: 200%;
-}
- -

L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe <span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le <span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

- -
-

Note :  A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon CSS Selectors du cours suivant.

-
- -

Mise en forme basée sur l'état

- -

Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <a> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (visited), est survolé par le curseur (hover), a le focus clavier (focus), ou si l'utilisateur est en train de cliquer sur ce lien (active). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.

- -
a:link {
-  color: pink;
-}
-
-a:visited {
-  color: green;
-}
- -

On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :

- -
a:hover {
-  text-decoration: none;
-}
- -

Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents états d'un lien. J'ai rajouté les règles précédentes à la feuille de style, notez comment le rose est très clair, peu lisible — pourquoi ne pas trouver une meilleure couleur ? Pourriez-vous passer les liens en gras ?

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

- -

Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.

- -
-

Note : dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'accessibilité : les règles pour que nos pages soient compréhensibles et utilisables par tous.

- -

Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.

- -

Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible.

-
- -

Associer sélecteurs et combinateurs

- -

On peut associer sélecteurs et combinateurs. Par exemple :

- -
/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article>  */
-article p span { ... }
-
-/* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1>  */
-h1 + ul + p { ... }
- -

On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :

- -
body h1 + p .special {
-  color: yellow;
-  background-color: black;
-  padding: 5px;
-}
- -

Cette règle cible tout élément dont l'attribut class vaut special, à l'intérieur d'un <p>, qui vient juste après un <h1>, à l'intérieur de <body>. Ouf !

- -

Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est <span class="special">.

- -

Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela.

- -

Bilan

- -

Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances.

- -

Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN.

- -

Dans la leçon suivante, nous étudirons comment CSS est structuré.

- -

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

- -

Dans ce cours

- -
    -
  1. Qu'est ce que  CSS?
    2. -
  2. Démarrer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS comment ça marche ?
    5. -
  5. Utiliser vos connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md new file mode 100644 index 0000000000..9bbccc2107 --- /dev/null +++ b/files/fr/learn/css/first_steps/getting_started/index.md @@ -0,0 +1,266 @@ +--- +title: Démarrer avec CSS +slug: Learn/CSS/First_steps/Getting_started +tags: + - CSS + - Classes + - Débutant + - Element + - Etat + - Syntaxe + - Sélecteurs +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")}}
+ +

Dans cet article nous vous montrons comment appliquer un style CSS à un document HTML simple. Vous apprendrez des choses pratiques concernant CSS.

+ + + + + + + + + + + + +
Prérequis :Connaissances élémentaires en informatique, suite logicielle de base installée, compréhension élémentaire du  travail avec des fichiers, des bases en HTML (cf. Introduction à HTML.)
Objectif :Comprendre comment associer une feuille de style CSS à un document HTML, savoir appliquer quelques règles simples de mise en forme d'un texte.
+ +

D'abord un peu de HTML

+ +

Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom index.html.

+ +
<!doctype html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <title>Démarrer avec CSS</title>
+</head>
+
+<body>
+
+    <h1>Je suis un titre de niveau un</h1>
+
+    <p>Ceci est un paragraphe. Dans ce texte il y a un <span>élément span</span>
+ et aussi un <a href="http://example.com">lien</a>.</p>
+
+    <p>Ceci est un second paragraphe. On y trouve un élément <em>mis en valeur</em>.</p>
+
+    <ul>
+        <li>Item un</li>
+        <li>Item deux</li>
+        <li>Item <em>trois</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Note : Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page.

+
+ +

Ajouter CSS à notre document

+ +

Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée  — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML.

+ +

Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom styles.css. L'extension .css indique que c'est un fichier CSS.

+ +

Pour lier styles.css à index.html ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML :

+ +
<link rel="stylesheet" href="styles.css">
+ +

Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut rel ; la valeur de l'attribut href donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans styles.css. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS :

+ +
h1 {
+  color: red;
+}
+ +

Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué.

+ +

Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer styles.css sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes.

+ +

Mettre en forme des éléments HTML

+ +

En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML.

+ +

Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur p. Voilà la règle pour passer en vert tous les paragraphes :

+ +
p {
+  color: green;
+}
+ +

On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante :

+ +
p, li {
+    color: green;
+}
+ +

Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) ou sur votre machine en local.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Changer le comportement par défaut des éléments

+ +

Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière.

+ +

On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme.  Un bon exemple est notre <ul>, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit :

+ +
li {
+  list-style-type: none;
+}
+ +

Ajoutez cette règle dans votre CSS et testez en l'effet.

+ +

Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété list-style-type. Dans la page pour list-style-type vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page.

+ +

En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur square pour obtenir des puces carrées.

+ +

Ajouter une classe

+ +

Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe.

+ +

Dans le document HTML, ajouter un  attribut class au deuxième item de la liste :

+ +
<ul>
+  <li>Item un</li>
+  <li class="special">Item deux</li>
+  <li>Item <em>trois</em></li>
+</ul>
+ +

Dans votre CSS vous pouvez maintenant cibler la classe special grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style :

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat.

+ +

Vous pouvez attribuer la classe special à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément <span> du premier paragraphe.

+ +

Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe  :

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Cette syntaxe signifie "s'applique à tous les éléments li dont l'attribut class a la valeur special ". Cette règle ne s'applique alors plus à l'élément <span> ou à tout autre élément dont l'attribut class a la valeur special mais qui n'est pas un <li>. Pour que la règle s'applique aussi au <span>  il faudrait l'ajouter dans la liste des sélecteurs :

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique.

+ +

Style en fonction de la position

+ +

Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments <em> — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le <em> imbriqué dans l'élément <li> avec un combinateur descendant qui prend la forme suivante : deux sélecteurs séparés par un espace.

+ +

Ajoutez la règle suivante à votre feuille de style :

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Ce sélecteur cible tout élément <em> à l'intérieur (descendant) d'un <li>. Ainsi, dans notre exemple, le <em> dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé.

+ +

On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un +  (le combinateur de frères et sœurs adjacents) entre les sélecteurs.

+ +

Ajoutez cette règle à votre feuille de style :

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe <span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le <span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Note :  A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon CSS Selectors du cours suivant.

+
+ +

Mise en forme basée sur l'état

+ +

Pour finir ce tutoriel, voyons comment on peut appliquer une mise en forme basée sur l'état d'un élément. La mise en forme des liens illustre cela à merveille. Pour appliquer un style sur un lien, on doit cibler l'élément <a> (ancre). Cet élément a différents états selon que le lien a ou n'a pas été visité (visited), est survolé par le curseur (hover), a le focus clavier (focus), ou si l'utilisateur est en train de cliquer sur ce lien (active). CSS permet de cibler ces différents états — les règles ci-dessous colorent en rose les liens non visités et en vert ceux qui l'ont été.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante :

+ +
a:hover {
+  text-decoration: none;
+}
+ +

Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents états d'un lien. J'ai rajouté les règles précédentes à la feuille de style, notez comment le rose est très clair, peu lisible — pourquoi ne pas trouver une meilleure couleur ? Pourriez-vous passer les liens en gras ?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction.

+ +
+

Note : dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'accessibilité : les règles pour que nos pages soient compréhensibles et utilisables par tous.

+ +

Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier.

+ +

Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible.

+
+ +

Associer sélecteurs et combinateurs

+ +

On peut associer sélecteurs et combinateurs. Par exemple :

+ +
/* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article>  */
+article p span { ... }
+
+/* sélectionne tout <p> qui vient juste après un <ul>, lui-même venant just après un <h1>  */
+h1 + ul + p { ... }
+ +

On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style :

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Cette règle cible tout élément dont l'attribut class vaut special, à l'intérieur d'un <p>, qui vient juste après un <h1>, à l'intérieur de <body>. Ouf !

+ +

Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est <span class="special">.

+ +

Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela.

+ +

Bilan

+ +

Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances.

+ +

Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN.

+ +

Dans la leçon suivante, nous étudirons comment CSS est structuré.

+ +

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

+ +

Dans ce cours

+ +
    +
  1. Qu'est ce que  CSS?
    2. +
  2. Démarrer avec CSS
    3. +
  3. Comment CSS est structuré
    4. +
  4. CSS comment ça marche ?
    5. +
  5. Utiliser vos connaissances
    6. +
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html deleted file mode 100644 index 057da54fc4..0000000000 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html +++ /dev/null @@ -1,505 +0,0 @@ ---- -title: Comment CSS est structuré -slug: Learn/CSS/First_steps/How_CSS_is_structured -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")}}
- -

Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Approfondir les structures syntaxiques fondamentales de CSS
- -

Appliquer CSS à votre document HTML

- -

Regardons d'abord les trois méthodes pour appliquer CSS à un document.

- -

Feuille de style externe

- -

Dans la leçon Démarrer avec CSS nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.

- -

Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension .css. Un élément HTML <link> fait référence à ce fichier.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Une expérience avec CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-    <p>ceci est mon premier exemple CSS</p>
-  </body>
-</html>
e - -

Le fichier CSS devrait ressembler à cela :

- -
h1 {
-  color: blue;
-  background-color: yellow;
-  border: 1px solid black;
-}
-
-p {
-  color: red;
-}
- -

L'attribut href de l'élément <link> doit pointer vers un fichier dans votre système de fichiers.

- -

Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :

- -
<!-- Dans un sous-répertoire nommé styles dans le répertoire courant -->
-<link rel="stylesheet" href="styles/style.css">
-
-<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant -->
-<link rel="stylesheet" href="styles/general/style.css">
-
-<!-- Dans un sous-répertoire nommé styles, un niveau plus haut -->
-<link rel="stylesheet" href="../styles/style.css">
- -

Feuille de style interne

- -

Les règles CSS peuvent être écrites directement dans l'en-tête HTML <head> dans un élément <style>. On parle alors de feuille de style interne.

- -

Le code HTML ci-dessous illustre cette technique :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mes expérimentations CSS</title>
-    <style>
-      h1 {
-        color: blue;
-        background-color: yellow;
-        border: 1px solid black;
-      }
-
-      p {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Hello World!</h1>
-    <p>Ceci est mon premier exemple CSS</p>
-  </body>
-</html>
- -

Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier style.css). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.

- -

Styles en ligne

- -

Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut style:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mes expérimentations CSS</title>
-  </head>
-  <body>
-    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
-    <p style="color:red;">Ceci est mon premier exemple CSS</p>
-  </body>
-</html>
- -

Cette approche est vraiment à proscrire ! Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.

- -

Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.

- -

Jouer avec le CSS de cet article

- -

Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :

- -

index.html :

- -
<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Mes expériences CSS</title>
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-
-    <p>Créez votre test ici !</p>
-
-  </body>
-</html>
- -

styles.css :

- -
/* Créez votre test CSS ici */
-
-p {
-  color: red;
-}
- -

Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <body>…</body> dans le fichier index.html ; ajoutez les règles CSS dans la feuille styles.css.

- -

Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}}

- -

Bonne lecture !

- -

Sélecteurs

- -

Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel Démarrer avec CSS. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.

- -

Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.

- -
h1
-a:link
-.manythings
-#onething
-*
-.box p
-.box p:first-child
-h1, h2, .intro
- -

Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !

- -
-

Note : Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur les sélecteurs CSS, dans un prochain cours.

-
- -

Spécificité

- -

Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur p qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe special.

- -
.special {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Disons que dans notre document HTML, nous avons un paragraphe avec un attribut class valant special. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?

- -
<p class="special">De quelle couleur suis-je?</p>
- -

Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées cascade et spécificité. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur p, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la cascade en action.

- -
p {
-  color: red;
-}
-
-p {
-  color: blue;
-}
- -

Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de spécificité que le sélecteur d'élément, elle gagne donc.

- -

Tentez vous-même l'expérience ci-dessus — ajoutez le code HTML à votre expérience, puis ajoutez les deux règles p {…} à votre feuille de style. Ensuite, changez le premier sélecteur p en .special pour voir comment il affecte le style.

- -

Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article Cascade et héritage vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.

- -

Propriétés et valeurs

- -

Au niveau le plus fondamental, CSS se compose de deux blocs de construction :

- - - -

L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est color et la valeur blue.

- -

Une déclaration surlignée au sein du code CSS

- -

Une propriété associée à une valeur s'appelle une déclaration CSS. Les déclarations CSS sont placées dans des blocs de déclaration CSS. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.

- -

Un bloc de déclaration surligné

- -

Enfin, les blocs de déclaration CSS sont associés à des sélecteurs pour produire des ensembles de règles CSS (ou règles CSS). L'image contient deux règles, une pour le sélecteur h1 et une pour le sélecteur p. La règle pour h1 est mise en surbrillance.

- -

La règle ciblant h1 est surlignée

- -

Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (:).

- -

Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML :

- - - -
-

Attention : Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme invalide et complètement ignorée par le moteur CSS du navigateur.

-
- -
-

Attention : En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit toujours être notée color. couleur ne fonctionnera pas.

-
- -

Fonctions

- -

Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction calc(). Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :

- -

Exemple calc

- -
<div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div>
- -
.outer {
-  border: 5px solid black;
-}
-
-.box {
-  padding: 10px;
-  width: calc(90% - 30px);
-  background-color: rebeccapurple;
-  color: white;
-}
- -

La page devrait s'afficher comme ceci :

- -

{{EmbedLiveSample('Exemple_calc', '100%', 200)}}

- -

Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple calc() ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.

- -

Un autre exemple serait les différentes valeurs de la propriété <transform>, telles que rotate().

- -

Exemple transform

- -
<div class="box"></div>
- -
.box {
-  margin: 30px;
-  width: 100px;
-  height: 100px;
-  background-color: rebeccapurple;
-  transform: rotate(0.8turn)
-}
- -

La page devrait s'afficher comme ceci :

- -

{{EmbedLiveSample('Exemple_transform', '100%', 200)}}

- -

Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML :

- - - -

@rules

-e -

Nous n'avons pas rencontré jusqu'ici les @rules (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines @rules simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera @import :

- -
@import 'styles2.css';
- -

L'une des @rules les plus fréquemment rencontrée est @media, qui permet d'utiliser les media queries pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).

- -

Dans le CSS ci-dessous, une règle donne à l'élément <body> un fond rose. La section @media ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.

- -
body {
-  background-color: pink
-}
-
-@media (min-width: 30em) {
-  body {
-    background-color: blue;
-  }
-}
- -

Tout au long de nos tutoriels CSS, vous rencontrerez d'autres @rules.

- -

Ajoutez une media query à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.

- -

Raccourcis

- -

Certaines propriétés comme font, background, padding, border, ou margin sont appelées propriétés raccourci — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.

- -

Par exemple, la ligne suivante :

- -
/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
-   dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
-   Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
-   pour top/bottom, puis left/right */
-padding: 10px 15px 15px 5px;
- -

produit le même effet que les quatre lignes suivantes réunies :

- -
padding-top: 10px;
-padding-right: 15px;
-padding-bottom: 15px;
-padding-left: 5px;
- -

Alors que :

- -
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
- -

produit la même chose que tout ce qui suit :

- -
background-color: red;
-background-image: url(bg-graphic.png);
-background-position: 10px 10px;
-background-repeat: repeat-x;
-background-scroll: fixed;
- -

Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre référence CSS pour en savoir plus.

- -

Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.

- -
-

Attention : Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.

-
- -

Commentaires

- -

En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.

- -

En CSS le début des commentaires est signalé par /* et la fin par */. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.

- -
/* mise en forme des éléments de base */
-/* -------------------------------------------------------------------------------------------- */
-body {
-  font: 1em/150% Helvetica, Arial, sans-serif;
-  padding: 1em;
-  margin: 0 auto;
-  max-width: 33em;
-}
-
-@media (min-width: 70em) {
-  /* On donne un traitement conditionnel de la taille de police globale.
-     sur de grands écrans, on augmente la valeur de font-size pour une
-     meilleure lisibilité */
-  body {
-    font-size: 130%;
-  }
-}
-
-h1 {font-size: 1.5em;}
-
-/* mise en forme des éléments imbriqués dans le DOM */
-/* -------------------------------------------------------------------------------------------- */
-div p, #id:first-line {
-  background-color: red;
-  background-style: none
-}
-
-div p{
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
- -

Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur .special a été désactivée par des commentaires :

- -
/*.special {
-  color: red;
-}*/
-
-p {
-  color: blue;
-}
- -

Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.

- -

Espace

- -

On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.

- -

L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.

- -
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;
-  background-style: none
-}
-
-div p {
-  margin: 0;
-  padding: 1em;
-}
-
-div p + p {
-  padding-top: 0;
-}
-
- -

On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !

- -
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; background-style: none}
-div p {margin: 0; padding: 1em;}
-div p + p {padding-top: 0;}
-
- -

La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.

- -

Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :

- -
margin: 0 auto;
-padding-left: 10px;
- -

Mais les suivantes sont invalides :

- -
margin: 0auto;
-padding- left: 10px;
- -

0auto n'est pas reconnu comme une valeur possible pour la propriété margin (0 et auto sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.

- -

Le navigateur ne connaît pas la propriété padding- . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.

- -

À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.

- -

À suivre…

- -

Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — Comment CSS fonctionne — nous examinerons donc ce point.

- -

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

- -

Dans ce cours

- -
    -
  1. Qu'est ce que CSS?
    2. -
  2. Démarrer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS comment ça marche ?
    5. -
  5. Mettre en œuvre vos connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.md b/files/fr/learn/css/first_steps/how_css_is_structured/index.md new file mode 100644 index 0000000000..057da54fc4 --- /dev/null +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.md @@ -0,0 +1,505 @@ +--- +title: Comment CSS est structuré +slug: Learn/CSS/First_steps/How_CSS_is_structured +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")}}
+ +

Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Approfondir les structures syntaxiques fondamentales de CSS
+ +

Appliquer CSS à votre document HTML

+ +

Regardons d'abord les trois méthodes pour appliquer CSS à un document.

+ +

Feuille de style externe

+ +

Dans la leçon Démarrer avec CSS nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.

+ +

Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension .css. Un élément HTML <link> fait référence à ce fichier.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Une expérience avec CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <p>ceci est mon premier exemple CSS</p>
+  </body>
+</html>
e + +

Le fichier CSS devrait ressembler à cela :

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

L'attribut href de l'élément <link> doit pointer vers un fichier dans votre système de fichiers.

+ +

Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :

+ +
<!-- Dans un sous-répertoire nommé styles dans le répertoire courant -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Dans un sous-répertoire nommé styles, un niveau plus haut -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Feuille de style interne

+ +

Les règles CSS peuvent être écrites directement dans l'en-tête HTML <head> dans un élément <style>. On parle alors de feuille de style interne.

+ +

Le code HTML ci-dessous illustre cette technique :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mes expérimentations CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <p>Ceci est mon premier exemple CSS</p>
+  </body>
+</html>
+ +

Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier style.css). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.

+ +

Styles en ligne

+ +

Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mes expérimentations CSS</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
+    <p style="color:red;">Ceci est mon premier exemple CSS</p>
+  </body>
+</html>
+ +

Cette approche est vraiment à proscrire ! Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.

+ +

Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.

+ +

Jouer avec le CSS de cet article

+ +

Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :

+ +

index.html :

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Mes expériences CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Créez votre test ici !</p>
+
+  </body>
+</html>
+ +

styles.css :

+ +
/* Créez votre test CSS ici */
+
+p {
+  color: red;
+}
+ +

Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <body>…</body> dans le fichier index.html ; ajoutez les règles CSS dans la feuille styles.css.

+ +

Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}}

+ +

Bonne lecture !

+ +

Sélecteurs

+ +

Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel Démarrer avec CSS. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.

+ +

Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.

+ +
h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro
+ +

Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !

+ +
+

Note : Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur les sélecteurs CSS, dans un prochain cours.

+
+ +

Spécificité

+ +

Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur p qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe special.

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Disons que dans notre document HTML, nous avons un paragraphe avec un attribut class valant special. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?

+ +
<p class="special">De quelle couleur suis-je?</p>
+ +

Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées cascade et spécificité. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur p, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la cascade en action.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de spécificité que le sélecteur d'élément, elle gagne donc.

+ +

Tentez vous-même l'expérience ci-dessus — ajoutez le code HTML à votre expérience, puis ajoutez les deux règles p {…} à votre feuille de style. Ensuite, changez le premier sélecteur p en .special pour voir comment il affecte le style.

+ +

Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article Cascade et héritage vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.

+ +

Propriétés et valeurs

+ +

Au niveau le plus fondamental, CSS se compose de deux blocs de construction :

+ + + +

L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est color et la valeur blue.

+ +

Une déclaration surlignée au sein du code CSS

+ +

Une propriété associée à une valeur s'appelle une déclaration CSS. Les déclarations CSS sont placées dans des blocs de déclaration CSS. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.

+ +

Un bloc de déclaration surligné

+ +

Enfin, les blocs de déclaration CSS sont associés à des sélecteurs pour produire des ensembles de règles CSS (ou règles CSS). L'image contient deux règles, une pour le sélecteur h1 et une pour le sélecteur p. La règle pour h1 est mise en surbrillance.

+ +

La règle ciblant h1 est surlignée

+ +

Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (:).

+ +

Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML :

+ + + +
+

Attention : Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme invalide et complètement ignorée par le moteur CSS du navigateur.

+
+ +
+

Attention : En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit toujours être notée color. couleur ne fonctionnera pas.

+
+ +

Fonctions

+ +

Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction calc(). Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :

+ +

Exemple calc

+ +
<div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+ +

La page devrait s'afficher comme ceci :

+ +

{{EmbedLiveSample('Exemple_calc', '100%', 200)}}

+ +

Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple calc() ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.

+ +

Un autre exemple serait les différentes valeurs de la propriété <transform>, telles que rotate().

+ +

Exemple transform

+ +
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+ +

La page devrait s'afficher comme ceci :

+ +

{{EmbedLiveSample('Exemple_transform', '100%', 200)}}

+ +

Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML :

+ + + +

@rules

+e +

Nous n'avons pas rencontré jusqu'ici les @rules (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines @rules simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera @import :

+ +
@import 'styles2.css';
+ +

L'une des @rules les plus fréquemment rencontrée est @media, qui permet d'utiliser les media queries pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).

+ +

Dans le CSS ci-dessous, une règle donne à l'élément <body> un fond rose. La section @media ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.

+ +
body {
+  background-color: pink
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Tout au long de nos tutoriels CSS, vous rencontrerez d'autres @rules.

+ +

Ajoutez une media query à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.

+ +

Raccourcis

+ +

Certaines propriétés comme font, background, padding, border, ou margin sont appelées propriétés raccourci — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.

+ +

Par exemple, la ligne suivante :

+ +
/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données
+   dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top).
+   Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin
+   pour top/bottom, puis left/right */
+padding: 10px 15px 15px 5px;
+ +

produit le même effet que les quatre lignes suivantes réunies :

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Alors que :

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

produit la même chose que tout ce qui suit :

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre référence CSS pour en savoir plus.

+ +

Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.

+ +
+

Attention : Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.

+
+ +

Commentaires

+ +

En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.

+ +

En CSS le début des commentaires est signalé par /* et la fin par */. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.

+ +
/* mise en forme des éléments de base */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvetica, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* On donne un traitement conditionnel de la taille de police globale.
+     sur de grands écrans, on augmente la valeur de font-size pour une
+     meilleure lisibilité */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* mise en forme des éléments imbriqués dans le DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  background-style: none
+}
+
+div p{
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur .special a été désactivée par des commentaires :

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.

+ +

Espace

+ +

On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.

+ +

L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.

+ +
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;
+  background-style: none
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !

+ +
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; background-style: none}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.

+ +

Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

Mais les suivantes sont invalides :

+ +
margin: 0auto;
+padding- left: 10px;
+ +

0auto n'est pas reconnu comme une valeur possible pour la propriété margin (0 et auto sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.

+ +

Le navigateur ne connaît pas la propriété padding- . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.

+ +

À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.

+ +

À suivre…

+ +

Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — Comment CSS fonctionne — nous examinerons donc ce point.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Dans ce cours

+ +
    +
  1. Qu'est ce que CSS?
    2. +
  2. Démarrer avec CSS
    3. +
  3. Comment CSS est structuré
    4. +
  4. CSS comment ça marche ?
    5. +
  5. Mettre en œuvre vos connaissances
    6. +
diff --git a/files/fr/learn/css/first_steps/how_css_works/index.html b/files/fr/learn/css/first_steps/how_css_works/index.html deleted file mode 100644 index 0a578ae2a0..0000000000 --- a/files/fr/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: CSS, comment ça marche ? -slug: Learn/CSS/First_steps/How_CSS_works -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")}}

- -

Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Comprendre, à un niveau élémentaire, comment un navigateur traite les codes CSS et HTML et ce qui se passe quand le navigateur rencontre du CSS qu'il ne sait pas interpréter.
- -

CSS comment ça marche, en  fait ?

- -

Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe :

- -
    -
  1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau).
    2. -
  2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Document Object Model) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section.
    3. -
  3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et  la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation.
    4. -
  4. Le navigateur parse le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'arbre de rendu (render tree).
    5. -
  5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée.
    6. -
  6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle painting).
    7. -
- -

Le diagramme suivant propose une vue synthétique de ce traitement.

- -

- -

À propos du DOM

- -

Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les parents de nœuds enfants (child nodes) et les nœuds enfants peuvent avoir des frères et sœurs (siblings).

- -

Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document.

- -

Avec les DevTools  de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux.

- -

Une représentation concrète du DOM

- -

Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM.

- -

Partons du code ci-dessous :

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
-
- -

Dans le DOM, le nœud correspondant à l'élément <p> est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments <span>. Les nœuds SPAN sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte :

- -
P
-├─ "Let's use:"
-├─ SPAN
-|  └─ "Cascading"
-├─ SPAN
-|  └─ "Style"
-└─ SPAN
-   └─ "Sheets"
-
- -

C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :

- -

{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}

- - - -

Appliquer CSS au DOM

- -

Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé :

- -
<p>
-  Let's use:
-  <span>Cascading</span>
-  <span>Style</span>
-  <span>Sheets</span>
-</p>
- -

On lui applique le CSS suivant :

- -
span {
-  border: 1px solid black;
-  background-color: lime;
-}
- -

Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur span, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à peindre la représentation visuelle finale à l'écran.

- -

Voilà le résultat après mise à jour :

- -

{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}

- -

Dans le prochain module, dans l'article Debugging CSS, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.

- -

Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?

- -

Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait dans une leçon précédente. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.

- -

La réponse : ne rien faire et passer à la suite !

- -

Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur.

- -

De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante.

- -

Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise colour pour le mot couleur. Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.

- -
<p> Je veux que ce texte soit grand, gras et bleu.</p>
- -
p {
-  font-weight: bold;
-  colour: blue; /* incorrect spelling of the color property */
-  font-size: 200%;
-}
- -

{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}

- -

Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la cascade : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.

- -

Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter calc() pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de width est calculée par calc(). Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec  calc() qui, par cascade, écrase la déclaration précédente.

- -

Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.

- -

Et enfin

- -

Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez mettre en œuvre vos nouvelles connaissances : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS.

- -

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

- -

Dans ce cour

- -
    -
  1. CSS, c'est quoi ?
    2. -
  2. Démarrer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS ça marche comment ?
    5. -
  5. Mettre en œuvre vos nouvelles connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/how_css_works/index.md b/files/fr/learn/css/first_steps/how_css_works/index.md new file mode 100644 index 0000000000..0a578ae2a0 --- /dev/null +++ b/files/fr/learn/css/first_steps/how_css_works/index.md @@ -0,0 +1,149 @@ +--- +title: CSS, comment ça marche ? +slug: Learn/CSS/First_steps/How_CSS_works +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")}}

+ +

Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Comprendre, à un niveau élémentaire, comment un navigateur traite les codes CSS et HTML et ce qui se passe quand le navigateur rencontre du CSS qu'il ne sait pas interpréter.
+ +

CSS comment ça marche, en  fait ?

+ +

Pour afficher un document, un navigateur doit combiner le contenu du document et les informations de mise en forme. Le traitement se fait en plusieurs phases que nous détaillons ci-dessous. Gardez à l'esprit que cette description est simplifiée, selon le modèle du navigateur, les étapes pourraient changer. Mais dans les grandes lignes, voilà ce qui se passe :

+ +
    +
  1. Le navigateur charge le HTML (par ex. il le reçoit à travers le réseau).
    2. +
  2. Il traduit le {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Document Object Model) : une représentation du document HTML stockable en mémoire sur votre ordinateur. Nous expliquons le DOM plus en détails dans la prochaine section.
    3. +
  3. Le navigateur récupère ensuite la plupart des ressources attachées au document HTML, telles les images, les vidéos ajoutées à la page... et  la feuille CSS externe ! JavaScript est traité un peu plus tard et nous n'en parlerons pas ici pour simplifier la présentation.
    4. +
  4. Le navigateur parse le CSS, classe les différentes règles par types de sélecteur (par ex. élément, class, ID, etc...) dans des "buckets". En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style. L'arbre ainsi obtenu s'appelle l'arbre de rendu (render tree).
    5. +
  5. Pour chaque nœud de l'arbre de rendu, le navigateur calcule l'effet visuel de la règle CSS associée.
    6. +
  6. Le visuel ainsi produit est affiché à l'écran (cette étape s'appelle painting).
    7. +
+ +

Le diagramme suivant propose une vue synthétique de ce traitement.

+ +

+ +

À propos du DOM

+ +

Tout DOM a une structure d'arbre. Chaque élément, attribut, bout de texte du langage de balises est traduit en un {{Glossary("Node/DOM","nœud du DOM")}} dans la structure en arbre. Les nœuds sont définis par leurs relations à d'autres nœuds du DOM. Certains éléments sont les parents de nœuds enfants (child nodes) et les nœuds enfants peuvent avoir des frères et sœurs (siblings).

+ +

Comprendre le DOM vous aidera à concevoir, débugguer et maintenir votre CSS car le DOM est le point de jonction entre CSS et le contenu HTML du document.

+ +

Avec les DevTools  de votre navigateur vous pourrez naviguer à travers le DOM en sélectionnant les items pour les inspecter et voir quelles règles s'appliquent sur eux.

+ +

Une représentation concrète du DOM

+ +

Plutôt qu'une explication longue et ennuyeuse, regardons comment un fragment de code HTML est converti en un DOM.

+ +

Partons du code ci-dessous :

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+
+ +

Dans le DOM, le nœud correspondant à l'élément <p> est un parent. Ses enfants sont le nœud texte et trois nœuds associés aux éléments <span>. Les nœuds SPAN sont eux-mêmes parents, avec pour enfant le nœud associé à leur texte :

+ +
P
+├─ "Let's use:"
+├─ SPAN
+|  └─ "Cascading"
+├─ SPAN
+|  └─ "Style"
+└─ SPAN
+   └─ "Sheets"
+
+ +

C'est ainsi que le navigateur interprète notre fragment HTML—il transforme ce DOM en arbre de rendu puis affiche le résultat comme suit :

+ +

{{EmbedLiveSample('Une_représentation_concrète_du_DOM', '100%', 55)}}

+ + + +

Appliquer CSS au DOM

+ +

Supposons maintenant que nous avons ajouté du CSS à notre document pour le mettre en forme. Le HTML n'a pas changé :

+ +
<p>
+  Let's use:
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+ +

On lui applique le CSS suivant :

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

Le navigateur parse le HTML, calcule son DOM, puis parse le CSS. Notre CSS a une unique règle avec un unique sélecteur span, ça va être rapide à trier ! La règle est attachée à chaque nœud SPAN du DOM pour obtenir l'arbre de rendu. Reste à calculer les rendus puis à peindre la représentation visuelle finale à l'écran.

+ +

Voilà le résultat après mise à jour :

+ +

{{EmbedLiveSample('Appliquer_CSS_au_DOM', '100%', 55)}}

+ +

Dans le prochain module, dans l'article Debugging CSS, nous utiliserons les DevTools du navigateur pour débuguer des erreurs CSS. Ce sera aussi l'occasion de mieux comprendre comment le navigateur interprète CSS.

+ +

Que se passe-t-il quand un navigateur rencontre du CSS qu'il ne comprend pas ?

+ +

Les navigateurs n'implémentent pas tous en même temps une fonctionnalité CSS nouvelle, j'avais mentionné ce fait dans une leçon précédente. Rajoutez à cela le fait que trop de gens n'utilisent pas une version à jour de leur navigateur. CSS, lui, est en développement constant et donc toujours en avance par rapport à ce que les navigateurs peuvent implémenter. On doit donc se demander ce qui se passe quand un navigateur tombe sur un sélecteur ou une déclaration qu'il ne sait pas interpréter.

+ +

La réponse : ne rien faire et passer à la suite !

+ +

Quand un navigateur parse vos règles et rencontre une propriété ou une valeur qu'il ne comprend pas, il l'ignore et passe à la déclaration suivante. Cela se produit si vous avez mal orthographié le nom de la propriété ou de la valeur, ou s'ils sont trop nouveaux et pas encore pris en charge par le navigateur.

+ +

De même quand le navigateur rencontre un sélecteur qu'il ne sait pas interpréter, il ignore la règle correspondante et passe à la suivante.

+ +

Dans l'exemple ci-dessous, j'ai utilisé l'orthographe anglaise colour pour le mot couleur. Cela contredit la convention CSS et rend ce code incompréhensible pour le navigateur. En conséquence, le paragraphe n'a pas été colorié en bleu. Par contre, tout le reste du CSS est appliqué, seule la ligne invalide est ignorée.

+ +
<p> Je veux que ce texte soit grand, gras et bleu.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* incorrect spelling of the color property */
+  font-size: 200%;
+}
+ +

{{EmbedLiveSample('Que_se_passe-t-il_quand_un_navigateur_rencontre_du_CSS_quil_ne_comprend_pas', '100%', 200)}}

+ +

Le comportement décrit ci-dessus est très utile : vous pouvez utiliser du CSS récent pour perfectionner la mise en forme de vos pages, sachant qu'aucune erreur ne se produira quand votre code n'est pas compris — le navigateur interprète la règle... ou ne fait rien. Rappelez vous maintenant la cascade : entre deux règles de même spécificité, le navigateur choisira la dernière rencontrée. La cascade permet d'offrir une alternative pour les navigateurs qui ne prennent pas en charge le CSS le plus récent.

+ +

Cela fonctionne particulièrement bien quand on désire utiliser une valeur CSS introduite récemment, pas encore prise en charge partout. Par exemple, quelques vieux navigateurs ne savent pas interpréter calc() pour les valeurs. Je peux donc donner une valeur en pixels pour la largeur de ma boîte, puis proposer une déclaration où la valeur de width est calculée par calc(). Un vieux navigateur interprète la première déclaration, il ne comprend pas la seconde, il l'ignore — il utilisera donc la version pixels. Les navigateurs récents interprètent la déclaration en pixels, puis celle avec  calc() qui, par cascade, écrase la déclaration précédente.

+ +

Dans les leçons à venir, nous rencontrerons d'autres méthodes pour adapter le code aux différents navigateurs.

+ +

Et enfin

+ +

Ce cours est presque achevé ; il nous reste un seul point à voir. Dans la prochaine leçon, vous allez mettre en œuvre vos nouvelles connaissances : vous allez remettre en forme un exemple, une occasion d'appliquer tout ce que vous avez appris de CSS.

+ +

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

+ +

Dans ce cour

+ +
    +
  1. CSS, c'est quoi ?
    2. +
  2. Démarrer avec CSS
    3. +
  3. Comment CSS est structuré
    4. +
  4. CSS ça marche comment ?
    5. +
  5. Mettre en œuvre vos nouvelles connaissances
    6. +
diff --git a/files/fr/learn/css/first_steps/index.html b/files/fr/learn/css/first_steps/index.html deleted file mode 100644 index 2b0e0238ec..0000000000 --- a/files/fr/learn/css/first_steps/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Premiers pas avec CSS -slug: Learn/CSS/First_steps -tags: - - Apprendre - - CSS - - Débutant - - Module - - premiers pas -translation_of: Learn/CSS/First_steps ---- -
{{LearnSidebar}}
- -

CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.

- -

Vous voulez devenir un développeur web front-end ?

- -

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

- -

Prérequis

- -

Avant de commencer ce module, vous devriez avoir :

- -
    -
  1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ;
    2. -
  2. Un environnement de travail minimal installé, comme indiqué dans la section installer les logiciels de base et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section Gérer les fichiers ;
    3. -
  3. Une familiarité avec HTML, comme discuté dans le module d'introduction à HTML.
    4. -
- -
-

Note : Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :

- -
-
Qu'est-ce que le CSS?
-

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.

-
Démarrer avec CSS
-
Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.
-
Comment est structuré le CSS
-
Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés.
-
Comment CSS Fonctionne
-
Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.
-
Utilisez vos nouvelles compétences
-
Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.
-
- -

Voir aussi

- -
-
Literacy Web intermédiaire 1 : Introduction au CSS
-
Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module Introduction à CSS. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
-
diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md new file mode 100644 index 0000000000..2b0e0238ec --- /dev/null +++ b/files/fr/learn/css/first_steps/index.md @@ -0,0 +1,56 @@ +--- +title: Premiers pas avec CSS +slug: Learn/CSS/First_steps +tags: + - Apprendre + - CSS + - Débutant + - Module + - premiers pas +translation_of: Learn/CSS/First_steps +--- +
{{LearnSidebar}}
+ +

CSS (Cascading Style Sheets ou en français "Feuilles de style en cascade") est utilisé pour styliser et mettre en page des pages Web - par exemple, pour modifier la police, la couleur, la taille et l'espacement de votre contenu, le scinder en plusieurs colonnes ou ajouter des animations et autres éléments décoratifs. Ce module vous permet de commencer en douceur votre chemin vers la maîtrise de CSS avec les bases de son fonctionnement, de sa syntaxe et de la façon dont vous pouvez commencer à l'utiliser pour ajouter du style au HTML.

+ +

Vous voulez devenir un développeur web front-end ?

+ +

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez avoir :

+ +
    +
  1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ;
    2. +
  2. Un environnement de travail minimal installé, comme indiqué dans la section installer les logiciels de base et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section Gérer les fichiers ;
    3. +
  3. Une familiarité avec HTML, comme discuté dans le module d'introduction à HTML.
    4. +
+ +
+

Note : Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences :

+ +
+
Qu'est-ce que le CSS?
+

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage.

+
Démarrer avec CSS
+
Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage.
+
Comment est structuré le CSS
+
Maintenant que vous avez une idée sur ce qu'est le CSS et les bases de son utilisation, il est temps de regarder plus précisement la structure du langage lui-même. Nous avons déjà rencontré de nombreux concepts discutés ici ; vous pouvez vous référer à cette section pour référence si vous rencontrez des difficultés de compréhension des concepts plus avancés.
+
Comment CSS Fonctionne
+
Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web.
+
Utilisez vos nouvelles compétences
+
Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter.
+
+ +

Voir aussi

+ +
+
Literacy Web intermédiaire 1 : Introduction au CSS
+
Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module Introduction à CSS. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
+
diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html deleted file mode 100644 index 87b94d05bf..0000000000 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Mettre en œuvre vos connaissances -slug: Learn/CSS/First_steps/Using_your_new_knowledge -tags: - - Apprendre - - CSS - - Débutant - - Playground -translation_of: Learn/CSS/First_steps/Using_your_new_knowledge ---- -

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

- -

Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. 

- - - - - - - - - - - - -
Prérequis :Avant de vous soumettre à cette évaluation, vous avez suivi le module sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML (cf. Introduction à HTML).
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
- -

Point de départ

- -

Vous pouvez travailler dans l'éditeur ci-dessous ou télécharger le point de départ pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section <head>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme CodePen, jsFiddle, ou Glitch pour travailler sur les tâches proposées.

- -
-

Note : ne restez pas coincé, appelez à l'aide — voir la section Evaluation et comment obtenir de l'aide au bas de cette page.

-
- -

Travailler avec CSS

- -

L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :

- - - -

J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme h1 et h2 ; j'ai aussi créé une classe job-title.

- -

Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :

- -
    -
  1. Affichez le titre de niveau 1 en hotpink ;
    2. -
  2.  Donnez au titre un {{cssxref("border-bottom")}} de 10px dotted de couleur purple ;
    3. -
  3. Affichez le titre de niveau 2 en italique ;
    4. -
  4. Colorez la ul des détails de contacts en {{cssxref("background-color")}} #eeeeee, avec un {{cssxref("border")}} de 5px solid purple. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.
    5. -
  5. Faites que les liens apparaissent en green lors d'un survol du curseur.
    6. -
- -

Vous devriez obtenir un rendu qui ressemble à cela :

- -

Screenshot of how the example should look after completing the assessment.

- -

Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la référence CSS sur MDN !

- -

À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.

- -

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

- -

Evaluation ou compléments d'information

- -

Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :

- -
    -
  1. Publiez votre code dans un éditeur en ligne tel CodePen, jsFiddle, or Glitch.
    2. -
  2. Si vous êtes à l'aise en anglais : -
      -
    1. Dans le forum MDN Discourse, écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning"  à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : -
        -
      • Un titre parlant comme "Assessment wanted for CSS First Steps".
        • -
      • Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.
        • -
      • Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...
        • -
      • Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide.
        • -
      -
      2. -
    -
    3. -
  3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter.
    4. -
- -

La suite ?

- -

Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, construire des blocs CSS, nous approfondirons de nombreux points.

- -

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

- -

Dans ce cours

- -
    -
  1. Qu'est-ce que CSS ?
    2. -
  2. Commencer avec CSS
    3. -
  3. Comment CSS est structuré
    4. -
  4. CSS, comment ça marche ?
    5. -
  5. Mettez en œuvre vos connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md new file mode 100644 index 0000000000..87b94d05bf --- /dev/null +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md @@ -0,0 +1,106 @@ +--- +title: Mettre en œuvre vos connaissances +slug: Learn/CSS/First_steps/Using_your_new_knowledge +tags: + - Apprendre + - CSS + - Débutant + - Playground +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

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

+ +

Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. 

+ + + + + + + + + + + + +
Prérequis :Avant de vous soumettre à cette évaluation, vous avez suivi le module sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML (cf. Introduction à HTML).
Objectif :Tester vos connaissances en mettant à l'œuvre CSS.
+ +

Point de départ

+ +

Vous pouvez travailler dans l'éditeur ci-dessous ou télécharger le point de départ pour travailler en local sur votre machine, avec votre propre éditeur de code.  Ce point de départ est une page HTML avec le CSS interne écrit dans la section <head>. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme CodePen, jsFiddle, ou Glitch pour travailler sur les tâches proposées.

+ +
+

Note : ne restez pas coincé, appelez à l'aide — voir la section Evaluation et comment obtenir de l'aide au bas de cette page.

+
+ +

Travailler avec CSS

+ +

L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages :

+ + + +

J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme h1 et h2 ; j'ai aussi créé une classe job-title.

+ +

Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées :

+ +
    +
  1. Affichez le titre de niveau 1 en hotpink ;
    2. +
  2.  Donnez au titre un {{cssxref("border-bottom")}} de 10px dotted de couleur purple ;
    3. +
  3. Affichez le titre de niveau 2 en italique ;
    4. +
  4. Colorez la ul des détails de contacts en {{cssxref("background-color")}} #eeeeee, avec un {{cssxref("border")}} de 5px solid purple. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord.
    5. +
  5. Faites que les liens apparaissent en green lors d'un survol du curseur.
    6. +
+ +

Vous devriez obtenir un rendu qui ressemble à cela :

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la référence CSS sur MDN !

+ +

À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Evaluation ou compléments d'information

+ +

Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide :

+ +
    +
  1. Publiez votre code dans un éditeur en ligne tel CodePen, jsFiddle, or Glitch.
    2. +
  2. Si vous êtes à l'aise en anglais : +
      +
    1. Dans le forum MDN Discourse, écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning"  à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : +
        +
      • Un titre parlant comme "Assessment wanted for CSS First Steps".
        • +
      • Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide.
        • +
      • Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code...
        • +
      • Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide.
        • +
      +
      2. +
    +
    3. +
  3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter.
    4. +
+ +

La suite ?

+ +

Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, construire des blocs CSS, nous approfondirons de nombreux points.

+ +

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

+ +

Dans ce cours

+ +
    +
  1. Qu'est-ce que CSS ?
    2. +
  2. Commencer avec CSS
    3. +
  3. Comment CSS est structuré
    4. +
  4. CSS, comment ça marche ?
    5. +
  5. Mettez en œuvre vos connaissances
    6. +
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.html b/files/fr/learn/css/first_steps/what_is_css/index.html deleted file mode 100644 index bfdeb9fa33..0000000000 --- a/files/fr/learn/css/first_steps/what_is_css/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Qu'est ce que CSS ? -slug: Learn/CSS/First_steps/What_is_CSS -tags: - - Apprendre - - CSS - - Débutant - - Modules - - Specifications - - Syntaxe -translation_of: Learn/CSS/First_steps/What_is_CSS -original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
- -

Dans le cours Introduction à HTML, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.

- -

La mise en forme par défaut appliquée par un navigateur.

- -

Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.

- -

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

- -

{{EmbedYouTube("spK_S0HfzFw")}}

- -

À quoi sert CSS ?

- -

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

- -

Les documents en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.

- -

"Présenter un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.

- -
-

Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

-
- -

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

- -

Syntaxe de CSS

- -

CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.

- -

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

- -

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

- -
h1 {
-  color: red;
-  font-size: 5em;
-}
- -

La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).

- -

Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété : valeur. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété color peut prendre différentes valeurs de type <color>. La propriété font-size accepte différentes tailles comme valeurs.

- -

Une feuille de style CSS est constituée d'une succession de telles règles :

- -
h1 {
-  color: red;
-  font-size: 5em;
-}
-
-p {
-  color: black;
-}
- -

On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.

- -
-

Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !

-
- -

Modules CSS

- -

L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en modules. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module Backgrounds and Borders, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).

- -

À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).

- -

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

- -

Spécifications CSS

- -

Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.

- -

CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le CSS Working Group (ou "groupe de travail CSS" en français). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des experts invités affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.

- -

De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le CSS Working Group a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! 

- -

Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).

- -

Prise en charge par les navigateurs

- -

Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.

- -

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.

- -

Voici par exemple le tableau de compatibilité pour la propriété font-family.

- -

{{Compat("css.properties.font-family")}}

- -

Où continuer

- -

Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon Démarrer avec CSS.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

Dans ce cours

- -
    -
  1. Qu'est-ce que CSS ?
    2. -
  2. Démarrer avec CSS
    3. -
  3. La façon dont CSS est structuré
    4. -
  4. Le fonctionnement de CSS
    5. -
  5. Mettre en œuvre vos nouvelles connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md new file mode 100644 index 0000000000..bfdeb9fa33 --- /dev/null +++ b/files/fr/learn/css/first_steps/what_is_css/index.md @@ -0,0 +1,133 @@ +--- +title: Qu'est ce que CSS ? +slug: Learn/CSS/First_steps/What_is_CSS +tags: + - Apprendre + - CSS + - Débutant + - Modules + - Specifications + - Syntaxe +translation_of: Learn/CSS/First_steps/What_is_CSS +original_slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
+ +

Dans le cours Introduction à HTML, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.

+ +

La mise en forme par défaut appliquée par un navigateur.

+ +

Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.

+ +

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

+ +

{{EmbedYouTube("spK_S0HfzFw")}}

+ +

À quoi sert CSS ?

+ +

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

+ +

Les documents en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.

+ +

"Présenter un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.

+ +
+

Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

+
+ +

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

+ +

Syntaxe de CSS

+ +

CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.

+ +

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

+ +

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

+ +
h1 {
+  color: red;
+  font-size: 5em;
+}
+ +

La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).

+ +

Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété : valeur. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété color peut prendre différentes valeurs de type <color>. La propriété font-size accepte différentes tailles comme valeurs.

+ +

Une feuille de style CSS est constituée d'une succession de telles règles :

+ +
h1 {
+  color: red;
+  font-size: 5em;
+}
+
+p {
+  color: black;
+}
+ +

On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.

+ +
+

Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !

+
+ +

Modules CSS

+ +

L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en modules. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module Backgrounds and Borders, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).

+ +

À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).

+ +

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

+ +

Spécifications CSS

+ +

Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.

+ +

CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le CSS Working Group (ou "groupe de travail CSS" en français). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des experts invités affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.

+ +

De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le CSS Working Group a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! 

+ +

Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).

+ +

Prise en charge par les navigateurs

+ +

Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.

+ +

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.

+ +

Voici par exemple le tableau de compatibilité pour la propriété font-family.

+ +

{{Compat("css.properties.font-family")}}

+ +

Où continuer

+ +

Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon Démarrer avec CSS.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

Dans ce cours

+ +
    +
  1. Qu'est-ce que CSS ?
    2. +
  2. Démarrer avec CSS
    3. +
  3. La façon dont CSS est structuré
    4. +
  4. Le fonctionnement de CSS
    5. +
  5. Mettre en œuvre vos nouvelles connaissances
    6. +
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html deleted file mode 100644 index 31db5f3ac9..0000000000 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: Créer de belles boîtes -slug: Learn/CSS/Howto/create_fancy_boxes -translation_of: Learn/CSS/Howto/create_fancy_boxes -original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes ---- -

Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.

- -

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

- -

D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.

- -

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

- -
<div class="joli">Coucou ! Je veux être joli.</div>
- -

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

- - - -

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

- -

Jouer avec le modèle de boîte

- -

Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour padding et/ou margin ou quand on utilise un border-radius supérieur à la taille de la boîte.

- -

Créer des cercles

- - - -

Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?

- -
.joli {
-  /* Mieux vaut centrer le texte dans un
-     cercle. */
-  text-align : center;
-
-  /* On fait attention à ce que le texte
-     ne touche pas la bordure. On placera
-     donc le texte avec un remplissage, ce
-     qui donnera une meilleure impression
-     pour le cercle. */
-  padding : 1em;
-
-  /* La bordure marquera le cercle. On
-     pourrait également utiliser un arrière-
-     plan car celui-ci aurait été contenu
-     par border-radius */
-  border : 0.5em solid black;
-
-  /* Assurons-nous que la boîte soit carrée
-     pour obtenir un cercle bien rond plutôt
-     qu'une ellipse ;) */
-  width  : 4em;
-  height : 4em;
-
-  /* Enfin, transformons le carré en cercle */
-  border-radius: 100%;
-}
- -

Et voilà comment on obtient un cercle :

- -

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

- -

Les arrière-plans

- -

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

- -

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

- - - - - -

Passons à la manipulation :

- -
.joli {
-  padding : 1em;
-  width: 100%;
-  height: 200px;
-  box-sizing: border-box;
-
-  /* La couche la plus basse sera
-     peinte avec un gris clair uni */
-  background-color: #E4E4D9;
-
-  /* Ensuite on applique des gradients
-     linéaires les uns sur les autres
-     pour créer un effet de bandes colorées.
-     Comme vous pouvez le voir, les gradients
-     sont considérés et manipulés comme des
-     images */
-  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
-}
- -

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

- -
-

Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.

-
- -

Les pseudo-éléments

- -

Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.

- -

Un nuage

- - - -

Voici un exemple qui illustre comment transformer la boîte en nuage :

- -
.joli {
-  text-align: center;
-
-  /* On utilise la même astuce que pour
-     cercles vus avant */
-  box-sizing: border-box;
-  width     : 150px;
-  height    : 150px;
-  padding   : 80px 1em 0 1em;
-
-  /* On fait de la place pour les « oreilles »
-     du nuage */
-  margin    : 0 100px;
-
-  position: relative;
-
-  background-color: #A4C9CF;
-
-  /* Enfin, le cercle n'est pas tout à fait complet
-     car on veut que la base soit plate.
-     Vous pouvez adapter ici comme bon vous semble
-     si vous souhaitez que la base ne soit pas
-     linéaire */
-  border-radius: 100% 100% 0 0;
-}
-
-/* Voici les styles qu'on appliquera aux deux
-   pseudo-éléments ::before et ::after. */
-.joli::before,
-.joli::after {
-  /* Cette déclaration est nécessaire pour afficher
-     les pseudo-éléments même si leur valeur est la
-     chaîne vide */
-  content: '';
-
-  /* On positionne les pseudo-éléments à droite et à
-     gauche de la boîte mais toujours en bas */
-  position: absolute;
-  bottom  : 0;
-
-  /* On s'assure que les pseudo-éléments passent sous
-     le contenu qu'il y aurait. */
-  z-index : -1;
-
-  background-color: #A4C9CF;
-  border-radius: 100%;
-}
-
-.joli::before {
-  /* Voici la taille pour l'oreille gauche
-     du nuage */
-  width  : 125px;
-  height : 125px;
-
-  /* On la décale un peu à gauche */
-  left    : -80px;
-
-  /* Pour que le bas du nuage reste droit, il
-     faut s'assurer que le coin en bas à gauche
-     soit bien un angle droit. */
-  border-bottom-right-radius: 0;
-}
-
-.joli::after {
-  /* Voici la taille pour l'oreille droite */
-  width  : 100px;
-  height : 100px;
-
-  /* On la décale un peu à droite */
-  right   : -60px;
-
- /* Pour que le bas du nuage reste droit, il
-    faut s'assurer que le coin en bas à droite
-    soit bien un angle droit. */
-  border-bottom-left-radius: 0;
-}
- -

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

- -

Une citation

- -

Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :

- -
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
-<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
- -

Voici la feuille de style que nous allons utiliser :

- -
blockquote {
-  min-height: 5em;
-  padding   : 1em 4em;
-  font      : 1em/150% sans-serif;
-  position  : relative;
-  background-color: lightgoldenrodyellow;
-}
-
-blockquote::before,
-blockquote::after {
-  position: absolute;
-  height  : 3rem;
-  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
-}
-
-blockquote::before {
-  content: '“';
-  top    : 0.3rem;
-  left   : 0.9rem;
-}
-
-blockquote::after {
-  content: '”';
-  bottom : 0.3rem;
-  right  : 0.8rem;
-}
-
-blockquote:lang(fr)::before {
-  content: '«';
-  top    : -1.5rem;
-  left   : 0.5rem;
-}
-
-blockquote:lang(fr)::after {
-  content: '»';
-  bottom : 2.6rem;
-  right  : 0.5rem
-}
-
-blockquote i {
-  display   : block;
-  font-size : 0.8em;
-  margin-top: 1rem;
-  text-style: italic;
-  text-align: right;
-}
- -

{{EmbedLiveSample('Une_citation', '100%', '300')}}

- -

Assemblage

- -

En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :

- - - -

Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.

- -
.joli {
-  position: relative;
-  background-color: #FFC;
-  padding: 2rem;
-  text-align: center;
-  max-width: 200px;
-}
-
-.joli::before {
-  content: "";
-
-  position : absolute;
-  z-index  : -1;
-  bottom   : 15px;
-  right    : 5px;
-  width    : 50%;
-  top      : 80%;
-  max-width: 200px;
-
-  box-shadow: 0px 13px 10px black;
-  transform: rotate(4deg);
-}
- -

{{EmbedLiveSample("Assemblage", '100%', '100')}}

- -

La suite

- -

Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.

diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md new file mode 100644 index 0000000000..31db5f3ac9 --- /dev/null +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md @@ -0,0 +1,303 @@ +--- +title: Créer de belles boîtes +slug: Learn/CSS/Howto/create_fancy_boxes +translation_of: Learn/CSS/Howto/create_fancy_boxes +original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes +--- +

Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.

+ +

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

+ +

D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.

+ +

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

+ +
<div class="joli">Coucou ! Je veux être joli.</div>
+ +

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

+ + + +

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

+ +

Jouer avec le modèle de boîte

+ +

Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour padding et/ou margin ou quand on utilise un border-radius supérieur à la taille de la boîte.

+ +

Créer des cercles

+ + + +

Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?

+ +
.joli {
+  /* Mieux vaut centrer le texte dans un
+     cercle. */
+  text-align : center;
+
+  /* On fait attention à ce que le texte
+     ne touche pas la bordure. On placera
+     donc le texte avec un remplissage, ce
+     qui donnera une meilleure impression
+     pour le cercle. */
+  padding : 1em;
+
+  /* La bordure marquera le cercle. On
+     pourrait également utiliser un arrière-
+     plan car celui-ci aurait été contenu
+     par border-radius */
+  border : 0.5em solid black;
+
+  /* Assurons-nous que la boîte soit carrée
+     pour obtenir un cercle bien rond plutôt
+     qu'une ellipse ;) */
+  width  : 4em;
+  height : 4em;
+
+  /* Enfin, transformons le carré en cercle */
+  border-radius: 100%;
+}
+ +

Et voilà comment on obtient un cercle :

+ +

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

+ +

Les arrière-plans

+ +

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

+ +

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

+ + + + + +

Passons à la manipulation :

+ +
.joli {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* La couche la plus basse sera
+     peinte avec un gris clair uni */
+  background-color: #E4E4D9;
+
+  /* Ensuite on applique des gradients
+     linéaires les uns sur les autres
+     pour créer un effet de bandes colorées.
+     Comme vous pouvez le voir, les gradients
+     sont considérés et manipulés comme des
+     images */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}
+ +

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

+ +
+

Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.

+
+ +

Les pseudo-éléments

+ +

Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.

+ +

Un nuage

+ + + +

Voici un exemple qui illustre comment transformer la boîte en nuage :

+ +
.joli {
+  text-align: center;
+
+  /* On utilise la même astuce que pour
+     cercles vus avant */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* On fait de la place pour les « oreilles »
+     du nuage */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* Enfin, le cercle n'est pas tout à fait complet
+     car on veut que la base soit plate.
+     Vous pouvez adapter ici comme bon vous semble
+     si vous souhaitez que la base ne soit pas
+     linéaire */
+  border-radius: 100% 100% 0 0;
+}
+
+/* Voici les styles qu'on appliquera aux deux
+   pseudo-éléments ::before et ::after. */
+.joli::before,
+.joli::after {
+  /* Cette déclaration est nécessaire pour afficher
+     les pseudo-éléments même si leur valeur est la
+     chaîne vide */
+  content: '';
+
+  /* On positionne les pseudo-éléments à droite et à
+     gauche de la boîte mais toujours en bas */
+  position: absolute;
+  bottom  : 0;
+
+  /* On s'assure que les pseudo-éléments passent sous
+     le contenu qu'il y aurait. */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.joli::before {
+  /* Voici la taille pour l'oreille gauche
+     du nuage */
+  width  : 125px;
+  height : 125px;
+
+  /* On la décale un peu à gauche */
+  left    : -80px;
+
+  /* Pour que le bas du nuage reste droit, il
+     faut s'assurer que le coin en bas à gauche
+     soit bien un angle droit. */
+  border-bottom-right-radius: 0;
+}
+
+.joli::after {
+  /* Voici la taille pour l'oreille droite */
+  width  : 100px;
+  height : 100px;
+
+  /* On la décale un peu à droite */
+  right   : -60px;
+
+ /* Pour que le bas du nuage reste droit, il
+    faut s'assurer que le coin en bas à droite
+    soit bien un angle droit. */
+  border-bottom-left-radius: 0;
+}
+ +

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

+ +

Une citation

+ +

Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :

+ +
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
+<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
+ +

Voici la feuille de style que nous allons utiliser :

+ +
blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}
+ +

{{EmbedLiveSample('Une_citation', '100%', '300')}}

+ +

Assemblage

+ +

En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :

+ + + +

Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.

+ +
.joli {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.joli::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}
+ +

{{EmbedLiveSample("Assemblage", '100%', '100')}}

+ +

La suite

+ +

Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.

diff --git a/files/fr/learn/css/howto/css_faq/index.html b/files/fr/learn/css/howto/css_faq/index.html deleted file mode 100644 index 75479dfb18..0000000000 --- a/files/fr/learn/css/howto/css_faq/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Questions fréquentes en CSS -slug: Learn/CSS/Howto/CSS_FAQ -tags: - - CSS - - Débutant - - Exemple - - Guide -translation_of: Learn/CSS/Howto/CSS_FAQ -original_slug: Web/CSS/CSS_questions_frequentes ---- -

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

- -

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

- -

Les navigateurs modernes ont deux modes de rendu :

- - - -

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

- -

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

- -
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
-                   navigateur moderne utilise un parseur HTML5, c'est le
-                   doctype recommandé. */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"https://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"https://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- -

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

- -

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

- -

Quelle est la différence entre id et class ?

- -

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

- -

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

- -

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

- -

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

- -

Voire Les sélecteurs CSS.

- -

Comment revenir à la valeur par défaut d'un propriété ?

- -

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

- -

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

- -

Comment créer un style dérivant d'un autre ?

- -

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

- -

Comment  assigner de multiples classes à un élément?

- -

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

- -

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

- -

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

- -

Hiérarchie des éléments HTML

- -

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

- -
.news {
-  color: black;
-}
-
-.corpName {
-  font-weight: bold;
-  color: red;
-}
-
- -
<!-- Le texte de l'annonce est en noir
-     mais le nom de l'entreprise est
-     en rouge gras -->
-<div class="news"> (Reuters)
-   <span class="corpName">General Electric</span>
-  (GE.NYS) announced on Thursday...
-</div>
-
- -

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

- -

L'ordre et la redéfinition des règles

- -

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

- -
#stockTicker {
-  font-weight: bold;
-}
-.stockSymbol {
-  color: red;
-}
-/*  D'autres règles             */
-/*  D'autres règles             */
-/*  D'autres règles             */
-.stockSymbol {
-  font-weight: normal;
-}
-
- -

 

- -
<!-- La plupart du texte est en gras sauf "GE",
-     qui est en rouge et sans graisse -->
-<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
-
-
- -

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

- -

Utiliser les propriétés raccourcies

- -

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

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

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

- -
#stockTicker {
-  font-weight: bold;
-  font: 12px Verdana;
-  /* font-weight vaut maintenant normal */
-}
-
- -

Utiliser le sélecteur *

- -

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

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

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

- -

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

- -

La spécificité en CSS

- -

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

- -
div {
-  color: black;
-}
-
-#orange {
-  color: orange;
-}
-
-.green {
-  color: green;
-}
-
- -
<div id="orange" class="green" style="color: red;">
-  Voici quelque chose qui sera rouge.
-</div>
- -

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

- -

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

- -

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

- -

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

- -

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

- -

Quel est l'impact de z-index sur le positionnement des éléments ?

- -

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

- -

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

- -

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md new file mode 100644 index 0000000000..75479dfb18 --- /dev/null +++ b/files/fr/learn/css/howto/css_faq/index.md @@ -0,0 +1,247 @@ +--- +title: Questions fréquentes en CSS +slug: Learn/CSS/Howto/CSS_FAQ +tags: + - CSS + - Débutant + - Exemple + - Guide +translation_of: Learn/CSS/Howto/CSS_FAQ +original_slug: Web/CSS/CSS_questions_frequentes +--- +

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

+ +

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

+ +

Les navigateurs modernes ont deux modes de rendu :

+ + + +

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

+ +

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

+ +
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
+                   navigateur moderne utilise un parseur HTML5, c'est le
+                   doctype recommandé. */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"https://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"https://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ +

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

+ +

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

+ +

Quelle est la différence entre id et class ?

+ +

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

+ +

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

+ +

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

+ +

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

+ +

Voire Les sélecteurs CSS.

+ +

Comment revenir à la valeur par défaut d'un propriété ?

+ +

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

+ +

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

+ +

Comment créer un style dérivant d'un autre ?

+ +

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

+ +

Comment  assigner de multiples classes à un élément?

+ +

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

+ +

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

+ +

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

+ +

Hiérarchie des éléments HTML

+ +

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

+ +
.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+
+ +
<!-- Le texte de l'annonce est en noir
+     mais le nom de l'entreprise est
+     en rouge gras -->
+<div class="news"> (Reuters)
+   <span class="corpName">General Electric</span>
+  (GE.NYS) announced on Thursday...
+</div>
+
+ +

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

+ +

L'ordre et la redéfinition des règles

+ +

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

+ +
#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+
+ +

 

+ +
<!-- La plupart du texte est en gras sauf "GE",
+     qui est en rouge et sans graisse -->
+<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
+
+
+ +

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

+ +

Utiliser les propriétés raccourcies

+ +

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

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

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

+ +
#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+
+ +

Utiliser le sélecteur *

+ +

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

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

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

+ +

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

+ +

La spécificité en CSS

+ +

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

+ +
div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+
+ +
<div id="orange" class="green" style="color: red;">
+  Voici quelque chose qui sera rouge.
+</div>
+ +

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

+ +

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

+ +

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

+ +

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

+ +

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

+ +

Quel est l'impact de z-index sur le positionnement des éléments ?

+ +

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

+ +

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

+ +

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html deleted file mode 100644 index aa8656013b..0000000000 --- a/files/fr/learn/css/howto/generated_content/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Contenu -slug: Learn/CSS/Howto/Generated_content -tags: - - CSS - - CSS:Premiers_pas -translation_of: Learn/CSS/Howto/Generated_content -original_slug: Apprendre/CSS/Comment/Generated_content ---- -

{{LearnSidebar}}

- -

Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.

- -

L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.

- -
-

Note : Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.

-
- -

Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.

- -

Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.

- -

Exemples

- -

Contenu textuel

- -

CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.

- -

HTML

- -
Un texte où j'en ai besoin de <span class="ref"> quelque chose</span>
-
- -

CSS

- -
.ref::before {
-  font-weight: bold;
-  color: navy;
-  content: "Réference ";
-}
- -

Résultat

- -

{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}

- -

L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir 4.4 Représentation de la feuille de style CSS dans la spécification CSS.

- -

Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir Référencer des caractères non représentés par l'encodage et Caractères et casse dans la spécification CSS.

- -

Contenu_avec_une_image

- -

Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.

- -

Cette règle ajoute un espace et une icône après chaque lien qui possède la classe glossary :

- -

HTML

- -
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
- -

CSS

- -
a.glossary::after {
-   content: " " url("glossary-icon.gif");
-}
- -

{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}

diff --git a/files/fr/learn/css/howto/generated_content/index.md b/files/fr/learn/css/howto/generated_content/index.md new file mode 100644 index 0000000000..aa8656013b --- /dev/null +++ b/files/fr/learn/css/howto/generated_content/index.md @@ -0,0 +1,67 @@ +--- +title: Contenu +slug: Learn/CSS/Howto/Generated_content +tags: + - CSS + - CSS:Premiers_pas +translation_of: Learn/CSS/Howto/Generated_content +original_slug: Apprendre/CSS/Comment/Generated_content +--- +

{{LearnSidebar}}

+ +

Cet article décrit différentes façons d'utiliser CSS afin d'ajouter du contenu à un document affiché. Vous pouvez modifier votre feuille de style afin d'ajouter du contenu textuel ou des images.

+ +

L'un des avantages majeurs de CSS est qu'il permet de séparer la forme du contenu. Toutefois, il existe des situations où il est pertinent d'indiquer du contenu dans la feuille de style et pas dans le document. Il est possible d'indiquer du contenu textuel ou des images dans une feuille de style lorsque ce contenu est fortement couplé à la structure du document.

+ +
+

Note : Le contenu spécifié dans la feuille de style ne fait pas partie du DOM.

+
+ +

Ajouter du contenu dans une feuille de style peut engendrer des complications. Ainsi, si vous avez un document disponible en plusieurs langues et que ces versions partagent une même feuille de style, lorsque vous indiquez du contenu dans la feuille de style qui doit être traduit, vous devrez organiser ces parties de la feuille de style dans différents fichiers et faire le nécessaire pour qu'elles soient rattachées aux différentes versions du document.

+ +

Ce problème ne se pose pas si le contenu indiqué est composé de symboles ou d'images qui peuvent s'appliquer dans toutes les langues et pour toutes les cultures.

+ +

Exemples

+ +

Contenu textuel

+ +

CSS peut insérer du contenu textuel avant ou après un élément. Pour cela, on créera une règle en ajoutant {{ cssxref("::before") }} ou {{ cssxref("::after") }} au sélecteur. Dans la déclaration, on utilisera la propriété {{ cssxref("content") }} avec comme valeur le texte à utiliser.

+ +

HTML

+ +
Un texte où j'en ai besoin de <span class="ref"> quelque chose</span>
+
+ +

CSS

+ +
.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Réference ";
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Contenu_textuel', 600, 30) }}

+ +

L'encodage d'une feuille de styles est UTF-8 par défaut mais cela peut être défini dans le lien, dans la feuille de style même ou d'autres façons. Pour plus de détails, voir 4.4 Représentation de la feuille de style CSS dans la spécification CSS.

+ +

Des caractères individuels peuvent également être spécifiés avec un échappement avec la barre oblique inversée. Ainsi, "\265B" pourra être utilisé pour générer le symbole de la reine noire aux échecs : ♛. Pour plus de détails, voir Référencer des caractères non représentés par l'encodage et Caractères et casse dans la spécification CSS.

+ +

Contenu_avec_une_image

+ +

Afin d'ajouter une image avant ou après un élément, vous pouvez indiquer l'URL d'un fichier image dans la valeur de la propriété {{ cssxref("content") }}.

+ +

Cette règle ajoute un espace et une icône après chaque lien qui possède la classe glossary :

+ +

HTML

+ +
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
+ +

CSS

+ +
a.glossary::after {
+   content: " " url("glossary-icon.gif");
+}
+ +

{{ EmbedLiveSample('Contenu_avec_une_image', 600, 40) }}

diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html deleted file mode 100644 index d14cb33a16..0000000000 --- a/files/fr/learn/css/howto/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Apprendre à utiliser CSS pour résoudre des problèmes -slug: Learn/CSS/Howto -tags: - - Apprendre - - CSS - - Débutant -translation_of: Learn/CSS/Howto -original_slug: Apprendre/CSS/Comment ---- -

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

- -

Scénarios fréquents

- -

Bases

- - - -

CSS et texte

- - - - -

Boîtes et mises en page

- - - -

Techniques avancées ou peu communes

- -

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

- -

Général

- - - -

Effets avancés

- - - -

Mise en page

- - - -

Voir aussi

- -

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md new file mode 100644 index 0000000000..d14cb33a16 --- /dev/null +++ b/files/fr/learn/css/howto/index.md @@ -0,0 +1,84 @@ +--- +title: Apprendre à utiliser CSS pour résoudre des problèmes +slug: Learn/CSS/Howto +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto +original_slug: Apprendre/CSS/Comment +--- +

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

+ +

Scénarios fréquents

+ +

Bases

+ + + +

CSS et texte

+ + + + +

Boîtes et mises en page

+ + + +

Techniques avancées ou peu communes

+ +

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

+ +

Général

+ + + +

Effets avancés

+ + + +

Mise en page

+ + + +

Voir aussi

+ +

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

diff --git a/files/fr/learn/css/index.html b/files/fr/learn/css/index.html deleted file mode 100644 index 0d3547603f..0000000000 --- a/files/fr/learn/css/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Composer le HTML avec les CSS -slug: Learn/CSS -tags: - - Article - - CSS - - Codage - - Débutant - - Longueur - - Nécessite du contenu - - Renvois - - Style - - débogage - - particularités -translation_of: Learn/CSS -original_slug: Apprendre/CSS ---- -
{{LearnSidebar}}
- -
-

Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.

-
- -

Parcours d'apprentissage

- -

Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module Introduction au HTML — vous pourrez ensuite en apprendre davantage au sujet :

- - - -

Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

- -

Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans Installer les logiciels de base et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.

- -

Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.

- -

Modules

- -

Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.

- -
-
Introduction aux CSS
-
Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
-
Styliser les boîtes
-
Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
-
- -
-
Composer du texte
-
Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
-
-
Mise en page avec les CSS
-
-

À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.

-
-
- -

Résolution de problèmes courants avec les CSS

- -

Apprendre à utiliser CSS pour résoudre des problèmes fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.

- -

Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !

- -

"Le CSS est étrange"

- -

Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :

- -

{{EmbedYouTube("aHUtMbJw8iA")}}

- -

Voir aussi

- -
-
Les CSS sur MDN
-
Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
-
diff --git a/files/fr/learn/css/index.md b/files/fr/learn/css/index.md new file mode 100644 index 0000000000..0d3547603f --- /dev/null +++ b/files/fr/learn/css/index.md @@ -0,0 +1,78 @@ +--- +title: Composer le HTML avec les CSS +slug: Learn/CSS +tags: + - Article + - CSS + - Codage + - Débutant + - Longueur + - Nécessite du contenu + - Renvois + - Style + - débogage + - particularités +translation_of: Learn/CSS +original_slug: Apprendre/CSS +--- +
{{LearnSidebar}}
+ +
+

Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.

+
+ +

Parcours d'apprentissage

+ +

Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module Introduction au HTML — vous pourrez ensuite en apprendre davantage au sujet :

+ + + +

Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

+ +

Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans Installer les logiciels de base et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.

+ +

Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.

+ +

Modules

+ +

Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.

+ +
+
Introduction aux CSS
+
Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
+
Styliser les boîtes
+
Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
+
+ +
+
Composer du texte
+
Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
+
+
Mise en page avec les CSS
+
+

À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.

+
+
+ +

Résolution de problèmes courants avec les CSS

+ +

Apprendre à utiliser CSS pour résoudre des problèmes fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.

+ +

Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !

+ +

"Le CSS est étrange"

+ +

Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :

+ +

{{EmbedYouTube("aHUtMbJw8iA")}}

+ +

Voir aussi

+ +
+
Les CSS sur MDN
+
Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
+
diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html deleted file mode 100644 index 1aa02da170..0000000000 --- a/files/fr/learn/css/styling_text/fundamentals/index.html +++ /dev/null @@ -1,731 +0,0 @@ ---- -title: Initiation à la mise en forme du texte -slug: Learn/CSS/Styling_text/Fundamentals -tags: - - Alignement - - CSS - - Débutant - - Guide - - Polices de caractères - - Style - - Texte -translation_of: Learn/CSS/Styling_text/Fundamentals -original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
- -

En quoi consiste la mise en forme du texte avec CSS ?

- -

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

- -
-

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

-
- -

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

- - - -
-

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

-
- -

Fontes

- -

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

- -
<h1>Tommy le Chat</h1>
-
-<p>Je m'en souviens comme mon dernier repas...</p>
-
-<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
-ce corps étranger qui s'était niché au fond de sa redoutable gueule.
-Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
-brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
-Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
-avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
-occasions, comme maintenant.</p>
- -
-

Note : (NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

-
- -

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

- -

Couleur

- -

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

- -

color accepte toutes les unités de couleur des CSS, par exemple :

- -
p {
-  color: red;
-}
- -

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

- - - -

{{ EmbedLiveSample('Couleur', '100%', 220) }}

- -

Familles de fontes

- -

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

- -
p {
-  font-family: arial;
-}
- -

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

- -

Polices web sûres

- -

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

- -

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

- -

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
- -
-

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

-
- -
-

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

-
- -

Polices par défaut

- -

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

- -

Les 5 noms sont définis comme suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
- -

Pile de polices

- -

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

- -

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

- -
-

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

-
- -

Un exemple de font-family

- -

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Cela donne le résultat suivant :

- - - -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

- -

Taille de la police de caractères

- -

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

- - - -

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

- -

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

- -
<!-- font-size vaut 16px pour la base du document -->
-<article> <!-- Si font-size vaut 1.5em -->
-  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
-</article>
- -

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

- -

Un simple exemple de dimensionnement

- -

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

- -

Notre nouveau résultat ressemble à :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

- -

Style de fonte, graisse, transformation et décoration de texte

- -

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

- - - -

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

- -

Notre nouveau résultat ressemble à :

- - - - - - -

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

- -

Ombres du texte

- -

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

- -
text-shadow: 4px 4px 5px red;
- -

Les 4 propriétés sont les suivantes :

- -
    -
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. -
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. -
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. -
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. -
- -
-

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

-
- -

Ombres multiples

- -

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

- -
text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
- -

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

- - - - - -

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

- -
-

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

-
- -

Mise en page du texte

- -

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

- -

Alignement du texte

- -

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

- - - -

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-  text-shadow: -1px -1px 1px #aaa,
-               0px 2px 1px rgba(0,0,0,0.5),
-               2px 2px 2px rgba(0,0,0,0.7),
-               0px 0px 3px rgba(0,0,0,0.4);
-  text-align: center;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

- -

Hauteur de ligne

- -

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

- -
line-height: 1.5;
- -

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

- - - - - -

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

- -

Espacement entre les lettres et les mots

- -

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

- -

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

- -
p::first-line {
-  letter-spacing: 2px;
-  word-spacing: 4px;
-}
- -

Nous obtiendrons :

- - - - - -

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

- -

D'autres propriétés intéressantes

- -

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

- -

Styles de police de caractères :

- - - -

styles de mise en page du texte

- - - -

Abréviations pour propriétés de fontes

- -

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

- -

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

- -

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

- -

Un exemple complet ressemblerait à ceci :

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Apprentissage actif : jouer avec les styles du texte

- -

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

- -

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

- - - - - -

{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}

- -

Résumé

- -

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md new file mode 100644 index 0000000000..1aa02da170 --- /dev/null +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -0,0 +1,731 @@ +--- +title: Initiation à la mise en forme du texte +slug: Learn/CSS/Styling_text/Fundamentals +tags: + - Alignement + - CSS + - Débutant + - Guide + - Polices de caractères + - Style + - Texte +translation_of: Learn/CSS/Styling_text/Fundamentals +original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
+ +

En quoi consiste la mise en forme du texte avec CSS ?

+ +

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

+ +
+

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

+
+ +

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

+ + + +
+

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

+
+ +

Fontes

+ +

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

+ +
<h1>Tommy le Chat</h1>
+
+<p>Je m'en souviens comme mon dernier repas...</p>
+
+<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
+ce corps étranger qui s'était niché au fond de sa redoutable gueule.
+Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
+brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
+Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
+avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
+occasions, comme maintenant.</p>
+ +
+

Note : (NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

+
+ +

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

+ +

Couleur

+ +

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

+ +

color accepte toutes les unités de couleur des CSS, par exemple :

+ +
p {
+  color: red;
+}
+ +

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

+ + + +

{{ EmbedLiveSample('Couleur', '100%', 220) }}

+ +

Familles de fontes

+ +

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

+ +
p {
+  font-family: arial;
+}
+ +

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

+ +

Polices web sûres

+ +

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

+ +

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

+ +

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
+ +
+

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

+
+ +
+

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

+
+ +

Polices par défaut

+ +

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

+ +

Les 5 noms sont définis comme suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
+ +

Pile de polices

+ +

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

+ +

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

+ +
+

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

+
+ +

Un exemple de font-family

+ +

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Cela donne le résultat suivant :

+ + + +

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+ +

Taille de la police de caractères

+ +

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

+ + + +

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

+ +

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

+ +
<!-- font-size vaut 16px pour la base du document -->
+<article> <!-- Si font-size vaut 1.5em -->
+  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
+</article>
+ +

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

+ +

Un simple exemple de dimensionnement

+ +

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

+ +

Notre nouveau résultat ressemble à :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

+ +

Style de fonte, graisse, transformation et décoration de texte

+ +

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

+ + + +

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

+ +

Notre nouveau résultat ressemble à :

+ + + + + + +

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

+ +

Ombres du texte

+ +

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

+ +
text-shadow: 4px 4px 5px red;
+ +

Les 4 propriétés sont les suivantes :

+ +
    +
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. +
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. +
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. +
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. +
+ +
+

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

+
+ +

Ombres multiples

+ +

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

+ + + + + +

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

+ +
+

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

+
+ +

Mise en page du texte

+ +

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

+ +

Alignement du texte

+ +

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

+ + + +

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+  text-shadow: -1px -1px 1px #aaa,
+               0px 2px 1px rgba(0,0,0,0.5),
+               2px 2px 2px rgba(0,0,0,0.7),
+               0px 0px 3px rgba(0,0,0,0.4);
+  text-align: center;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

+ +

Hauteur de ligne

+ +

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

+ +
line-height: 1.5;
+ +

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

+ + + + + +

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

+ +

Espacement entre les lettres et les mots

+ +

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

+ +

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

Nous obtiendrons :

+ + + + + +

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

+ +

D'autres propriétés intéressantes

+ +

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

+ +

Styles de police de caractères :

+ + + +

styles de mise en page du texte

+ + + +

Abréviations pour propriétés de fontes

+ +

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

+ +

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

+ +

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

+ +

Un exemple complet ressemblerait à ceci :

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Apprentissage actif : jouer avec les styles du texte

+ +

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

+ +

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

+ + + + + +

{{ EmbedLiveSample('Apprentissage_actif_jouer_avec_les_styles_du_texte', 700, 800) }}

+ +

Résumé

+ +

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/styling_text/index.html b/files/fr/learn/css/styling_text/index.html deleted file mode 100644 index 18838ad893..0000000000 --- a/files/fr/learn/css/styling_text/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Introduction au style de texte -slug: Learn/CSS/Styling_text -tags: - - CSS - - Débutant - - Liens - - Listes - - Mise en page - - Module - - Polices de caractères - - Style - - Texte -translation_of: Learn/CSS/Styling_text ---- -

Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.

- -

Prérequis

- -

Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans Introduction à HTML, et être à l'aise avec les fondamentaux de CSS étudiés dans Introduction à CSS.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :

- -
-
Initiation à la mise en forme du texte
-
Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.
-
Style de liste
-
Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.
-
Style de lien
-
Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.
-
Polices de caractères web
-
Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.
-
- -

Auto-évaluation

- -

Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.

- -
-
Composition d'une page d'accueil d'une école communale
-
Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.
-
diff --git a/files/fr/learn/css/styling_text/index.md b/files/fr/learn/css/styling_text/index.md new file mode 100644 index 0000000000..18838ad893 --- /dev/null +++ b/files/fr/learn/css/styling_text/index.md @@ -0,0 +1,48 @@ +--- +title: Introduction au style de texte +slug: Learn/CSS/Styling_text +tags: + - CSS + - Débutant + - Liens + - Listes + - Mise en page + - Module + - Polices de caractères + - Style + - Texte +translation_of: Learn/CSS/Styling_text +--- +

Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devez déjà être familiarisé avec les bases de HTML proposées dans Introduction à HTML, et être à l'aise avec les fondamentaux de CSS étudiés dans Introduction à CSS.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appereil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tels que JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants, qui vous éclaireront sur les méthodes essentielles de mise en forme de contenu HTML :

+ +
+
Initiation à la mise en forme du texte
+
Dans cet article, nous passons en revue toutes les bases du style de texte et de police de caractères, y compris le poids de la police, la famille et le style, les raccourcis, l'alignement du texte et d'autres effets, ainsi que l'espacement des lignes et des lettres.
+
Style de liste
+
Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS spécifiques aux listes que vous devez connaître, ainsi que quelques bonnes pratiques à prendre en compte. Cet article explique tout.
+
Style de lien
+
Pour définir un style de liens, il est important de comprendre comment utiliser les pseudo-classes, pour styliser efficacement les états des liens, et comment créer des liens pour les utiliser dans des fonctionnalités d'interface variées communes telles que les menus de navigation et les onglets. Nous examinerons tous ces sujets dans cet article.
+
Polices de caractères web
+
Ici, nous allons explorer les polices web en détail - celles-ci vous permettent de télécharger des polices personnalisées sur votre page web, pour vous donner des styles de texte plus variés et personnalisés.
+
+ +

Auto-évaluation

+ +

Les auto-évaluations suivantes testeront votre compréhension des techniques de style de texte abordées dans les guides ci-dessus.

+ +
+
Composition d'une page d'accueil d'une école communale
+
Dans cette auto-évaluation, nous testerons votre compréhension du style de texte en vous amenant à créer le style du texte de la page d'accueil d'une école communale.
+
diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html deleted file mode 100644 index 7e88a2f941..0000000000 --- a/files/fr/learn/css/styling_text/styling_links/index.html +++ /dev/null @@ -1,445 +0,0 @@ ---- -title: Mise en forme des liens -slug: Learn/CSS/Styling_text/Styling_links -tags: - - Article - - Beginner - - CSS - - Focus - - Guide - - Learn - - Links - - Pseudo-class - - hover - - hyperlinks - - menus - - tabs -translation_of: Learn/CSS/Styling_text/Styling_links -original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

- - - - - - - - - - - - -
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
- -

Un coup d'œil à quelques liens

- -

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

- -

État des liens

- -

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

- - - -

Styles par défaut

- -

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

- -
<p><a href="#">Un simple lien</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

- -
-

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

-
- -

Vous remarquerez quelques petites choses en explorant les styles par défaut :

- - - -

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

- - - -

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

- - - -
-

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

-
- -

Mise en forme de quelques liens

- -

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

- -

Pour commencer, nous écrirons notre jeu de règles vides :

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

- -

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

- -
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, et
-<a href="#">Microsoft Edge</a>.</p>
- -

En mettant les deux ensemble, nous obtenons ce résultat :

- -

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

- -

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

- - - -

Apprentissage actif : mettez en forme vos propres liens

- -

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

- -

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

- - - - - -

{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}

- -

Inclusion d'icônes dans des liens

- -

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

- -

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

- -
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
-jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
- -

Ensuite, le CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

- -

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

- -

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

- -

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

- -

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

- -

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

- -
-

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

-
- -

Mise en forme de liens comme des boutons

- -

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

- -

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

- -

D'abord, un peu d'HTML :

- -
<ul>
-  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
-</ul>
- -

Et maintenant, notre CSS :

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

Cela nous donne le résultat suivant :

- -

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

- -

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

- - - -
-

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

-
- -

Résumé

- -

Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- - - - diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md new file mode 100644 index 0000000000..7e88a2f941 --- /dev/null +++ b/files/fr/learn/css/styling_text/styling_links/index.md @@ -0,0 +1,445 @@ +--- +title: Mise en forme des liens +slug: Learn/CSS/Styling_text/Styling_links +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +original_slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

+ + + + + + + + + + + + +
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
+ +

Un coup d'œil à quelques liens

+ +

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

+ +

État des liens

+ +

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

+ + + +

Styles par défaut

+ +

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

+ +
<p><a href="#">Un simple lien</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

+ +
+

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

+
+ +

Vous remarquerez quelques petites choses en explorant les styles par défaut :

+ + + +

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

+ + + +

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

+ + + +
+

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

+
+ +

Mise en forme de quelques liens

+ +

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

+ +

Pour commencer, nous écrirons notre jeu de règles vides :

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

+ +

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

+ +
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, et
+<a href="#">Microsoft Edge</a>.</p>
+ +

En mettant les deux ensemble, nous obtenons ce résultat :

+ +

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

+ +

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

+ + + +

Apprentissage actif : mettez en forme vos propres liens

+ +

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

+ +

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

+ + + + + +

{{ EmbedLiveSample('Apprentissage_actif_mettez_en_forme_vos_propres_liens', 700, 800) }}

+ +

Inclusion d'icônes dans des liens

+ +

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

+ +

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

+ +
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
+jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
+ +

Ensuite, le CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

+ +

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

+ +

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

+ +

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

+ +

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

+ +

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

+ +
+

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

+
+ +

Mise en forme de liens comme des boutons

+ +

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

+ +

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

+ +

D'abord, un peu d'HTML :

+ +
<ul>
+  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
+</ul>
+ +

Et maintenant, notre CSS :

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Cela nous donne le résultat suivant :

+ +

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

+ +

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

+ + + +
+

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

+
+ +

Résumé

+ +

Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ + + + diff --git a/files/fr/learn/css/styling_text/styling_lists/index.html b/files/fr/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index e7fb1721ba..0000000000 --- a/files/fr/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: Style de listes -slug: Learn/CSS/Styling_text/Styling_lists -tags: - - CSS - - Débutant - - Guide - - Listes - - Numeros - - Puces - - Styles - - Texte -translation_of: Learn/CSS/Styling_text/Styling_lists ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
- -

Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.

- - - - - - - - - - - - -
Prérequis :Connaissances de base informatiques, bases HTML (étudiées dans Introduction à HTML), bases CSS (étudiées dans Introduction à CSS), la mise en forme du texte.
Objectif :Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.
- -

Un exemple de liste simple

- -

Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est disponible sur Github (voyez aussi le code source).

- -

Le code HTML pour nos exemples de liste ressemble à ceci :

- -
<h2>Liste de courses (non ordonnée)</h2>
-
-<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
-
-<ul>
-  <li>Houmous</li>
-  <li>Pain blanc</li>
-  <li>Salade verte</li>
-  <li>Fromage halloumi</li>
-</ul>
-
-<h2>Liste de recette (ordonnée)</h2>
-
-<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
-
-<ol>
-  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
-  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li>Laver et hacher la salade.</li>
-  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
-
-<h2>Liste descriptive des ingrédients</h2>
-
-<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
-paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
-
-<dl>
-  <dt>Houmous</dt>
-  <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd>
-  <dt>Pain pitta</dt>
-  <dd>Un pain plat moelleux, légèrement levé.</dd>
-  <dt>Halloumi</dt>
-  <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd>
-  <dt>Salade verte</dt>
-  <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd>
-</dl>
- -

Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant les outils de développement du navigateur, vous noterez quelques valeurs de style par défaut :

- - - -

Gestion d'espacement des listes

- -

Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'exemple de style terminé sur Github et trouver le code source aussi.)

- -

Le CSS utilisé pour le style et l'espacement du texte est le suivant :

- -
/* Style général */
-
-html {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 10px;
-}
-
-h2 {
-  font-size: 2rem;
-}
-
-ul,ol,dl,p {
-  font-size: 1.5rem;
-}
-
-li, p {
-  line-height: 1.5;
-}
-
-/* Styles des listes descriptives */
-
-
-dd, dt {
-  line-height: 1.5;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd {
-  margin-bottom: 1.5rem;
-}
- - - -

Style propre à une liste

- -

Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :

- - - -

Styles de puces

- -

Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :

- -
ol {
-  list-style-type: upper-roman;
-}
- -

Cela donne l'apparence suivante :

- -

une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.

- -

Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.

- -

Position des puces

- -

La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est outside et les puces apparaîssent comme ci-dessus.

- -

Si vous choisissez la valeur inside, les puces seront disposées dans la ligne :

- -
ol {
-  list-style-type: upper-roman;
-  list-style-position: inside;
-}
- -

une liste ordonnée avec les puces intégrées au texte des éléments de la liste.

- -

Utilisation d'une puce image personnalisée

- -

La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :

- -
ul {
-  list-style-image: url(star.svg);
-}
- -

Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module Styliser les boîtes. Pour l'instant, voici un avant-goût !

- -

Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :

- -
ul {
-  padding-left: 2rem;
-  list-style-type: none;
-}
-
-ul li {
-  padding-left: 2rem;
-  background-image: url(star.svg);
-  background-position: 0 0;
-  background-size: 1.6rem 1.6rem;
-  background-repeat: no-repeat;
-}
- -

Voici ce que nous avons fait :

- - - -

Ceci nous donne le résultat suivant :

- -

une liste non ordonnée avec les puces définies comme de petites images d'étoiles.

- -

Raccourci de style de liste

- -

Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :

- -
ul {
-  list-style-type: square;
-  list-style-image: url(example.png);
-  list-style-position: inside;
-}
- -

peut être remplacé par cela :

- -
ul {
-  list-style: square url(example.png) inside;
-}
- -

Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont disc, none et outside. Si un type et une image sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.

- -

Contrôle du numérotage des listes

- -

Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.

- -

Numéro de départ

- -

L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :

- -
<ol start="4">
-  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
-  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li>Laver et hacher la salade.</li>
-  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
- -

vous donne cette sortie :

- -

{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}

- -

Numérotation inversée

- -

L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :

- -
<ol start="4" reversed>
-  <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li>
-  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li>Laver et hacher la salade.</li>
-  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
- -

donne cette sortie :

- -

{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}

- -

Valeurs individualisées

- -

L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :

- -
<ol>
-  <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
-  <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
-  <li value="6">Laver et hacher la salade.</li>
-  <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
-</ol>
- -

vous donne cette sortie :

- -

{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}

- -
-

Note : Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut value.

-
- -

Apprentissage actif : définir le style d'une liste imbriquée

- -

Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :

- -
    -
  1. mettre une puce carrée devant les éléments de la liste non ordonnée,
    2. -
  2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.
    3. -
  3. donner à la liste ordonnée une puce alphabétique en minuscules.
    4. -
  4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.
    5. -
- -

Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour voir une réponse possible.

- - - - - - -

{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}

- -

Voir aussi

- -

Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :

- - - -

Résumé

- -

Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- -

 

- - diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md new file mode 100644 index 0000000000..e7fb1721ba --- /dev/null +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -0,0 +1,393 @@ +--- +title: Style de listes +slug: Learn/CSS/Styling_text/Styling_lists +tags: + - CSS + - Débutant + - Guide + - Listes + - Numeros + - Puces + - Styles + - Texte +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.

+ + + + + + + + + + + + +
Prérequis :Connaissances de base informatiques, bases HTML (étudiées dans Introduction à HTML), bases CSS (étudiées dans Introduction à CSS), la mise en forme du texte.
Objectif :Se familiariser avec les meilleures pratiques et propriétés liées aux styles de liste.
+ +

Un exemple de liste simple

+ +

Pour commencer, regardons un exemple de liste simple. Au long de cet article nous verrons les listes non ordonnées, ordonnées et des listes descriptives — tous les styles ont des fonctionnalités similaires, mais il existe quelques particularités en fonction du type de liste. Un exemple sans style est disponible sur Github (voyez aussi le code source).

+ +

Le code HTML pour nos exemples de liste ressemble à ceci :

+ +
<h2>Liste de courses (non ordonnée)</h2>
+
+<p>Paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
+
+<ul>
+  <li>Houmous</li>
+  <li>Pain blanc</li>
+  <li>Salade verte</li>
+  <li>Fromage halloumi</li>
+</ul>
+
+<h2>Liste de recette (ordonnée)</h2>
+
+<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
+
+<ol>
+  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
+  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li>Laver et hacher la salade.</li>
+  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+
+<h2>Liste descriptive des ingrédients</h2>
+
+<p>paragraphe de référence, paragraphe de référence, paragraphe de référence,
+paragraphe de référence, paragraphe de référence, paragraphe de référence.</p>
+
+<dl>
+  <dt>Houmous</dt>
+  <dd>Une purée ou sauce épaisse généralement faite de pois chiches mélangés avec du tahini, du jus de citron, du sel, de l'ail et d'autres aromates.</dd>
+  <dt>Pain pitta</dt>
+  <dd>Un pain plat moelleux, légèrement levé.</dd>
+  <dt>Halloumi</dt>
+  <dd>Fromage à pâte mi-dure, non affiné, saumuré, à point de fusion plus élevé que d'habitude, généralement fabriqué à partir de lait de chèvre et de brebis.</dd>
+  <dt>Salade verte</dt>
+  <dd>Ces feuilles vertes et saines que beaucoup d'entre nous n'utilisent que pour garnir les kebabs.</dd>
+</dl>
+ +

Si vous allez à l'exemple réel maintenant, et examinez les éléments de la liste en utilisant les outils de développement du navigateur, vous noterez quelques valeurs de style par défaut :

+ + + +

Gestion d'espacement des listes

+ +

Si vous modifiez le style des listes, vous devez ajuster l'espacement vertical et horizontal de manière à le rendre identique à celui des éléments environnants (tels que paragraphes ou images : ce principe est parfois appelé « rythme vertical » — vous pouvez voir l'exemple de style terminé sur Github et trouver le code source aussi.)

+ +

Le CSS utilisé pour le style et l'espacement du texte est le suivant :

+ +
/* Style général */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Styles des listes descriptives */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

Style propre à une liste

+ +

Maintenant que nous avons examiné l'espacement général des listes, explorons quelques propriétés propres à une liste. Il y a trois propriétés à connaître pour commencer ; elles s'appliquent aux éléments {{htmlelement("ul")}} ou {{htmlelement("ol")}} :

+ + + +

Styles de puces

+ +

Comme mentionné ci-dessus, la propriété {{cssxref("list-style-type")}} vous permet de définir le type de puce à utiliser. Dans notre exemple, nous avons défini une liste ordonnée utilisant les chiffres romains en majuscules avec :

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Cela donne l'apparence suivante :

+ +

une liste ordonnée avec les puces placées à l'extérieur du texte de l'élément de la liste.

+ +

Vous pouvez trouver beaucoup plus d'options en consultant la page de référence {{cssxref("list-style-type")}}.

+ +

Position des puces

+ +

La propriété {{cssxref("list-style-position")}} définit si les puces apparaissent à l'extérieur ou à l'intérieur de la liste devant chaque élément. Par défaut, la valeur est outside et les puces apparaîssent comme ci-dessus.

+ +

Si vous choisissez la valeur inside, les puces seront disposées dans la ligne :

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

une liste ordonnée avec les puces intégrées au texte des éléments de la liste.

+ +

Utilisation d'une puce image personnalisée

+ +

La propriété {{cssxref("list-style-image")}} vous permet d'utiliser une image pour personnaliser vos puces. La syntaxe est assez simple :

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module Styliser les boîtes. Pour l'instant, voici un avant-goût !

+ +

Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Voici ce que nous avons fait :

+ + + +

Ceci nous donne le résultat suivant :

+ +

une liste non ordonnée avec les puces définies comme de petites images d'étoiles.

+ +

Raccourci de style de liste

+ +

Les 3 propriétés mentionnées ci-dessus peuvent toutes être définies en utilisant la propriété abrégée {{cssxref("list-style")}}. Par exemple, le CSS suivant :

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

peut être remplacé par cela :

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Les valeurs peuvent être listées dans n'importe quel ordre et vous pouvez en mentionner une, deux ou les trois (les valeurs par défaut utilisées pour les propriétés non-citées sont disc, none et outside. Si un type et une image sont donnés, le type sera affiché en solution de repli dans le cas où l'image ne peut pas être chargée pour une raison quelconque.

+ +

Contrôle du numérotage des listes

+ +

Parfois, vous pouvez vouloir numéroter différemment une liste ordonnée — par ex., à partir d'un nombre autre que 1 ou en comptant à rebours ou en comptant par pas supérieur à 1. HTML et CSS ont quelques outils pour vous le permettre.

+ +

Numéro de départ

+ +

L'attribut {{htmlattrxref("start","ol")}} vous permet de commencer le numérotage de la liste à partir d'un nombreautre que 1. L'exemple suivant :

+ +
<ol start="4">
+  <li>Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
+  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li>Laver et hacher la salade.</li>
+  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+ +

vous donne cette sortie :

+ +

{{ EmbedLiveSample('Numéro_de_départ', '100%', 150) }}

+ +

Numérotation inversée

+ +

L'attribut {{htmlattrxref("reversed","ol")}} inverse la numérotation de la liste. L'exemple suivant :

+ +
<ol start="4" reversed>
+  <li>Faire griller le pain pitta, le laisser refroidir, puis le trancher sur le côté.</li>
+  <li>Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li>Laver et hacher la salade.</li>
+  <li>Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+ +

donne cette sortie :

+ +

{{ EmbedLiveSample('Numérotation_inversée', '100%', 150) }}

+ +

Valeurs individualisées

+ +

L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :

+ +
<ol>
+  <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
+  <li value="4">Frire l'halloumi dans une poêle plate antiadhésive, jusqu'à ce qu'il soit doré des deux côtés.</li>
+  <li value="6">Laver et hacher la salade.</li>
+  <li value="8">Mettre la salade, l'houmous et l'halloumi frit entre les tranches de pain.</li>
+</ol>
+ +

vous donne cette sortie :

+ +

{{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}

+ +
+

Note : Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut value.

+
+ +

Apprentissage actif : définir le style d'une liste imbriquée

+ +

Dans cette session d'apprentissage actif, vous devez utiliser ce que vous avez appris ci-dessus en donnant un certain style à une liste imbriquée. Avec le code HTML fourni, nous vous demandons de :

+ +
    +
  1. mettre une puce carrée devant les éléments de la liste non ordonnée,
    2. +
  2. donner aux éléments des listes, ordonnées ou non, une hauteur de ligne de 1.5 fois la taille de la police de caractères.
    3. +
  3. donner à la liste ordonnée une puce alphabétique en minuscules.
    4. +
  4. ne pas hésiter à jouer avec l'exemple de liste autant que vous le souhaitez, en expérimentant les types de puces, l'espacement ou tout ce que vous pouvez trouver.
    5. +
+ +

Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour voir une réponse possible.

+ + + + + + +

{{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}

+ +

Voir aussi

+ +

Les compteurs CSS fournissent des outils avancés pour personnaliser le comptage et le style des listes, mais ils sont assez complexes. Nous vous recommandons de les examiner si vous voulez vous étendre sur le sujet. Voir :

+ + + +

Résumé

+ +

Les listes sont relativement faciles à saisir lorsque vous connaissez les quelques principes de base associés et les propriétés spécifiques. Dans le prochain article, nous allons évoquer des techniques de style des liens.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ +

 

+ + diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html deleted file mode 100644 index d237b8f377..0000000000 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Composition de la page d'accueil d'une école de communauté -slug: Learn/CSS/Styling_text/Typesetting_a_homepage -tags: - - CSS - - Codage - - Composer du texte - - Débutant - - Evaluation - - Fontes - - Fontes web - - Liens - - Listes -translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.

- - - - - - - - - - - - -
Prérequis :Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé tous les articles de ce module.
Objectif :Tester la compréhension de la composition de textes à l'écran avec les techniques des CSS.
- -

Point de départ

- -

Pour débuter cette évaluation, vous devez :

- - - -
-

Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <style> de l'élément head du document.

-
- -

Énoncé de l'exercice

- -

Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple.

- -

Fontes :

- - - -

Style général du texte :

- - - -

Liens :

- - - -

Listes :

- - - -

Menu de navigation :

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran ci-après montre un exemple possible du design terminé :

- -

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

- -

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

 

- -

Dans ce module

- -

 

- - diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md new file mode 100644 index 0000000000..d237b8f377 --- /dev/null +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md @@ -0,0 +1,126 @@ +--- +title: Composition de la page d'accueil d'une école de communauté +slug: Learn/CSS/Styling_text/Typesetting_a_homepage +tags: + - CSS + - Codage + - Composer du texte + - Débutant + - Evaluation + - Fontes + - Fontes web + - Liens + - Listes +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.

+ + + + + + + + + + + + +
Prérequis :Avant de tenter cette évaluation, il faut que vous ayez déjà travaillé tous les articles de ce module.
Objectif :Tester la compréhension de la composition de textes à l'écran avec les techniques des CSS.
+ +

Point de départ

+ +

Pour débuter cette évaluation, vous devez :

+ + + +
+

Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <style> de l'élément head du document.

+
+ +

Énoncé de l'exercice

+ +

Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple.

+ +

Fontes :

+ + + +

Style général du texte :

+ + + +

Liens :

+ + + +

Listes :

+ + + +

Menu de navigation :

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran ci-après montre un exemple possible du design terminé :

+ +

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

 

+ +

Dans ce module

+ +

 

+ + diff --git a/files/fr/learn/css/styling_text/web_fonts/index.html b/files/fr/learn/css/styling_text/web_fonts/index.html deleted file mode 100644 index f1cafd3f21..0000000000 --- a/files/fr/learn/css/styling_text/web_fonts/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Fontes Web -slug: Learn/CSS/Styling_text/Web_fonts -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")}}
- -

Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre comment appliquer des fontes web à une page web, soit avec un service tierce partie, soit en écrivant vous-même le code.
- -

Rappel : familles de fontes

- -

Comme nous l'avons vu dans Initiation à la mise en forme du texte, les fontes appliquées aux HTML sont contrôlées par la propriété {{cssxref("font-family")}}. Elle accepte un ou plusieurs noms de familles de fontes et le navigateur parcourt la liste jusqu'à trouver la fonte disponible sur le système sur lequel il tourne :

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

Ce système fonctionne bien, mais généralement, le choix des développeurs Web en matière de polices sont limités. Il n'y en a qu'une poignée dont la disponibilité soit garantie sur tous les systèmes courants — les polices dites Web-safe. La pile de polices vous permet de préciser la police préférable, puis la police alternative sûre pour le Web, puis la police par défaut du système, mais cela induit du travail supplémentaire de tests pour s'assurer que le désign reste correct avec chaque police, etc.

- -

Fontes Web

- -

Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit.

- -

Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger :

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.ttf");
-}
- -

Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement :

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas.

- -

Deux points important sont à garder présents à l'esprit à ce propos :

- -

L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu.

- -
    -
  1. Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu.
    2. -
  2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.
    3. -
- -
-

Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !

-
- -

Apprentissage actif : un exemple de fonte web

- -

En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus.

- -

Utilisez les fichiers web-font-start.html et web-font-start.css comme point de départ pour ajouter votre code (voir l'exemple en direct aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier web-font-start.css, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple.

- -

Recherche des polices

- -

 

- -

Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes :

- - - -

Cherchons des polices de caractères ! Allez dans Font Squirrel et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts).

- -

Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.

- -
-

Note : Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.

-
- -

Créer le code requis

- -

Maintenant, créez le code requis (et les formats de police). Pour chaque police, suivez ces étapes :

- -
    -
  1. Assurez-vous d'avoir satisfait aux exigences de la licence, si vous l'utilisez dans un projet commercial et/ou Web.
    2. -
  2. Allez sur le Webfont Generator de Fontsquirrel.
    3. -
  3. Téléversez les deux fichiers de fontes avec le bouton Upload Fonts.
    4. -
  4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (Oui, les fontes téléversées sont légalement éligibles à une intégration web).
    5. -
  5. Cliquez sur « Download your kit » (Télécharger le kit) .
    6. -
- -

Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS.

- -

Mise en œuvre du code dans la démo

- -

Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles :

- - - -

Pour mettre en œuvre ces polices dans la démo, suivez ces étapes :

- -
    -
  1. Renommez le répertoire d'extraction avec quelque chose de simple, comme fonts.
    2. -
  2. Ouvrez le fichier stylesheet.css et copiez y les deux blocs @font-face contenus dans le  fichier web-font-start.css — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site.
    3. -
  3. Chaque fonction url() pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez  fonts/ au début de chaque chemin (si nécessaire).
    4. -
  4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.

- -

- -
-

Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).

-
- -

Utiliser un service de polices en ligne

- -

Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code @font-face, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent Typekit and Cloud.typography. La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de Google Fonts, un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos.

- -

 

- -

La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pas dans le détail. Regardons rapidement les polices de Google, pour que vous puissiez vous faire une idée. Encore une fois, utilisez des copies de web-font-start.html et web-font-start.css comme point de départ.

- -
    -
  1. Allez sur Google Fonts.
    2. -
  2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent.
    3. -
  3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté.
    4. -
  4. Après avoir choisi les familles de fontes, pressez la barre avec  [Nombre] Families Selected en bas de la page.
    5. -
  5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS.
    6. -
  6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML.
    7. -
- -
-

Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).

-
- -

@font-face plus en détail

- -

Examinons la syntaxe générée par fontsquirrel pour @font-face. C'est un bloc de ce type :

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

Elle est désignée sous le vocable « bulletproof @font-face syntax » (syntaxe @font-face à puces garanties), d'après un post de Paul Irish lors des débuts des succès de @font-face (Bulletproof @font-face Syntax). Voyons les actions :

- - - -
-

Note : Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. Creating Custom Font Stacks with Unicode-Range (Création de piles de fontes personnalisées en définissant des plages unicode) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.

-
- -

Résumé

- -

Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

- -

 

- -

Dans ce module

- -

 

- - diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md new file mode 100644 index 0000000000..f1cafd3f21 --- /dev/null +++ b/files/fr/learn/css/styling_text/web_fonts/index.md @@ -0,0 +1,203 @@ +--- +title: Fontes Web +slug: Learn/CSS/Styling_text/Web_fonts +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")}}
+ +

Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre comment appliquer des fontes web à une page web, soit avec un service tierce partie, soit en écrivant vous-même le code.
+ +

Rappel : familles de fontes

+ +

Comme nous l'avons vu dans Initiation à la mise en forme du texte, les fontes appliquées aux HTML sont contrôlées par la propriété {{cssxref("font-family")}}. Elle accepte un ou plusieurs noms de familles de fontes et le navigateur parcourt la liste jusqu'à trouver la fonte disponible sur le système sur lequel il tourne :

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Ce système fonctionne bien, mais généralement, le choix des développeurs Web en matière de polices sont limités. Il n'y en a qu'une poignée dont la disponibilité soit garantie sur tous les systèmes courants — les polices dites Web-safe. La pile de polices vous permet de préciser la police préférable, puis la police alternative sûre pour le Web, puis la police par défaut du système, mais cela induit du travail supplémentaire de tests pour s'assurer que le désign reste correct avec chaque police, etc.

+ +

Fontes Web

+ +

Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit.

+ +

Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger :

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.ttf");
+}
+ +

Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement :

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas.

+ +

Deux points important sont à garder présents à l'esprit à ce propos :

+ +

L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu.

+ +
    +
  1. Les navigateurs prennent en charge divers formats de polices ; donc, vous aurez besoin de plusieurs formats de polices pour une prise en charge croisée correcte des navigateurs. Par ex., la plupart des navigateurs modernes prennent en charge les formats WOFF/WOFF2 (Web Open Font Format versions 1 et 2), le plus efficace, mais les vieilles versions d'IE n'acceptent que les polices EOT (Embedded Open Type) et, même, vous pourriez avoir besoin d'inclure une version SVG de la police pour être pris en charge par les anciennes versions de l'iPhone et des navigateurs Android. Nous vous montrerons ci-dessous comment générer le code voulu.
    2. +
  2. Fonts generally aren't free to use. You have to pay for them, and/or follow other license conditions such as crediting the font creator in the code (or on your site.) You shouldn't steal fonts and use them without giving proper credit.
    3. +
+ +
+

Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !

+
+ +

Apprentissage actif : un exemple de fonte web

+ +

En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus.

+ +

Utilisez les fichiers web-font-start.html et web-font-start.css comme point de départ pour ajouter votre code (voir l'exemple en direct aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier web-font-start.css, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple.

+ +

Recherche des polices

+ +

 

+ +

Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes :

+ + + +

Cherchons des polices de caractères ! Allez dans Font Squirrel et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts).

+ +

Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas.

+ +
+

Note : Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher.

+
+ +

Créer le code requis

+ +

Maintenant, créez le code requis (et les formats de police). Pour chaque police, suivez ces étapes :

+ +
    +
  1. Assurez-vous d'avoir satisfait aux exigences de la licence, si vous l'utilisez dans un projet commercial et/ou Web.
    2. +
  2. Allez sur le Webfont Generator de Fontsquirrel.
    3. +
  3. Téléversez les deux fichiers de fontes avec le bouton Upload Fonts.
    4. +
  4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (Oui, les fontes téléversées sont légalement éligibles à une intégration web).
    5. +
  5. Cliquez sur « Download your kit » (Télécharger le kit) .
    6. +
+ +

Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS.

+ +

Mise en œuvre du code dans la démo

+ +

Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles :

+ + + +

Pour mettre en œuvre ces polices dans la démo, suivez ces étapes :

+ +
    +
  1. Renommez le répertoire d'extraction avec quelque chose de simple, comme fonts.
    2. +
  2. Ouvrez le fichier stylesheet.css et copiez y les deux blocs @font-face contenus dans le  fichier web-font-start.css — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site.
    3. +
  3. Chaque fonction url() pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez  fonts/ au début de chaque chemin (si nécessaire).
    4. +
  4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.

+ +

+ +
+

Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).

+
+ +

Utiliser un service de polices en ligne

+ +

Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code @font-face, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent Typekit and Cloud.typography. La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de Google Fonts, un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos.

+ +

 

+ +

La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pas dans le détail. Regardons rapidement les polices de Google, pour que vous puissiez vous faire une idée. Encore une fois, utilisez des copies de web-font-start.html et web-font-start.css comme point de départ.

+ +
    +
  1. Allez sur Google Fonts.
    2. +
  2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent.
    3. +
  3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté.
    4. +
  4. Après avoir choisi les familles de fontes, pressez la barre avec  [Nombre] Families Selected en bas de la page.
    5. +
  5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS.
    6. +
  6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML.
    7. +
+ +
+

Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).

+
+ +

@font-face plus en détail

+ +

Examinons la syntaxe générée par fontsquirrel pour @font-face. C'est un bloc de ce type :

+ +
@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;
+}
+ +

Elle est désignée sous le vocable « bulletproof @font-face syntax » (syntaxe @font-face à puces garanties), d'après un post de Paul Irish lors des débuts des succès de @font-face (Bulletproof @font-face Syntax). Voyons les actions :

+ + + +
+

Note : Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. Creating Custom Font Stacks with Unicode-Range (Création de piles de fontes personnalisées en définissant des plages unicode) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété.

+
+ +

Résumé

+ +

Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ +

 

+ +

Dans ce module

+ +

 

+ + diff --git a/files/fr/learn/forms/advanced_form_styling/index.html b/files/fr/learn/forms/advanced_form_styling/index.html deleted file mode 100644 index 040507b63e..0000000000 --- a/files/fr/learn/forms/advanced_form_styling/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Composition avancée des formulaires HTML -slug: Learn/Forms/Advanced_form_styling -translation_of: Learn/Forms/Advanced_form_styling -original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}
- -

Dans cet article, nous verrons comment utiliser les CSS avec les formulaires HTML pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'article précédent, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.

- -

Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :

- -
-
la brute
-
Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.
-
le truand
-
Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.
-
- -

Possibilités d'expression avec les CSS

- -

Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.

- -

L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :

- - - -

Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.

- -

Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..

- -
-

Attention : Même si ces expérimentations sont intéressantes, elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; vous faites quelque chose qui peut être mauvais pour le Web en utilisant des propriétés non standard.

-
- - - -

Contrôle du style des éléments de formulaire

- -

Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur.

- -

À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. Ces propriétés ne sont pas normées et ne doivent pas être utilisées. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : none. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.

- -

Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :

- -
<style>
-input[type=search] {
-    border: 1px dotted #999;
-    border-radius: 0;
-
-    -webkit-appearance: none;
-}
-</style>
-
-<form>
-    <input type="search">
-</form>
- -

{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}}

- -
-

Note : Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que Shadow DOM qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.

-
- -

Exemples

- -

Cases à cocher et boutons radio

- -

Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.

- -

Une simple case à cocher

- -

Considérons la case à cocher suivante :

- -
<span><input type="checkbox"></span>
- -
span {
-    display: inline-block;
-    background: red;
-}
-
-input[type=checkbox] {
-    width : 100px;
-    height: 100px;
-}
- -

Voici les différentes façons dont divers navigateurs gèrent cela :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurRendu
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
- -

Un exemple un peu plus compliqué

- -

Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :

- -
<form>
-  <fieldset>
-    <p>
-      <input type="checkbox" id="first" name="fruit-1" value="cerise">
-      <label for="first">J'aime les cerises</label>
-    </p>
-    <p>
-      <input type="checkbox" id="second" name="fruit-2" value="banane" disabled>
-      <label for="second">Je ne peux pas aimer la banane</label>
-    </p>
-    <p>
-      <input type="checkbox" id="third" name="fruit-3" value="fraise">
-      <label for="third">J'aime les fraises</label>
-    </p>
-  </fieldset>
-</form>
- -

avec une composition stylistique élémentaire :

- -
body {
-  font: 1em sans-serif;
-}
-
-form {
-  display: inline-block;
-
-  padding: 0;
-  margin : 0;
-}
-
-fieldset {
-  border : 1px solid #CCC;
-  border-radius: 5px;
-  margin : 0;
-  padding: 1em;
-}
-
-label {
-  cursor : pointer;
-}
-
-p {
-  margin : 0;
-}
-
-p+p {
-  margin : .5em 0 0;
-}
- -

Maintenant composons pour avoir une case à cocher personnalisée.

- -

Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :

- -

Check box CSS Sprite

- -

Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :

- - - -
:root input[type=checkbox] {
-  /* les cases à cocher d'origine sont placées en dehors de la vue */
-  position: absolute;
-  left: -1000em;
-}
- -

Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref("::before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le label suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref("::before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.

- -
:root input[type=checkbox] + label:before {
-  content: "";
-  display: inline-block;
-  width  : 16px;
-  height : 16px;
-  margin : 0 .5em 0 0;
-  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
-
-/* Ce qui suit est utilisé pour ajuster la position des cases à cocher
-   sur la ligne de base suivante */
-
-  vertical-align: bottom;
-  position: relative;
-  bottom: 2px;
-}
- -

Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.

- -
:root input[type=checkbox]:checked + label:before {
-  background-position: 0 -16px;
-}
-
-:root input[type=checkbox]:disabled + label:before {
-  background-position: 0 -32px;
-}
-
-:root input[type=checkbox]:checked:disabled + label:before {
-  background-position: 0 -48px;
-}
- -

Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.

- -
:root input[type=checkbox]:focus + label:before {
-  outline: 1px dotted black;
-}
- -

Voyez directement ici le résultat :

- -

{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}

- -

Gérer le cauchemar <select>

- -

L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :

- -
<select>
-  <option>Cerise</option>
-  <option>Banane</option>
-  <option>Fraise</option>
-</select>
- -
select {
-  width   : 80px;
-  padding : 10px;
-}
-
-option {
-  padding : 5px;
-  color   : red;
-}
- -

Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :

- -
select, option {
-  -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */
-  -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */
-
-  /* Pour avoir le contrôle sur l'apparence et sur Trident (IE)
-     Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */
-  background : none;
-}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurRendu classiqueRendu travaillé
ferméouvertferméouvert
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
- -

Comme vous pouvez le voir, malgré l'aide des propriétés -*-appearance, il reste quelques problèmes :

- - - -

De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.

- -

Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : Tableau de compatibilité des propriétés entre les widgets de formulaire.

- -

Vers des formulaires plus sympas : bibliothèques utiles et « polyfill » (prothèses d'émulation)

- -

Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget file ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.

- -

Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article Comment créer des widgets de formulaires personnalisés, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :

- - - -

Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :

- - - -

Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.

- -

Conclusion

- -

 

- -

Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.

- -

Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : Tableau de compatibilité des propriétés entre widgets de formulaire.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/advanced_form_styling/index.md b/files/fr/learn/forms/advanced_form_styling/index.md new file mode 100644 index 0000000000..040507b63e --- /dev/null +++ b/files/fr/learn/forms/advanced_form_styling/index.md @@ -0,0 +1,462 @@ +--- +title: Composition avancée des formulaires HTML +slug: Learn/Forms/Advanced_form_styling +translation_of: Learn/Forms/Advanced_form_styling +original_slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}
+ +

Dans cet article, nous verrons comment utiliser les CSS avec les formulaires HTML pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'article précédent, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.

+ +

Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :

+ +
+
la brute
+
Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.
+
le truand
+
Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.
+
+ +

Possibilités d'expression avec les CSS

+ +

Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.

+ +

L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :

+ + + +

Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.

+ +

Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..

+ +
+

Attention : Même si ces expérimentations sont intéressantes, elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; vous faites quelque chose qui peut être mauvais pour le Web en utilisant des propriétés non standard.

+
+ + + +

Contrôle du style des éléments de formulaire

+ +

Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur.

+ +

À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}. Ces propriétés ne sont pas normées et ne doivent pas être utilisées. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : none. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.

+ +

Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :

+ +
<style>
+input[type=search] {
+    border: 1px dotted #999;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+}
+</style>
+
+<form>
+    <input type="search">
+</form>
+ +

{{EmbedLiveSample("Contrôle_du_style_des_éléments_de_formulaire", 250, 40)}}

+ +
+

Note : Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que Shadow DOM qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.

+
+ +

Exemples

+ +

Cases à cocher et boutons radio

+ +

Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.

+ +

Une simple case à cocher

+ +

Considérons la case à cocher suivante :

+ +
<span><input type="checkbox"></span>
+ +
span {
+    display: inline-block;
+    background: red;
+}
+
+input[type=checkbox] {
+    width : 100px;
+    height: 100px;
+}
+ +

Voici les différentes façons dont divers navigateurs gèrent cela :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurRendu
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
+ +

Un exemple un peu plus compliqué

+ +

Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :

+ +
<form>
+  <fieldset>
+    <p>
+      <input type="checkbox" id="first" name="fruit-1" value="cerise">
+      <label for="first">J'aime les cerises</label>
+    </p>
+    <p>
+      <input type="checkbox" id="second" name="fruit-2" value="banane" disabled>
+      <label for="second">Je ne peux pas aimer la banane</label>
+    </p>
+    <p>
+      <input type="checkbox" id="third" name="fruit-3" value="fraise">
+      <label for="third">J'aime les fraises</label>
+    </p>
+  </fieldset>
+</form>
+ +

avec une composition stylistique élémentaire :

+ +
body {
+  font: 1em sans-serif;
+}
+
+form {
+  display: inline-block;
+
+  padding: 0;
+  margin : 0;
+}
+
+fieldset {
+  border : 1px solid #CCC;
+  border-radius: 5px;
+  margin : 0;
+  padding: 1em;
+}
+
+label {
+  cursor : pointer;
+}
+
+p {
+  margin : 0;
+}
+
+p+p {
+  margin : .5em 0 0;
+}
+ +

Maintenant composons pour avoir une case à cocher personnalisée.

+ +

Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :

+ +

Check box CSS Sprite

+ +

Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :

+ + + +
:root input[type=checkbox] {
+  /* les cases à cocher d'origine sont placées en dehors de la vue */
+  position: absolute;
+  left: -1000em;
+}
+ +

Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref("::before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le label suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref("::before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.

+ +
:root input[type=checkbox] + label:before {
+  content: "";
+  display: inline-block;
+  width  : 16px;
+  height : 16px;
+  margin : 0 .5em 0 0;
+  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
+
+/* Ce qui suit est utilisé pour ajuster la position des cases à cocher
+   sur la ligne de base suivante */
+
+  vertical-align: bottom;
+  position: relative;
+  bottom: 2px;
+}
+ +

Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.

+ +
:root input[type=checkbox]:checked + label:before {
+  background-position: 0 -16px;
+}
+
+:root input[type=checkbox]:disabled + label:before {
+  background-position: 0 -32px;
+}
+
+:root input[type=checkbox]:checked:disabled + label:before {
+  background-position: 0 -48px;
+}
+ +

Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.

+ +
:root input[type=checkbox]:focus + label:before {
+  outline: 1px dotted black;
+}
+ +

Voyez directement ici le résultat :

+ +

{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}

+ +

Gérer le cauchemar <select>

+ +

L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :

+ +
<select>
+  <option>Cerise</option>
+  <option>Banane</option>
+  <option>Fraise</option>
+</select>
+ +
select {
+  width   : 80px;
+  padding : 10px;
+}
+
+option {
+  padding : 5px;
+  color   : red;
+}
+ +

Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :

+ +
select, option {
+  -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */
+  -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */
+
+  /* Pour avoir le contrôle sur l'apparence et sur Trident (IE)
+     Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */
+  background : none;
+}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurRendu classiqueRendu travaillé
ferméouvertferméouvert
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
+ +

Comme vous pouvez le voir, malgré l'aide des propriétés -*-appearance, il reste quelques problèmes :

+ + + +

De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.

+ +

Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : Tableau de compatibilité des propriétés entre les widgets de formulaire.

+ +

Vers des formulaires plus sympas : bibliothèques utiles et « polyfill » (prothèses d'émulation)

+ +

Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget file ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.

+ +

Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article Comment créer des widgets de formulaires personnalisés, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :

+ + + +

Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :

+ + + +

Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.

+ +

Conclusion

+ +

 

+ +

Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.

+ +

Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : Tableau de compatibilité des propriétés entre widgets de formulaire.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/basic_native_form_controls/index.html b/files/fr/learn/forms/basic_native_form_controls/index.html deleted file mode 100644 index 517880bb99..0000000000 --- a/files/fr/learn/forms/basic_native_form_controls/index.html +++ /dev/null @@ -1,691 +0,0 @@ ---- -title: Les widgets de formulaire natifs -slug: Learn/Forms/Basic_native_form_controls -tags: - - Contrôles - - Exemple - - Formulaires - - Guide - - HTML - - Web - - Widgets -translation_of: Learn/Forms/Basic_native_form_controls -original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}
- -

Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.
- -

Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir Comment construire des widgets de formulaires personnalisés plus loin dans ce même module pour plus d'idées à ce propos.

- -
-

Note : La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les références aux éléments de formulaires HTML, et en particulier nos références détaillées aux types <input>.

-
- -

Attributs communs

- -

Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'attributValeur par défautDescription
autofocus(false)Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.
disabled(false)Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut disabled mis, l'élément est activé.
formL'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut id d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.
nameLe nom de l'élément ; il sera soumis en même temps que les données du formulaire.
valueLa valeur initiale de l'élément.
- -

Champs de saisie de texte

- -

Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.

- -
-

Note : Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la mise en forme riche (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.

-
- -

Tous les champs textuels ont des comportement en commun :

- - - -
-

Note : L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.

-
- -

 Champs texte sur une seule ligne

- -

On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à text (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, text est la valeur par défaut). text est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez type="date" et que le navigateur ne prend pas en charge les sélecteurs de date natifs).

- -
-

Note : Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à single-line-text-fields.html (voir directement aussi).

-
- -

Voici un exemple élémentaire de champ texte sur une ligne :

- -
<input type="text" id="comment" name="comment" value="Je suis un champ texte">
- -

Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.

- -

Screenshots of single line text fields on several platforms.

- -

HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.

- -

Champ d'adresse électronique

- -

Ce type de champ est défini en donnant la valeur email à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="email" id="email" name="email" multiple>
- -

Avec ce type , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :

- -

Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »

- -

Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).

- -

Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.

- -
-

Note : Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaires.

-
- -

Champ pour mot de passe

- -

Ce type de champ est défini en donnant la valeur password à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="password" id="pwd" name="pwd">
- -

Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.

- -

Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.

- -

Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir Mots de passe peu sûrs.

- -

Champ de recherche

- -

Ce type de champ se définit avec la valeur search de l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="search" id="search" name="search">
- -

La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.

- -

Screenshots of search fields on several platforms.

- -

Champ pour numéro de téléphone

- -

Ce type de champ se définit en donnant la valeur tel à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="tel" id="tel" name="tel">
- -

À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.

- -

Champ d'URL

- -

Ce type de champ se définit en donnant la valeur url à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="url" id="url" name="url">
- -

Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.

- -
-

Note : ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.

-
- -
-

Note : La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article Validation de formulaires.

-
- -

Champs texte multilignes

- -

Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.

- -
    <textarea cols="30" rows="10"></textarea>
- -

La principale différence entre un champ textarea et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche Retour).

- -

Screenshots of multi-lines text fields on several platforms.

- -
-

Note : Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse multi-line-text-field.html (voir aussi directement). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à none dans les CSS.

-
- -

{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributs pour l'élément {{HTMLElement("textarea")}}
Nom de l'attributValeur par défautDescription
{{htmlattrxref("cols","textarea")}}20Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.
{{htmlattrxref("rows","textarea")}}Nombre de lignes de texte visibles dans la boîte de contrôle.
{{htmlattrxref("wrap","textarea")}}softIndique comment le contrôle va à la ligne. Les valeurs possibles sont : hard ou soft
- -

Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.

- -

Deux points clés à noter ici :

- - - -

Contenu déroulant

- -

Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la boîte à sélections et la boîte à complétement automatique. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.

- -

Boîte à sélection

- -

Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.

- -
    <select>
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-    </select>
- -

Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :

- -
    <select>
-      <optgroup label="Fruits">
-        <option>Banane</option>
-        <option selected>Cerise</option>
-        <option>Citron</option>
-      </optgroup>
-      <optgroup label="Légumes">
-        <option>Carotte</option>
-        <option>Aubergine</option>
-        <option>Pomme de terre</option>
-      </optgroup>
-    </select>
- -

Screenshots of single line select box on several platforms.

- -

Si un élément {{HTMLElement("option")}} est défini avec l'attribut value, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut value est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.

- -

Sur l'élément {{HTMLElement("optgroup")}}, l'attribut label est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.

- -

Boîte à sélections multiples

- -

Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant Cmd/Ctrl et en cliquant sur plusieur valeurs).

- -

Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.

- -
    <select multiple>
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-    </select>
- -

Screenshots of multi-lines select box on several platforms.

- -
-

Note : tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.

-
- -

Contenus auto-complétés

- -

Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.

- -

La liste de données est alors liée à un champ texte (généralement un élément input) avec l'attribut {{htmlattrxref("list","input")}}.

- -

Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.

- -
    <label for="onFruit">Quel est votre fruit préféré ?</label>
-    <input type="text" id="onFruit" list="maSuggestion" />
-    <datalist id="maSuggestion">
-      <option>Pomme</option>
-      <option>Banane</option>
-      <option>Mûre</option>
-      <option>Airelles</option>
-      <option>Citron</option>
-      <option>Litchi</option>
-      <option>Pêche</option>
-      <option>Poire</option>
-    </datalist>
- -
-

Note : Selon la norme HTML, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.

-
- -
Screenshots of datalist on several platforms.
- -
-

Prise en charge de Datalist et recours

- -

L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.

- -

Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :

- -
<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">ou choisissez un fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Pomme</option>
-    <option>Banane</option>
-    <option>Mûres</option>
-    <option>Airelles</option>
-    <option>Citron</option>
-    <option>Litchi</option>
-    <option>Pêche</option>
-    <option>Poire</option>
-  </select>
-</datalist>
- -

Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
-
- -

Éléments à cocher

- -

Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.

- -

Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut name.

- -
-

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse checkable-items.html (voir directement aussi).

-
- -

Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.

- -

Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut value si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur on.

- -

Case à cocher

- -

Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur checkbox.

- -
    <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
-
- -

Mettre l'attribut checked fait que la case sera cochée au chargement de la page.

- -

Screenshots of check boxes on several platforms.

- -

Bouton radio

- -

Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur radio.

- -
    <input type="radio" checked id="soup" name="meal">
- -

Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.

- -
<fieldset>
-  <legend>Quel est votre mets préféré ?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soupe</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </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>
- -

Screenshots of radio buttons on several platforms.

- -

Boutons

- -

Dans les formulaires HTML, il existe trois types de boutons :

- -
-
Submit
-
Envoie les données du formulaire au serveur.
-
Reset
-
Réinitialise les widgets de formulaire à leurs valeurs par défaut.
-
Anonymous
-
Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.
-
- -

Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :

- -

submit

- -
    <button type="submit">
-        Ceci est un <br><strong>bouton d'envoi</strong>
-    </button>
-
-    <input type="submit" value="Ceci est un bouton d'envoi">
- -

reset

- -
    <button type="reset">
-        Ceci est un <br><strong>bouton de réinitialisation</strong>
-    </button>
-
-    <input type="reset" value="Ceci est un bouton de réinitialisation">
- -

anonymous

- -
    <button type="button">
-        Ceci est un <br><strong>bouton lambda</strong>
-    </button>
-
-    <input type="button" value="Ceci est un bouton lambda">
- -

Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :

- - - -

Screenshots of buttons on several platforms.

- -

Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.

- -

Widgets de formulaires avancés

- -

Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.

- -

Nombres

- -

On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur number. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.

- -

Il est aussi possible de :

- - - -

Exemple

- -
    <input type="number" name="age" id="age" min="1" max="10" step="2">
- -

Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.

- -

Curseurs

- -

Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.

- -

Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur range. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.

- -

Exemple

- -
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
- -

Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.

- -

Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.

- -
<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
- -

et en  JavaScript :

- -
var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
- -

Ici nous stockons dans deux variables les références du curseur et celle de span, puis nous réglons immédiatement le textContent  de span à la valeur courante value de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le textContent de span est mis à jour avec la nouvelle valeur de l'entrée.

- -

L'attribut range pour input n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.

- -

Sélection de date et heure

- -

Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.

- -

Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.

- -

datetime-local

- -

Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

month

- -

Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.

- -
<input type="month" name="month" id="month">
- -

time

- -

Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.

- -
<input type="time" name="time" id="time">
- -

week

- -

Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.

- -
<input type="week" name="week" id="week">
- -

Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.

- -
    <label for="maDate">Quand êtes vous disponible cet été ?</label>
-    <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
- -
-

Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.

-
- -

Sélecteur de couleur

- -

Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.

- -

Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur color.

- -
<input type="color" name="color" id="color">
- -

Attention : la prise en charge du widget color n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.

- -

Autres widgets

- -

Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.

- -
-

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse other-examples.html (à voir aussi directement).

-
- -

Sélection de fichier

- -

Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « Envoi et extraction des données de formulaire ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.

- -

Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur file. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.

- -

Exemple

- -

Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

Contenu caché

- -

Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur hidden.

- -

Si vous créez un tel élément, il est obligatoire de définir ses attributs name et value :

- -
    <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
- -

Image-bouton

- -

Le contrôle image-bouton est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).

- -

Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur image. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.

- -
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :

- - - -

Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :

- -
    http://foo.com?pos.x=123&pos.y=456
- -

C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».

- -

Compteurs et barres de progression

- -

Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.

- -

Progress

- -

Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.

- -
    <progress max="100" value="75">75/100</progress>
- -

Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.

- -

Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.

- -

Meter

- -

Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :

- - - -

Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :

- - - -

Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.

- -
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- -

Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.

- -

La prise en charge de progress et meter est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.

- -

Conclusion

- -

Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.

- -

Voir également

- -

Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md new file mode 100644 index 0000000000..517880bb99 --- /dev/null +++ b/files/fr/learn/forms/basic_native_form_controls/index.md @@ -0,0 +1,691 @@ +--- +title: Les widgets de formulaire natifs +slug: Learn/Forms/Basic_native_form_controls +tags: + - Contrôles + - Exemple + - Formulaires + - Guide + - HTML + - Web + - Widgets +translation_of: Learn/Forms/Basic_native_form_controls +original_slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}
+ +

Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.
+ +

Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir Comment construire des widgets de formulaires personnalisés plus loin dans ce même module pour plus d'idées à ce propos.

+ +
+

Note : La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les références aux éléments de formulaires HTML, et en particulier nos références détaillées aux types <input>.

+
+ +

Attributs communs

+ +

Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'attributValeur par défautDescription
autofocus(false)Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.
disabled(false)Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut disabled mis, l'élément est activé.
formL'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut id d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.
nameLe nom de l'élément ; il sera soumis en même temps que les données du formulaire.
valueLa valeur initiale de l'élément.
+ +

Champs de saisie de texte

+ +

Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.

+ +
+

Note : Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la mise en forme riche (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.

+
+ +

Tous les champs textuels ont des comportement en commun :

+ + + +
+

Note : L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.

+
+ +

 Champs texte sur une seule ligne

+ +

On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à text (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, text est la valeur par défaut). text est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez type="date" et que le navigateur ne prend pas en charge les sélecteurs de date natifs).

+ +
+

Note : Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à single-line-text-fields.html (voir directement aussi).

+
+ +

Voici un exemple élémentaire de champ texte sur une ligne :

+ +
<input type="text" id="comment" name="comment" value="Je suis un champ texte">
+ +

Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.

+ +

Screenshots of single line text fields on several platforms.

+ +

HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.

+ +

Champ d'adresse électronique

+ +

Ce type de champ est défini en donnant la valeur email à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="email" id="email" name="email" multiple>
+ +

Avec ce type , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :

+ +

Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »

+ +

Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).

+ +

Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.

+ +
+

Note : Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaires.

+
+ +

Champ pour mot de passe

+ +

Ce type de champ est défini en donnant la valeur password à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="password" id="pwd" name="pwd">
+ +

Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.

+ +

Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.

+ +

Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir Mots de passe peu sûrs.

+ +

Champ de recherche

+ +

Ce type de champ se définit avec la valeur search de l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="search" id="search" name="search">
+ +

La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.

+ +

Screenshots of search fields on several platforms.

+ +

Champ pour numéro de téléphone

+ +

Ce type de champ se définit en donnant la valeur tel à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="tel" id="tel" name="tel">
+ +

À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.

+ +

Champ d'URL

+ +

Ce type de champ se définit en donnant la valeur url à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="url" id="url" name="url">
+ +

Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.

+ +
+

Note : ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.

+
+ +
+

Note : La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article Validation de formulaires.

+
+ +

Champs texte multilignes

+ +

Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.

+ +
    <textarea cols="30" rows="10"></textarea>
+ +

La principale différence entre un champ textarea et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche Retour).

+ +

Screenshots of multi-lines text fields on several platforms.

+ +
+

Note : Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse multi-line-text-field.html (voir aussi directement). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à none dans les CSS.

+
+ +

{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributs pour l'élément {{HTMLElement("textarea")}}
Nom de l'attributValeur par défautDescription
{{htmlattrxref("cols","textarea")}}20Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.
{{htmlattrxref("rows","textarea")}}Nombre de lignes de texte visibles dans la boîte de contrôle.
{{htmlattrxref("wrap","textarea")}}softIndique comment le contrôle va à la ligne. Les valeurs possibles sont : hard ou soft
+ +

Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.

+ +

Deux points clés à noter ici :

+ + + +

Contenu déroulant

+ +

Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la boîte à sélections et la boîte à complétement automatique. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.

+ +

Boîte à sélection

+ +

Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.

+ +
    <select>
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+    </select>
+ +

Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :

+ +
    <select>
+      <optgroup label="Fruits">
+        <option>Banane</option>
+        <option selected>Cerise</option>
+        <option>Citron</option>
+      </optgroup>
+      <optgroup label="Légumes">
+        <option>Carotte</option>
+        <option>Aubergine</option>
+        <option>Pomme de terre</option>
+      </optgroup>
+    </select>
+ +

Screenshots of single line select box on several platforms.

+ +

Si un élément {{HTMLElement("option")}} est défini avec l'attribut value, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut value est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.

+ +

Sur l'élément {{HTMLElement("optgroup")}}, l'attribut label est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.

+ +

Boîte à sélections multiples

+ +

Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant Cmd/Ctrl et en cliquant sur plusieur valeurs).

+ +

Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.

+ +
    <select multiple>
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+    </select>
+ +

Screenshots of multi-lines select box on several platforms.

+ +
+

Note : tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.

+
+ +

Contenus auto-complétés

+ +

Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.

+ +

La liste de données est alors liée à un champ texte (généralement un élément input) avec l'attribut {{htmlattrxref("list","input")}}.

+ +

Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.

+ +
    <label for="onFruit">Quel est votre fruit préféré ?</label>
+    <input type="text" id="onFruit" list="maSuggestion" />
+    <datalist id="maSuggestion">
+      <option>Pomme</option>
+      <option>Banane</option>
+      <option>Mûre</option>
+      <option>Airelles</option>
+      <option>Citron</option>
+      <option>Litchi</option>
+      <option>Pêche</option>
+      <option>Poire</option>
+    </datalist>
+ +
+

Note : Selon la norme HTML, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.

+
+ +
Screenshots of datalist on several platforms.
+ +
+

Prise en charge de Datalist et recours

+ +

L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.

+ +

Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :

+ +
<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
+<input type="text" id="myFruit" name="fruit" list="fruitList">
+
+<datalist id="fruitList">
+  <label for="suggestion">ou choisissez un fruit</label>
+  <select id="suggestion" name="altFruit">
+    <option>Pomme</option>
+    <option>Banane</option>
+    <option>Mûres</option>
+    <option>Airelles</option>
+    <option>Citron</option>
+    <option>Litchi</option>
+    <option>Pêche</option>
+    <option>Poire</option>
+  </select>
+</datalist>
+ +

Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+
+ +

Éléments à cocher

+ +

Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.

+ +

Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut name.

+ +
+

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse checkable-items.html (voir directement aussi).

+
+ +

Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.

+ +

Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut value si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur on.

+ +

Case à cocher

+ +

Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur checkbox.

+ +
    <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
+ +

Mettre l'attribut checked fait que la case sera cochée au chargement de la page.

+ +

Screenshots of check boxes on several platforms.

+ +

Bouton radio

+ +

Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur radio.

+ +
    <input type="radio" checked id="soup" name="meal">
+ +

Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.

+ +
<fieldset>
+  <legend>Quel est votre mets préféré ?</legend>
+  <ul>
+    <li>
+      <label for="soup">Soupe</label>
+      <input type="radio" checked id="soup" name="meal" value="soup">
+    </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>
+ +

Screenshots of radio buttons on several platforms.

+ +

Boutons

+ +

Dans les formulaires HTML, il existe trois types de boutons :

+ +
+
Submit
+
Envoie les données du formulaire au serveur.
+
Reset
+
Réinitialise les widgets de formulaire à leurs valeurs par défaut.
+
Anonymous
+
Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.
+
+ +

Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :

+ +

submit

+ +
    <button type="submit">
+        Ceci est un <br><strong>bouton d'envoi</strong>
+    </button>
+
+    <input type="submit" value="Ceci est un bouton d'envoi">
+ +

reset

+ +
    <button type="reset">
+        Ceci est un <br><strong>bouton de réinitialisation</strong>
+    </button>
+
+    <input type="reset" value="Ceci est un bouton de réinitialisation">
+ +

anonymous

+ +
    <button type="button">
+        Ceci est un <br><strong>bouton lambda</strong>
+    </button>
+
+    <input type="button" value="Ceci est un bouton lambda">
+ +

Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :

+ + + +

Screenshots of buttons on several platforms.

+ +

Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.

+ +

Widgets de formulaires avancés

+ +

Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.

+ +

Nombres

+ +

On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur number. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.

+ +

Il est aussi possible de :

+ + + +

Exemple

+ +
    <input type="number" name="age" id="age" min="1" max="10" step="2">
+ +

Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.

+ +

Curseurs

+ +

Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.

+ +

Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur range. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.

+ +

Exemple

+ +
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+ +

Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.

+ +

Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.

+ +
<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+<span class="beancount"></span>
+ +

et en  JavaScript :

+ +
var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
+
+count.textContent = beans.value;
+
+beans.oninput = function() {
+  count.textContent = beans.value;
+}
+ +

Ici nous stockons dans deux variables les références du curseur et celle de span, puis nous réglons immédiatement le textContent  de span à la valeur courante value de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le textContent de span est mis à jour avec la nouvelle valeur de l'entrée.

+ +

L'attribut range pour input n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.

+ +

Sélection de date et heure

+ +

Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.

+ +

Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.

+ +

datetime-local

+ +

Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.

+ +
<input type="datetime-local" name="datetime" id="datetime">
+ +

month

+ +

Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.

+ +
<input type="month" name="month" id="month">
+ +

time

+ +

Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.

+ +
<input type="time" name="time" id="time">
+ +

week

+ +

Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.

+ +
<input type="week" name="week" id="week">
+ +

Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.

+ +
    <label for="maDate">Quand êtes vous disponible cet été ?</label>
+    <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
+ +
+

Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.

+
+ +

Sélecteur de couleur

+ +

Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.

+ +

Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur color.

+ +
<input type="color" name="color" id="color">
+ +

Attention : la prise en charge du widget color n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.

+ +

Autres widgets

+ +

Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.

+ +
+

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse other-examples.html (à voir aussi directement).

+
+ +

Sélection de fichier

+ +

Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « Envoi et extraction des données de formulaire ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.

+ +

Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur file. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.

+ +

Exemple

+ +

Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

Contenu caché

+ +

Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur hidden.

+ +

Si vous créez un tel élément, il est obligatoire de définir ses attributs name et value :

+ +
    <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+ +

Image-bouton

+ +

Le contrôle image-bouton est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).

+ +

Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur image. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.

+ +
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+ +

Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :

+ + + +

Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :

+ +
    http://foo.com?pos.x=123&pos.y=456
+ +

C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».

+ +

Compteurs et barres de progression

+ +

Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.

+ +

Progress

+ +

Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.

+ +
    <progress max="100" value="75">75/100</progress>
+ +

Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.

+ +

Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.

+ +

Meter

+ +

Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :

+ + + +

Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :

+ + + +

Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.

+ +
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
+ +

Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.

+ +

La prise en charge de progress et meter est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.

+ +

Conclusion

+ +

Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.

+ +

Voir également

+ +

Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/form_validation/index.html b/files/fr/learn/forms/form_validation/index.html deleted file mode 100644 index b95ce27d09..0000000000 --- a/files/fr/learn/forms/form_validation/index.html +++ /dev/null @@ -1,856 +0,0 @@ ---- -title: Validation des données de formulaires -slug: Learn/Forms/Form_validation -translation_of: Learn/Forms/Form_validation -original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}
- -

Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.
Objectif :Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.
- -

Qu'est‑ce qu'une validation de formulaire?

- -

Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :

- - - -

C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.

- -

La vérité est qu'aucun d'entre nous n'aime remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.

- -

Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :

- - - -

Les divers types de validation de formulaire

- -

Vous rencontrerez différents types de validation de formulaires sur le Web :

- - - -
-
- - - -

Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.

- -

Utiliser la validation intégrée au formulaire

- -

Une des caractéristiques de HTML5 est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des attributs de validation sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
- Quand un élément est valide :

- - - -

Quand un élément est invalide :

- - - -

Contraintes de validation sur les éléments input — simple début

- -

Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.

- -

Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse fruit-start.html et un exemple « live » ci-dessous :

- - - - - -

{{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}}

- -

Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.

- -

Attribut required

- -

La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).

- -

Ajoutez un attribut required à votre saisie, comme montré ci‑dessous :

- -
<form>
-  <label for="choose">Préférez-vous la banane ou la cerise ?</label>
-  <input id="choose" name="i_like" required>
-  <button>Soumettre</button>
-</form>
- -

Notez aussi le CSS incorporé dans le fichier exemple :

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 1px solid black;
-}
- -

L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :

- -

{{EmbedLiveSample("Attribut_required", "100%", 55)}}

- -

Validation selon une expression régulière

- -

Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une expression régulière comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.

- -

Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :

- - - -

Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :

- - - -

Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :

- - - -

Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut pattern, ainsi :

- -
<form>
-  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
-  <input id="choose" name="i_like" required pattern="banane|cerise">
-  <button>Soumettre</button>
-</form>
- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 1px solid black;
-}
- -

{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}

- -

Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».

- -

Maintenant, essayez de changer la valeur à l'intérieur de l'attribut pattern suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !

- -
-

Note : Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type email, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type url vont automatiquement nécessiter une URL correctement formée.

-
- -
-

Note : L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.

-
- -

Limitation de la taille des entrées

- -

Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.

- -

Pour les champs numériques (c'est à dire, <type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.

- -

Prenons un autre exemple. Créez une nouvelle copie du fichier fruit-start.html.

- -

Supprimez maintenant le contenu de l'élément <body> et remplacez-le par le suivant :

- -
<form>
-  <div>
-    <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
-    <input id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">Combien en voulez‑vous ?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Soumettre</button>
-  </div>
-</form>
- - - - - -

Voici cet exemple s'exécutant en « live » :

- -

{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}

- -
-

Note : <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).

-
- -

Exemple complet

- -

Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">Quel est votre âge ?</label>
-    <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
-         pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
-         que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
-         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
-    <datalist id="l1">
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Fraise</option>
-      <option>Orange</option>
-      <option>Pomme</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">Quelle est votre adresse électronique ?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Laissez un court message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Soumettre</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 300px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* requis pour composer de manière appropriée les éléments
-   de formulaire sur les navigateurs fondés sur WebKit */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  outline: none;
-}
- -

{{EmbedLiveSample("Exemple_complet", "100%", 450)}}

- - - -

Messages adaptés pour les erreurs

- -

Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.

- -

Ces messages automatiques présentent deux inconvénients:

- - - - - - - - - - - - - - - - - - - - - - - - - -
Versions françaises des navigateurs sur une page en anglais
NavigateurAffichage
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.

- -

HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :

- -
<form>
-  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
-  <input type="email" id="mail" name="mail">
-  <button>Envoyer</button>
-</form>
- -

En JavaScript, il faut appeler la méthode setCustomValidity():

- -
var email = document.getElementById("mail");
-
-email.addEventListener("keyup", function (event) {
-  if(email.validity.typeMismatch) {
-    email.setCustomValidity("J'attend un e-mail, mon cher !");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}

- -

Validation de formulaires avec JavaScript

- -

Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.

- -

API de contraintes de validation HTML5

- -

De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.

- -

Propriétés de l'API de validation des contraintes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétésDescription
validationMessageUn message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (willValidate est alors false), ou bien la valeur de l'élément satisfait ses contraintes.
validityUn objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.
validity.customErrorRenvoie true si l'élément à une erreur personnalisée, false a contrario.
validity.patternMismatchRenvoie true si la valeur de l'élément ne correspond pas au motif fourni, false dans le cas contraire. Si la méthode renvoie true, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.rangeOverflowRenvoie true si la valeur de l'élément est supérieure au maximum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des  pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.rangeUnderflowRenvoie true si la valeur de l'élément est plus petite que le minimum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.stepMismatchRenvoie true si la valeur de l'élément ne correspond pas aux règles définies par l'attribut step,false a contrario. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.tooLongRenvoie true si la taille de l'élément est supérieure à la longueur maximum définie, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.typeMismatchRenvoie true si la syntaxe de la valeur de l'élément n'est pas correcte ; false dans le cas contraire. Si le retour est true, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.validRenvoie true si la valeur de l'élément n'a pas de problème de validité, sinon false. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est true ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est false.
validity.valueMissingRenvoie true si l'élément n'a pas de valeur alors que le champ est requis, sinonfalse. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est true.
willValidateRetourne true si l'élément est validé lorsque le formulaire est soumis, false dans le cas contraire.
- -

Méthodes de l'API de validation des contraintes

- - - - - - - - - - - - - - - - - - -
MéthodesDescription
checkValidity()Renvoie true si la valeur de l'élément n'a pas de problème de validation, false autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.
setCustomValidity(message)Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.
- -

Pour les anciens navigateurs, il existe une prothèse d'émulation (polyfill) comme Hyperform, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.

- -

Exemple utilisant la validation des contraintes

- -

Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Veuillez saisir une adresse e-mail :</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <button>Envoyer</button>
-</form>
- -

Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.

- -

L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.

- -
CSS
- -

Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.

- -
/* Juste pour que notre exemple soit plus joli */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Voici notre composition pour les champs invalides */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* Voici la mise en forme pour les erreurs */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

Le code JavaScript suivant gère la validation personnalisée des erreurs.

- -
// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
-// le formulaire et le champ d'e-mail ainsi que l'élément span
-// dans lequel on placera le message d'erreur
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // Chaque fois que l'utilisateur saisit quelque chose
-  // on vérifie la validité du champ e-mail.
-  if (email.validity.valid) {
-    // S'il y a un message d'erreur affiché et que le champ
-    // est valide, on retire l'erreur
-    error.innerHTML = ""; // On réinitialise le contenu
-    error.className = "error"; // On réinitialise l'état visuel du message
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Chaque fois que l'utilisateur tente d'envoyer les données
-  // on vérifie que le champ email est valide.
-  if (!email.validity.valid) {
-
-    // S'il est invalide, on affiche un message d'erreur personnalisé
-    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
-    error.className = "error active";
-    // Et on empêche l'envoi des données du formulaire
-    event.preventDefault();
-  }
-}, false);
- -

Voici le résultat:

- -

{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}

- -

L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. 

- -

Valider des formulaires sans API intégrée

- -

Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de widgets personnalisés, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.

- -

Pour valider un formulaire, vous devez vous poser un certain nombre de questions:

- -
-
Quel type de validation dois-je réaliser ?
-
Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
-
Que dois-je faire si le formulaire n'est pas valide ?
-
C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
-
Comment puis-je aider l'utilisateur à corriger ses données invalides?
-

Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :

- -
-
- -

Exemple sans utilisation de la validation des contraintes

- -

Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Veuillez saisir une adresse e-mail :</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Certains navigateurs historiques ont besoin de l'attribut
-       `type` avec la valeur `submit` sur l'élément `button` -->
-  <button type="submit">Envoyer</button>
-</form>
- -

Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

- -
CSS
- -

De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.

- -
/* On améliore l'aspect de l'exemple avec ces quelques règles */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-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%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Voici les règles de mise en forme pour les champs invalides */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* Voici les règles utilisées pour les messages d'erreur */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.

- -
// Il existe moins de méthode pour sélectionner un nœud DOM
-// avec les navigateurs historiques
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// Ce qui suit est une bidouille pour atteindre le prochain nœud Element dans le DOM
-// Attention à cette méthode, elle peut permettre de construire une boucle
-// infinie. Pour les navigateurs plus récents, on utilisera element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// Pour respecter la spécification HTML5
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// De nombreux navigateurs historiques ne supportent pas la méthode
-// addEventListener. Voici une méthode simple (il en existe d'autres)
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // Une fonction de rappel (callback) qui renvoie `false`
-    // pour arrêter la chaîne des callback
-    // et interrompre l'exécution du callback d'événement.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// On peut désormais reconstruire notre validation de contrainte
-// Étant donné qu'on n'utilise pas la pseudo-classe CSS, il faut
-// explicitement gérer la classe valid/invalid du champ e-mail
-addEvent(window, "load", function () {
-  // Ici, on teste si le champ est vide (rappel : le champ n'est pas obligatoire)
-  // S'il ne l'est pas, on vérifie que son contenu est une adresse e-mail valide.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// Ici, on définit ce qui se passe lorsque l'utilisateur
-// saisit quelque chose dans le champ
-addEvent(email, "keyup", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// Ici, on définit ce qui se passe lorsque l'utilisateur
-// tente d'envoyer les données du formulaire
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "Merci d'écrire une adresse e-mail valide.";
-    error.className = "error active";
-
-    // Certains navigateurs historiques ne supportent pas
-    // la méthode event.reventDefault()
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

Voici le résultat:

- -

{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}

- -

Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :

- - - -

Validation à distance

- -

Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.

- -

Pour réaliser une telle validation, plusieurs précautions doivent être prises :

- - - -

Conclusion

- -

La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md new file mode 100644 index 0000000000..b95ce27d09 --- /dev/null +++ b/files/fr/learn/forms/form_validation/index.md @@ -0,0 +1,856 @@ +--- +title: Validation des données de formulaires +slug: Learn/Forms/Form_validation +translation_of: Learn/Forms/Form_validation +original_slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}
+ +

Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.
Objectif :Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.
+ +

Qu'est‑ce qu'une validation de formulaire?

+ +

Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :

+ + + +

C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.

+ +

La vérité est qu'aucun d'entre nous n'aime remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.

+ +

Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :

+ + + +

Les divers types de validation de formulaire

+ +

Vous rencontrerez différents types de validation de formulaires sur le Web :

+ + + +
+
+ + + +

Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.

+ +

Utiliser la validation intégrée au formulaire

+ +

Une des caractéristiques de HTML5 est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des attributs de validation sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
+ Quand un élément est valide :

+ + + +

Quand un élément est invalide :

+ + + +

Contraintes de validation sur les éléments input — simple début

+ +

Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.

+ +

Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse fruit-start.html et un exemple « live » ci-dessous :

+ + + + + +

{{EmbedLiveSample("Contraintes_de_validation_sur_les_éléments_input_—_simple_début", "100%", 55)}}

+ +

Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.

+ +

Attribut required

+ +

La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).

+ +

Ajoutez un attribut required à votre saisie, comme montré ci‑dessous :

+ +
<form>
+  <label for="choose">Préférez-vous la banane ou la cerise ?</label>
+  <input id="choose" name="i_like" required>
+  <button>Soumettre</button>
+</form>
+ +

Notez aussi le CSS incorporé dans le fichier exemple :

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 1px solid black;
+}
+ +

L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :

+ +

{{EmbedLiveSample("Attribut_required", "100%", 55)}}

+ +

Validation selon une expression régulière

+ +

Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une expression régulière comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.

+ +

Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :

+ + + +

Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :

+ + + +

Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :

+ + + +

Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut pattern, ainsi :

+ +
<form>
+  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+  <input id="choose" name="i_like" required pattern="banane|cerise">
+  <button>Soumettre</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 1px solid black;
+}
+ +

{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}

+ +

Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».

+ +

Maintenant, essayez de changer la valeur à l'intérieur de l'attribut pattern suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !

+ +
+

Note : Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type email, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type url vont automatiquement nécessiter une URL correctement formée.

+
+ +
+

Note : L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.

+
+ +

Limitation de la taille des entrées

+ +

Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.

+ +

Pour les champs numériques (c'est à dire, <type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.

+ +

Prenons un autre exemple. Créez une nouvelle copie du fichier fruit-start.html.

+ +

Supprimez maintenant le contenu de l'élément <body> et remplacez-le par le suivant :

+ +
<form>
+  <div>
+    <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+    <input id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">Combien en voulez‑vous ?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Soumettre</button>
+  </div>
+</form>
+ + + + + +

Voici cet exemple s'exécutant en « live » :

+ +

{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}

+ +
+

Note : <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).

+
+ +

Exemple complet

+ +

Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend>
+      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label>
+      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">Quel est votre âge ?</label>
+    <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
+         pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
+         que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
+         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
+    <datalist id="l1">
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Fraise</option>
+      <option>Orange</option>
+      <option>Pomme</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">Quelle est votre adresse électronique ?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Laissez un court message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Soumettre</button>
+  </p>
+</form>
+ +
body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 300px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* requis pour composer de manière appropriée les éléments
+   de formulaire sur les navigateurs fondés sur WebKit */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+ +

{{EmbedLiveSample("Exemple_complet", "100%", 450)}}

+ + + +

Messages adaptés pour les erreurs

+ +

Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.

+ +

Ces messages automatiques présentent deux inconvénients:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Versions françaises des navigateurs sur une page en anglais
NavigateurAffichage
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
+ +

Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.

+ +

HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :

+ +
<form>
+  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
+  <input type="email" id="mail" name="mail">
+  <button>Envoyer</button>
+</form>
+ +

En JavaScript, il faut appeler la méthode setCustomValidity():

+ +
var email = document.getElementById("mail");
+
+email.addEventListener("keyup", function (event) {
+  if(email.validity.typeMismatch) {
+    email.setCustomValidity("J'attend un e-mail, mon cher !");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

{{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}}

+ +

Validation de formulaires avec JavaScript

+ +

Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.

+ +

API de contraintes de validation HTML5

+ +

De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.

+ +

Propriétés de l'API de validation des contraintes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétésDescription
validationMessageUn message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (willValidate est alors false), ou bien la valeur de l'élément satisfait ses contraintes.
validityUn objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.
validity.customErrorRenvoie true si l'élément à une erreur personnalisée, false a contrario.
validity.patternMismatchRenvoie true si la valeur de l'élément ne correspond pas au motif fourni, false dans le cas contraire. Si la méthode renvoie true, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.rangeOverflowRenvoie true si la valeur de l'élément est supérieure au maximum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des  pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.rangeUnderflowRenvoie true si la valeur de l'élément est plus petite que le minimum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.stepMismatchRenvoie true si la valeur de l'élément ne correspond pas aux règles définies par l'attribut step,false a contrario. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.tooLongRenvoie true si la taille de l'élément est supérieure à la longueur maximum définie, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.typeMismatchRenvoie true si la syntaxe de la valeur de l'élément n'est pas correcte ; false dans le cas contraire. Si le retour est true, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.validRenvoie true si la valeur de l'élément n'a pas de problème de validité, sinon false. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est true ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est false.
validity.valueMissingRenvoie true si l'élément n'a pas de valeur alors que le champ est requis, sinonfalse. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est true.
willValidateRetourne true si l'élément est validé lorsque le formulaire est soumis, false dans le cas contraire.
+ +

Méthodes de l'API de validation des contraintes

+ + + + + + + + + + + + + + + + + + +
MéthodesDescription
checkValidity()Renvoie true si la valeur de l'élément n'a pas de problème de validation, false autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.
setCustomValidity(message)Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.
+ +

Pour les anciens navigateurs, il existe une prothèse d'émulation (polyfill) comme Hyperform, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.

+ +

Exemple utilisant la validation des contraintes

+ +

Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Veuillez saisir une adresse e-mail :</span>
+      <input type="email" id="mail" name="mail">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <button>Envoyer</button>
+</form>
+ +

Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.

+ +

L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.

+ +
CSS
+ +

Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.

+ +
/* Juste pour que notre exemple soit plus joli */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Voici notre composition pour les champs invalides */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Voici la mise en forme pour les erreurs */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

Le code JavaScript suivant gère la validation personnalisée des erreurs.

+ +
// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
+// le formulaire et le champ d'e-mail ainsi que l'élément span
+// dans lequel on placera le message d'erreur
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Chaque fois que l'utilisateur saisit quelque chose
+  // on vérifie la validité du champ e-mail.
+  if (email.validity.valid) {
+    // S'il y a un message d'erreur affiché et que le champ
+    // est valide, on retire l'erreur
+    error.innerHTML = ""; // On réinitialise le contenu
+    error.className = "error"; // On réinitialise l'état visuel du message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Chaque fois que l'utilisateur tente d'envoyer les données
+  // on vérifie que le champ email est valide.
+  if (!email.validity.valid) {
+
+    // S'il est invalide, on affiche un message d'erreur personnalisé
+    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
+    error.className = "error active";
+    // Et on empêche l'envoi des données du formulaire
+    event.preventDefault();
+  }
+}, false);
+ +

Voici le résultat:

+ +

{{EmbedLiveSample("Exemple_utilisant_la_validation_des_contraintes", "100%", 130)}}

+ +

L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. 

+ +

Valider des formulaires sans API intégrée

+ +

Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de widgets personnalisés, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.

+ +

Pour valider un formulaire, vous devez vous poser un certain nombre de questions:

+ +
+
Quel type de validation dois-je réaliser ?
+
Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
+
Que dois-je faire si le formulaire n'est pas valide ?
+
C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
+
Comment puis-je aider l'utilisateur à corriger ses données invalides?
+

Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :

+ +
+
+ +

Exemple sans utilisation de la validation des contraintes

+ +

Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Veuillez saisir une adresse e-mail :</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <!-- Certains navigateurs historiques ont besoin de l'attribut
+       `type` avec la valeur `submit` sur l'élément `button` -->
+  <button type="submit">Envoyer</button>
+</form>
+ +

Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

+ +
CSS
+ +

De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.

+ +
/* On améliore l'aspect de l'exemple avec ces quelques règles */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+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%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Voici les règles de mise en forme pour les champs invalides */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Voici les règles utilisées pour les messages d'erreur */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.

+ +
// Il existe moins de méthode pour sélectionner un nœud DOM
+// avec les navigateurs historiques
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// Ce qui suit est une bidouille pour atteindre le prochain nœud Element dans le DOM
+// Attention à cette méthode, elle peut permettre de construire une boucle
+// infinie. Pour les navigateurs plus récents, on utilisera element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// Pour respecter la spécification HTML5
+var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// De nombreux navigateurs historiques ne supportent pas la méthode
+// addEventListener. Voici une méthode simple (il en existe d'autres)
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // Une fonction de rappel (callback) qui renvoie `false`
+    // pour arrêter la chaîne des callback
+    // et interrompre l'exécution du callback d'événement.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// On peut désormais reconstruire notre validation de contrainte
+// Étant donné qu'on n'utilise pas la pseudo-classe CSS, il faut
+// explicitement gérer la classe valid/invalid du champ e-mail
+addEvent(window, "load", function () {
+  // Ici, on teste si le champ est vide (rappel : le champ n'est pas obligatoire)
+  // S'il ne l'est pas, on vérifie que son contenu est une adresse e-mail valide.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Ici, on définit ce qui se passe lorsque l'utilisateur
+// saisit quelque chose dans le champ
+addEvent(email, "keyup", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Ici, on définit ce qui se passe lorsque l'utilisateur
+// tente d'envoyer les données du formulaire
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "Merci d'écrire une adresse e-mail valide.";
+    error.className = "error active";
+
+    // Certains navigateurs historiques ne supportent pas
+    // la méthode event.reventDefault()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

Voici le résultat:

+ +

{{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}}

+ +

Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :

+ + + +

Validation à distance

+ +

Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.

+ +

Pour réaliser une telle validation, plusieurs précautions doivent être prises :

+ + + +

Conclusion

+ +

La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html deleted file mode 100644 index 20e96ebc26..0000000000 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: Exemple 1 -slug: Learn/Forms/How_to_build_custom_form_controls/Example_1 -tags: - - Formulaires - - Guide - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 -original_slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1 ---- -

C'est le premier exemple de code qui explique comment construire un widget de formulaire personnalisé.

- -

État initial

- -

HTML

- -
<div class="select">
-  <span class="value">Cerise</span>
-  <ul class="optList hidden">
-    <li class="option">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
-
- -

Resultat pour l'état initial

- -
{{ EmbedLiveSample("Basic_state", 120, 130) }}
- -

État actif

- -

HTML

- -
<div class="select active">
-  <span class="value">Cerise</span>
-  <ul class="optList hidden">
-    <li class="option">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Résultat pour état actif

- -
{{ EmbedLiveSample("Active_state", 120, 130) }}
- -

État ouvert

- -

HTML

- -
<div class="select active">
-  <span class="value">Cerise</span>
-  <ul class="optList">
-    <li class="option highlight">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFF;
-}
- -

Resultat pour état ouvert

- -
{{ EmbedLiveSample("Open_state", 120, 130) }}
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md new file mode 100644 index 0000000000..20e96ebc26 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md @@ -0,0 +1,421 @@ +--- +title: Exemple 1 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_1 +tags: + - Formulaires + - Guide + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +original_slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1 +--- +

C'est le premier exemple de code qui explique comment construire un widget de formulaire personnalisé.

+ +

État initial

+ +

HTML

+ +
<div class="select">
+  <span class="value">Cerise</span>
+  <ul class="optList hidden">
+    <li class="option">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+
+ +

Resultat pour l'état initial

+ +
{{ EmbedLiveSample("Basic_state", 120, 130) }}
+ +

État actif

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cerise</span>
+  <ul class="optList hidden">
+    <li class="option">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Résultat pour état actif

+ +
{{ EmbedLiveSample("Active_state", 120, 130) }}
+ +

État ouvert

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cerise</span>
+  <ul class="optList">
+    <li class="option highlight">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFF;
+}
+ +

Resultat pour état ouvert

+ +
{{ EmbedLiveSample("Open_state", 120, 130) }}
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html deleted file mode 100644 index ac248a0470..0000000000 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Exemple 2 -slug: Learn/Forms/How_to_build_custom_form_controls/Example_2 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 -original_slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2 ---- -

Ceci est le deuxième exemple expliquant comment construire un formulaire personnalisé.

- -

JS

- -

HTML Content

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-<form>
-
- -

CSS Content

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Styles décor */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
- -

Résultat avec JavaScript

- -

{{ EmbedLiveSample('JS', 120, 130) }}

- -

Sans JS

- -

HTML Content

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-<form>
- -

CSS Content

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Result for No JS

- -

{{ EmbedLiveSample('No_JS', 120, 130) }}

- -

 

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md new file mode 100644 index 0000000000..ac248a0470 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.md @@ -0,0 +1,216 @@ +--- +title: Exemple 2 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_2 +tags: + - Formulaires + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +original_slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2 +--- +

Ceci est le deuxième exemple expliquant comment construire un formulaire personnalisé.

+ +

JS

+ +

HTML Content

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+<form>
+
+ +

CSS Content

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles décor */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+ +

Résultat avec JavaScript

+ +

{{ EmbedLiveSample('JS', 120, 130) }}

+ +

Sans JS

+ +

HTML Content

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+<form>
+ +

CSS Content

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Result for No JS

+ +

{{ EmbedLiveSample('No_JS', 120, 130) }}

+ +

 

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html deleted file mode 100644 index 2967d9d181..0000000000 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: Exemple 3 -slug: Learn/Forms/How_to_build_custom_form_controls/Example_3 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 -original_slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 ---- -

Ceci est le troisième exemple expliquant comment construire des widgets de formulaire personnalisés.

- -

Changement d'état

- -

Contenu HTML

- -
<form class="no-widget">
-  <select name="myFruit" tabindex="-1">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-  </select>
-
-  <div class="select" tabindex="0">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-</form>
- -

Contenu du CSS

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
// ----------- //
-// UTILITAIRES //
-// ----------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// ------------------------- //
-// Définitions des fonctions //
-// ------------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-// ------------------- //
-// Lien aux événements //
-// ------------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    },  false);
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
- -

Résultat

- -

{{ EmbedLiveSample('Changement_détat') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md new file mode 100644 index 0000000000..2967d9d181 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md @@ -0,0 +1,248 @@ +--- +title: Exemple 3 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_3 +tags: + - Formulaires + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +original_slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 +--- +

Ceci est le troisième exemple expliquant comment construire des widgets de formulaire personnalisés.

+ +

Changement d'état

+ +

Contenu HTML

+ +
<form class="no-widget">
+  <select name="myFruit" tabindex="-1">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+  </select>
+
+  <div class="select" tabindex="0">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+</form>
+ +

Contenu du CSS

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+// ------------------- //
+// Lien aux événements //
+// ------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    },  false);
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+ +

Résultat

+ +

{{ EmbedLiveSample('Changement_détat') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html deleted file mode 100644 index dc6f31576c..0000000000 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: Exemple 4 -slug: Learn/Forms/How_to_build_custom_form_controls/Example_4 -tags: - - Avancé - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 -original_slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 ---- -

Ceci est le quatrième exemple expliquant comment construire des widgets de formulaire personnalisés.

- -

Changement d'état

- -

Contenu HTML

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cerise</option>
-    <option>Citron</option>
-    <option>Banane</option>
-    <option>Fraise</option>
-    <option>Pomme</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-</form>
- -

Contenu CSS

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Styles chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
// ----------- //
-// UTILITAIRES //
-// ----------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// ------------------------- //
-// Définitions des fonctions //
-// ------------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// -------------------- //
-// Liens aux événements //
-// -------------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

Résultat

- -

{{ EmbedLiveSample('Changement_détat') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md new file mode 100644 index 0000000000..dc6f31576c --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.md @@ -0,0 +1,298 @@ +--- +title: Exemple 4 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_4 +tags: + - Avancé + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +original_slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 +--- +

Ceci est le quatrième exemple expliquant comment construire des widgets de formulaire personnalisés.

+ +

Changement d'état

+ +

Contenu HTML

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cerise</option>
+    <option>Citron</option>
+    <option>Banane</option>
+    <option>Fraise</option>
+    <option>Pomme</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+</form>
+ +

Contenu CSS

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// -------------------- //
+// Liens aux événements //
+// -------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

Résultat

+ +

{{ EmbedLiveSample('Changement_détat') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html deleted file mode 100644 index caf65d51c3..0000000000 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Exemple 5 -slug: Learn/Forms/How_to_build_custom_form_controls/Example_5 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 -original_slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5 ---- -

Voici le dernier exemple expliquant comment construire des widgets de formulaire personnalisés.

- -

Changement d'état

- -

Contenu HTML

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cerise</option>
-    <option>Citron</option>
-    <option>Banane</option>
-    <option>Fraise</option>
-    <option>Pomme</option>
-  </select>
-
-  <div class="select" role="listbox">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden" role="presentation">
-      <li class="option" role="option" aria-selected="true">Cerise</li>
-      <li class="option" role="option">Citron</li>
-      <li class="option" role="option">Banane</li>
-      <li class="option" role="option">Fraise</li>
-      <li class="option" role="option">Pomme</li>
-    </ul>
-  </div>
-</form>
- -

Contenu CSS

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Styles Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
// ----------- //
-// UTILITAIRES //
-// ----------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// ------------------------- //
-// Définitions des fonctions //
-// ------------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// -------------------- //
-// Liens aux événements //
-// -------------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
-
- -

Résultat

- -

{{ EmbedLiveSample('Changement_détat') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md new file mode 100644 index 0000000000..caf65d51c3 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.md @@ -0,0 +1,291 @@ +--- +title: Exemple 5 +slug: Learn/Forms/How_to_build_custom_form_controls/Example_5 +tags: + - Formulaires + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 +original_slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5 +--- +

Voici le dernier exemple expliquant comment construire des widgets de formulaire personnalisés.

+ +

Changement d'état

+ +

Contenu HTML

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cerise</option>
+    <option>Citron</option>
+    <option>Banane</option>
+    <option>Fraise</option>
+    <option>Pomme</option>
+  </select>
+
+  <div class="select" role="listbox">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden" role="presentation">
+      <li class="option" role="option" aria-selected="true">Cerise</li>
+      <li class="option" role="option">Citron</li>
+      <li class="option" role="option">Banane</li>
+      <li class="option" role="option">Fraise</li>
+      <li class="option" role="option">Pomme</li>
+    </ul>
+  </div>
+</form>
+ +

Contenu CSS

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// -------------------- //
+// Liens aux événements //
+// -------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Changement_détat') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html deleted file mode 100644 index ed842a9e47..0000000000 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html +++ /dev/null @@ -1,826 +0,0 @@ ---- -title: Comment construire des widgets de formulaires personnalisés -slug: Learn/Forms/How_to_build_custom_form_controls -tags: - - Avancé - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls -original_slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}
- -

Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.

- -

Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.

- -
-

Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.

-
- -

Conception, structure et sémantique

- -

Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.

- -

Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :

- -

The three states of a select box

- -

Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).

- -

En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :

- -

Le widget est dans son état normal :

- - - -
-

Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.

-
- -

Le widget est sans son état actif :

- - - -

Le widget est dans un état ouvert :

- - - -

Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :

- -

La valeur change quand :

- - - -

Enfin, définissons comment les options du widget doivent se comporter :

- - - -

Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.

- -

Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches ↑ ou ↓ alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).

- -

Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :

- - - -
-

Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.

-
- -

Definition de la structure HTML et de la sémantique

- -

Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :

- -
<!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex
-     est ce qui permet à l'utilisateur de mettre le focus sur le widget.
-     Nous verrons plus loin que c'est mieux de le faire avec JavaScript. -->
-<div class="select" tabindex="0">
-
-  <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget -->
-  <span class="value">Cerise</span>
-
-  <!-- Ce conteneur contiendra toutes les options disponibles pour le widget.
-       Comme c'est une liste, il y sens à utiliser l'élément ul. -->
-  <ul class="optList">
-    <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin
-         comment gérer la valeur réelle qui sera envoyée avec les données du formulaire -->
-    <li class="option">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-
-</div>
- -

Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.

- -

Composition et ressenti avec les CSS

- -

Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.

- -

Styles obligatoires

- -

Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.

- -
.select {
-  /* Celui-ci crée un contexte de positionnement pour la liste des options */
-  position: relative;
-
-  /* Celui-ci fait que le widget devient partie du flot textuel
-     et devient en même temps dimensionnable */
-  display : inline-block;
-}
- -

Nous avons besoin d'une classe active supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.

- -
.select.active,
-.select:focus {
-  outline: none;
-
-  /* Cette propriété box-shadow n'est pas requise à proprement parler, mais il est
-     important de s'assurer que l'état actif soit visible, c'est pourquoi nous
-     utilisons une valeur par défaut. Vous êtes libre de la modifier. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Passons maintenant à la liste des options :

- -
/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au
-   programmeur des possibilités d'écriture plus succinctes ou plus proches
-   d'une notation usuelle) pour s'assurer que les classes que nous définissons
-   sont les seules à l'intérieur du widget. */
-.select .optList {
-  /* Ceci assure que la liste des options sera affichée au dessous de la valeur
-     et en dehors du flot HTML */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.

- -
.select .optList.hidden {
-  /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité,
-     nous reparlerons plus loin d'accessibilité */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Embellissements

- -

Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.

- -
.select {
-  /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon
-     du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une
-     police de caractères) pour des raisons d'accessibilité (pour être sûrs
-     que le widget reste redimensionnable si l'utilisateur utilise le zoom
-     du navigateur en mode texte exclusif). Les calculs sont faits en
-     supposant que 1em==16px qui est la valeur par défaut dans la majorité
-     des navigateurs. Si vous êtes perdus avec les conversions entre px et
-     em, essayez http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* ceci (10px) est le nouveau contexte de taille de
-     police pour la valeur em dans ce contexte. */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Nous avons besoin de plus d'espace pour la flèche vers le bas que nous
-     allons ajouter. */
-  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 */
-
-  /* La première déclaration concerne les navigateurs qui ne prennent pas en
-     charge les gradients linéaires. La deuxième déclaration est parce que
-     les navigateurs basés sur WebKit ne l'ont pas encore préfixé. Si vous
-     souhaitez prendre en charge les anciens navigateurs, essayez
-     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 {
-  /* Comme la valeur peut être plus large que le widget, nous devons nous
-     assurer qu'elle ne changera pas la largeur du widget. */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-
- -

Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe select.

- -
.select:after {
-  content : "▼"; /* Nous utilisons le caractère unicode U+25BC;
-                    voir http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* Il est important d'empêcher la flèche de chevaucher la liste des 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;
-}
- -

Maintenant, composons la décoration de la liste des options :

- -
.select .optList {
-  z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */
-
-  /* cela réinitialiser le style par défaut de l'élément ul */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Cela nous assure que même si les valeurs sont plus petites que le widget,
-     la liste des options sera aussi large que le widget lui‑même */
-  min-width : 100%;
-
-  /* Dans le cas où la liste est trop longue, son contenu débordera verticalement
-     (ce qui ajoutera une barre de déroulement automatiquement) mais jamais horizontalement
-     (car nous n'avons jamais défini de largeur, la liste ajustera automatiquement sa largeur
-     Si ce n'est pas possible, le contenu sera tronqué) */
-  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;
-}
- -

Pour les options, nous devons ajouter une classe highlight pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Donc, voici le résultat avec les trois états :

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}
Check out the source code
- -

Donnez vie à votre widget avec JavaScript

- -

Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.

- -
-

Attention : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.

-
- -
-

Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « W3C Web Component » apporte des réponses à cette question particulière. Le projet X-Tag est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.

-
- -

Pourquoi ne fonctionne-t-il pas ?

- -

 

- -

Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :

- - - -

 

- -

 

- -

En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.

- -

Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.

- -

Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.

- -

 

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cerise</span>
-      <ul class="optList hidden">
-        <li class="option">Cerise</li>
-        <li class="option">Citron</li>
-        <li class="option">Banane</li>
-        <li class="option">Fraise</li>
-        <li class="option">Pomme</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

 

- -

Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.

- -
.widget select,
-.no-widget .select {
-  /* Ce sélecteur CSS dit fondamentalement :
-     - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché
-     - soit la classe body n'a pas changé, elle est toujours "no-widget",
-       et donc les éléments, dont la classe est « select », doivent être cachés */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

 

- -

Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule  est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.

- -

 

- -

 

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Sans JavaScriptAvec JavaScript
{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}
Testez le code source
- -
-

Note : Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.

-
- -

Rendre le travail plus facile

- -

 

- -

Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).

- -

Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).

- -

Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (ce n'est pas du DOM mais du JavaScript moderne)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets  Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

On ne plaisantait pas quand on a dit que c'était facile à faire.

- -

Construction des fonctions de rappel d'événements

- -

Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.

- -
// Cette fonction est utilisée chaque fois que nous voulons désactiver un
-// widget personnalisé. Elle prend un paramètre
-// select : le nœud DOM avec la classe select à désactiver
-function deactivateSelect(select) {
-
-  // Si le widget n'est pas actif, il n'y a rien à faire
-  if (!select.classList.contains('active')) return;
-
-  // Nous devons obtenir la liste des options pour le widget personnalisé
-  var optList = select.querySelector('.optList');
-
-  // Nous cachons la liste des options
-  optList.classList.add('hidden');
-
-  // et nous désactivons le widget personnalisé lui-même
-  select.classList.remove('active');
-}
-
-// Cette fonction sera utilisée chaque fois que l'utilisateur veut (des)activer le widget
-// Elle prend deux paramètres :
-// select : le nœud DOM de la classe `select` à activer
-// selectList : la liste de tous les nœuds DOM de la classe `select`
-function activeSelect(select, selectList) {
-
-  // Si le widget est déjà actif il n'y a rien à faire
-  if (select.classList.contains('active')) return;
-
-  // Nous devons désactiver tous les widgets personnalisés
-  // comme la fonction deactivateSelect remplit toutes les fonctionnalités de la
-  // fonction de rappel forEach, nous l'utilisons directement sans utiliser
-  // une fonction anonyme intermédiaire.
-  selectList.forEach(deactivateSelect);
-
-  // Et nous activons l'état du widget donné
-  select.classList.add('active');
-}
-
-// Cette fonction sera utilisée chaque fois que l'utilisateur veut enrouler/dérouler la
-// liste des options
-// Elle prend un paramètre :
-// select : le nœud DOM de la liste à basculer
-function toggleOptList(select) {
-
-  // La liste est prise à partir du widget
-  var optList = select.querySelector('.optList');
-
-  // Nous changeons la classe de la liste pour l'enrouler/dérouler
-  optList.classList.toggle('hidden');
-}
-
-// Cett fonction sera utilisée chaque fois qu'il faut mettre en surbrillance
-// une option.  Elle prend deux paramètres :
-// select : le nœud DOM de la classe `select`
-//          contenant l'option à mettre en surbrillance
-// option : le nœud DOM de la classe `option` à mettre en surbrillance
-function highlightOption(select, option) {
-
-  // Obtenir la liste de toutes les options disponibles pour l'élémént sélectionné
-  var optionList = select.querySelectorAll('.option');
-
-  // Supprimer la surbrillance pour toutes les options
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // Mettre en surbrillance l'option correcte
-  option.classList.add('highlight');
-};
- -

C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.

- -

Ensuite, nous assujettissons ces fonctions aux événement appropriés :

- -
// Nous lions le widget aux événements dès le chargement du document
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Chaque widget personnalisé doit être initialisé
-  selectList.forEach(function (select) {
-
-    // de même que tous les éléments `option`
-    var optionList = select.querySelectorAll('.option');
-
-    // Chaque fois que l'utilisateur passe le pointeur de souris
-    // sur une option, nous mettons en surbrillance la dite option
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Note : les variables `select` et `option` sont des "closures"
-        // disponibles dans la portée de notre appel de fonction.
-        highlightOption(select, option);
-      });
-    });
-
-    // Chaque fois que l'utilisateur clique sur un élément personnalisé
-    select.addEventListener('click', function (event) {
-      // Note : la variable `select` est une "closure"
-      // available dans la portée de notre appel de fonction.
-
-      // Nous basculons la visibilité de la liste des options
-      toggleOptList(select);
-    });
-
-    // Dans le cas où le widget obtient le focus
-    // Le widget obtient le focus chaque fois que l'utilisateur clique dessus
-    // ou presse la touche Tab pour avoir accès au widget
-    select.addEventListener('focus', function (event) {
-      // Note : les variable `select` et `selectList` sont des "closures"
-      // disponibles dans la portée de notre appel de fonction.
-
-      // Nous activons le widget
-      activeSelect(select, selectList);
-    });
-
-    // Dans le cas où le widget perd le focus
-    select.addEventListener('blur', function (event) {
-      // Note : la variable `select` est une "closure"
-      // disponible dans la portée de notre appel de fonction.
-
-      // Nous désactivons le widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.

- - - - - - - - - - - - - - - -
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}
Revoir le code source
- -

Gérer la valeur du widget

- -

 

- -

Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.

- -

La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.

- -

Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :

- -
// Cette fonction met à jour la valeur affichée et la synchronise avec celle
-// du widget natif. Elle prend deux paramètres :
-// select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour
-// index  : l'index de la valeur choisie
-function updateValue(select, index) {
-  // Nous devons obtenir le widget natif correspondant au widget personnalisé
-  // Dans notre exemple, le widget natif est un parent du widget personnalisé
-  var nativeWidget = select.previousElementSibling;
-
-  // Nou devons aussi obtenir la valeur de remplacement du widget personnalisé
-  var value = select.querySelector('.value');
-
-  // Et nous avons besoin de toute la liste des options
-  var optionList = select.querySelectorAll('.option');
-
-  // Nous définissons l'index choisi à l'index du choix
-  nativeWidget.selectedIndex = index;
-
-  // Nous mettons à jour la valeur de remplacement en accord
-  value.innerHTML = optionList[index].innerHTML;
-
-  // Et nous mettons en surbrillance l'option correspondante du widget personnalisé
-  highlightOption(select, optionList[index]);
-};
-
-// Cette fonction renvoie l'index courant dans le widget natif
-// Elle prend un paramètre :
-// select : le nœud DOM avec la classe `select` relative au widget natif
-function getIndex(select) {
-  // Nous avons besoin d'avoir accès au widget natif pour le widget personnalisé
-  // Dans notre exemple, le widget natif est un parent du widget personnalisé
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :

- -
// Nous lions le widget aux événements dès le chargement du document
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Chaque widget personnalisé doit être initialisé
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // Nous rendons le widget personnalisé capable d'avoir le focus
-    select.tabIndex = 0;
-
-    // Nous faisons en sorte que le widget natif ne puisse plus avoir le focus
-    select.previousElementSibling.tabIndex = -1;
-
-    // Nous nous assurons que la valeur sélectionnée par défaut est bien affichée
-    updateValue(select, selectedIndex);
-
-    // Chaque fois que l'utilisateur clique sur une option, nous mettons à
-    // jour la valeur en accord
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Chaque fois que l'utilisateur utilise le clavier sur un widget
-    // avec focus, les valeurs sont mises à jour en accord
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // Quand l'utilisateur presse ⇓, nous allons à l'option suivante
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.

- -

Et voilà, nous avons terminé ! Voici le résultat :

- - - - - - - - - - - - - - - -
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}
Revoir le code source
- -

Mais attendez, avons‑nous vraiment terminé ?

- -

Le rendre « accessible »

- -

 

- -

Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !

- -

Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.

- -

L'attribut role

- -

L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role  accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).

- -

Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle grid, et l'élément {{HTMLElement("ul")}} correspond au rôle list. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle listbox de notre widget remplacera le rôle list de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle presentation. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.

- -

Pour prendre en charge le rôle listbos, nous n'avons qu'à mettre à jour notre HTML comme ceci :

- -
<!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- Nous ajoutons aussi le role="presentation" à l'élément ul -->
-  <ul class="optList" role="presentation">
-    <!-- et le rôle="option" en attribut de tous les éléments li -->
-    <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 : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.

-
- -

L'attribut  aria-selected

- -

Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.

- -

L'attribut aria-selected s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction updateValue() :

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // Nous nous assurons qu'aucune option n'est sélectionnée
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // Nous nous assurons que l'option choisie est sélectionnée
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme NVDA ou VoiceOver) :

- - - - - - - - - - - - - - - -
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}
Revoir le code source
- -

Conclusion

- -

Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).

- -

Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :

- - - -

Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md new file mode 100644 index 0000000000..ed842a9e47 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md @@ -0,0 +1,826 @@ +--- +title: Comment construire des widgets de formulaires personnalisés +slug: Learn/Forms/How_to_build_custom_form_controls +tags: + - Avancé + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls +original_slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}
+ +

Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.

+ +

Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.

+ +
+

Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.

+
+ +

Conception, structure et sémantique

+ +

Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.

+ +

Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :

+ +

The three states of a select box

+ +

Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).

+ +

En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :

+ +

Le widget est dans son état normal :

+ + + +
+

Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.

+
+ +

Le widget est sans son état actif :

+ + + +

Le widget est dans un état ouvert :

+ + + +

Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :

+ +

La valeur change quand :

+ + + +

Enfin, définissons comment les options du widget doivent se comporter :

+ + + +

Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.

+ +

Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches ↑ ou ↓ alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).

+ +

Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :

+ + + +
+

Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.

+
+ +

Definition de la structure HTML et de la sémantique

+ +

Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :

+ +
<!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex
+     est ce qui permet à l'utilisateur de mettre le focus sur le widget.
+     Nous verrons plus loin que c'est mieux de le faire avec JavaScript. -->
+<div class="select" tabindex="0">
+
+  <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget -->
+  <span class="value">Cerise</span>
+
+  <!-- Ce conteneur contiendra toutes les options disponibles pour le widget.
+       Comme c'est une liste, il y sens à utiliser l'élément ul. -->
+  <ul class="optList">
+    <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin
+         comment gérer la valeur réelle qui sera envoyée avec les données du formulaire -->
+    <li class="option">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+
+</div>
+ +

Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.

+ +

Composition et ressenti avec les CSS

+ +

Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.

+ +

Styles obligatoires

+ +

Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.

+ +
.select {
+  /* Celui-ci crée un contexte de positionnement pour la liste des options */
+  position: relative;
+
+  /* Celui-ci fait que le widget devient partie du flot textuel
+     et devient en même temps dimensionnable */
+  display : inline-block;
+}
+ +

Nous avons besoin d'une classe active supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* Cette propriété box-shadow n'est pas requise à proprement parler, mais il est
+     important de s'assurer que l'état actif soit visible, c'est pourquoi nous
+     utilisons une valeur par défaut. Vous êtes libre de la modifier. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Passons maintenant à la liste des options :

+ +
/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au
+   programmeur des possibilités d'écriture plus succinctes ou plus proches
+   d'une notation usuelle) pour s'assurer que les classes que nous définissons
+   sont les seules à l'intérieur du widget. */
+.select .optList {
+  /* Ceci assure que la liste des options sera affichée au dessous de la valeur
+     et en dehors du flot HTML */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.

+ +
.select .optList.hidden {
+  /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité,
+     nous reparlerons plus loin d'accessibilité */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Embellissements

+ +

Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.

+ +
.select {
+  /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon
+     du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une
+     police de caractères) pour des raisons d'accessibilité (pour être sûrs
+     que le widget reste redimensionnable si l'utilisateur utilise le zoom
+     du navigateur en mode texte exclusif). Les calculs sont faits en
+     supposant que 1em==16px qui est la valeur par défaut dans la majorité
+     des navigateurs. Si vous êtes perdus avec les conversions entre px et
+     em, essayez http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* ceci (10px) est le nouveau contexte de taille de
+     police pour la valeur em dans ce contexte. */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Nous avons besoin de plus d'espace pour la flèche vers le bas que nous
+     allons ajouter. */
+  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 */
+
+  /* La première déclaration concerne les navigateurs qui ne prennent pas en
+     charge les gradients linéaires. La deuxième déclaration est parce que
+     les navigateurs basés sur WebKit ne l'ont pas encore préfixé. Si vous
+     souhaitez prendre en charge les anciens navigateurs, essayez
+     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 {
+  /* Comme la valeur peut être plus large que le widget, nous devons nous
+     assurer qu'elle ne changera pas la largeur du widget. */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+
+ +

Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe select.

+ +
.select:after {
+  content : "▼"; /* Nous utilisons le caractère unicode U+25BC;
+                    voir http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* Il est important d'empêcher la flèche de chevaucher la liste des 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;
+}
+ +

Maintenant, composons la décoration de la liste des options :

+ +
.select .optList {
+  z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */
+
+  /* cela réinitialiser le style par défaut de l'élément ul */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Cela nous assure que même si les valeurs sont plus petites que le widget,
+     la liste des options sera aussi large que le widget lui‑même */
+  min-width : 100%;
+
+  /* Dans le cas où la liste est trop longue, son contenu débordera verticalement
+     (ce qui ajoutera une barre de déroulement automatiquement) mais jamais horizontalement
+     (car nous n'avons jamais défini de largeur, la liste ajustera automatiquement sa largeur
+     Si ce n'est pas possible, le contenu sera tronqué) */
+  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;
+}
+ +

Pour les options, nous devons ajouter une classe highlight pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Donc, voici le résultat avec les trois états :

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}
Check out the source code
+ +

Donnez vie à votre widget avec JavaScript

+ +

Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.

+ +
+

Attention : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.

+
+ +
+

Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « W3C Web Component » apporte des réponses à cette question particulière. Le projet X-Tag est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.

+
+ +

Pourquoi ne fonctionne-t-il pas ?

+ +

 

+ +

Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :

+ + + +

 

+ +

 

+ +

En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.

+ +

Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.

+ +

Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.

+ +

 

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cerise</span>
+      <ul class="optList hidden">
+        <li class="option">Cerise</li>
+        <li class="option">Citron</li>
+        <li class="option">Banane</li>
+        <li class="option">Fraise</li>
+        <li class="option">Pomme</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

 

+ +

Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.

+ +
.widget select,
+.no-widget .select {
+  /* Ce sélecteur CSS dit fondamentalement :
+     - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché
+     - soit la classe body n'a pas changé, elle est toujours "no-widget",
+       et donc les éléments, dont la classe est « select », doivent être cachés */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

 

+ +

Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule  est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.

+ +

 

+ +

 

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Sans JavaScriptAvec JavaScript
{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}
Testez le code source
+ +
+

Note : Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.

+
+ +

Rendre le travail plus facile

+ +

 

+ +

Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).

+ +

Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).

+ +

Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (ce n'est pas du DOM mais du JavaScript moderne)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets  Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

On ne plaisantait pas quand on a dit que c'était facile à faire.

+ +

Construction des fonctions de rappel d'événements

+ +

Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.

+ +
// Cette fonction est utilisée chaque fois que nous voulons désactiver un
+// widget personnalisé. Elle prend un paramètre
+// select : le nœud DOM avec la classe select à désactiver
+function deactivateSelect(select) {
+
+  // Si le widget n'est pas actif, il n'y a rien à faire
+  if (!select.classList.contains('active')) return;
+
+  // Nous devons obtenir la liste des options pour le widget personnalisé
+  var optList = select.querySelector('.optList');
+
+  // Nous cachons la liste des options
+  optList.classList.add('hidden');
+
+  // et nous désactivons le widget personnalisé lui-même
+  select.classList.remove('active');
+}
+
+// Cette fonction sera utilisée chaque fois que l'utilisateur veut (des)activer le widget
+// Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select` à activer
+// selectList : la liste de tous les nœuds DOM de la classe `select`
+function activeSelect(select, selectList) {
+
+  // Si le widget est déjà actif il n'y a rien à faire
+  if (select.classList.contains('active')) return;
+
+  // Nous devons désactiver tous les widgets personnalisés
+  // comme la fonction deactivateSelect remplit toutes les fonctionnalités de la
+  // fonction de rappel forEach, nous l'utilisons directement sans utiliser
+  // une fonction anonyme intermédiaire.
+  selectList.forEach(deactivateSelect);
+
+  // Et nous activons l'état du widget donné
+  select.classList.add('active');
+}
+
+// Cette fonction sera utilisée chaque fois que l'utilisateur veut enrouler/dérouler la
+// liste des options
+// Elle prend un paramètre :
+// select : le nœud DOM de la liste à basculer
+function toggleOptList(select) {
+
+  // La liste est prise à partir du widget
+  var optList = select.querySelector('.optList');
+
+  // Nous changeons la classe de la liste pour l'enrouler/dérouler
+  optList.classList.toggle('hidden');
+}
+
+// Cett fonction sera utilisée chaque fois qu'il faut mettre en surbrillance
+// une option.  Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select`
+//          contenant l'option à mettre en surbrillance
+// option : le nœud DOM de la classe `option` à mettre en surbrillance
+function highlightOption(select, option) {
+
+  // Obtenir la liste de toutes les options disponibles pour l'élémént sélectionné
+  var optionList = select.querySelectorAll('.option');
+
+  // Supprimer la surbrillance pour toutes les options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // Mettre en surbrillance l'option correcte
+  option.classList.add('highlight');
+};
+ +

C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.

+ +

Ensuite, nous assujettissons ces fonctions aux événement appropriés :

+ +
// Nous lions le widget aux événements dès le chargement du document
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Chaque widget personnalisé doit être initialisé
+  selectList.forEach(function (select) {
+
+    // de même que tous les éléments `option`
+    var optionList = select.querySelectorAll('.option');
+
+    // Chaque fois que l'utilisateur passe le pointeur de souris
+    // sur une option, nous mettons en surbrillance la dite option
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note : les variables `select` et `option` sont des "closures"
+        // disponibles dans la portée de notre appel de fonction.
+        highlightOption(select, option);
+      });
+    });
+
+    // Chaque fois que l'utilisateur clique sur un élément personnalisé
+    select.addEventListener('click', function (event) {
+      // Note : la variable `select` est une "closure"
+      // available dans la portée de notre appel de fonction.
+
+      // Nous basculons la visibilité de la liste des options
+      toggleOptList(select);
+    });
+
+    // Dans le cas où le widget obtient le focus
+    // Le widget obtient le focus chaque fois que l'utilisateur clique dessus
+    // ou presse la touche Tab pour avoir accès au widget
+    select.addEventListener('focus', function (event) {
+      // Note : les variable `select` et `selectList` sont des "closures"
+      // disponibles dans la portée de notre appel de fonction.
+
+      // Nous activons le widget
+      activeSelect(select, selectList);
+    });
+
+    // Dans le cas où le widget perd le focus
+    select.addEventListener('blur', function (event) {
+      // Note : la variable `select` est une "closure"
+      // disponible dans la portée de notre appel de fonction.
+
+      // Nous désactivons le widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.

+ + + + + + + + + + + + + + + +
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}
Revoir le code source
+ +

Gérer la valeur du widget

+ +

 

+ +

Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.

+ +

La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.

+ +

Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :

+ +
// Cette fonction met à jour la valeur affichée et la synchronise avec celle
+// du widget natif. Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour
+// index  : l'index de la valeur choisie
+function updateValue(select, index) {
+  // Nous devons obtenir le widget natif correspondant au widget personnalisé
+  // Dans notre exemple, le widget natif est un parent du widget personnalisé
+  var nativeWidget = select.previousElementSibling;
+
+  // Nou devons aussi obtenir la valeur de remplacement du widget personnalisé
+  var value = select.querySelector('.value');
+
+  // Et nous avons besoin de toute la liste des options
+  var optionList = select.querySelectorAll('.option');
+
+  // Nous définissons l'index choisi à l'index du choix
+  nativeWidget.selectedIndex = index;
+
+  // Nous mettons à jour la valeur de remplacement en accord
+  value.innerHTML = optionList[index].innerHTML;
+
+  // Et nous mettons en surbrillance l'option correspondante du widget personnalisé
+  highlightOption(select, optionList[index]);
+};
+
+// Cette fonction renvoie l'index courant dans le widget natif
+// Elle prend un paramètre :
+// select : le nœud DOM avec la classe `select` relative au widget natif
+function getIndex(select) {
+  // Nous avons besoin d'avoir accès au widget natif pour le widget personnalisé
+  // Dans notre exemple, le widget natif est un parent du widget personnalisé
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :

+ +
// Nous lions le widget aux événements dès le chargement du document
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Chaque widget personnalisé doit être initialisé
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // Nous rendons le widget personnalisé capable d'avoir le focus
+    select.tabIndex = 0;
+
+    // Nous faisons en sorte que le widget natif ne puisse plus avoir le focus
+    select.previousElementSibling.tabIndex = -1;
+
+    // Nous nous assurons que la valeur sélectionnée par défaut est bien affichée
+    updateValue(select, selectedIndex);
+
+    // Chaque fois que l'utilisateur clique sur une option, nous mettons à
+    // jour la valeur en accord
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Chaque fois que l'utilisateur utilise le clavier sur un widget
+    // avec focus, les valeurs sont mises à jour en accord
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // Quand l'utilisateur presse ⇓, nous allons à l'option suivante
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.

+ +

Et voilà, nous avons terminé ! Voici le résultat :

+ + + + + + + + + + + + + + + +
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}
Revoir le code source
+ +

Mais attendez, avons‑nous vraiment terminé ?

+ +

Le rendre « accessible »

+ +

 

+ +

Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !

+ +

Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.

+ +

L'attribut role

+ +

L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role  accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).

+ +

Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle grid, et l'élément {{HTMLElement("ul")}} correspond au rôle list. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle listbox de notre widget remplacera le rôle list de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle presentation. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.

+ +

Pour prendre en charge le rôle listbos, nous n'avons qu'à mettre à jour notre HTML comme ceci :

+ +
<!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- Nous ajoutons aussi le role="presentation" à l'élément ul -->
+  <ul class="optList" role="presentation">
+    <!-- et le rôle="option" en attribut de tous les éléments li -->
+    <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 : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.

+
+ +

L'attribut  aria-selected

+ +

Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.

+ +

L'attribut aria-selected s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction updateValue() :

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // Nous nous assurons qu'aucune option n'est sélectionnée
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // Nous nous assurons que l'option choisie est sélectionnée
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme NVDA ou VoiceOver) :

+ + + + + + + + + + + + + + + +
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}
Revoir le code source
+ +

Conclusion

+ +

Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).

+ +

Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :

+ + + +

Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !

+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html deleted file mode 100644 index 672ae945dd..0000000000 --- a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Exemple -slug: Learn/Forms/How_to_structure_a_web_form/Example -translation_of: Learn/Forms/How_to_structure_a_web_form/Example -original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple ---- -

Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

- -

Un formulaire de paiement

- -

Contenu HTML

- -
<form>
-        <h1>Formulaire de paiement</h1>
-        <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p>
-        <section>
-            <h2>Informations de contact</h2>
-            <fieldset>
-              <legend>Qualité</legend>
-              <ul>
-                  <li>
-                    <label for="title_1">
-                      <input type="radio" id="title_1" name="title" value="M." >
-                      Monsieur
-                    </label>
-                  </li>
-                  <li>
-                    <label for="title_2">
-                      <input type="radio" id="title_2" name="title" value="Mme.">
-                      Madame
-                    </label>
-                  </li>
-              </ul>
-            </fieldset>
-            <p>
-              <label for="name">
-                <span>Nom :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="text" id="name" name="username">
-            </p>
-            <p>
-              <label for="mail">
-                <span>e-mail :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="email" id="mail" name="usermail">
-            </p>
-            <p>
-              <label for="password">
-                <span>Mot de passe :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="password" id="pwd" name="password">
-            </p>
-        </section>
-        <section>
-            <h2>Informations de paiement</h2>
-            <p>
-              <label for="card">
-                <span>Type de carte :</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>Numéro :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-                <input type="text" id="number" name="cardnumber">
-            </p>
-            <p>
-              <label for="date">
-                <span>Validité :</span>
-                <strong><abbr title="required">*</abbr></strong>
-                <em>format mm/aa</em>
-              </label>
-              <input type="text" id="date" name="expiration">
-            </p>
-        </section>
-        <section>
-            <p> <button type="submit">Valider le paiement</button> </p>
-        </section>
-    </form>
- -

Contenu CSS

- -
      h1 {
-          margin-top: 0;
-      }
-
-      ul {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-      }
-
-      form {
-          margin: 0 auto;
-          width: 450px;
-          padding: 1em;
-          border: 1px solid #CCC;
-          border-radius: 1em;
-      }
-
-      div+div {
-          margin-top: 1em;
-      }
-
-      label span {
-          display: inline-block;
-          width: 120px;
-          text-align: right;
-      }
-
-      input, textarea {
-          font: 1em sans-serif;
-          width: 250px;
-          box-sizing: border-box;
-          border: 1px solid #999;
-      }
-
-      input[type=checkbox], input[type=radio] {
-          width: auto;
-          border: none;
-      }
-
-      input:focus, textarea:focus {
-          border-color: #000;
-      }
-
-      textarea {
-          vertical-align: top;
-          height: 5em;
-          resize: vertical;
-      }
-
-      fieldset {
-          width: 250px;
-          box-sizing: border-box;
-          margin-left: 146px;
-          border: 1px solid #999;
-      }
-
-      button {
-          margin: 20px 0 0 124px;
-      }
-
-      label {
-        position: relative;
-      }
-
-      label em {
-        position: absolute;
-        right: 5px;
-        top: 20px;
-      }
- -

Résultat

- -

{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}

- -

 

diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md new file mode 100644 index 0000000000..672ae945dd --- /dev/null +++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.md @@ -0,0 +1,167 @@ +--- +title: Exemple +slug: Learn/Forms/How_to_structure_a_web_form/Example +translation_of: Learn/Forms/How_to_structure_a_web_form/Example +original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple +--- +

Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

+ +

Un formulaire de paiement

+ +

Contenu HTML

+ +
<form>
+        <h1>Formulaire de paiement</h1>
+        <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p>
+        <section>
+            <h2>Informations de contact</h2>
+            <fieldset>
+              <legend>Qualité</legend>
+              <ul>
+                  <li>
+                    <label for="title_1">
+                      <input type="radio" id="title_1" name="title" value="M." >
+                      Monsieur
+                    </label>
+                  </li>
+                  <li>
+                    <label for="title_2">
+                      <input type="radio" id="title_2" name="title" value="Mme.">
+                      Madame
+                    </label>
+                  </li>
+              </ul>
+            </fieldset>
+            <p>
+              <label for="name">
+                <span>Nom :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="text" id="name" name="username">
+            </p>
+            <p>
+              <label for="mail">
+                <span>e-mail :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="email" id="mail" name="usermail">
+            </p>
+            <p>
+              <label for="password">
+                <span>Mot de passe :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="password" id="pwd" name="password">
+            </p>
+        </section>
+        <section>
+            <h2>Informations de paiement</h2>
+            <p>
+              <label for="card">
+                <span>Type de carte :</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>Numéro :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+                <input type="text" id="number" name="cardnumber">
+            </p>
+            <p>
+              <label for="date">
+                <span>Validité :</span>
+                <strong><abbr title="required">*</abbr></strong>
+                <em>format mm/aa</em>
+              </label>
+              <input type="text" id="date" name="expiration">
+            </p>
+        </section>
+        <section>
+            <p> <button type="submit">Valider le paiement</button> </p>
+        </section>
+    </form>
+ +

Contenu CSS

+ +
      h1 {
+          margin-top: 0;
+      }
+
+      ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+      }
+
+      form {
+          margin: 0 auto;
+          width: 450px;
+          padding: 1em;
+          border: 1px solid #CCC;
+          border-radius: 1em;
+      }
+
+      div+div {
+          margin-top: 1em;
+      }
+
+      label span {
+          display: inline-block;
+          width: 120px;
+          text-align: right;
+      }
+
+      input, textarea {
+          font: 1em sans-serif;
+          width: 250px;
+          box-sizing: border-box;
+          border: 1px solid #999;
+      }
+
+      input[type=checkbox], input[type=radio] {
+          width: auto;
+          border: none;
+      }
+
+      input:focus, textarea:focus {
+          border-color: #000;
+      }
+
+      textarea {
+          vertical-align: top;
+          height: 5em;
+          resize: vertical;
+      }
+
+      fieldset {
+          width: 250px;
+          box-sizing: border-box;
+          margin-left: 146px;
+          border: 1px solid #999;
+      }
+
+      button {
+          margin: 20px 0 0 124px;
+      }
+
+      label {
+        position: relative;
+      }
+
+      label em {
+        position: absolute;
+        right: 5px;
+        top: 20px;
+      }
+ +

Résultat

+ +

{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}

+ +

 

diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/index.html deleted file mode 100644 index 7f098d890e..0000000000 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Comment structurer un formulaire HTML -slug: Learn/Forms/How_to_structure_a_web_form -tags: - - Apprentissage - - Débutant - - Exemple - - Formulaires - - Guide - - HTML - - Structure - - Web -translation_of: Learn/Forms/How_to_structure_a_web_form -original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}
- -

Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.
- -

La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en HTML. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et accessible.

- -

L'élément <form>

- -

L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.

- -

Nous l'avons déjà rencontré dans l'article précédent.

- -
-

Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé. -

-
- -

Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.

- -
-

Note : HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.

-
- -

Les éléments <fieldset> et <legend>

- -

L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.

- -

De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme Jaws ou NVDA énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.

- -

Voici un petit exemple :

- -
<form>
-  <fieldset>
-    <legend>Taille du jus de fruits</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Petite</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Moyenne</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Grande</label>
-    </p>
-  </fieldset>
-</form>
- -
-

Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).

-
- -

En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.

- -

Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.

- -

En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.

- -

L'élément <label>

- -

Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :

- -
<label for="name">Nom :</label> <input type="text" id="name" name="user_name">
- -

Avec un élément <label> correctement associé à <input> par l'intermédiaire respectivement des attributs for et id (l'attribut for de <label> référence l'attibut id du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».

- -

Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.

- -

Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :

- -
<label for="name">
-  Nom : <input type="text" id="name" name="user_name">
-</label>
- -

Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut for parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.

- -

Les étiquettes peuvent être cliquées, aussi !

- -

Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.

- -

Par exemple :

- -
<form>
-  <p>
-    <label for="taste_1">J'aime les cerises</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">J'aime les bananes</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
- -
-

Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).

-
- -

Étiquettes multiples

- -

En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.

- -

Considérons cet exemple :

- -
<p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
-
-<!-- Donc ceci : -->
-<div>
-  <label for="username">Nom :</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!-- sera mieux programmé ainsi : -->
-<div>
-  <label for="username">
-    <span>Nom :</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!-- mais ceci est probablement encore meilleur : -->
-<div>
-  <label for="username">Nom :<abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.

- - - -
-

Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.

-
- -
-

Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !

-
- -

Structures HTML courantes dans les formulaires

- -

Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.

- -

Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).

- -

En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.

- -

Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.

- -

Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.

- -

Apprentissage actif : construire une structure de formulaire

- -

Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (Les widgets natifs pour formulaire). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.

- -
    -
  1. Pour commencer, faites une copie locale de notre fichier modèle vierge et des CSS pour notre formulaire de paiement dans un nouveau répertoire.
    2. -
  2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : - 
    <form>
-
-</form>
    -
    4. -
  4. Entre les balises <form>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : - 
    <h1>Formulaire de paiement</h1>
-<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : - 
    <section>
-    <h2>Informations de contact</h2>
-    <fieldset>
-      <legend>Qualité</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="M." >
-              Monsieur
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Mme.">
-              Madame
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Nom : </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>e-mail :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Mot de passe :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. Nous arrivons maintenant à la deuxième <section> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <p>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément <input> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <input> de type date pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : - 
    -<section>
-    <h2>Informations de paiement</h2>
-    <p>
-      <label for="card">
-        <span>Type de carte :</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>Numéro de carte :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Validité :</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>format mm/aa</em>
-      </label>
-      <input type="text" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type submit, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : - 
    <p> <button type="submit">Valider le paiement</button> </p>
    -
    8. -
- -

Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la source payment-form.html et une exécution directe):

- -

{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}

- -

Résumé

- -

Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre  des divers types de widgets pour formulaire pour collecter les informations utilisateur.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md new file mode 100644 index 0000000000..7f098d890e --- /dev/null +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -0,0 +1,314 @@ +--- +title: Comment structurer un formulaire HTML +slug: Learn/Forms/How_to_structure_a_web_form +tags: + - Apprentissage + - Débutant + - Exemple + - Formulaires + - Guide + - HTML + - Structure + - Web +translation_of: Learn/Forms/How_to_structure_a_web_form +original_slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}
+ +

Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.
+ +

La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en HTML. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et accessible.

+ +

L'élément <form>

+ +

L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.

+ +

Nous l'avons déjà rencontré dans l'article précédent.

+ +
+

Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé. +

+
+ +

Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.

+ +
+

Note : HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.

+
+ +

Les éléments <fieldset> et <legend>

+ +

L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.

+ +

De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme Jaws ou NVDA énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.

+ +

Voici un petit exemple :

+ +
<form>
+  <fieldset>
+    <legend>Taille du jus de fruits</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Petite</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Moyenne</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Grande</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).

+
+ +

En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.

+ +

Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.

+ +

En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.

+ +

L'élément <label>

+ +

Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :

+ +
<label for="name">Nom :</label> <input type="text" id="name" name="user_name">
+ +

Avec un élément <label> correctement associé à <input> par l'intermédiaire respectivement des attributs for et id (l'attribut for de <label> référence l'attibut id du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».

+ +

Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.

+ +

Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :

+ +
<label for="name">
+  Nom : <input type="text" id="name" name="user_name">
+</label>
+ +

Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut for parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.

+ +

Les étiquettes peuvent être cliquées, aussi !

+ +

Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.

+ +

Par exemple :

+ +
<form>
+  <p>
+    <label for="taste_1">J'aime les cerises</label>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+  </p>
+  <p>
+    <label for="taste_2">J'aime les bananes</label>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
+  </p>
+</form>
+ +
+

Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).

+
+ +

Étiquettes multiples

+ +

En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.

+ +

Considérons cet exemple :

+ +
<p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
+
+<!-- Donc ceci : -->
+<div>
+  <label for="username">Nom :</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required">*</abbr></label>
+</div>
+
+<!-- sera mieux programmé ainsi : -->
+<div>
+  <label for="username">
+    <span>Nom :</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required">*</abbr>
+  </label>
+</div>
+
+<!-- mais ceci est probablement encore meilleur : -->
+<div>
+  <label for="username">Nom :<abbr title="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.

+ + + +
+

Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.

+
+ +
+

Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !

+
+ +

Structures HTML courantes dans les formulaires

+ +

Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.

+ +

Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).

+ +

En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.

+ +

Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.

+ +

Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.

+ +

Apprentissage actif : construire une structure de formulaire

+ +

Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (Les widgets natifs pour formulaire). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.

+ +
    +
  1. Pour commencer, faites une copie locale de notre fichier modèle vierge et des CSS pour notre formulaire de paiement dans un nouveau répertoire.
    2. +
  2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : + 
    <form>
+
+</form>
    +
    4. +
  4. Entre les balises <form>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : + 
    <h1>Formulaire de paiement</h1>
+<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
    +
    5. +
  5. Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : + 
    <section>
+    <h2>Informations de contact</h2>
+    <fieldset>
+      <legend>Qualité</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="M." >
+              Monsieur
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Mme.">
+              Madame
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Nom : </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>e-mail :</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Mot de passe :</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. Nous arrivons maintenant à la deuxième <section> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <p>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément <input> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <input> de type date pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : + 
    +<section>
+    <h2>Informations de paiement</h2>
+    <p>
+      <label for="card">
+        <span>Type de carte :</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>Numéro de carte :</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Validité :</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>format mm/aa</em>
+      </label>
+      <input type="text" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type submit, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : + 
    <p> <button type="submit">Valider le paiement</button> </p>
    +
    8. +
+ +

Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la source payment-form.html et une exécution directe):

+ +

{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}

+ +

Résumé

+ +

Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre  des divers types de widgets pour formulaire pour collecter les informations utilisateur.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html deleted file mode 100644 index 7f12753fa5..0000000000 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Formulaires HTML dans les navigateurs historiques -slug: Learn/Forms/HTML_forms_in_legacy_browsers -translation_of: Learn/Forms/HTML_forms_in_legacy_browsers -original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}
- -

Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».

- -

Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.

- -

S'informer sur les difficultés

- -

En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :

- -

Documentation du fournisseur du navigateur

- - - -

Documentation indépendante

- - - -

Rendre les choses simples

- -

 

- -

Comme les formulaires HTML impliquent des interactions complexes, une règle empirique : restez aussi simple que possible. Il y a tant de cas où nous voudrions que des formulaires soient  « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'ergonomie des formulaires sur UX For The Masses (en anglais).

- -

La simplification élégante est la meilleure amie du développeur Web

- -

Une simplification élégante et des améliorations progressives sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.

- -

Voyons quelques exemples relatifs aux formulaires en HTML.

- -

Types d'entrées en HTML

- -

Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur text en recours.

- -
<label for="myColor">
- Choisir une couleur
-  <input type="color" id="myColor" name="color">
-</label>
- - - - - - - - - - - - - - -
Chrome 24Firefox 18
Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSXCapture d'écran de l'entrée de couleur sur Firefox
- -

Sélecteurs d'attributs CSS

- -

Les sélecteurs d'attributs CSS sont très utiles avec les formulaires HTML, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :

- -
<input type="number" class="number">
- -
input[type=number] {
-  /* Ceci peut échouer avec certains navigateurs */
-}
-
-input.number {
-  /* Ceci fonctionne partout */
-}
- -

Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :

- -
input[type=number],
-input.number {
-  /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas
-     l'un des sélecteurs, il sautent la totalité de la règle */
-}
- -

Boutons et formulaires

- -

Il y a deux manières de définir un bouton dans un formulaire HTML :

- - - -

L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :

- -
<input type="button" class="button" value="Cliquez‑moi">
- -
input {
-  /* Cette règle annule le rendu par défaut défini avec un élément input */
-  border: 1px solid #CCC;
-}
-
-input.button {
-  /* Le rendu par défaut N'EST PAS restauré avec ceci */
-  border: none;
-}
-
-input.button {
-  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
-     le faire quel que soit le navigateur */
-  border: auto;
-}
- -

L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :

- - - -
<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
-<button type="submit" name="IWantTo" value="A">
-  <em>Do A</em>
-</button>
- -

Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.

- -

Laissez tomber les CSS

- -

Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la Table de compatibilité des propriétés pour les widgets de formulaire, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la construction de widgets avec JavaScript. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.

- -

Détection de fonctionnalité et prothèses d'émulation (polyfills)

- -

Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.

- -

JavaScript non obstructif

- -

Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :

- - - -

Les principes d'un JavaScript non obstructif (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.

- -

La bibliothèque Modernizr

- -

Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « polyfill » est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.

- -

La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque Modernizr et son projet dérivé : YepNope. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.

- -

Voici un exemple :

- -
Modernizr.load({
-  // Cette ligne teste si le navigateur prend en charge l'API
-  // de validation de formulaires HTML5
-  test : Modernizr.formvalidation,
-
-  // Si ce n'est pas le cas, le polyfill suivant sera chargé
-  nope : form-validation-API-polyfill.js,
-
-  // En tout cas, le fichier au cœur de l'application, et dont elle dépend,
-  // est chargé
-  both : app.js,
-
-  // Une fois les deux fichiers chargés, cette fonction est appelée
-  // dans le but d'initialiser l'application
-  complete : function () {
-    app.init();
-  }
-});
- -

L'équipe de Modernizr fait une maintenance opportune de grande liste de « polyfills ». Prenez celui dont vous avez besoin.

- -
-

Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de  la documentation de Modernizr.

-
- -

Faites attention aux performances

- -

Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.

- -

Conclusion

- -

Comme vous pouvez le constater, opérer avec des navigateurs historiques  n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.

- -

Si vous avez lu tous les articles de ce guide à propos des formulaires en HTML, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à améliorer ce guide.

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md new file mode 100644 index 0000000000..7f12753fa5 --- /dev/null +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -0,0 +1,221 @@ +--- +title: Formulaires HTML dans les navigateurs historiques +slug: Learn/Forms/HTML_forms_in_legacy_browsers +translation_of: Learn/Forms/HTML_forms_in_legacy_browsers +original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}
+ +

Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».

+ +

Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.

+ +

S'informer sur les difficultés

+ +

En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :

+ +

Documentation du fournisseur du navigateur

+ + + +

Documentation indépendante

+ + + +

Rendre les choses simples

+ +

 

+ +

Comme les formulaires HTML impliquent des interactions complexes, une règle empirique : restez aussi simple que possible. Il y a tant de cas où nous voudrions que des formulaires soient  « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'ergonomie des formulaires sur UX For The Masses (en anglais).

+ +

La simplification élégante est la meilleure amie du développeur Web

+ +

Une simplification élégante et des améliorations progressives sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.

+ +

Voyons quelques exemples relatifs aux formulaires en HTML.

+ +

Types d'entrées en HTML

+ +

Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur text en recours.

+ +
<label for="myColor">
+ Choisir une couleur
+  <input type="color" id="myColor" name="color">
+</label>
+ + + + + + + + + + + + + + +
Chrome 24Firefox 18
Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSXCapture d'écran de l'entrée de couleur sur Firefox
+ +

Sélecteurs d'attributs CSS

+ +

Les sélecteurs d'attributs CSS sont très utiles avec les formulaires HTML, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :

+ +
<input type="number" class="number">
+ +
input[type=number] {
+  /* Ceci peut échouer avec certains navigateurs */
+}
+
+input.number {
+  /* Ceci fonctionne partout */
+}
+ +

Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :

+ +
input[type=number],
+input.number {
+  /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas
+     l'un des sélecteurs, il sautent la totalité de la règle */
+}
+ +

Boutons et formulaires

+ +

Il y a deux manières de définir un bouton dans un formulaire HTML :

+ + + +

L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :

+ +
<input type="button" class="button" value="Cliquez‑moi">
+ +
input {
+  /* Cette règle annule le rendu par défaut défini avec un élément input */
+  border: 1px solid #CCC;
+}
+
+input.button {
+  /* Le rendu par défaut N'EST PAS restauré avec ceci */
+  border: none;
+}
+
+input.button {
+  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
+     le faire quel que soit le navigateur */
+  border: auto;
+}
+ +

L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :

+ + + +
<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
+<button type="submit" name="IWantTo" value="A">
+  <em>Do A</em>
+</button>
+ +

Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.

+ +

Laissez tomber les CSS

+ +

Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la Table de compatibilité des propriétés pour les widgets de formulaire, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la construction de widgets avec JavaScript. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.

+ +

Détection de fonctionnalité et prothèses d'émulation (polyfills)

+ +

Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.

+ +

JavaScript non obstructif

+ +

Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :

+ + + +

Les principes d'un JavaScript non obstructif (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.

+ +

La bibliothèque Modernizr

+ +

Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « polyfill » est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.

+ +

La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque Modernizr et son projet dérivé : YepNope. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.

+ +

Voici un exemple :

+ +
Modernizr.load({
+  // Cette ligne teste si le navigateur prend en charge l'API
+  // de validation de formulaires HTML5
+  test : Modernizr.formvalidation,
+
+  // Si ce n'est pas le cas, le polyfill suivant sera chargé
+  nope : form-validation-API-polyfill.js,
+
+  // En tout cas, le fichier au cœur de l'application, et dont elle dépend,
+  // est chargé
+  both : app.js,
+
+  // Une fois les deux fichiers chargés, cette fonction est appelée
+  // dans le but d'initialiser l'application
+  complete : function () {
+    app.init();
+  }
+});
+ +

L'équipe de Modernizr fait une maintenance opportune de grande liste de « polyfills ». Prenez celui dont vous avez besoin.

+ +
+

Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de  la documentation de Modernizr.

+
+ +

Faites attention aux performances

+ +

Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.

+ +

Conclusion

+ +

Comme vous pouvez le constater, opérer avec des navigateurs historiques  n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.

+ +

Si vous avez lu tous les articles de ce guide à propos des formulaires en HTML, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à améliorer ce guide.

+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/index.html b/files/fr/learn/forms/index.html deleted file mode 100644 index 76832228f3..0000000000 --- a/files/fr/learn/forms/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Formulaires HTML -slug: Learn/Forms -tags: - - Apprentissage - - Featured - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms -original_slug: Web/Guide/HTML/Formulaires ---- -

{{learnSidebar}}

- -

Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.

- -

Prérequis

- -

Avant de vous lancer dans  ce module, vous devez au moins avoir travaillé notre Introduction au HTML. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour  les widgets natifs pour formulaire.

- -

Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des CSS et du JavaScript.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.

-
- -

Éléments de base

- -
-
Mon premier formulaire HTML
-
Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.
-
Comment structurer un formulaire HTML
-
Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
-
- -

Quels sont les widgets pour formulaire disponibles ?

- -
-
Les widgets natifs pour formulaire
-
Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.
-
- -

Validation et soumission des données de formulaires

- -
-
Envoi des données de formulaire
-
Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
-
Validation des données de formulaire
-
Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
-
- -

Guides avancés

- -
-
Comment construire des widgets de formulaires personnalisés
-
Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
-
Envoi de formulaires à l'aide du JavaScript
-
Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
-
Formulaires HTML dans les navigateurs anciens
-
Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.
-
- -

Guides de mise en forme des formulaires

- -
-
Mise en forme des formulaires HTML
-
Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.
-
Mise en forme avancée des formulaires HTML
-
Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.
-
Tableau de compatibilité des propriétés entre widgets de formulaire
-
Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.
-
- -

Voir aussi

- - diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md new file mode 100644 index 0000000000..76832228f3 --- /dev/null +++ b/files/fr/learn/forms/index.md @@ -0,0 +1,80 @@ +--- +title: Formulaires HTML +slug: Learn/Forms +tags: + - Apprentissage + - Featured + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms +original_slug: Web/Guide/HTML/Formulaires +--- +

{{learnSidebar}}

+ +

Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.

+ +

Prérequis

+ +

Avant de vous lancer dans  ce module, vous devez au moins avoir travaillé notre Introduction au HTML. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour  les widgets natifs pour formulaire.

+ +

Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des CSS et du JavaScript.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.

+
+ +

Éléments de base

+ +
+
Mon premier formulaire HTML
+
Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.
+
Comment structurer un formulaire HTML
+
Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
+
+ +

Quels sont les widgets pour formulaire disponibles ?

+ +
+
Les widgets natifs pour formulaire
+
Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.
+
+ +

Validation et soumission des données de formulaires

+ +
+
Envoi des données de formulaire
+
Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
+
Validation des données de formulaire
+
Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
+
+ +

Guides avancés

+ +
+
Comment construire des widgets de formulaires personnalisés
+
Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
+
Envoi de formulaires à l'aide du JavaScript
+
Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
+
Formulaires HTML dans les navigateurs anciens
+
Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.
+
+ +

Guides de mise en forme des formulaires

+ +
+
Mise en forme des formulaires HTML
+
Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.
+
Mise en forme avancée des formulaires HTML
+
Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.
+
Tableau de compatibilité des propriétés entre widgets de formulaire
+
Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.
+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html deleted file mode 100644 index 5dea78fc0c..0000000000 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html +++ /dev/null @@ -1,1992 +0,0 @@ ---- -title: Table de compatibilité des propriétés pour les widgets de formulaire -slug: Learn/Forms/Property_compatibility_table_for_form_controls -tags: - - Avancé - - CSS - - Formulaires - - Guide - - HTML - - Indésirables - - Mises à jour - - Web -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls -original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets ---- -
{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
- -

Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.

- -

Comment lire les tables

- -

Valeurs

- -

Pour chaque propriété, il y a quatre valeurs possibles :

- -
-
OUI
-
La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
-
PARTIEL
-
Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.
-
NON
-
La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.
-
N.A.
-
La propriété n'a aucune signification pour ce type de widget.
-
- -

Rendu

- -

Pour chaque propriété il y a deux rendus possibles :

- -
-
N (Normal)
-
Indique que la propriété est appliquée telle quelle.
-
A (Altéré)
-
Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :
-
- -
* {
-/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
-  -webkit-appearance: none;
-
-/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */
-  -moz-appearance: none;
-
-/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
-   y compris Opera, Internet Explorer et Firefox */
-  background: none;
-}
- -

Tables de compatibilité

- -

Comportements globaux

- -

Certains comportements sont communs à de nombreux navigateurs au niveau global :

- -
-
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
-
L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.
-
{{cssxref("line-height")}}
-
Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.
-
{{cssxref("text-decoration")}}
-
Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.
-
{{cssxref("text-overflow")}}
-
Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.
-
{{cssxref("text-shadow")}}
-
Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.
-
- -

Champs texte

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielOui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. -
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. -
-
{{cssxref("border")}}PartielOui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. -
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. -
-
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielOui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. -
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. -
-
Texte et polices
{{cssxref("color")}}OuiOui -
    -
  1. Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.
    2. -
-
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartielVoir la note à propos de Opera
{{cssxref("text-indent")}}PartielPartiel -
    -
  1. IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.
    2. -
-
{{cssxref("text-overflow")}}PartielPartiel 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}PartielOui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. -
-
{{cssxref("border-radius")}}PartielOui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. -
  2. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    3. -
-
{{cssxref("box-shadow")}}NonPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Boutons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielOui -
    -
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. -
-
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielOui -
    -
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. -
-
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}PartielOui 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}YesYes -
    -
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. -
-
{{cssxref("box-shadow")}}NonPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Widget number

- -

Sur les navigateurs qui implémentent le widget number, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielPartiel -
    -
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. -
-
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielPartiel -
    -
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. -
-
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartiel 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière‑plan
{{cssxref("background")}}NonNon -

Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

-
{{cssxref("border-radius")}}NonNon
{{cssxref("box-shadow")}}NonNon
- -

Cases à cocher et boutons radio

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon -
    -
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. -
-
{{cssxref("height")}}NonNon -
    -
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. -
-
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
- -

Boîtes à sélection (ligne unique)

- -

Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}PartielPartiel -
    -
  1. Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("height")}}NonOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonPartiel -
    -
  1. La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.
    2. -
  2. La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    3. -
-
Texte et polices
{{cssxref("color")}}PartielPartiel -
    -
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("font")}}PartielPartiel -
    -
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("letter-spacing")}}PartielPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("text-align")}}NoNo -
    -
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.
    2. -
-
{{cssxref("text-decoration")}}PartielPartiel -
    -
  1. Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  {{HTMLElement("select")}}.
    2. -
-
{{cssxref("text-indent")}}PartielPartiel -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
  2. IE9 ne prend pas en charge cette propriété.
    3. -
-
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
  2. IE9 ne prend pas en charge cette propriété.
    3. -
-
{{cssxref("text-transform")}}PartielPartiel -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
-
Bordure et arrière-plan
{{cssxref("background")}}PartielPartiel -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
-
{{cssxref("border-radius")}}PartielPartiel
{{cssxref("box-shadow")}}NonPartiel
- -

Boîtes à sélection (multilignes)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielPartiel -
    -
  1. Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.
    2. -
-
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}PartielPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("text-align")}}NoNo -
    -
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.
    2. -
-
{{cssxref("text-decoration")}}NoNo -
    -
  1. Uniquement pris en charge par Firefox et IE9+.
    2. -
-
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}PartielPartiel -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
-
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}YesYes -
    -
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. -
-
{{cssxref("box-shadow")}}NonPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Datalist

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}NonNon 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
- -

Sélecteur de fichiers

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}NoNo -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("letter-spacing")}}PartielPartiel -
    -
  1. Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
    2. -
-
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}PartielPartiel -
    -
  1. Agit plus ou moins comme une marge supplementaire en dehors du widget.
    2. -
-
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NoNo -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Sélecteurs de date

- -

Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
- -

Sélecteurs de couleurs

- -

Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}NoOui -
    -
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. -
-
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NoOui -
    -
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. -
-
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NoNo -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Widgets meter et progress

- -

Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiPartiel -
    -
  1. Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.
    2. -
-
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NoNo -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Widget range

- -

Il n'y a pas de méthode standard pour changer le style de la poignée de range et Opera n'a aucun moyen de modifier le rendu par défaut du widget range.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielPartiel -
    -
  1. Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de range.
    2. -
-
{{cssxref("border")}}NonOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielOui -
    -
  1. La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.
    2. -
-
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NoNo -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
- -

Boutons image

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiOui 
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}PartielPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
{{cssxref("box-shadow")}}PartielPartiel -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md new file mode 100644 index 0000000000..5dea78fc0c --- /dev/null +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -0,0 +1,1992 @@ +--- +title: Table de compatibilité des propriétés pour les widgets de formulaire +slug: Learn/Forms/Property_compatibility_table_for_form_controls +tags: + - Avancé + - CSS + - Formulaires + - Guide + - HTML + - Indésirables + - Mises à jour + - Web +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +original_slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets +--- +
{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
+ +

Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.

+ +

Comment lire les tables

+ +

Valeurs

+ +

Pour chaque propriété, il y a quatre valeurs possibles :

+ +
+
OUI
+
La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
+
PARTIEL
+
Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.
+
NON
+
La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.
+
N.A.
+
La propriété n'a aucune signification pour ce type de widget.
+
+ +

Rendu

+ +

Pour chaque propriété il y a deux rendus possibles :

+ +
+
N (Normal)
+
Indique que la propriété est appliquée telle quelle.
+
A (Altéré)
+
Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :
+
+ +
* {
+/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
+  -webkit-appearance: none;
+
+/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */
+  -moz-appearance: none;
+
+/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
+   y compris Opera, Internet Explorer et Firefox */
+  background: none;
+}
+ +

Tables de compatibilité

+ +

Comportements globaux

+ +

Certains comportements sont communs à de nombreux navigateurs au niveau global :

+ +
+
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
+
L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.
+
{{cssxref("line-height")}}
+
Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.
+
{{cssxref("text-decoration")}}
+
Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.
+
{{cssxref("text-overflow")}}
+
Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.
+
{{cssxref("text-shadow")}}
+
Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.
+
+ +

Champs texte

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielOui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. +
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. +
+
{{cssxref("border")}}PartielOui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. +
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. +
+
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielOui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. +
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. +
+
Texte et polices
{{cssxref("color")}}OuiOui +
    +
  1. Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.
    2. +
+
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartielVoir la note à propos de Opera
{{cssxref("text-indent")}}PartielPartiel +
    +
  1. IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.
    2. +
+
{{cssxref("text-overflow")}}PartielPartiel 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}PartielOui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. +
+
{{cssxref("border-radius")}}PartielOui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. +
  2. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    3. +
+
{{cssxref("box-shadow")}}NonPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Boutons

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielOui +
    +
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. +
+
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielOui +
    +
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. +
+
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}PartielOui 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}YesYes +
    +
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. +
+
{{cssxref("box-shadow")}}NonPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Widget number

+ +

Sur les navigateurs qui implémentent le widget number, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielPartiel +
    +
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. +
+
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielPartiel +
    +
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. +
+
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartiel 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière‑plan
{{cssxref("background")}}NonNon +

Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

+
{{cssxref("border-radius")}}NonNon
{{cssxref("box-shadow")}}NonNon
+ +

Cases à cocher et boutons radio

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon +
    +
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. +
+
{{cssxref("height")}}NonNon +
    +
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. +
+
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
+ +

Boîtes à sélection (ligne unique)

+ +

Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}PartielPartiel +
    +
  1. Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("height")}}NonOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonPartiel +
    +
  1. La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.
    2. +
  2. La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    3. +
+
Texte et polices
{{cssxref("color")}}PartielPartiel +
    +
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("font")}}PartielPartiel +
    +
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("letter-spacing")}}PartielPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("text-align")}}NoNo +
    +
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.
    2. +
+
{{cssxref("text-decoration")}}PartielPartiel +
    +
  1. Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  {{HTMLElement("select")}}.
    2. +
+
{{cssxref("text-indent")}}PartielPartiel +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
  2. IE9 ne prend pas en charge cette propriété.
    3. +
+
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
  2. IE9 ne prend pas en charge cette propriété.
    3. +
+
{{cssxref("text-transform")}}PartielPartiel +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
+
Bordure et arrière-plan
{{cssxref("background")}}PartielPartiel +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
+
{{cssxref("border-radius")}}PartielPartiel
{{cssxref("box-shadow")}}NonPartiel
+ +

Boîtes à sélection (multilignes)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielPartiel +
    +
  1. Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.
    2. +
+
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}PartielPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("text-align")}}NoNo +
    +
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.
    2. +
+
{{cssxref("text-decoration")}}NoNo +
    +
  1. Uniquement pris en charge par Firefox et IE9+.
    2. +
+
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}PartielPartiel +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
+
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}YesYes +
    +
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. +
+
{{cssxref("box-shadow")}}NonPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Datalist

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}NonNon 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
+ +

Sélecteur de fichiers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}NoNo +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("letter-spacing")}}PartielPartiel +
    +
  1. Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
    2. +
+
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}PartielPartiel +
    +
  1. Agit plus ou moins comme une marge supplementaire en dehors du widget.
    2. +
+
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NoNo +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Sélecteurs de date

+ +

Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
+ +

Sélecteurs de couleurs

+ +

Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}NoOui +
    +
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. +
+
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NoOui +
    +
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. +
+
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NoNo +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Widgets meter et progress

+ +

Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiPartiel +
    +
  1. Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.
    2. +
+
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NoNo +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Widget range

+ +

Il n'y a pas de méthode standard pour changer le style de la poignée de range et Opera n'a aucun moyen de modifier le rendu par défaut du widget range.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}PartielPartiel +
    +
  1. Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de range.
    2. +
+
{{cssxref("border")}}NonOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}PartielOui +
    +
  1. La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.
    2. +
+
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}NoNo +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Boutons image

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiOui 
Texte et polices
{{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. 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}PartielPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
{{cssxref("box-shadow")}}PartielPartiel +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index c2736e9d5b..0000000000 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,344 +0,0 @@ ---- -title: Envoyer et extraire les données des formulaires -slug: Learn/Forms/Sending_and_retrieving_form_data -tags: - - Beginner - - CodingScripting - - Files - - Forms - - Guide - - HTML - - HTTP - - Headers - - Security - - Web -translation_of: Learn/Forms/Sending_and_retrieving_form_data -original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires ---- -
{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}
- -

Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs, compréhension du HTML, et connaissances de base de HTTP et programmation côté serveur.
Objectif :Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.
- -

Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.

- -

A propos de l'architecture client / serveur

- -

Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme Apache, Nginx, IIS, Tomcat...), en utilisant le protocole HTTP. Le serveur répond à la requête en utilisant le même protocole.

- -

Un schéma élémentaire d'architecture client/serveur sur le Web

- -

Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.

- -
-

Note : Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.

-
- -

Côté client : définition de la méthode d'envoi des données

- -

L'élément <form> définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont action et method.

- -

L'attribut action

- -

Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.

- -

Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :

- -
<form action="http://foo.com">
- -

Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :

- -
<form action="/somewhere_else">
- -

Sans attribut, comme ci-dessous, les données de <form> sont envoyées à la même page que celle du formulaire :

- -
<form>
- -

De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut action était requis. Il n'y en a donc plus besoin.

- -
<form action="#">
- -
-

Note : Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut action, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.

-
- -

L'attribut method

- -

Cet attribut définit comment les données sont envoyées. Le Protocole HTTP fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode GET et la méthode POST.

- -

Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.

- -

La méthode GET

- -

La méthode GET est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.

- -

Considérons le formulaire suivant :

- -
<form action="http://foo.com" method="get">
-  <div>
-    <label for="say">Quelle salutation voulez-vous adresser ?</label>
-    <input name="say" id="say" value="Salut">
-  </div>
-  <div>
-    <label for="to">À qui voulez‑vous l'adresser ?</label>
-    <input name="to" value="Maman">
-  </div>
-  <div>
-    <button>Envoyer mes salutations</button>
-  </div>
-</form>
- -

Comme nous avons utilisé la méthode GET, vous verrez l'URL www.foo.com/?say=Hi&to=Mom apparaître dans la barre du navigateur quand vous soumettez le formulaire.

- -

- -

Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :

- - - -

La requête HTTP ressemble à quelque chose comme :

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
-

Note : Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).

-
- -

La méthode POST

- -

La méthode POST est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.

- -

Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec post comme valeur de l'attribut method.

- -
<form action="http://www.foo.com" method="POST">
-  <div>
-    <label for="say">Quelle salutation voulez-vous dire ?</label>
-    <input name="say" id="say" value="Salut">
-  </div>
-  <div>
-    <label for="to">A qui voulez-vous le dire ?</label>
-    <input name="to" id="to" value="Maman">
-  </div>
-  <div>
-    <button>Envoyer mes salutations</button>
-  </div>
-</form>
- -

Quand le formulaire est soumis avec la méthode POST, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

L'en-tête Content-Length indique la taille du corps, et l'en-tête Content-Type indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.

- -
-

Note : Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).

-
- -

Voir les requêtes HTTP

- -

Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la Console Web de Firefox ou les Chrome Developer Tools). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :

- -
    -
  1. Pressez F12
    2. -
  2. Selectionnez « Réseau »
    3. -
  3. Selectionnez « Tout »
    4. -
  4. Selectionnez « foo.com » dans l'onglet « Nom »
    5. -
  5. Selectionnez « En‑tête »
    6. -
- -

Vous obtiendrez les données du formulaire, comme l'image suivante le montre.

- -

- -

La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête GET l'utilisateur verra les données dans la barre de l'URL, mais avec une requête POST il ne verra rien. Cela peut être important pour deux raisons :

- -
    -
  1. Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.
    2. -
  2. Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.
    3. -
- -

Côté serveur : récupérer les données

- -

Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.

- -

Exemple : PHP brut

- -

Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode POST, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.

- -
<?php
-  // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom
-  // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
- -

Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple php-example.html — il contient le même formulaire exemple que celui vu précédemment avec la méthode post avec php-example.php en action. À la soumission du formulaire, il envoie les données de ce dernier à php-example.php, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est Hi Mom « Bonjour maman ».

- -

L'exécution du code PHP déclenche l'affichage de Hi Mom

- -
-

Note : Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).

-

Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu MAMP > Préférences > PHP, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).

-
- -

Exemple: Python

- -

Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise Flask framework pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez 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()
- -

Les deux prototypes référencés dans le code ci‑dessus sont les suivants :

- - - -
-

Note : À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.

-
- -

Autres langages et canevas de structures

- -

Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :

- - - -

Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours facile. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.

- -
-

Note : Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.

-
- -

Cas particulier : envoyer des fichiers

- -

L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.

- -

L'attribut enctype

- -

Cet attribut vous permet de préciser la valeur de l'en-tête HTTP Content-Type incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est application/x-www-form-urlencoded. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».

- -

Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :

- - - -

Par exemple :

- -
<form method="post" action="https://www.foo.com" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choisir un fichier</label>
-    <input type="file" id="file" name="myFile">
-  </div>
-  <div>
-    <button>Envoyer le fichier</button>
-  </div>
-</form>
- -
-

Note : Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.

-
- -

Problèmes courants de sécurité

- -

Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.

- -

L'article Sécurité des sites Web de notre sujet d'apprentissage server-side aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.

- -

Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs

- -

Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.

- -

Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.

- - - -

Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !

- -

Conclusion

- -

Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la validation des données côté client, mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.

- -

Voir aussi

- -

Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :

- - - -

{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}

- -

Dans ce module

- - - -

Sujets avancés

- - diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md new file mode 100644 index 0000000000..c2736e9d5b --- /dev/null +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -0,0 +1,344 @@ +--- +title: Envoyer et extraire les données des formulaires +slug: Learn/Forms/Sending_and_retrieving_form_data +tags: + - Beginner + - CodingScripting + - Files + - Forms + - Guide + - HTML + - HTTP + - Headers + - Security + - Web +translation_of: Learn/Forms/Sending_and_retrieving_form_data +original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires +--- +
{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}
+ +

Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs, compréhension du HTML, et connaissances de base de HTTP et programmation côté serveur.
Objectif :Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.
+ +

Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.

+ +

A propos de l'architecture client / serveur

+ +

Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme Apache, Nginx, IIS, Tomcat...), en utilisant le protocole HTTP. Le serveur répond à la requête en utilisant le même protocole.

+ +

Un schéma élémentaire d'architecture client/serveur sur le Web

+ +

Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.

+ +
+

Note : Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.

+
+ +

Côté client : définition de la méthode d'envoi des données

+ +

L'élément <form> définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont action et method.

+ +

L'attribut action

+ +

Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.

+ +

Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :

+ +
<form action="http://foo.com">
+ +

Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :

+ +
<form action="/somewhere_else">
+ +

Sans attribut, comme ci-dessous, les données de <form> sont envoyées à la même page que celle du formulaire :

+ +
<form>
+ +

De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut action était requis. Il n'y en a donc plus besoin.

+ +
<form action="#">
+ +
+

Note : Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut action, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.

+
+ +

L'attribut method

+ +

Cet attribut définit comment les données sont envoyées. Le Protocole HTTP fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode GET et la méthode POST.

+ +

Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.

+ +

La méthode GET

+ +

La méthode GET est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.

+ +

Considérons le formulaire suivant :

+ +
<form action="http://foo.com" method="get">
+  <div>
+    <label for="say">Quelle salutation voulez-vous adresser ?</label>
+    <input name="say" id="say" value="Salut">
+  </div>
+  <div>
+    <label for="to">À qui voulez‑vous l'adresser ?</label>
+    <input name="to" value="Maman">
+  </div>
+  <div>
+    <button>Envoyer mes salutations</button>
+  </div>
+</form>
+ +

Comme nous avons utilisé la méthode GET, vous verrez l'URL www.foo.com/?say=Hi&to=Mom apparaître dans la barre du navigateur quand vous soumettez le formulaire.

+ +

+ +

Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :

+ + + +

La requête HTTP ressemble à quelque chose comme :

+ +
GET /?say=Hi&to=Mom HTTP/1.1
+Host: foo.com
+ +
+

Note : Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).

+
+ +

La méthode POST

+ +

La méthode POST est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.

+ +

Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec post comme valeur de l'attribut method.

+ +
<form action="http://www.foo.com" method="POST">
+  <div>
+    <label for="say">Quelle salutation voulez-vous dire ?</label>
+    <input name="say" id="say" value="Salut">
+  </div>
+  <div>
+    <label for="to">A qui voulez-vous le dire ?</label>
+    <input name="to" id="to" value="Maman">
+  </div>
+  <div>
+    <button>Envoyer mes salutations</button>
+  </div>
+</form>
+ +

Quand le formulaire est soumis avec la méthode POST, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

L'en-tête Content-Length indique la taille du corps, et l'en-tête Content-Type indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.

+ +
+

Note : Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).

+
+ +

Voir les requêtes HTTP

+ +

Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la Console Web de Firefox ou les Chrome Developer Tools). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :

+ +
    +
  1. Pressez F12
    2. +
  2. Selectionnez « Réseau »
    3. +
  3. Selectionnez « Tout »
    4. +
  4. Selectionnez « foo.com » dans l'onglet « Nom »
    5. +
  5. Selectionnez « En‑tête »
    6. +
+ +

Vous obtiendrez les données du formulaire, comme l'image suivante le montre.

+ +

+ +

La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête GET l'utilisateur verra les données dans la barre de l'URL, mais avec une requête POST il ne verra rien. Cela peut être important pour deux raisons :

+ +
    +
  1. Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.
    2. +
  2. Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.
    3. +
+ +

Côté serveur : récupérer les données

+ +

Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.

+ +

Exemple : PHP brut

+ +

Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode POST, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.

+ +
<?php
+  // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom
+  // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;
+ +

Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple php-example.html — il contient le même formulaire exemple que celui vu précédemment avec la méthode post avec php-example.php en action. À la soumission du formulaire, il envoie les données de ce dernier à php-example.php, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est Hi Mom « Bonjour maman ».

+ +

L'exécution du code PHP déclenche l'affichage de Hi Mom

+ +
+

Note : Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).

+

Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu MAMP > Préférences > PHP, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).

+
+ +

Exemple: Python

+ +

Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise Flask framework pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez 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()
+ +

Les deux prototypes référencés dans le code ci‑dessus sont les suivants :

+ + + +
+

Note : À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.

+
+ +

Autres langages et canevas de structures

+ +

Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :

+ + + +

Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours facile. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.

+ +
+

Note : Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.

+
+ +

Cas particulier : envoyer des fichiers

+ +

L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.

+ +

L'attribut enctype

+ +

Cet attribut vous permet de préciser la valeur de l'en-tête HTTP Content-Type incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est application/x-www-form-urlencoded. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».

+ +

Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :

+ + + +

Par exemple :

+ +
<form method="post" action="https://www.foo.com" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choisir un fichier</label>
+    <input type="file" id="file" name="myFile">
+  </div>
+  <div>
+    <button>Envoyer le fichier</button>
+  </div>
+</form>
+ +
+

Note : Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.

+
+ +

Problèmes courants de sécurité

+ +

Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.

+ +

L'article Sécurité des sites Web de notre sujet d'apprentissage server-side aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.

+ +

Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs

+ +

Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.

+ +

Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.

+ + + +

Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !

+ +

Conclusion

+ +

Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la validation des données côté client, mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.

+ +

Voir aussi

+ +

Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :

+ + + +

{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}

+ +

Dans ce module

+ + + +

Sujets avancés

+ + diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.html b/files/fr/learn/forms/sending_forms_through_javascript/index.html deleted file mode 100644 index 571ede2a5b..0000000000 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.html +++ /dev/null @@ -1,441 +0,0 @@ ---- -title: Envoi de formulaires avec JavaScript -slug: Learn/Forms/Sending_forms_through_JavaScript -translation_of: Learn/Forms/Sending_forms_through_JavaScript -original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
- -

Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.

- -

Un formulaire n'est pas toujours un <form>

- -

Avec les applications Web ouvertes, il est de plus en plus courant d'utiliser des formulaires HTML autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.

- -

Obtenir le contrôle sur la totalité de l'interface

- -

La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.

- -

De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.

- -

L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).

- -

Comment est-ce différent ?

- -

AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.

- -
-

Note : Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, JSONP combiné à la fonction eval(). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou JSON, mais ce sont vraiment des navigateurs anciens ! Évitez ces techniques.

-
- -

 

- -

Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, JSON a remplacé XML et est de plus en plus courant aujourd'hui.

- -

Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (application/x-www-form-urlencoded) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données multipart/form‑data.

- -

Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.

- -

Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.

- -

Comment envoyer de telles données ?

- -

Envoi des données de formulaire

- -

Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.

- -

Construire manuellement un XMLHttpRequest

- -

{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.

- -
-

Note : Pour en savoir plus sur XMLHttpRequest, ces articles pourraient vous intéresser : un article d'introduction à AJAX et un didacticiel plus fouillé à ce propos utilisant XMLHttpRequest.

-
- -

Reconstruisons l'exemple précédent :

- -
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
- -

Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :

- -
function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var urlEncodedData = "";
-  var urlEncodedDataPairs = [];
-  var name;
-
-  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
-  for(name in data) {
-    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
-  }
-
-  // Combinez les paires en une seule chaîne de caractères et remplacez tous
-  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
-  // des soumissions de formulaires de navigateur.
-  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
-
-  // Définissez ce qui se passe en cas de succès de soumission de données
-  XHR.addEventListener('load', function(event) {
-    alert('Ouais ! Données envoyées et réponse chargée.');
-  });
-
-  // Définissez ce qui arrive en cas d'erreur
-  XHR.addEventListener('error', function(event) {
-    alert('Oups! Quelque chose s\'est mal passé.');
-  });
-
-  // Configurez la requête
-  XHR.open('POST', 'https://example.com/cors.php');
-
-  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
-  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-  // Finalement, envoyez les données.
-  XHR.send(urlEncodedData);
-}
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}

- -
-

Note : Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès CORS et HTTP.

-
- -

Utilisation de XMLHttpRequest et de l'objet FormData

- -

Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une spécification XMLHttpRequest récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.

- -

L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.

- -

L'utilisation de cet objet est détaillée dans Utiliser les objets FormData, mais voici deux exemples :

- -

Utiliser un objet FormData autonome

- -
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
- -

Vous devriez être familier de cet exemple HTML.

- -
function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var FD  = new FormData();
-
-  // Mettez les données dans l'objet FormData
-  for(name in data) {
-    FD.append(name, data[name]);
-  }
-
-  // Définissez ce qui se passe si la soumission s'est opérée avec succès
-  XHR.addEventListener('load', function(event) {
-    alert('Ouais ! Données envoyées et réponse chargée.');
-  });
-
-  // Definissez ce qui se passe en cas d'erreur
-  XHR.addEventListener('error', function(event) {
-    alert('Oups! Quelque chose s\'est mal passé.');
-  });
-
-  // Configurez la requête
-  XHR.open('POST', 'https://example.com/cors.php');
-
-  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
-  XHR.send(FD);
-}
- -

Voici le résultat directement :

- -

{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}

- -

Utiliser un objet FormData lié à un élément form

- -

Vous pouvez également lier un objet FormData à un élément {{HTMLElement("form")}} et  créer ainsi un FormData représentant les données contenues dans le formulaire.

- -

Le HTML est classique :

- -
<form id="myForm">
-  <label for="myName">Dites-moi votre nom :</label>
-  <input id="myName" name="name" value="John">
-  <input type="submit" value="Envoyer !">
-</form>
- -

Mais JavaScript sera de la forme :

- -
window.addEventListener("load", function () {
-  function sendData() {
-    var XHR = new XMLHttpRequest();
-
-    // Liez l'objet FormData et l'élément form
-    var FD = new FormData(form);
-
-    // Définissez ce qui se passe si la soumission s'est opérée avec succès
-    XHR.addEventListener("load", function(event) {
-      alert(event.target.responseText);
-    });
-
-    // Definissez ce qui se passe en cas d'erreur
-    XHR.addEventListener("error", function(event) {
-      alert('Oups! Quelque chose s\'est mal passé.');
-    });
-
-    // Configurez la requête
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
-    XHR.send(FD);
-  }
-
-  // Accédez à l'élément form …
-  var form = document.getElementById("myForm");
-
-  // … et prenez en charge l'événement submit.
-  form.addEventListener("submit", function (event) {
-    event.preventDefault();
-
-    sendData();
-  });
-});
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}

- -

Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.

- -

Construire un DOM dans un iframe caché

- -

La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.

- -
-

Attention : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.

-
- -

Voici un exemple :

- -
<button onclick="sendData({test:'ok'})">Cliquez ici !</button>
- -
// Créer l'iFrame servant à envoyer les données
-var iframe = document.createElement("iframe");
-iframe.name = "myTarget";
-
-// Puis, attachez l'iFrame au document principal
-window.addEventListener("load", function () {
-  iframe.style.display = "none";
-  document.body.appendChild(iframe);
-});
-
-// Voici la fonction réellement utilisée pour expédier les données
-// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
-function sendData(data) {
-  var name,
-      form = document.createElement("form"),
-      node = document.createElement("input");
-
-  // Définir ce qui se passe quand la réponse est chargée
-  iframe.addEventListener("load", function () {
-    alert("Ouais ! Données envoyés.");
-  });
-
-  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
-  form.target = iframe.name;
-
-  for(name in data) {
-    node.name  = name;
-    node.value = data[name].toString();
-    form.appendChild(node.cloneNode());
-  }
-
-  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
-  form.style.display = "none";
-  document.body.appendChild(form);
-
-  form.submit();
-
-  // Une fois le formulaire envoyé, le supprimer.
-  document.body.removeChild(form);
-}
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}

- -

 

- -

Gestion des données binaires

- -

Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <input type="file">, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.

- -

Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et WebRTC, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez Utiliser les fichiers des applications Web.

- -

Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.

- -

Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :

- -
<form id="myForm">
-  <p>
-    <label for="i1">Données textuelles :</label>
-    <input id="i1" name="myText" value="Quelques données textuelles">
-  </p>
-  <p>
-    <label for="i2">Fichier de données :</label>
-    <input id="i2" name="myFile" type="file">
-  </p>
-  <button>Envoyer !</button>
-</form>
- -

Comme vous pouvez le voir, le HTML est un <form>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :

- -
// Comme nous voulons avoir accès à un nœud DOM,
-// nous initialisons le script au chargement de la page.
-window.addEventListener('load', function () {
-
-  // Ces variables s'utilisent pour stocker les données du formulaire
-  var text = document.getElementById("i1");
-  var file = {
-        dom    : document.getElementById("i2"),
-        binary : null
-      };
-
-  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
-  var reader = new FileReader();
-
-  // Comme FileReader est asynchrone, stockons son résulata
-  // quand il a fini de lire le fichier
-  reader.addEventListener("load", function () {
-    file.binary = reader.result;
-  });
-
-  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
-  if(file.dom.files[0]) {
-    reader.readAsBinaryString(file.dom.files[0]);
-  }
-
-  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
-  file.dom.addEventListener("change", function () {
-    if(reader.readyState === FileReader.LOADING) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString(file.dom.files[0]);
-  });
-
-  // sendData est notre fonction principale
-  function sendData() {
-    // S'il y a un fichier sélectionné, attendre sa lecture
-    // Sinon, retarder l'exécution de la fonction
-    if(!file.binary && file.dom.files.length > 0) {
-      setTimeout(sendData, 10);
-      return;
-    }
-
-    // Pour construire notre requête de données de formulaire en plusieurs parties
-    // nous avons besoin d'une instance de XMLHttpRequest
-    var XHR = new XMLHttpRequest();
-
-    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
-    var boundary = "blob";
-
-    // Stockons le corps de la requête dans une chaîne littérale
-    var data = "";
-
-    // Ainsi, si l'utilisateur a sélectionné un fichier
-    if (file.dom.files[0]) {
-      // Lancer une nouvelle partie de la requête du corps
-      data += "--" + boundary + "\r\n";
-
-      // Décrivons là comme étant des données du formulaire
-      data += 'content-disposition: form-data; '
-      // Définissons le nom des données du formulaire
-            + 'name="'         + file.dom.name          + '"; '
-      // Fournissons le vrai nom du fichier
-            + 'filename="'     + file.dom.files[0].name + '"\r\n';
-      // et le type MIME du fichier
-      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
-
-      // Il y a une ligne vide entre les métadonnées et les données
-      data += '\r\n';
-
-      // Ajoutons les données binaires à la requête du corps
-      data += file.binary + '\r\n';
-    }
-
-    // C'est plus simple pour les données textuelles
-    // Démarrons une nouvelle partie dans notre requête du corps
-    data += "--" + boundary + "\r\n";
-
-    // Disons que ce sont des données de formulaire et nommons les
-    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
-    // Il y a une ligne vide entre les métadonnées et les données
-    data += '\r\n';
-
-    // Ajoutons les données textuelles à la requête du corps
-    data += text.value + "\r\n";
-
-    // Ceci fait, "fermons" la requête du corps
-    data += "--" + boundary + "--";
-
-    // Définissons ce qui arrive en cas de succès pour la soumission des données
-    XHR.addEventListener('load', function(event) {
-      alert('Ouais ! Données expédiées et réponse chargée.');
-    });
-
-    // Définissons ce qui se passe en cas d'eerreur
-    XHR.addEventListener('error', function(event) {
-      alert('Oups! Quelque chose s\'est mal passé.');
-    });
-
-    // Configurons la requête
-    XHR.open('POST', 'https://example.com/cors.php');
-
-    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
-    // de formulaire en plusieurs parties
-    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
-
-    // et finalement, expédions les données.
-    XHR.send(data);
-  }
-
-  // Accéder au formulaire …
-  var form = document.getElementById("myForm");
-
-  // … pour prendre en charge l'événement soumission
-  form.addEventListener('submit', function (event) {
-    event.preventDefault();
-    sendData();
-  });
-});
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}

- -

Conclusion

- -

Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (prothèse d'émulation) pour cela sur les navigateurs anciens :

- - - -

 

- -
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
- -

 

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md new file mode 100644 index 0000000000..571ede2a5b --- /dev/null +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md @@ -0,0 +1,441 @@ +--- +title: Envoi de formulaires avec JavaScript +slug: Learn/Forms/Sending_forms_through_JavaScript +translation_of: Learn/Forms/Sending_forms_through_JavaScript +original_slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
+ +

Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.

+ +

Un formulaire n'est pas toujours un <form>

+ +

Avec les applications Web ouvertes, il est de plus en plus courant d'utiliser des formulaires HTML autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.

+ +

Obtenir le contrôle sur la totalité de l'interface

+ +

La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.

+ +

De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.

+ +

L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).

+ +

Comment est-ce différent ?

+ +

AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.

+ +
+

Note : Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, JSONP combiné à la fonction eval(). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou JSON, mais ce sont vraiment des navigateurs anciens ! Évitez ces techniques.

+
+ +

 

+ +

Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, JSON a remplacé XML et est de plus en plus courant aujourd'hui.

+ +

Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (application/x-www-form-urlencoded) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données multipart/form‑data.

+ +

Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.

+ +

Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.

+ +

Comment envoyer de telles données ?

+ +

Envoi des données de formulaire

+ +

Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.

+ +

Construire manuellement un XMLHttpRequest

+ +

{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.

+ +
+

Note : Pour en savoir plus sur XMLHttpRequest, ces articles pourraient vous intéresser : un article d'introduction à AJAX et un didacticiel plus fouillé à ce propos utilisant XMLHttpRequest.

+
+ +

Reconstruisons l'exemple précédent :

+ +
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
+ +

Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :

+ +
function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var urlEncodedData = "";
+  var urlEncodedDataPairs = [];
+  var name;
+
+  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
+  for(name in data) {
+    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
+  }
+
+  // Combinez les paires en une seule chaîne de caractères et remplacez tous
+  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
+  // des soumissions de formulaires de navigateur.
+  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
+
+  // Définissez ce qui se passe en cas de succès de soumission de données
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Définissez ce qui arrive en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
+  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  // Finalement, envoyez les données.
+  XHR.send(urlEncodedData);
+}
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}

+ +
+

Note : Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès CORS et HTTP.

+
+ +

Utilisation de XMLHttpRequest et de l'objet FormData

+ +

Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une spécification XMLHttpRequest récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.

+ +

L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.

+ +

L'utilisation de cet objet est détaillée dans Utiliser les objets FormData, mais voici deux exemples :

+ +

Utiliser un objet FormData autonome

+ +
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
+ +

Vous devriez être familier de cet exemple HTML.

+ +
function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var FD  = new FormData();
+
+  // Mettez les données dans l'objet FormData
+  for(name in data) {
+    FD.append(name, data[name]);
+  }
+
+  // Définissez ce qui se passe si la soumission s'est opérée avec succès
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Definissez ce qui se passe en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
+  XHR.send(FD);
+}
+ +

Voici le résultat directement :

+ +

{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}

+ +

Utiliser un objet FormData lié à un élément form

+ +

Vous pouvez également lier un objet FormData à un élément {{HTMLElement("form")}} et  créer ainsi un FormData représentant les données contenues dans le formulaire.

+ +

Le HTML est classique :

+ +
<form id="myForm">
+  <label for="myName">Dites-moi votre nom :</label>
+  <input id="myName" name="name" value="John">
+  <input type="submit" value="Envoyer !">
+</form>
+ +

Mais JavaScript sera de la forme :

+ +
window.addEventListener("load", function () {
+  function sendData() {
+    var XHR = new XMLHttpRequest();
+
+    // Liez l'objet FormData et l'élément form
+    var FD = new FormData(form);
+
+    // Définissez ce qui se passe si la soumission s'est opérée avec succès
+    XHR.addEventListener("load", function(event) {
+      alert(event.target.responseText);
+    });
+
+    // Definissez ce qui se passe en cas d'erreur
+    XHR.addEventListener("error", function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurez la requête
+    XHR.open("POST", "https://example.com/cors.php");
+
+    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
+    XHR.send(FD);
+  }
+
+  // Accédez à l'élément form …
+  var form = document.getElementById("myForm");
+
+  // … et prenez en charge l'événement submit.
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    sendData();
+  });
+});
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}

+ +

Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.

+ +

Construire un DOM dans un iframe caché

+ +

La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.

+ +
+

Attention : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.

+
+ +

Voici un exemple :

+ +
<button onclick="sendData({test:'ok'})">Cliquez ici !</button>
+ +
// Créer l'iFrame servant à envoyer les données
+var iframe = document.createElement("iframe");
+iframe.name = "myTarget";
+
+// Puis, attachez l'iFrame au document principal
+window.addEventListener("load", function () {
+  iframe.style.display = "none";
+  document.body.appendChild(iframe);
+});
+
+// Voici la fonction réellement utilisée pour expédier les données
+// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
+function sendData(data) {
+  var name,
+      form = document.createElement("form"),
+      node = document.createElement("input");
+
+  // Définir ce qui se passe quand la réponse est chargée
+  iframe.addEventListener("load", function () {
+    alert("Ouais ! Données envoyés.");
+  });
+
+  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
+  form.target = iframe.name;
+
+  for(name in data) {
+    node.name  = name;
+    node.value = data[name].toString();
+    form.appendChild(node.cloneNode());
+  }
+
+  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
+  form.style.display = "none";
+  document.body.appendChild(form);
+
+  form.submit();
+
+  // Une fois le formulaire envoyé, le supprimer.
+  document.body.removeChild(form);
+}
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}

+ +

 

+ +

Gestion des données binaires

+ +

Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <input type="file">, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.

+ +

Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et WebRTC, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez Utiliser les fichiers des applications Web.

+ +

Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.

+ +

Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :

+ +
<form id="myForm">
+  <p>
+    <label for="i1">Données textuelles :</label>
+    <input id="i1" name="myText" value="Quelques données textuelles">
+  </p>
+  <p>
+    <label for="i2">Fichier de données :</label>
+    <input id="i2" name="myFile" type="file">
+  </p>
+  <button>Envoyer !</button>
+</form>
+ +

Comme vous pouvez le voir, le HTML est un <form>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :

+ +
// Comme nous voulons avoir accès à un nœud DOM,
+// nous initialisons le script au chargement de la page.
+window.addEventListener('load', function () {
+
+  // Ces variables s'utilisent pour stocker les données du formulaire
+  var text = document.getElementById("i1");
+  var file = {
+        dom    : document.getElementById("i2"),
+        binary : null
+      };
+
+  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
+  var reader = new FileReader();
+
+  // Comme FileReader est asynchrone, stockons son résulata
+  // quand il a fini de lire le fichier
+  reader.addEventListener("load", function () {
+    file.binary = reader.result;
+  });
+
+  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
+  if(file.dom.files[0]) {
+    reader.readAsBinaryString(file.dom.files[0]);
+  }
+
+  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
+  file.dom.addEventListener("change", function () {
+    if(reader.readyState === FileReader.LOADING) {
+      reader.abort();
+    }
+
+    reader.readAsBinaryString(file.dom.files[0]);
+  });
+
+  // sendData est notre fonction principale
+  function sendData() {
+    // S'il y a un fichier sélectionné, attendre sa lecture
+    // Sinon, retarder l'exécution de la fonction
+    if(!file.binary && file.dom.files.length > 0) {
+      setTimeout(sendData, 10);
+      return;
+    }
+
+    // Pour construire notre requête de données de formulaire en plusieurs parties
+    // nous avons besoin d'une instance de XMLHttpRequest
+    var XHR = new XMLHttpRequest();
+
+    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
+    var boundary = "blob";
+
+    // Stockons le corps de la requête dans une chaîne littérale
+    var data = "";
+
+    // Ainsi, si l'utilisateur a sélectionné un fichier
+    if (file.dom.files[0]) {
+      // Lancer une nouvelle partie de la requête du corps
+      data += "--" + boundary + "\r\n";
+
+      // Décrivons là comme étant des données du formulaire
+      data += 'content-disposition: form-data; '
+      // Définissons le nom des données du formulaire
+            + 'name="'         + file.dom.name          + '"; '
+      // Fournissons le vrai nom du fichier
+            + 'filename="'     + file.dom.files[0].name + '"\r\n';
+      // et le type MIME du fichier
+      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
+
+      // Il y a une ligne vide entre les métadonnées et les données
+      data += '\r\n';
+
+      // Ajoutons les données binaires à la requête du corps
+      data += file.binary + '\r\n';
+    }
+
+    // C'est plus simple pour les données textuelles
+    // Démarrons une nouvelle partie dans notre requête du corps
+    data += "--" + boundary + "\r\n";
+
+    // Disons que ce sont des données de formulaire et nommons les
+    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
+    // Il y a une ligne vide entre les métadonnées et les données
+    data += '\r\n';
+
+    // Ajoutons les données textuelles à la requête du corps
+    data += text.value + "\r\n";
+
+    // Ceci fait, "fermons" la requête du corps
+    data += "--" + boundary + "--";
+
+    // Définissons ce qui arrive en cas de succès pour la soumission des données
+    XHR.addEventListener('load', function(event) {
+      alert('Ouais ! Données expédiées et réponse chargée.');
+    });
+
+    // Définissons ce qui se passe en cas d'eerreur
+    XHR.addEventListener('error', function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurons la requête
+    XHR.open('POST', 'https://example.com/cors.php');
+
+    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
+    // de formulaire en plusieurs parties
+    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
+
+    // et finalement, expédions les données.
+    XHR.send(data);
+  }
+
+  // Accéder au formulaire …
+  var form = document.getElementById("myForm");
+
+  // … pour prendre en charge l'événement soumission
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    sendData();
+  });
+});
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}

+ +

Conclusion

+ +

Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (prothèse d'émulation) pour cela sur les navigateurs anciens :

+ + + +

 

+ +
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/styling_web_forms/index.html b/files/fr/learn/forms/styling_web_forms/index.html deleted file mode 100644 index 95ddead893..0000000000 --- a/files/fr/learn/forms/styling_web_forms/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Mise en forme des formulaires HTML -slug: Learn/Forms/Styling_web_forms -tags: - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - Web -translation_of: Learn/Forms/Styling_web_forms -original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
- -
-

Dans cet article, nous allons apprendre comment utiliser les CSS avec les formulaires HTML pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent construire leurs propres widgets HTML pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.

-
- -

Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?

- -

Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la spécification HTML 2. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.

- -

Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.

- -

Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.

- -

Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des formulaires HTML.

- -

Tous les widgets ne sont pas égaux devant les CSS

- -

Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.

- -

Le bon

- -

L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}}
    3. -
  3. {{HTMLElement("label")}}
    4. -
  4. {{HTMLElement("output")}}
    5. -
- -

Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.

- -

La brute

- -

L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.

- -

Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.

- -

Nous allons voir comment gérer ces cas particuliers dans l'article Apparence avancée des formulaires HTML.

- -

Le truand

- -

L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.

- -

Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article Comment créer des widgets de formulaire personnalisés.

- -

Compositions stylistiques de base

- -

Pour changer l'apparence des éléments facilement modifiables avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.

- -

Champs de recherche

- -

Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire -webkit-appearance. Nous allons aborder le sujet plus en détails dans dans l'article : Apparence avancée des formulaires HTML.

- -

Exemple

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

- -

Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété -webkit-appearance tandis que le second a recours à la propriété -webkit-appearance:none. La différence est notable.

- -

Texte et polices de caractères

- -

Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.

- -

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

- -

Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.

- -

Modèle de boîte

- -

Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.

- -

Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin). Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :

- -
input, textarea, select, button {
-  width : 150px;
-  margin: 0;
-
-  -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
-     -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
-          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.

- -

Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS border-box. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.

- -

Positionnement

- -

Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :

- -

legend

- -

L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément fieldset.

- -

Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  label de chaque élément de formulaire du fieldset), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :

- -
HTML
- -
<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
- -
CSS
- -
legend {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
- -

textarea

- -

Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d'inline-block à block, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :

- -
textarea {
-  vertical-align: top;
-}
- -

Exemple

- -

Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :

- -

C'est ce que nous voulons réaliser avec le HTML et les CSS.

- -

HTML

- -

Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier article de ce guide ; il ne comporte que quelques identifiants supplémentaires et un titre.

- -
<form>
-  <h1>à: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">de :</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">répondre à :</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Votre message :</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Poster le message</button>
-  </div>
-</form>
- -

Organiser les ressources

- -

C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :

- -
    -
  1. L'image de fond de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
    2. -
  2. Une police de machine à écrire : « Secret Typewriter » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    3. -
  3. Une police d'écriture manuelle :  « Journal » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    4. -
- -

 

- -

Les polices demandent un supplément de traitement avant de débuter :

- -
    -
  1. Allez sur le Webfont Generator de fontsquirrel.
    2. -
  2. En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
    3. -
  3. Décompressez le fichier zip fourni.
    4. -
  4. Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
    5. -
- -

Le CSS

- -

 

- -

Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.

- -

D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.

- -
@font-face{
-  font-family : "handwriting";
-  src: url('fonts/journal-webfont.woff2') format('woff2'),
-       url('fonts/journal-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face{
-  font-family : "typewriter";
-  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
-       url('fonts/veteran_typewriter-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-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);
-}
- -

Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.

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

C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.

- -
input, textarea {
-  font    : .9em/1.5em "handwriting", sans-serif;
-
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 240px;
-
-  background: none;
-}
- -

Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-  outline      : none;
-}
- -

Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.

- -

Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :

- -
input {
-    height: 2.5em; /* pour IE */
-    vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */
-}
- -

Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur auto et d'autres la valeur par défaut pour scroll lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise auto.

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 340px;
-  height  : 360px;
-
-  resize  : none;
-  overflow: auto;
-}
- -

L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !

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

Et voilà ! (en français dans le texte)

- -
-

Note : si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la fonctionner en direct (et revoyez son code source).

-
- -

Conclusion

- -

Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du projet normalize.css.

- -

Dans le prochain article, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md new file mode 100644 index 0000000000..95ddead893 --- /dev/null +++ b/files/fr/learn/forms/styling_web_forms/index.md @@ -0,0 +1,392 @@ +--- +title: Mise en forme des formulaires HTML +slug: Learn/Forms/Styling_web_forms +tags: + - CSS + - Exemple + - Formulaires + - Guide + - HTML + - Intermédiaire + - Web +translation_of: Learn/Forms/Styling_web_forms +original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
+ +
+

Dans cet article, nous allons apprendre comment utiliser les CSS avec les formulaires HTML pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent construire leurs propres widgets HTML pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.

+
+ +

Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?

+ +

Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la spécification HTML 2. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.

+ +

Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.

+ +

Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.

+ +

Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des formulaires HTML.

+ +

Tous les widgets ne sont pas égaux devant les CSS

+ +

Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.

+ +

Le bon

+ +

L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}}
    3. +
  3. {{HTMLElement("label")}}
    4. +
  4. {{HTMLElement("output")}}
    5. +
+ +

Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.

+ +

La brute

+ +

L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.

+ +

Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.

+ +

Nous allons voir comment gérer ces cas particuliers dans l'article Apparence avancée des formulaires HTML.

+ +

Le truand

+ +

L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.

+ +

Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article Comment créer des widgets de formulaire personnalisés.

+ +

Compositions stylistiques de base

+ +

Pour changer l'apparence des éléments facilement modifiables avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.

+ +

Champs de recherche

+ +

Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire -webkit-appearance. Nous allons aborder le sujet plus en détails dans dans l'article : Apparence avancée des formulaires HTML.

+ +

Exemple

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

+ +

Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété -webkit-appearance tandis que le second a recours à la propriété -webkit-appearance:none. La différence est notable.

+ +

Texte et polices de caractères

+ +

Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.

+ +

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

+ +

Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.

+ +

Modèle de boîte

+ +

Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.

+ +

Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin). Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :

+ +
input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
+     -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
+          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.

+ +

Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS border-box. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.

+ +

Positionnement

+ +

Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :

+ +

legend

+ +

L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément fieldset.

+ +

Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  label de chaque élément de formulaire du fieldset), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :

+ +
HTML
+ +
<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+ +
CSS
+ +
legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+ +

textarea

+ +

Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d'inline-block à block, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :

+ +
textarea {
+  vertical-align: top;
+}
+ +

Exemple

+ +

Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :

+ +

C'est ce que nous voulons réaliser avec le HTML et les CSS.

+ +

HTML

+ +

Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier article de ce guide ; il ne comporte que quelques identifiants supplémentaires et un titre.

+ +
<form>
+  <h1>à: Mozilla</h1>
+
+  <div id="from">
+    <label for="name">de :</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div id="reply">
+    <label for="mail">répondre à :</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div id="message">
+    <label for="msg">Votre message :</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Poster le message</button>
+  </div>
+</form>
+ +

Organiser les ressources

+ +

C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :

+ +
    +
  1. L'image de fond de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
    2. +
  2. Une police de machine à écrire : « Secret Typewriter » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    3. +
  3. Une police d'écriture manuelle :  « Journal » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    4. +
+ +

 

+ +

Les polices demandent un supplément de traitement avant de débuter :

+ +
    +
  1. Allez sur le Webfont Generator de fontsquirrel.
    2. +
  2. En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
    3. +
  3. Décompressez le fichier zip fourni.
    4. +
  4. Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
    5. +
+ +

Le CSS

+ +

 

+ +

Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.

+ +

D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.

+ +
@font-face{
+  font-family : "handwriting";
+  src: url('fonts/journal-webfont.woff2') format('woff2'),
+       url('fonts/journal-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face{
+  font-family : "typewriter";
+  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+       url('fonts/veteran_typewriter-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+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);
+}
+ +

Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.

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

C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.

+ +
input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}
+ +

Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}
+ +

Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.

+ +

Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :

+ +
input {
+    height: 2.5em; /* pour IE */
+    vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */
+}
+ +

Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur auto et d'autres la valeur par défaut pour scroll lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise auto.

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}
+ +

L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !

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

Et voilà ! (en français dans le texte)

+ +
+

Note : si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la fonctionner en direct (et revoyez son code source).

+
+ +

Conclusion

+ +

Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du projet normalize.css.

+ +

Dans le prochain article, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».

+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/your_first_form/example/index.html b/files/fr/learn/forms/your_first_form/example/index.html deleted file mode 100644 index d5268524e3..0000000000 --- a/files/fr/learn/forms/your_first_form/example/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Exemple -slug: Learn/Forms/Your_first_form/Example -translation_of: Learn/Forms/Your_first_form/Example -original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple ---- -

Ceci est l'exemple pour l'article Mon premier formulaire HTML.

- -

Un formulaire simple

- -

Contenu HTML

- -
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
-  <div>
-    <label for="nom">Nom :</label>
-    <input type="text" id="nom" name="user_name">
-  </div>
-
-  <div>
-    <label for="courriel">Courriel :</label>
-    <input type="email" id="courriel" name="user_email">
-  </div>
-
-  <div>
-    <label for="message">Message :</label>
-    <textarea id="message" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Envoyer le message</button>
-  </div>
-</form>
- -

Contenu CSS

- -
form {
-  /* Pour le centrer dans la page */
-  margin: 0 auto;
-  width: 400px;
-
-  /* Pour voir les limites du formulaire */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-div + div {
-  margin-top: 1em;
-}
-
-label {
-  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input, textarea {
-  /* Afin de s'assurer que tous les champs textuels utilisent la même police
-     Par défaut, textarea utilise une police à espacement constant */
-  font: 1em sans-serif;
-
-  /* Pour donner la même dimension à tous les champs textuels */
-  width: 300px;
-
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
-
-  /* Pour harmoniser l'apparence des bordures des champs textuels */
-  border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
-  /* Afin de réhausser les éléments actifs */
-  border-color: #000;
-}
-
-textarea {
-  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
-  vertical-align: top;
-
-  /* Pour donner assez d'espace pour entrer du texte */
-  height: 5em;
-
-  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
-     Cela ne marche pas avec tous les navigateurs  */
-  resize: vertical;
-}
-
-.button {
-  /* Pour positionner les boutons de la même manière que les champs textuels */
-  padding-left: 90px; /* même dimension que les étiquettes */
-}
-
-button {
-  /* Cette marge représente approximativement le même espace
-     que celui entre les étiquettes et les champs textuels */
-  margin-left: .5em;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}

- -

 

diff --git a/files/fr/learn/forms/your_first_form/example/index.md b/files/fr/learn/forms/your_first_form/example/index.md new file mode 100644 index 0000000000..d5268524e3 --- /dev/null +++ b/files/fr/learn/forms/your_first_form/example/index.md @@ -0,0 +1,105 @@ +--- +title: Exemple +slug: Learn/Forms/Your_first_form/Example +translation_of: Learn/Forms/Your_first_form/Example +original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple +--- +

Ceci est l'exemple pour l'article Mon premier formulaire HTML.

+ +

Un formulaire simple

+ +

Contenu HTML

+ +
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
+  <div>
+    <label for="nom">Nom :</label>
+    <input type="text" id="nom" name="user_name">
+  </div>
+
+  <div>
+    <label for="courriel">Courriel :</label>
+    <input type="email" id="courriel" name="user_email">
+  </div>
+
+  <div>
+    <label for="message">Message :</label>
+    <textarea id="message" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Envoyer le message</button>
+  </div>
+</form>
+ +

Contenu CSS

+ +
form {
+  /* Pour le centrer dans la page */
+  margin: 0 auto;
+  width: 400px;
+
+  /* Pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* Afin de s'assurer que tous les champs textuels utilisent la même police
+     Par défaut, textarea utilise une police à espacement constant */
+  font: 1em sans-serif;
+
+  /* Pour donner la même dimension à tous les champs textuels */
+  width: 300px;
+
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+
+  /* Pour harmoniser l'apparence des bordures des champs textuels */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* Afin de réhausser les éléments actifs */
+  border-color: #000;
+}
+
+textarea {
+  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
+  vertical-align: top;
+
+  /* Pour donner assez d'espace pour entrer du texte */
+  height: 5em;
+
+  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
+     Cela ne marche pas avec tous les navigateurs  */
+  resize: vertical;
+}
+
+.button {
+  /* Pour positionner les boutons de la même manière que les champs textuels */
+  padding-left: 90px; /* même dimension que les étiquettes */
+}
+
+button {
+  /* Cette marge représente approximativement le même espace
+     que celui entre les étiquettes et les champs textuels */
+  margin-left: .5em;
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}

+ +

 

diff --git a/files/fr/learn/forms/your_first_form/index.html b/files/fr/learn/forms/your_first_form/index.html deleted file mode 100644 index 4ee759f619..0000000000 --- a/files/fr/learn/forms/your_first_form/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Mon premier formulaire HTML -slug: Learn/Forms/Your_first_form -tags: - - Apprentissage - - Codage - - Débutant - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/Your_first_form -original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML ---- -

{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

- -

Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.
- -

Un formulaire HTML, qu'est-ce ?

- -

Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.

- -

Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.

- -

La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « Envoi des données de formulaire » plus loin dans ce module.

- -

Concevoir le formulaire

- -

Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :

- - - -

Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.

- -

Le croquis du formulaire que l'on veut créer

- -

Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.

- -

 Apprentissage actif : mise en œuvre de notre formulaire HTML

- -

Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.

- -

Avant de poursuivre, faites une copie locale de notre simple modèle HTML — vous y incorporerez votre formulaire.

- -

L'élément {{HTMLElement("form")}}

- -

Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme de bonne pratique.

- - - -
-

Note : Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article « Envoi des données de formulaire ».

-
- -

Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.

- -

Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}

- -

Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.

- -

En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.

- -
<form action="/ma-page-de-traitement" method="post">
-    <div>
-        <label for="name">Nom :</label>
-        <input type="text" id="name" name="user_name">
-    </div>
-    <div>
-        <label for="mail">e-mail :</label>
-        <input type="email" id="mail" name="user_mail">
-    </div>
-    <div>
-        <label for="msg">Message :</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-</form>
- -

Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut for sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : Comment structurer un formulaire HTML.

- -

Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut type. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des widgets natifs pour formulaire.

- - - -

Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut value de la manière suivante :

- -
<input type="text" value="par défaut cet élément sera renseigné avec ce texte">
- -

A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :

- -
<textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
- -

L'élément {{HTMLElement("button")}}

- -

Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante </form> :

- -
    <div class="button">
-        <button type="submit">Envoyer le message</button>
-    </div>
-
- -

Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : submit, reset ou button.

- - - -
-

Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.

-
- -

Mise en page élémentaire du formulaire

- -

Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.

- -

- -
-

Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).

-
- -

Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.

- -

Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :

- -
<style>
-
-</style>
- -

Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :

- -
form {
-  /* Uniquement centrer le formulaire sur la page */
-  margin: 0 auto;
-  width: 400px;
-  /* Encadré pour voir les limites du formulaire */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-form div + div {
-  margin-top: 1em;
-}
-
-label {
-  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input, textarea {
-  /* Pour s'assurer que tous les champs texte ont la même police.
-     Par défaut, les textarea ont une police monospace */
-  font: 1em sans-serif;
-
-  /* Pour que tous les champs texte aient la même dimension */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* Pour harmoniser le look & feel des bordures des champs texte */
-  border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
-  /* Pour souligner légèrement les éléments actifs */
-  border-color: #000;
-}
-
-textarea {
-  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
-  vertical-align: top;
-
-  /* Pour donner assez de place pour écrire du texte */
-  height: 5em;
-}
-
-.button {
-  /* Pour placer le bouton à la même position que les champs texte */
-  padding-left: 90px; /* même taille que les étiquettes */
-}
-
-button {
-  /* Cette marge supplémentaire représente grosso modo le même espace que celui
-     entre les étiquettes et les champs texte */
-  margin-left: .5em;
-}
- -

Désormais notre formulaire a une bien meilleure allure.

- -

- -
-

Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).

-
- -

Envoyer les données au serveur Web

- -

Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.

- -

L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs action et method.

- -

Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.

- -

Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :

- -
form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Nom :</label>
-    <input type="text" id="name" name="user_name" />
-  <div>
-  <div>
-    <label for="mail">E-mail :</label>
-    <input type="email" id="mail" name="user_email" />
-  </div>
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  ...
- -

Dans notre exemple, le formulaire enverra trois informations nommées respectivement « user_name », « user_email » et « user_message ». Ces informations seront envoyées à l'URL « /my-handling-form-page » avec la méthode HTTP POST.

- -

Du côté du serveur, le script à l'URL « /my-handling-form-page » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article Envoi des données de formulaire.

- -

Résumé

- -

Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :

- -

{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}

- -

Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.

- -

{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md new file mode 100644 index 0000000000..4ee759f619 --- /dev/null +++ b/files/fr/learn/forms/your_first_form/index.md @@ -0,0 +1,282 @@ +--- +title: Mon premier formulaire HTML +slug: Learn/Forms/Your_first_form +tags: + - Apprentissage + - Codage + - Débutant + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/Your_first_form +original_slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML +--- +

{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

+ +

Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.
+ +

Un formulaire HTML, qu'est-ce ?

+ +

Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.

+ +

Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.

+ +

La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « Envoi des données de formulaire » plus loin dans ce module.

+ +

Concevoir le formulaire

+ +

Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :

+ + + +

Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.

+ +

Le croquis du formulaire que l'on veut créer

+ +

Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.

+ +

 Apprentissage actif : mise en œuvre de notre formulaire HTML

+ +

Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.

+ +

Avant de poursuivre, faites une copie locale de notre simple modèle HTML — vous y incorporerez votre formulaire.

+ +

L'élément {{HTMLElement("form")}}

+ +

Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme de bonne pratique.

+ + + +
+

Note : Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article « Envoi des données de formulaire ».

+
+ +

Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.

+ +

Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}

+ +

Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.

+ +

En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.

+ +
<form action="/ma-page-de-traitement" method="post">
+    <div>
+        <label for="name">Nom :</label>
+        <input type="text" id="name" name="user_name">
+    </div>
+    <div>
+        <label for="mail">e-mail :</label>
+        <input type="email" id="mail" name="user_mail">
+    </div>
+    <div>
+        <label for="msg">Message :</label>
+        <textarea id="msg" name="user_message"></textarea>
+    </div>
+</form>
+ +

Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut for sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : Comment structurer un formulaire HTML.

+ +

Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut type. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des widgets natifs pour formulaire.

+ + + +

Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut value de la manière suivante :

+ +
<input type="text" value="par défaut cet élément sera renseigné avec ce texte">
+ +

A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :

+ +
<textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
+ +

L'élément {{HTMLElement("button")}}

+ +

Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante </form> :

+ +
    <div class="button">
+        <button type="submit">Envoyer le message</button>
+    </div>
+
+ +

Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : submit, reset ou button.

+ + + +
+

Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.

+
+ +

Mise en page élémentaire du formulaire

+ +

Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.

+ +

+ +
+

Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).

+
+ +

Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.

+ +

Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :

+ +
<style>
+
+</style>
+ +

Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :

+ +
form {
+  /* Uniquement centrer le formulaire sur la page */
+  margin: 0 auto;
+  width: 400px;
+  /* Encadré pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+form div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* Pour s'assurer que tous les champs texte ont la même police.
+     Par défaut, les textarea ont une police monospace */
+  font: 1em sans-serif;
+
+  /* Pour que tous les champs texte aient la même dimension */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Pour harmoniser le look & feel des bordures des champs texte */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* Pour souligner légèrement les éléments actifs */
+  border-color: #000;
+}
+
+textarea {
+  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
+  vertical-align: top;
+
+  /* Pour donner assez de place pour écrire du texte */
+  height: 5em;
+}
+
+.button {
+  /* Pour placer le bouton à la même position que les champs texte */
+  padding-left: 90px; /* même taille que les étiquettes */
+}
+
+button {
+  /* Cette marge supplémentaire représente grosso modo le même espace que celui
+     entre les étiquettes et les champs texte */
+  margin-left: .5em;
+}
+ +

Désormais notre formulaire a une bien meilleure allure.

+ +

+ +
+

Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).

+
+ +

Envoyer les données au serveur Web

+ +

Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.

+ +

L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs action et method.

+ +

Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.

+ +

Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :

+ +
form action="/my-handling-form-page" method="post">
+  <div>
+    <label for="name">Nom :</label>
+    <input type="text" id="name" name="user_name" />
+  <div>
+  <div>
+    <label for="mail">E-mail :</label>
+    <input type="email" id="mail" name="user_email" />
+  </div>
+  <div>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  ...
+ +

Dans notre exemple, le formulaire enverra trois informations nommées respectivement « user_name », « user_email » et « user_message ». Ces informations seront envoyées à l'URL « /my-handling-form-page » avec la méthode HTTP POST.

+ +

Du côté du serveur, le script à l'URL « /my-handling-form-page » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article Envoi des données de formulaire.

+ +

Résumé

+ +

Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :

+ +

{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}

+ +

Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.

+ +

{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/front-end_web_developer/index.html b/files/fr/learn/front-end_web_developer/index.html deleted file mode 100644 index 1656374720..0000000000 --- a/files/fr/learn/front-end_web_developer/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Développeur web front-end -slug: Learn/Front-end_web_developer -translation_of: Learn/Front-end_web_developer -original_slug: Apprendre/Front-end_web_developer ---- -

{{learnsidebar}}

- -

Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end!

- -

Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant.

- -

Sujets abordés

- -

Les sujets abordés sont :

- - - -

Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS.

- -

Prérequis

- -

Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.

- -

Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module Commencer avec le web.

- -

Obtenir de l'aide

- -

Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.

- -

Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article Apprendre et obtenir de l'aide vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre forum de discussion.

- -

Allons-y. Bonne chance !

- -

Le parcours d'apprentissage

- -

Pour commencer

- -

Temps nécessaire: 1–2 heures

- -

Prérequis

- -

Rien d'autre que des connaissances de base en informatique.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours.

- -

Guides fondamentaux

- - - -

Sémantique et structure avec HTML

- -

Temps nécessaire: 35–50 heures

- -

Prérequis

- -

Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Design et mise en page avec le CSS

- -

Temps nécessaire: 90–120 heures

- -

Prérequis

- -

Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier l'introduction au HTML d'abord.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Ressources complémentaires

- - - -

Interactivité avec JavaScript

- -

Temps nécessaire: 135–185 heures

- -

Prérequis

- -

ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'Introduction au HTML d'abord.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Formulaires web - Travailler avec les données des utilisateurs

- -

Temps nécessaire: 40–50 heures

- -

Prérequis

- -

Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Faire profiter le Web à tout le monde

- -

Temps nécessaire: 60–75 heures

- -

Prérequis

- -

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..

- -

Guides fondamentaux

- - - -

Outils modernes

- -

Temps nécessaire: 55–90 heures

- -

Prérequis

- -

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes.

- -

Guides fondamentaux

- - diff --git a/files/fr/learn/front-end_web_developer/index.md b/files/fr/learn/front-end_web_developer/index.md new file mode 100644 index 0000000000..1656374720 --- /dev/null +++ b/files/fr/learn/front-end_web_developer/index.md @@ -0,0 +1,190 @@ +--- +title: Développeur web front-end +slug: Learn/Front-end_web_developer +translation_of: Learn/Front-end_web_developer +original_slug: Apprendre/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end!

+ +

Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant.

+ +

Sujets abordés

+ +

Les sujets abordés sont :

+ + + +

Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS.

+ +

Prérequis

+ +

Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.

+ +

Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module Commencer avec le web.

+ +

Obtenir de l'aide

+ +

Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.

+ +

Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article Apprendre et obtenir de l'aide vous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre forum de discussion.

+ +

Allons-y. Bonne chance !

+ +

Le parcours d'apprentissage

+ +

Pour commencer

+ +

Temps nécessaire: 1–2 heures

+ +

Prérequis

+ +

Rien d'autre que des connaissances de base en informatique.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours.

+ +

Guides fondamentaux

+ + + +

Sémantique et structure avec HTML

+ +

Temps nécessaire: 35–50 heures

+ +

Prérequis

+ +

Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Design et mise en page avec le CSS

+ +

Temps nécessaire: 90–120 heures

+ +

Prérequis

+ +

Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier l'introduction au HTML d'abord.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Ressources complémentaires

+ + + +

Interactivité avec JavaScript

+ +

Temps nécessaire: 135–185 heures

+ +

Prérequis

+ +

ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'Introduction au HTML d'abord.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Formulaires web - Travailler avec les données des utilisateurs

+ +

Temps nécessaire: 40–50 heures

+ +

Prérequis

+ +

Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Faire profiter le Web à tout le monde

+ +

Temps nécessaire: 60–75 heures

+ +

Prérequis

+ +

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..

+ +

Guides fondamentaux

+ + + +

Outils modernes

+ +

Temps nécessaire: 55–90 heures

+ +

Prérequis

+ +

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes.

+ +

Guides fondamentaux

+ + diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.html b/files/fr/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index e4ea41e708..0000000000 --- a/files/fr/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Les bases des CSS -slug: Learn/Getting_started_with_the_web/CSS_basics -tags: - - Apprendre - - CSS - - Code CSS - - Débutant - - Styles - - Web -translation_of: Learn/Getting_started_with_the_web/CSS_basics -original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
- -

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?

- -

Donc, que sont les CSS, réellement ?

- -

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

- -
p {
-  color: red;
-}
- -

Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

- -

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).

- -
    -
  1. Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) : - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !

- -

Anatomie d'une règle CSS

- -

Regardons un peu plus en détails ce que nous avons écrit en CSS :

- -

Diagramme expliquant les différents éléments d'une déclaration CSS

- -

Cette structure s'appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

- -
-
Sélecteur
-
C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
-
Déclaration
-
C'est une règle simple comme color: red; qui détermine les propriétés de l'élément que l'on veut mettre en forme.
-
Propriétés
-
Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.
-
Valeur de la propriété
-
À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que red pour la propriété color).
-
- -

Les autres éléments importants de la syntaxe sont :

- - - -

Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Sélectionner plusieurs éléments

- -

Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

- -
p,li,h1 {
-  color: red;
-}
- -

Les différents types de sélecteurs

- -

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que les sélecteurs d'élément qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom du sélecteurCe qu'il sélectionneExemple
Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)Tous les éléments HTML d'un type donné.p
- sélectionne tous les <p>
Sélecteur d'IDL'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).#my-id
- sélectionne <p id="my-id"> ou <a id="my-id">
Sélecteur de classeLes éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe)..my-class
- sélectionne <p class="my-class"> et <a class="my-class!">
Sélecteur d'attributLes éléments de la page qui possèdent l'attribut donné.img[src]
- sélectionne <img src="monimage.png"> mais pas <img>
Sélecteur de pseudo-classeLes éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).a:hover
- sélectionne <a> mais uniquement quand le pointeur de la souris est au-dessus du lien.
- -

Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre guide sur les sélecteurs.

- -

Les polices (fontes) et le texte

- -

Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.

- -
    -
  1. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à : - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. Ensuite, supprimez la règle existante dans votre fichier style.css. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.
    3. -
  3. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec modèle avec la ligne fournie par Google Fonts qui contient font-family (font-family représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<html> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même font-size et font-family) : - 
    html {
-  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
-  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
-}
    - -
    -

    Note : Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.

    -
    -
    4. -
  4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (body) du document soit plus lisible : - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :

- -

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

- -

Boîtes, boîtes, encore et toujours des boîtes

- -

Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.

- -

a big stack of boxes or crates sat on top of one another

- -

C'est pour cette raison que l'architecture de CSS est principalement basée sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur la page, de cette façon :

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

Dans cette section, nous utilisons aussi :

- - - -

Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.

- -

Changer la couleur de la page

- -
html {
-  background-color: #00539F;
-}
- -

Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie lors de la conception de votre site.

- -

Mettre en forme le corps de page

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Occupons-nous de l'élément body. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une :

- - - -

Positionner le titre et le mettre en forme

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un style par défaut à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à margin: 0;.

- -

Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de html.

- -

Une propriété intéressante qu'on a utilisé ici est text-shadow. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :

- - - -

Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.

- -

Centrer l'image

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser margin: 0 auto, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments inline (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise display: block; pour que l'image se comporte comme un élément de bloc.

- -
-

Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.

-
- -

Conclusion

- -

Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir notre version finale ici) :

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple disponible sur GitHub.

- -

Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page Apprendre CSS.

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.md b/files/fr/learn/getting_started_with_the_web/css_basics/index.md new file mode 100644 index 0000000000..e4ea41e708 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.md @@ -0,0 +1,286 @@ +--- +title: Les bases des CSS +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - Apprendre + - CSS + - Code CSS + - Débutant + - Styles + - Web +translation_of: Learn/Getting_started_with_the_web/CSS_basics +original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
+ +

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?

+ +

Donc, que sont les CSS, réellement ?

+ +

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

+ +
p {
+  color: red;
+}
+ +

Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

+ +

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).

+ +
    +
  1. Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) : + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !

+ +

Anatomie d'une règle CSS

+ +

Regardons un peu plus en détails ce que nous avons écrit en CSS :

+ +

Diagramme expliquant les différents éléments d'une déclaration CSS

+ +

Cette structure s'appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

+ +
+
Sélecteur
+
C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
+
Déclaration
+
C'est une règle simple comme color: red; qui détermine les propriétés de l'élément que l'on veut mettre en forme.
+
Propriétés
+
Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.
+
Valeur de la propriété
+
À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que red pour la propriété color).
+
+ +

Les autres éléments importants de la syntaxe sont :

+ + + +

Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Sélectionner plusieurs éléments

+ +

Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

+ +
p,li,h1 {
+  color: red;
+}
+ +

Les différents types de sélecteurs

+ +

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que les sélecteurs d'élément qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom du sélecteurCe qu'il sélectionneExemple
Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)Tous les éléments HTML d'un type donné.p
+ sélectionne tous les <p>
Sélecteur d'IDL'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).#my-id
+ sélectionne <p id="my-id"> ou <a id="my-id">
Sélecteur de classeLes éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe)..my-class
+ sélectionne <p class="my-class"> et <a class="my-class!">
Sélecteur d'attributLes éléments de la page qui possèdent l'attribut donné.img[src]
+ sélectionne <img src="monimage.png"> mais pas <img>
Sélecteur de pseudo-classeLes éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).a:hover
+ sélectionne <a> mais uniquement quand le pointeur de la souris est au-dessus du lien.
+ +

Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre guide sur les sélecteurs.

+ +

Les polices (fontes) et le texte

+ +

Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.

+ +
    +
  1. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à : + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Ensuite, supprimez la règle existante dans votre fichier style.css. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.
    3. +
  3. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec modèle avec la ligne fournie par Google Fonts qui contient font-family (font-family représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<html> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même font-size et font-family) : + 
    html {
+  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
+}
    + +
    +

    Note : Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.

    +
    +
    4. +
  4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (body) du document soit plus lisible : + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Boîtes, boîtes, encore et toujours des boîtes

+ +

Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.

+ +

a big stack of boxes or crates sat on top of one another

+ +

C'est pour cette raison que l'architecture de CSS est principalement basée sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur la page, de cette façon :

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

Dans cette section, nous utilisons aussi :

+ + + +

Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.

+ +

Changer la couleur de la page

+ +
html {
+  background-color: #00539F;
+}
+ +

Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie lors de la conception de votre site.

+ +

Mettre en forme le corps de page

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Occupons-nous de l'élément body. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une :

+ + + +

Positionner le titre et le mettre en forme

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un style par défaut à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à margin: 0;.

+ +

Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de html.

+ +

Une propriété intéressante qu'on a utilisé ici est text-shadow. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :

+ + + +

Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.

+ +

Centrer l'image

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser margin: 0 auto, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments inline (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise display: block; pour que l'image se comporte comme un élément de bloc.

+ +
+

Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.

+
+ +

Conclusion

+ +

Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir notre version finale ici) :

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Si vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple disponible sur GitHub.

+ +

Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page Apprendre CSS.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index b405b8f078..0000000000 --- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Gérer les fichiers -slug: Learn/Getting_started_with_the_web/Dealing_with_files -tags: - - Création site - - Débutant - - Fichiers - - Guide - - HTML - - Site Web - - Theorie -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files -original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
- -

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.

- -

Où placer votre site web sur votre ordinateur ?

- -

Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.

- -
    -
  1. Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé projets-web (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.
    2. -
  2. À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler site-test (ou plus imaginatif).
    3. -
- -

Un rapide aparté sur la casse et l'espacement

- -

Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :

- -
    -
  1. Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement site-test/MonImage.jpg et que, dans un autre fichier, vous faites référence à site-test/monimage.jpg, cela peut ne pas fonctionner.
    2. -
  2. Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : mon-fichier.html vs. mon_fichier.html.
    3. -
- -

La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.

- -

Quelle structure mettre en place pour votre site web ?

- -

Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :

- -
    -
  1. index.html : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé index.html puis enregistrez‑le dans votre dossier site-test.
    2. -
  2. un dossier images : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé images dans votre dossier site-test.
    3. -
  3. un dossier styles : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé styles dans votre dossier site-test.
    4. -
  4. un dossier scripts : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé scripts dans votre dossier site-test.
    5. -
- -
-

Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !

-
- -

Les chemins de fichiers

- -

Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».

- -
    -
  1. Copiez l'image précédemment choisie dans votre dossier images.
    2. -
  2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page de test</title>
-  </head>
-  <body>
-    <img src="" alt="Mon image de test">
-  </body>
-</html>
    -
    3. -
  3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
    4. -
  4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
    5. -
  5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Quelques règles générales à propos des chemins de fichier :

- - - -

Pour le moment, c'est tout ce qu'il y a à savoir.

- -
-

Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..

-
- -

Autre chose ?

- -

C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md new file mode 100644 index 0000000000..b405b8f078 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -0,0 +1,112 @@ +--- +title: Gérer les fichiers +slug: Learn/Getting_started_with_the_web/Dealing_with_files +tags: + - Création site + - Débutant + - Fichiers + - Guide + - HTML + - Site Web + - Theorie +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
+ +

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.

+ +

Où placer votre site web sur votre ordinateur ?

+ +

Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.

+ +
    +
  1. Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé projets-web (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.
    2. +
  2. À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler site-test (ou plus imaginatif).
    3. +
+ +

Un rapide aparté sur la casse et l'espacement

+ +

Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :

+ +
    +
  1. Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement site-test/MonImage.jpg et que, dans un autre fichier, vous faites référence à site-test/monimage.jpg, cela peut ne pas fonctionner.
    2. +
  2. Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : mon-fichier.html vs. mon_fichier.html.
    3. +
+ +

La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.

+ +

Quelle structure mettre en place pour votre site web ?

+ +

Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :

+ +
    +
  1. index.html : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé index.html puis enregistrez‑le dans votre dossier site-test.
    2. +
  2. un dossier images : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé images dans votre dossier site-test.
    3. +
  3. un dossier styles : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé styles dans votre dossier site-test.
    4. +
  4. un dossier scripts : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé scripts dans votre dossier site-test.
    5. +
+ +
+

Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !

+
+ +

Les chemins de fichiers

+ +

Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».

+ +
    +
  1. Copiez l'image précédemment choisie dans votre dossier images.
    2. +
  2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+  </head>
+  <body>
+    <img src="" alt="Mon image de test">
+  </body>
+</html>
    +
    3. +
  3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
    4. +
  4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
    5. +
  5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Quelques règles générales à propos des chemins de fichier :

+ + + +

Pour le moment, c'est tout ce qu'il y a à savoir.

+ +
+

Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..

+
+ +

Autre chose ?

+ +

C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index 0a0cf668b6..0000000000 --- a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Le fonctionnement du Web -slug: Learn/Getting_started_with_the_web/How_the_Web_works -tags: - - Apprendre - - Client - - DNS - - Débutant - - HTTP - - IP - - Infrastructure - - Serveur - - TCP - - Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web ---- -
{{LearnSidebar}}
-{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
- -

Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.

- -

Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.

- -

Des clients et des serveurs

- -

Les ordinateurs qui se connectent au Web sont appelés des clients et des serveurs. Voici un diagramme simplifié qui illustre comment ils interagissent :

- -

- - - -

Les autres composants du Web

- -

Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.

- -

Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.

- -

- -

En plus du client et du serveur, nous devons aussi mentionner :

- - - -

Donc que se passe-t-il, exactement ?

- -

Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :

- -
    -
  1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).
    2. -
  2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
    3. -
  3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
    4. -
  4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
    5. -
- -

Des explications sur le DNS

- -

Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.

- -

Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.

- -

Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir 63.245.215.20 dans la barre d'adresse d'un nouvel onglet de votre navigateur.

- -

A domain name is just another form of an IP address

- -

Explications sur les paquets

- -

Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.

- -

Voir aussi

- - - -

Crédit

- -

Photo de rue : Street composing, par Kevin D.

- -

{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md new file mode 100644 index 0000000000..0a0cf668b6 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -0,0 +1,110 @@ +--- +title: Le fonctionnement du Web +slug: Learn/Getting_started_with_the_web/How_the_Web_works +tags: + - Apprendre + - Client + - DNS + - Débutant + - HTTP + - IP + - Infrastructure + - Serveur + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web +--- +
{{LearnSidebar}}
+{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
+ +

Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.

+ +

Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.

+ +

Des clients et des serveurs

+ +

Les ordinateurs qui se connectent au Web sont appelés des clients et des serveurs. Voici un diagramme simplifié qui illustre comment ils interagissent :

+ +

+ + + +

Les autres composants du Web

+ +

Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.

+ +

Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.

+ +

+ +

En plus du client et du serveur, nous devons aussi mentionner :

+ + + +

Donc que se passe-t-il, exactement ?

+ +

Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :

+ +
    +
  1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).
    2. +
  2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
    3. +
  3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
    4. +
  4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
    5. +
+ +

Des explications sur le DNS

+ +

Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.

+ +

Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.

+ +

Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir 63.245.215.20 dans la barre d'adresse d'un nouvel onglet de votre navigateur.

+ +

A domain name is just another form of an IP address

+ +

Explications sur les paquets

+ +

Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.

+ +

Voir aussi

+ + + +

Crédit

+ +

Photo de rue : Street composing, par Kevin D.

+ +

{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.html b/files/fr/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index b0a4bab53f..0000000000 --- a/files/fr/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Les bases du HTML -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - Apprendre - - Bases HTML - - Code HTML - - Débutant - - HTML - - Site Web -translation_of: Learn/Getting_started_with_the_web/HTML_basics -original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}
- -

HyperText Markup Language (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.

- -

Qu'est-ce que HTML, réellement ?

- -

HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'{{Glossary("element", "éléments")}}, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :

- -
Mon chat est très grincheux
- -

Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :

- -
<p>Mon chat est très grincheux</p>
- -

Anatomie d'un élément HTML

- -

Regardons de plus près cet élément paragraphe :

- -

Diagramme décrivant la structure d'un élément HTML

- -

Les composants principaux de notre élément sont :

- -
    -
  1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p »), entre deux chevrons. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
    2. -
  2. La balise fermante : ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.
    3. -
  3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement du texte.
    4. -
  4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.
    5. -
- -

Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :

- -

Diagramme explicitant un attribut

- -

Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.

- -

Un attribut doit toujours avoir :

- -
    -
  1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ;
    2. -
  2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;
    3. -
  3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.
    4. -
- -

Imbriquer des éléments

- -

Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'imbrication. Par exemple, si vous souhaitez montrer que votre chat est très grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :

- -
<p>Mon chat est <strong>très</strong> grincheux.</p>
- -

Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :

- -
<p>Mon chat est <strong>très grincheux.</p></strong>
- -

Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !

- -

Les éléments vides

- -

Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :

- -
<img src="images/firefox-icon.png" alt="Mon image test" />
- -

Cet élément contient deux attributs mais les balises ouvrante <img> et fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.

- -

Anatomie d'un document HTML

- -

Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier index.html (qu'on a créé dans l'article Gérer les fichiers) :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page de test</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="Mon image de test">
-  </body>
-</html>
- -

Cet exemple contient :

- - - -

Images

- -

Regardons à nouveau l'élément image :

- -
<img src="images/firefox-icon.png" alt="Mon image de test">
- -

Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.

- -

Nous avons aussi utilisé l'attribut alt (pour alternatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :

- -
    -
  1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;
    2. -
  2. quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut src et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
    3. -
- -

Mon image de test

- -

Le point important qu'il faut retenir est que l'attribut est utilisé pour décrire l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».

- -

Essayez d'améliorer le texte alternatif pour l'image maintenant.

- -
-

Note : Pour plus d'informations sur l'accessibilité, vous trouverez la section Accessibilité de MDN.

-
- -

Baliser le texte

- -

Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte.

- -

Les titres

- -

Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement :

- -
<h1>Mon titre principal</h1>
-<h2>Mon titre de section</h2>
-<h3>Mon sous-titre</h3>
-<h4>Mon sous-sous-titre</h4>
- -

Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML.

- -

Les paragraphes

- -

Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :

- -
<p>Voici un paragraphe</p>
- -

Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé à quoi ressemblera votre site web. Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément <img>.

- -

Les listes

- -

Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :

- -
    -
  1. Les listes non-ordonnées sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (ul signifie unordered list liste non-ordonnée en anglais)
    2. -
  2. Les listes ordonnées sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (ol signifie ordered list liste ordonnée en anglais)
    3. -
- -

Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (list item).

- -

Par exemple, si on souhaite modifier un paragraphe en une liste :

- -
<p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p>
- -

On pourrait faire :

- -
<p>Mozilla est une communauté mondiale composée de </p>
-
-<ul>
-  <li>technologues</li>
-  <li>chercheurs</li>
-  <li>bâtisseurs</li>
-</ul>
-
-<p>travaillant ensemble...</p>
- -

Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.

- -

Les liens

- -

Les liens sont très importants, ce sont eux qui font que le web est une toile sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le a est un raccourci pour « ancre »). Pour transformer du texte en un lien, suivez ces étapes :

- -
    -
  1. Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ».
    2. -
  2. Encadrez le texte dans un élément <a> : - 
    <a>Manifeste Mozilla</a>
    -
    3. -
  3. Fournissez un attribut href pour l'élément <a>, de cette façon : - 
    <a href="">Manifeste Mozilla</a>
    -
    4. -
  4. Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs : - 
    <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
    -
    5. -
- -

Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.

- -
-

Note : href peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français.

-
- -

Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.

- -

Conclusion

- -

Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également la voir ici) :
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec l'exemple fini disponible sur GitHub.

- -

Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page Apprendre HTML.

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.md b/files/fr/learn/getting_started_with_the_web/html_basics/index.md new file mode 100644 index 0000000000..b0a4bab53f --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.md @@ -0,0 +1,229 @@ +--- +title: Les bases du HTML +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Apprendre + - Bases HTML + - Code HTML + - Débutant + - HTML + - Site Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}
+ +

HyperText Markup Language (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.

+ +

Qu'est-ce que HTML, réellement ?

+ +

HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'{{Glossary("element", "éléments")}}, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :

+ +
Mon chat est très grincheux
+ +

Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :

+ +
<p>Mon chat est très grincheux</p>
+ +

Anatomie d'un élément HTML

+ +

Regardons de plus près cet élément paragraphe :

+ +

Diagramme décrivant la structure d'un élément HTML

+ +

Les composants principaux de notre élément sont :

+ +
    +
  1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p »), entre deux chevrons. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
    2. +
  2. La balise fermante : ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.
    3. +
  3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement du texte.
    4. +
  4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.
    5. +
+ +

Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :

+ +

Diagramme explicitant un attribut

+ +

Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.

+ +

Un attribut doit toujours avoir :

+ +
    +
  1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ;
    2. +
  2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;
    3. +
  3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.
    4. +
+ +

Imbriquer des éléments

+ +

Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'imbrication. Par exemple, si vous souhaitez montrer que votre chat est très grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :

+ +
<p>Mon chat est <strong>très</strong> grincheux.</p>
+ +

Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :

+ +
<p>Mon chat est <strong>très grincheux.</p></strong>
+ +

Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !

+ +

Les éléments vides

+ +

Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :

+ +
<img src="images/firefox-icon.png" alt="Mon image test" />
+ +

Cet élément contient deux attributs mais les balises ouvrante <img> et fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.

+ +

Anatomie d'un document HTML

+ +

Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier index.html (qu'on a créé dans l'article Gérer les fichiers) :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Mon image de test">
+  </body>
+</html>
+ +

Cet exemple contient :

+ + + +

Images

+ +

Regardons à nouveau l'élément image :

+ +
<img src="images/firefox-icon.png" alt="Mon image de test">
+ +

Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.

+ +

Nous avons aussi utilisé l'attribut alt (pour alternatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :

+ +
    +
  1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;
    2. +
  2. quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut src et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
    3. +
+ +

Mon image de test

+ +

Le point important qu'il faut retenir est que l'attribut est utilisé pour décrire l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».

+ +

Essayez d'améliorer le texte alternatif pour l'image maintenant.

+ +
+

Note : Pour plus d'informations sur l'accessibilité, vous trouverez la section Accessibilité de MDN.

+
+ +

Baliser le texte

+ +

Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte.

+ +

Les titres

+ +

Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement :

+ +
<h1>Mon titre principal</h1>
+<h2>Mon titre de section</h2>
+<h3>Mon sous-titre</h3>
+<h4>Mon sous-sous-titre</h4>
+ +

Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML.

+ +

Les paragraphes

+ +

Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :

+ +
<p>Voici un paragraphe</p>
+ +

Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé à quoi ressemblera votre site web. Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément <img>.

+ +

Les listes

+ +

Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :

+ +
    +
  1. Les listes non-ordonnées sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (ul signifie unordered list liste non-ordonnée en anglais)
    2. +
  2. Les listes ordonnées sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (ol signifie ordered list liste ordonnée en anglais)
    3. +
+ +

Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (list item).

+ +

Par exemple, si on souhaite modifier un paragraphe en une liste :

+ +
<p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p>
+ +

On pourrait faire :

+ +
<p>Mozilla est une communauté mondiale composée de </p>
+
+<ul>
+  <li>technologues</li>
+  <li>chercheurs</li>
+  <li>bâtisseurs</li>
+</ul>
+
+<p>travaillant ensemble...</p>
+ +

Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.

+ +

Les liens

+ +

Les liens sont très importants, ce sont eux qui font que le web est une toile sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le a est un raccourci pour « ancre »). Pour transformer du texte en un lien, suivez ces étapes :

+ +
    +
  1. Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ».
    2. +
  2. Encadrez le texte dans un élément <a> : + 
    <a>Manifeste Mozilla</a>
    +
    3. +
  3. Fournissez un attribut href pour l'élément <a>, de cette façon : + 
    <a href="">Manifeste Mozilla</a>
    +
    4. +
  4. Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs : + 
    <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
    +
    5. +
+ +

Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.

+ +
+

Note : href peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français.

+
+ +

Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.

+ +

Conclusion

+ +

Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également la voir ici) :
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec l'exemple fini disponible sur GitHub.

+ +

Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page Apprendre HTML.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/index.html b/files/fr/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 9d4b584ac2..0000000000 --- a/files/fr/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Commencer avec le Web -slug: Learn/Getting_started_with_the_web -tags: - - CSS - - Conception - - Débutant - - Guide - - HTML - - Index - - Theorie - - Web - - publication -translation_of: Learn/Getting_started_with_the_web -original_slug: Apprendre/Commencer_avec_le_web ---- -
{{LearnSidebar}}
- -

Commencer avec le Web est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.

- -

L'histoire de votre premier site web

- -

Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.

- -

En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y !

- -

Installer les outils de base

- -

Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans cet article nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web.

- -

Quel sera l'aspect de votre site ?

- -

Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans cet article, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.

- -

Gestion des fichiers

- -

Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans cet article, nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web.

- -

Les bases de HTML

- -

Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, Les bases du HTML vous donne assez d'informations pour que vous soyez un familier du HTML.

- -

Les bases des CSS

- -

Les Cascading Stylesheets (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? « Les bases des CSS » vous apprendra tout ce dont vous avez besoin pour commencer.

- -

Les bases de JavaScript

- -

JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. Les bases de JavaScript vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.

- -

Publier votre site web

- -

Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. Publier votre site Web décrit comment mettre en ligne votre site web avec un effort minimum.

- -

Le fonctionnement du Web

- -

Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. Le fonctionnement du Web décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.

- -

Voir aussi

- -

Le Web démystifié : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par Jérémie Patonnier.

diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md new file mode 100644 index 0000000000..9d4b584ac2 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/index.md @@ -0,0 +1,61 @@ +--- +title: Commencer avec le Web +slug: Learn/Getting_started_with_the_web +tags: + - CSS + - Conception + - Débutant + - Guide + - HTML + - Index + - Theorie + - Web + - publication +translation_of: Learn/Getting_started_with_the_web +original_slug: Apprendre/Commencer_avec_le_web +--- +
{{LearnSidebar}}
+ +

Commencer avec le Web est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.

+ +

L'histoire de votre premier site web

+ +

Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.

+ +

En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y !

+ +

Installer les outils de base

+ +

Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans cet article nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web.

+ +

Quel sera l'aspect de votre site ?

+ +

Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans cet article, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.

+ +

Gestion des fichiers

+ +

Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans cet article, nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web.

+ +

Les bases de HTML

+ +

Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, Les bases du HTML vous donne assez d'informations pour que vous soyez un familier du HTML.

+ +

Les bases des CSS

+ +

Les Cascading Stylesheets (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? « Les bases des CSS » vous apprendra tout ce dont vous avez besoin pour commencer.

+ +

Les bases de JavaScript

+ +

JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. Les bases de JavaScript vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.

+ +

Publier votre site web

+ +

Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. Publier votre site Web décrit comment mettre en ligne votre site web avec un effort minimum.

+ +

Le fonctionnement du Web

+ +

Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. Le fonctionnement du Web décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.

+ +

Voir aussi

+ +

Le Web démystifié : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par Jérémie Patonnier.

diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index 63af1ab636..0000000000 --- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Installation des outils de base -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Apprendre - - Débutant - - Navigateurs - - Outils - - Setup - - Web - - Éditeurs de texte -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software -original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base ---- -
{{LearnSidebar}}
-{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
- -

Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.

- -

Quels outils utilisent les professionnels ?

- - - -

De quels outils ai-je besoin tout de suite ?

- -

Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.

- -

Installer un éditeur de texte

- -

Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose Notepad et macOS, TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut.

- -

Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.

- -

Installer un navigateur moderne

- -

Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :

- - - -

Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.

- -

Note: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.

- -

Installer un serveur web local

- -

Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: Comment installer en local un serveur de tests ?

- -

{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md new file mode 100644 index 0000000000..63af1ab636 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -0,0 +1,75 @@ +--- +title: Installation des outils de base +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - Apprendre + - Débutant + - Navigateurs + - Outils + - Setup + - Web + - Éditeurs de texte +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +original_slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base +--- +
{{LearnSidebar}}
+{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
+ +

Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.

+ +

Quels outils utilisent les professionnels ?

+ + + +

De quels outils ai-je besoin tout de suite ?

+ +

Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.

+ +

Installer un éditeur de texte

+ +

Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose Notepad et macOS, TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut.

+ +

Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.

+ +

Installer un navigateur moderne

+ +

Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :

+ + + +

Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.

+ +

Note: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.

+ +

Installer un serveur web local

+ +

Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: Comment installer en local un serveur de tests ?

+ +

{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 0b9cbe5215..0000000000 --- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Les bases de JavaScript -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - Apprendre - - Code JavaScript - - Débutant - - JavaScript - - Web -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
- -

JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.

- -

Qu'est le JavaScript, réellement ?

- -

{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

- -

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

- -

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

- - - -

Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.

- -

Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !

- -

Un exemple « hello world »

- -

Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.

- -

Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).

- -
-

Attention : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.

-
- -
    -
  1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier scripts que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
    2. -
  2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> : - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
    4. -
  4. Maintenant ajoutez le code suivant dans main.js : - 
    let myHeading = document.querySelector('h1');
-myHeading.textContent = 'Bonjour, monde !';
    -
    5. -
  5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
    6. -
- -
-

Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.

-
- -

Que s'est-il passé ?

- -

Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée myHeading. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

- -

Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable myHeading (elle représente le contenu du titre).

- -
-

Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.

-
- -

Les bases du JavaScript en accéléré

- -

Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !

- -
-

Attention : Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents dans le navigateur.

-
- -

Variables

- -

Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

- -
let myVariable;
- -
-

Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.

-
- -
-

Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.

-
- -
-

Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !

-
- -

Une fois une variable déclarée, vous pouvez lui donner une valeur :

- -
myVariable = 'Bob';
- -

Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :

- -
let myVariable = 'Bob';
- -

Vous retrouvez la valeur en appelant simplement la variable par son nom :

- -
myVariable;
- -

Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :

- -
let myVariable = 'Bob';
-myVariable = 'Étienne';
- -

Notez que les variables peuvent contenir des types différents de données :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableExplicationExemple
{{Glossary("String", "Chaîne de caractères")}}Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.let myVariable = 'Bob';
{{Glossary( "Number" ,"Nombre")}}Un nombre. Les nombres ne sont pas entre guillemets.let myVariable = 10;
{{Glossary( "Boolean" ,"Booléen")}}Une valeur qui signifie vrai ou faux. true/false sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.let myVariable = true;
{{Glossary( "Array" ,"Tableau")}}Une structure qui permet de stocker plusieurs valeurs dans une seule variable. -

let myVariable = [1,'Bob','Étienne',10];
- Référez‑vous à chaque élément du tableau ainsi : myVariable[0], myVariable[1], etc.

-
{{Glossary( "Object" ,"Objet")}}À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.let myVariable = document.querySelector('h1'); tous les exemples au dessus sont aussi des objets.
- -

Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

- -

Commentaires

- -

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

- -
/*
-Tout ce qui est écrit ici est entre commentaires.
-*/
- -

Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :

- -
// Voici un commentaire
- -

Opérateurs

- -

Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpérateurExplicationSymbole(s)Exemple
AdditionUtilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.+6 + 9;
- "Bonjour " + "monde !";
Soustraction, multiplication, divisionLes opérations mathématiques de base.-, *, /9 - 3;
- 8 * 2; // pour multiplier, on utilise un astérisque
- 9 / 3;
AssignationOn a déjà vu cet opérateur : il affecte une valeur à une variable.=let myVariable = 'Bob';
ÉgalitéTeste si deux valeurs sont égales et renvoie un booléen true/false comme résultat.===let myVariable = 3;
- myVariable === 4;
Négation , N'égale pas -

Renvoie la valeur logique opposée à ce qu'il précède ; il change true en false, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs ne sont pas égales.

- 		!, !== -

L'expression de base est vraie, mais la comparaison renvoie false parce que nous la nions :

- -

let myVariable = 3;
- !(myVariable === 3);

- -

On teste ici que "myVariable n'est PAS égale à 3". Cela renvoie false, car elle est égale à 3.

- -

let myVariable = 3;
- myVariable !== 3;

-
- -

Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.

- -
-

Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.

-
- -

Structures conditionnelles

- -

Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est if ... else. Par exemple :

- -
let iceCream = 'chocolat';
-if (iceCream === 'chocolat') {
-  alert("J'adore la glace au chocolat !");
-} else {
-  alert("Ooooh, mais j'aurais préféré au chocolat.");
-}
- -

L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.

- -

Fonctions

- -

Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :

- -
    -
  1. - 
    let myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('Bonjour !');
    -
    3. -
- -

Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.

- -

Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.

- -

Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.

- -

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

- -
function multiply(num1,num2) {
-  let result = num1 * num2;
-  return result;
-}
- -

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

- -
multiply(4, 7);
-multiply(20, 20);
-multiply(0.5, 3);
- -
-

Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).

-
- -

Événements

- -

Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est l'événement cliquer, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :

- -
document.querySelector('html').addEventListener('click', function() {
-    alert('Aïe, arrêtez de cliquer !!');
-});
- -

Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire onclick qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.

- -

On pourra noter que :

- -
document.querySelector('html').addEventListener('click', function() {});
- -

est équivalent à :

- -
let myHTML = document.querySelector('html');
-myHTML.addEventListener('click', function() {});
- -

La première syntaxe est simplement plus courte.

- -

Booster notre site web

- -

Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.

- -

Ajouter un changeur d'image

- -

Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.

- -
    -
  1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.
    2. -
  2. Enregistrez cette image dans votre dossier images.
    3. -
  3. Renommez cette image « firefox2.png » (sans les guillemets).
    4. -
  4. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : - 
    let myImage = document.querySelector('img');
-
-myImage.addEventListener('click', function() {
-    let mySrc = myImage.getAttribute('src');
-    if (mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute('src', 'images/firefox2.png');
-    } else {
-      myImage.setAttribute('src', 'images/firefox-icon.png');
-    }
-});
    -
    5. -
  5. Sauvegardez tous les fichiers puis chargez index.html dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !
    6. -
- -

Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable myImage. Ensuite, nous égalons la propriété du gestionnaire d'événement onclick de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :

- -
    -
  1. nous récupèrons la valeur de l'attribut src de l'image.
    2. -
  2. nous utilisons une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale : -
      -
    1. si c'est le cas, nous changeons la valeur de src et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.
      2. -
    2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de src revient à sa valeur initiale.
      3. -
    -
    3. -
- -

Ajouter un message d'accueil personnalisé

- -

Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'API Web Storage. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

- -
    -
  1. Dans le fichier index.html, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : - - 
    <button>Changer d'utilisateur</button>
    -
    2. -
  2. Dans le fichier main.js, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : - 
    let myButton = document.querySelector('button');
-let myHeading = document.querySelector('h1');
    -
    3. -
  3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : - 
    function setUserName() {
-  let myName = prompt('Veuillez saisir votre nom.');
-  localStorage.setItem('nom', myName);
-  myHeading.textContent = 'Mozilla est cool, ' + myName;
-}
    - Cette fonction utilise la fonction prompt() qui affiche une boîte de dialogue, un peu comme alert() sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur OK. Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée localStorage. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction setItem() de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé 'nom'. La valeur stockée ici est la valeur de la variable myName qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété textContent du titre pour lui affecter un nouveau contenu.
    4. -
  4. Ajoutons ensuite ce bloc if ... else. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur : - 
    if (!localStorage.getItem('nom')) {
-  setUserName();
-} else {
-  let storedName = localStorage.getItem('nom');
-  myHeading.textContent = 'Mozilla est cool, ' + storedName;
-}
    - Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non, la fonction setUserName() est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode getItem() et on définit le contenu de textContent pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  setUserName().
    5. -
  5. Enfin, on associe le gestionnaire onclick au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction setUserName(). Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: - 
    myButton.addEventListener('click', function() {
-  setUserName();
-});
-
    -
    6. -
- -

Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API localStorage, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !

- -

Conclusion

- -

Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous avons obtenue ici) :

- -

- -

Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.

- -

Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser notre Guide JavaScript.

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md new file mode 100644 index 0000000000..0b9cbe5215 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md @@ -0,0 +1,411 @@ +--- +title: Les bases de JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Apprendre + - Code JavaScript + - Débutant + - JavaScript + - Web +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
+ +

JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.

+ +

Qu'est le JavaScript, réellement ?

+ +

{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

+ +

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

+ +

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

+ + + +

Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.

+ +

Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !

+ +

Un exemple « hello world »

+ +

Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.

+ +

Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).

+ +
+

Attention : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.

+
+ +
    +
  1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier scripts que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
    2. +
  2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> : + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
    4. +
  4. Maintenant ajoutez le code suivant dans main.js : + 
    let myHeading = document.querySelector('h1');
+myHeading.textContent = 'Bonjour, monde !';
    +
    5. +
  5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
    6. +
+ +
+

Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.

+
+ +

Que s'est-il passé ?

+ +

Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée myHeading. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

+ +

Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable myHeading (elle représente le contenu du titre).

+ +
+

Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.

+
+ +

Les bases du JavaScript en accéléré

+ +

Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !

+ +
+

Attention : Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents dans le navigateur.

+
+ +

Variables

+ +

Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

+ +
let myVariable;
+ +
+

Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.

+
+ +
+

Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.

+
+ +
+

Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !

+
+ +

Une fois une variable déclarée, vous pouvez lui donner une valeur :

+ +
myVariable = 'Bob';
+ +

Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :

+ +
let myVariable = 'Bob';
+ +

Vous retrouvez la valeur en appelant simplement la variable par son nom :

+ +
myVariable;
+ +

Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :

+ +
let myVariable = 'Bob';
+myVariable = 'Étienne';
+ +

Notez que les variables peuvent contenir des types différents de données :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplicationExemple
{{Glossary("String", "Chaîne de caractères")}}Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.let myVariable = 'Bob';
{{Glossary( "Number" ,"Nombre")}}Un nombre. Les nombres ne sont pas entre guillemets.let myVariable = 10;
{{Glossary( "Boolean" ,"Booléen")}}Une valeur qui signifie vrai ou faux. true/false sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.let myVariable = true;
{{Glossary( "Array" ,"Tableau")}}Une structure qui permet de stocker plusieurs valeurs dans une seule variable. +

let myVariable = [1,'Bob','Étienne',10];
+ Référez‑vous à chaque élément du tableau ainsi : myVariable[0], myVariable[1], etc.

+
{{Glossary( "Object" ,"Objet")}}À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.let myVariable = document.querySelector('h1'); tous les exemples au dessus sont aussi des objets.
+ +

Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

+ +

Commentaires

+ +

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

+ +
/*
+Tout ce qui est écrit ici est entre commentaires.
+*/
+ +

Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :

+ +
// Voici un commentaire
+ +

Opérateurs

+ +

Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurExplicationSymbole(s)Exemple
AdditionUtilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.+6 + 9;
+ "Bonjour " + "monde !";
Soustraction, multiplication, divisionLes opérations mathématiques de base.-, *, /9 - 3;
+ 8 * 2; // pour multiplier, on utilise un astérisque
+ 9 / 3;
AssignationOn a déjà vu cet opérateur : il affecte une valeur à une variable.=let myVariable = 'Bob';
ÉgalitéTeste si deux valeurs sont égales et renvoie un booléen true/false comme résultat.===let myVariable = 3;
+ myVariable === 4;
Négation , N'égale pas +

Renvoie la valeur logique opposée à ce qu'il précède ; il change true en false, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs ne sont pas égales.

+ 		!, !== +

L'expression de base est vraie, mais la comparaison renvoie false parce que nous la nions :

+ +

let myVariable = 3;
+ !(myVariable === 3);

+ +

On teste ici que "myVariable n'est PAS égale à 3". Cela renvoie false, car elle est égale à 3.

+ +

let myVariable = 3;
+ myVariable !== 3;

+
+ +

Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.

+ +
+

Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.

+
+ +

Structures conditionnelles

+ +

Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est if ... else. Par exemple :

+ +
let iceCream = 'chocolat';
+if (iceCream === 'chocolat') {
+  alert("J'adore la glace au chocolat !");
+} else {
+  alert("Ooooh, mais j'aurais préféré au chocolat.");
+}
+ +

L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.

+ +

Fonctions

+ +

Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :

+ +
    +
  1. + 
    let myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('Bonjour !');
    +
    3. +
+ +

Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.

+ +

Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.

+ +

Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.

+ +

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

+ +
function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}
+ +

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

+ +
multiply(4, 7);
+multiply(20, 20);
+multiply(0.5, 3);
+ +
+

Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).

+
+ +

Événements

+ +

Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est l'événement cliquer, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :

+ +
document.querySelector('html').addEventListener('click', function() {
+    alert('Aïe, arrêtez de cliquer !!');
+});
+ +

Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire onclick qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.

+ +

On pourra noter que :

+ +
document.querySelector('html').addEventListener('click', function() {});
+ +

est équivalent à :

+ +
let myHTML = document.querySelector('html');
+myHTML.addEventListener('click', function() {});
+ +

La première syntaxe est simplement plus courte.

+ +

Booster notre site web

+ +

Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.

+ +

Ajouter un changeur d'image

+ +

Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.

+ +
    +
  1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.
    2. +
  2. Enregistrez cette image dans votre dossier images.
    3. +
  3. Renommez cette image « firefox2.png » (sans les guillemets).
    4. +
  4. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : + 
    let myImage = document.querySelector('img');
+
+myImage.addEventListener('click', function() {
+    let mySrc = myImage.getAttribute('src');
+    if (mySrc === 'images/firefox-icon.png') {
+      myImage.setAttribute('src', 'images/firefox2.png');
+    } else {
+      myImage.setAttribute('src', 'images/firefox-icon.png');
+    }
+});
    +
    5. +
  5. Sauvegardez tous les fichiers puis chargez index.html dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !
    6. +
+ +

Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable myImage. Ensuite, nous égalons la propriété du gestionnaire d'événement onclick de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :

+ +
    +
  1. nous récupèrons la valeur de l'attribut src de l'image.
    2. +
  2. nous utilisons une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale : +
      +
    1. si c'est le cas, nous changeons la valeur de src et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.
      2. +
    2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de src revient à sa valeur initiale.
      3. +
    +
    3. +
+ +

Ajouter un message d'accueil personnalisé

+ +

Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'API Web Storage. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

+ +
    +
  1. Dans le fichier index.html, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : + + 
    <button>Changer d'utilisateur</button>
    +
    2. +
  2. Dans le fichier main.js, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : + 
    let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');
    +
    3. +
  3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : + 
    function setUserName() {
+  let myName = prompt('Veuillez saisir votre nom.');
+  localStorage.setItem('nom', myName);
+  myHeading.textContent = 'Mozilla est cool, ' + myName;
+}
    + Cette fonction utilise la fonction prompt() qui affiche une boîte de dialogue, un peu comme alert() sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur OK. Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée localStorage. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction setItem() de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé 'nom'. La valeur stockée ici est la valeur de la variable myName qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété textContent du titre pour lui affecter un nouveau contenu.
    4. +
  4. Ajoutons ensuite ce bloc if ... else. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur : + 
    if (!localStorage.getItem('nom')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('nom');
+  myHeading.textContent = 'Mozilla est cool, ' + storedName;
+}
    + Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non, la fonction setUserName() est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode getItem() et on définit le contenu de textContent pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  setUserName().
    5. +
  5. Enfin, on associe le gestionnaire onclick au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction setUserName(). Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: + 
    myButton.addEventListener('click', function() {
+  setUserName();
+});
+
    +
    6. +
+ +

Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API localStorage, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !

+ +

Conclusion

+ +

Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous avons obtenue ici) :

+ +

+ +

Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.

+ +

Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser notre Guide JavaScript.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index 49b297e686..0000000000 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Publier votre site web -slug: Learn/Getting_started_with_the_web/Publishing_your_website -tags: - - Apprendre - - Débutant - - Codage - - FTP - - GitHub - - Google App Engine - - Web - - Publier - - Serveur Web -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website -original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
- -

Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.

- -

Quelles sont les options ?

- -

La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis nous vous présenterons une méthode actuellement fonctionnelle.

- -

Trouver un hébergement et un nom de domaine

- -

Pour avoir plus de contrôle sur le contenu et l'apparence du site, la plupart des gens choisissent d'acheter un hébergement web et un nom de domaine :

- - - -

De nombreux sites professionnels sont mis en ligne de cette façon.

- -

En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de transfert de fichiers (FTP)")}} (voir Combien ça coûte : les logiciels pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :

- -

- -

Suggestions pour trouver hébergement et domaines

- - - -

Utiliser un outil en ligne comme GitHub ou Google App Engine

- -

Certains outils vous permettent de publier votre site web en ligne :

- - - -

Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités.

- -

Utiliser un EDI web tel que CodePen

- -

Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web — le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).

- -

Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :

- - - -

- -

Publier via GitHub

- -

Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.

- -
    -
  1. Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
    2. -
  2. Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
    3. -
  3. Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera bobsmith.github.io.
    - Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
    4. -
  4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur Commit changes. -
    -

    Note : Assurez-vous que votre dossier comporte bien un fichier index.html.

    -
    -
    5. -
  5. Maintenant, naviguez jusqu'à username.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur chrisdavidmills, allez à chrisdavidmills.github.io. -
    -

    Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.

    -
    -
    6. -
- -

Pour en savoir plus, voyez GitHub Pages Help.

- -

Lectures pour approfondir

- - - -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md new file mode 100644 index 0000000000..49b297e686 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md @@ -0,0 +1,123 @@ +--- +title: Publier votre site web +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Apprendre + - Débutant + - Codage + - FTP + - GitHub + - Google App Engine + - Web + - Publier + - Serveur Web +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +original_slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
+ +

Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.

+ +

Quelles sont les options ?

+ +

La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant, puis nous vous présenterons une méthode actuellement fonctionnelle.

+ +

Trouver un hébergement et un nom de domaine

+ +

Pour avoir plus de contrôle sur le contenu et l'apparence du site, la plupart des gens choisissent d'acheter un hébergement web et un nom de domaine :

+ + + +

De nombreux sites professionnels sont mis en ligne de cette façon.

+ +

En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de transfert de fichiers (FTP)")}} (voir Combien ça coûte : les logiciels pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :

+ +

+ +

Suggestions pour trouver hébergement et domaines

+ + + +

Utiliser un outil en ligne comme GitHub ou Google App Engine

+ +

Certains outils vous permettent de publier votre site web en ligne :

+ + + +

Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités.

+ +

Utiliser un EDI web tel que CodePen

+ +

Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web — le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).

+ +

Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :

+ + + +

+ +

Publier via GitHub

+ +

Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.

+ +
    +
  1. Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
    2. +
  2. Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
    3. +
  3. Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera bobsmith.github.io.
    + Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
    4. +
  4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur Commit changes. +
    +

    Note : Assurez-vous que votre dossier comporte bien un fichier index.html.

    +
    +
    5. +
  5. Maintenant, naviguez jusqu'à username.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur chrisdavidmills, allez à chrisdavidmills.github.io. +
    +

    Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.

    +
    +
    6. +
+ +

Pour en savoir plus, voyez GitHub Pages Help.

+ +

Lectures pour approfondir

+ + + +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html deleted file mode 100644 index c06de51317..0000000000 --- a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Le web et ses normes -slug: Learn/Getting_started_with_the_web/The_web_and_web_standards -tags: - - Beginner - - Front-end - - Learn - - Web - - Web Standards -translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards -original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards ---- -

{{learnsidebar}}

- -

Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

- -

Une brève histoire du web

- -

Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

- -

À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

- -

En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

- -

Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

- -

À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

- -

Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

- -

Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

- -

Les standards du Web

- -

Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

- -

Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

- -

Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

- -

Normes "ouvertes"

- -

L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

- -

Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

- -

Cela permet au Web de rester une ressource publique librement accessible.

- -

Ne cassez pas le web

- -

Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

- -

Être développeur web, c'est bien

- -

L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?

- -

Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

- -

La seule constante est la variation.

- -

Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

- -

Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.

- -

Vue d'ensemble des outils Web modernes

- -

Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

- - - -

Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

- -

HTTP

- -

Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

- -
"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
-
-"Bien sûr Navigateur Web - Les voilà"
-
-[Télécharge les fichiers et affiche la page]
- -

La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

- -

HTML, CSS et JavaScript

- -

HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

- - - -

Outils

- -

Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

- - - -

Langages et frameworks « côté serveur »

- -

HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

- -

Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

- -

On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.

- -

Les bonnes pratiques du web

- -

Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.

- -

Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

- - - -

Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

- -

Vous rencontrerez les concepts suivants à un moment donné de vos études.

- - - -

Voir aussi

- - diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md new file mode 100644 index 0000000000..c06de51317 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.md @@ -0,0 +1,171 @@ +--- +title: Le web et ses normes +slug: Learn/Getting_started_with_the_web/The_web_and_web_standards +tags: + - Beginner + - Front-end + - Learn + - Web + - Web Standards +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +original_slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

+ +

Une brève histoire du web

+ +

Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

+ +

À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

+ +

En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

+ +

Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

+ +

À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

+ +

Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

+ +

Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

+ +

Les standards du Web

+ +

Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

+ +

Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

+ +

Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

+ +

Normes "ouvertes"

+ +

L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

+ +

Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

+ +

Cela permet au Web de rester une ressource publique librement accessible.

+ +

Ne cassez pas le web

+ +

Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

+ +

Être développeur web, c'est bien

+ +

L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?

+ +

Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

+ +

La seule constante est la variation.

+ +

Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

+ +

Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.

+ +

Vue d'ensemble des outils Web modernes

+ +

Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

+ + + +

Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

+ +

HTTP

+ +

Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

+ +
"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
+
+"Bien sûr Navigateur Web - Les voilà"
+
+[Télécharge les fichiers et affiche la page]
+ +

La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

+ +

HTML, CSS et JavaScript

+ +

HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

+ + + +

Outils

+ +

Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

+ + + +

Langages et frameworks « côté serveur »

+ +

HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

+ +

Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

+ +

On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.

+ +

Les bonnes pratiques du web

+ +

Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.

+ +

Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

+ + + +

Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

+ +

Vous rencontrerez les concepts suivants à un moment donné de vos études.

+ + + +

Voir aussi

+ + diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 06c8f03c49..0000000000 --- a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Quel sera l'aspect de votre site web ? -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - Apprendre - - Composition - - Conception - - Débutant - - Planification - - Polices de caractères -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
- -

Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».

- -

Commençons par le commencement : planification

- -

Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.

- -

Pour commencer, posez-vous ces questions :

- -
    -
  1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
    2. -
  2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
    3. -
  3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
    4. -
- -
-

Note : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans Firefox OS Guidelines.

-
- -

Esquisse de votre concept

- -

Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !

- -

- -
-

Note : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.

- -

Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.

-
- -

Choix de vos ressources

- -

À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.

- -

Texte

- -

Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité.

- -

Couleur du thème

- -

Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #660066. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.

- -

- -

Images

- -

Pour choisir une image, allez sur Google Images et cherchez une image qui convient.

- -
    -
  1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
    2. -
  2. Appuyez sur le bouton Afficher l'image.
    3. -
  3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous… et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.
    4. -
- -

- -

- -
-

Note : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, puis  2) Droits d'usage :

- -

-
- -

Police de caractères

- -

Pour choisir une police :

- -
    -
  1. Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.
    2. -
  2. Cliquez sur l'icône « + » (ajouter) à côté de la police que vous voulez.
    3. -
  3. Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).
    4. -
  4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
    5. -
- -

- -

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md new file mode 100644 index 0000000000..06c8f03c49 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -0,0 +1,109 @@ +--- +title: Quel sera l'aspect de votre site web ? +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Apprendre + - Composition + - Conception + - Débutant + - Planification + - Polices de caractères +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
+ +

Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».

+ +

Commençons par le commencement : planification

+ +

Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.

+ +

Pour commencer, posez-vous ces questions :

+ +
    +
  1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
    2. +
  2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
    3. +
  3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
    4. +
+ +
+

Note : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans Firefox OS Guidelines.

+
+ +

Esquisse de votre concept

+ +

Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !

+ +

+ +
+

Note : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.

+ +

Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.

+
+ +

Choix de vos ressources

+ +

À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.

+ +

Texte

+ +

Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité.

+ +

Couleur du thème

+ +

Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #660066. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.

+ +

+ +

Images

+ +

Pour choisir une image, allez sur Google Images et cherchez une image qui convient.

+ +
    +
  1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
    2. +
  2. Appuyez sur le bouton Afficher l'image.
    3. +
  3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous… et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.
    4. +
+ +

+ +

+ +
+

Note : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, puis  2) Droits d'usage :

+ +

+
+ +

Police de caractères

+ +

Pour choisir une police :

+ +
    +
  1. Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.
    2. +
  2. Cliquez sur l'icône « + » (ajouter) à côté de la police que vous voulez.
    3. +
  3. Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).
    4. +
  4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
    5. +
+ +

+ +

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html deleted file mode 100644 index f9fcdc2434..0000000000 --- a/files/fr/learn/html/cheatsheet/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: Cheatsheet HTML -slug: Learn/HTML/Cheatsheet -tags: - - Cheatsheet - - HTML - - Intermediate - - Learn -translation_of: Learn/HTML/Cheatsheet -original_slug: Apprendre/HTML/Cheatsheet ---- -
{{draft}}
- -

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

- -
-

Note : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

-
- -

Éléments en ligne

- -

Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsageÉlémentExemple
Un lien{{HTMLElement("a")}}
<a href="https://example.org">
-Un lien vers example.org</a>.
- {{EmbedLiveSample("a-example", 100, 60)}}
Une image{{HTMLElement("img")}}
<img src="beast.png" width="25" />
- {{EmbedLiveSample("img-example", 100, 60)}}
Un conteneur en ligne{{HTMLElement("span")}}
Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
- {{EmbedLiveSample("span-example", 100, 60)}}
Emphase du texte{{HTMLElement("em")}}
<em>La classe non ?</em>.
- {{EmbedLiveSample("em-example", 100, 60)}}
Texte idiomatique{{HTMLElement("i")}}
-Marque la phrase <i>généralement en italique</i>.
- {{EmbedLiveSample("i-example", 100, 60)}}
Texte d'attention{{HTMLElement("b")}}
-Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
- {{EmbedLiveSample("b-example", 100, 60)}}
Texte d'importance{{HTMLElement("strong")}}
<strong>Ce contenu est important !</strong>
- {{EmbedLiveSample("strong-example", 100, 60)}}
Marquer du texte{{HTMLElement("mark")}}
<mark>Vous me voyez ?</mark>
- {{EmbedLiveSample("mark-example", 100, 60)}}
Texte barré{{HTMLElement("s")}}
<s>Je ne suis plus pertinent.</s>
- {{EmbedLiveSample("s-example", 100, 60)}}
Mise en indice{{HTMLElement("sub")}}
H<sub>2</sub>O
- {{EmbedLiveSample("sub-example", 100, 60)}}
Texte de commentaire{{HTMLElement("small")}}
-Utilisé pour représenter <small>les petites
-notes </small> d'un document.
-{{EmbedLiveSample("small-example", 100, 60)}}
Adresse{{HTMLElement("address")}}
<address>15 Rue du Bourg</address>
-{{EmbedLiveSample("address-example", 100, 60)}}
Citation textuelle{{HTMLElement("cite")}}
Pour plus d'informations sur les monstres,
-voir <cite>Le monstrueux livre des monstres</cite>.
- {{EmbedLiveSample("cite-example", 100, 60)}}
Mise en exposant{{HTMLElement("sup")}}
x<sup>2</sup>
- {{EmbedLiveSample("sup-example", 100, 60)}}
Citation en ligne{{HTMLElement("q")}}
-<q>Toi aussi mon fils ?</q>, a-t-il dit.
-{{EmbedLiveSample("q-example", 100, 60)}}
Un saut de ligne{{HTMLElement("br")}}
Ligne 1<br>Ligne 2
-{{EmbedLiveSample("br-example", 100, 80)}}
Un saut de ligne possible{{HTMLElement("wbr")}}
-<div style="width: 200px">
-  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
-</div>
-{{EmbedLiveSample("wbr-example", 100, 80)}}
Date{{HTMLElement("time")}}
-Utilisé pour mettre en forme la date. Par exemple :
-<time datetime="2020-05-24" pubdate>
-Publié le 24 mai 2020</time>.
-{{EmbedLiveSample("time-example", 100, 60)}}
Code{{HTMLElement("code")}}
-Ce texte est au format normal,
-mais <code>celui-ci représente du code</code>.
-{{EmbedLiveSample("code-example", 100, 60)}}
Audio{{HTMLElement("audio")}}
-<audio controls="controls">
-  <source="t-rex-roar.mp3" type="audio/mpeg">
-  Votre navigateur ne prend pas en charge audio.
-</audio>
-{{EmbedLiveSample("audio-example", 100, 80)}}
Video{{HTMLElement("video")}}
-<video controls  width="250"
-  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
-  L'élément <code>video</code> n'est pas pris en charge.
-</video>
-{{EmbedLiveSample("video-example", 100, 200)}}
- -

Éléments de bloc

- -

Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UsageÉlémentExemple
Un paragraphe{{HTMLElement("p")}}
-<p>Je suis un paragraphe</p>
-<p>Et un autre paragraph</p>
-{{EmbedLiveSample("p-example", 100, 150)}} -
Une citation étendue{{HTMLElement("blockquote")}}
Ils sont alors dit :
-<blockquote>L'élément blockquote indique une citation étendue.</blockquote>
-{{EmbedLiveSample("blockquote-example", 100, 100)}} -
Information supplémentaire{{HTMLElement("details")}}
-<details>
-  <summary>Anti-sèche HTML</summary>
-  <p>Éléments en ligne</p>
-  <p>Éléments de bloc</p>
-</details>
-{{EmbedLiveSample("details-example", 100, 150)}} -
Une liste non-ordonnée{{HTMLElement("ul")}}
-<ul>

-  <li>Je suis un élément de liste</li>

-  <li>Et moi un autre</li>

-</ul>
-{{EmbedLiveSample("ul-example", 100, 100)}} -
Une liste ordonnée{{HTMLElement("ol")}}
-<ol>

-  <li>Je suis le premier élément</li>

-  <li>Et moi le deuxième</li>

-</ol>
-{{EmbedLiveSample("ol-example", 100, 100)}} -
Une liste de définitions{{HTMLElement("dl")}}
-<dl>
-  <dt>Un terme</dt>

-  <dd>La définition du terme</dd>
-  <dt>Un autre terme</dt>
-  <dd>La définition d'un autre terme</dd>
-</dl>
-{{EmbedLiveSample("dl-example", 100, 150)}} -
Un séparateur horizontal{{HTMLElement("hr")}}
-avant<hr>après
-{{EmbedLiveSample("hr-example", 100, 100)}} -
Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
-<h1> Titre de niveau 1 </h1>
-<h2> Titre de niveau 2 </h2>
-<h3> Titre de niveau 3 </h3>
-<h4> Titre de niveau 4 </h4>
-<h5> Titre de niveau 5 </h5>
-<h6> Titre de niveau 6 </h6>
-{{EmbedLiveSample("h1-h6-example", 100, 350)}} -
\ No newline at end of file diff --git a/files/fr/learn/html/cheatsheet/index.md b/files/fr/learn/html/cheatsheet/index.md new file mode 100644 index 0000000000..f9fcdc2434 --- /dev/null +++ b/files/fr/learn/html/cheatsheet/index.md @@ -0,0 +1,284 @@ +--- +title: Cheatsheet HTML +slug: Learn/HTML/Cheatsheet +tags: + - Cheatsheet + - HTML + - Intermediate + - Learn +translation_of: Learn/HTML/Cheatsheet +original_slug: Apprendre/HTML/Cheatsheet +--- +
{{draft}}
+ +

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

+ +
+

Note : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

+
+ +

Éléments en ligne

+ +

Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UsageÉlémentExemple
Un lien{{HTMLElement("a")}}
<a href="https://example.org">
+Un lien vers example.org</a>.
+ {{EmbedLiveSample("a-example", 100, 60)}}
Une image{{HTMLElement("img")}}
<img src="beast.png" width="25" />
+ {{EmbedLiveSample("img-example", 100, 60)}}
Un conteneur en ligne{{HTMLElement("span")}}
Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.
+ {{EmbedLiveSample("span-example", 100, 60)}}
Emphase du texte{{HTMLElement("em")}}
<em>La classe non ?</em>.
+ {{EmbedLiveSample("em-example", 100, 60)}}
Texte idiomatique{{HTMLElement("i")}}
+Marque la phrase <i>généralement en italique</i>.
+ {{EmbedLiveSample("i-example", 100, 60)}}
Texte d'attention{{HTMLElement("b")}}
+Met en avant un <b>mot ou une phrase d'une certaine importance</b>.
+ {{EmbedLiveSample("b-example", 100, 60)}}
Texte d'importance{{HTMLElement("strong")}}
<strong>Ce contenu est important !</strong>
+ {{EmbedLiveSample("strong-example", 100, 60)}}
Marquer du texte{{HTMLElement("mark")}}
<mark>Vous me voyez ?</mark>
+ {{EmbedLiveSample("mark-example", 100, 60)}}
Texte barré{{HTMLElement("s")}}
<s>Je ne suis plus pertinent.</s>
+ {{EmbedLiveSample("s-example", 100, 60)}}
Mise en indice{{HTMLElement("sub")}}
H<sub>2</sub>O
+ {{EmbedLiveSample("sub-example", 100, 60)}}
Texte de commentaire{{HTMLElement("small")}}
+Utilisé pour représenter <small>les petites
+notes </small> d'un document.
+{{EmbedLiveSample("small-example", 100, 60)}}
Adresse{{HTMLElement("address")}}
<address>15 Rue du Bourg</address>
+{{EmbedLiveSample("address-example", 100, 60)}}
Citation textuelle{{HTMLElement("cite")}}
Pour plus d'informations sur les monstres,
+voir <cite>Le monstrueux livre des monstres</cite>.
+ {{EmbedLiveSample("cite-example", 100, 60)}}
Mise en exposant{{HTMLElement("sup")}}
x<sup>2</sup>
+ {{EmbedLiveSample("sup-example", 100, 60)}}
Citation en ligne{{HTMLElement("q")}}
+<q>Toi aussi mon fils ?</q>, a-t-il dit.
+{{EmbedLiveSample("q-example", 100, 60)}}
Un saut de ligne{{HTMLElement("br")}}
Ligne 1<br>Ligne 2
+{{EmbedLiveSample("br-example", 100, 80)}}
Un saut de ligne possible{{HTMLElement("wbr")}}
+<div style="width: 200px">
+  Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch.
+</div>
+{{EmbedLiveSample("wbr-example", 100, 80)}}
Date{{HTMLElement("time")}}
+Utilisé pour mettre en forme la date. Par exemple :
+<time datetime="2020-05-24" pubdate>
+Publié le 24 mai 2020</time>.
+{{EmbedLiveSample("time-example", 100, 60)}}
Code{{HTMLElement("code")}}
+Ce texte est au format normal,
+mais <code>celui-ci représente du code</code>.
+{{EmbedLiveSample("code-example", 100, 60)}}
Audio{{HTMLElement("audio")}}
+<audio controls="controls">
+  <source="t-rex-roar.mp3" type="audio/mpeg">
+  Votre navigateur ne prend pas en charge audio.
+</audio>
+{{EmbedLiveSample("audio-example", 100, 80)}}
Video{{HTMLElement("video")}}
+<video controls  width="250"
+  src="https://archive.org/download/ElephantsDream/ed_hd.ogv" >
+  L'élément <code>video</code> n'est pas pris en charge.
+</video>
+{{EmbedLiveSample("video-example", 100, 200)}}
+ +

Éléments de bloc

+ +

Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UsageÉlémentExemple
Un paragraphe{{HTMLElement("p")}}
+<p>Je suis un paragraphe</p>
+<p>Et un autre paragraph</p>
+{{EmbedLiveSample("p-example", 100, 150)}} +
Une citation étendue{{HTMLElement("blockquote")}}
Ils sont alors dit :
+<blockquote>L'élément blockquote indique une citation étendue.</blockquote>
+{{EmbedLiveSample("blockquote-example", 100, 100)}} +
Information supplémentaire{{HTMLElement("details")}}
+<details>
+  <summary>Anti-sèche HTML</summary>
+  <p>Éléments en ligne</p>
+  <p>Éléments de bloc</p>
+</details>
+{{EmbedLiveSample("details-example", 100, 150)}} +
Une liste non-ordonnée{{HTMLElement("ul")}}
+<ul>

+  <li>Je suis un élément de liste</li>

+  <li>Et moi un autre</li>

+</ul>
+{{EmbedLiveSample("ul-example", 100, 100)}} +
Une liste ordonnée{{HTMLElement("ol")}}
+<ol>

+  <li>Je suis le premier élément</li>

+  <li>Et moi le deuxième</li>

+</ol>
+{{EmbedLiveSample("ol-example", 100, 100)}} +
Une liste de définitions{{HTMLElement("dl")}}
+<dl>
+  <dt>Un terme</dt>

+  <dd>La définition du terme</dd>
+  <dt>Un autre terme</dt>
+  <dd>La définition d'un autre terme</dd>
+</dl>
+{{EmbedLiveSample("dl-example", 100, 150)}} +
Un séparateur horizontal{{HTMLElement("hr")}}
+avant<hr>après
+{{EmbedLiveSample("hr-example", 100, 100)}} +
Un titre{{HTMLElement("Heading_Elements", "<h1>-<h6>")}}
+<h1> Titre de niveau 1 </h1>
+<h2> Titre de niveau 2 </h2>
+<h3> Titre de niveau 3 </h3>
+<h4> Titre de niveau 4 </h4>
+<h5> Titre de niveau 5 </h5>
+<h6> Titre de niveau 6 </h6>
+{{EmbedLiveSample("h1-h6-example", 100, 350)}} +
\ No newline at end of file diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html deleted file mode 100644 index 2bd7ccebb6..0000000000 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Ajouter une carte de zones cliquables sur une image -slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image -tags: - - Guide - - HTML - - Intermediate - - Navigation -translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image -original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image ---- -

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
- -
-

Attention : Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

-
- -

Les cartes imagées cliquables et leurs inconvénients

- -

Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

- -

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

- -

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

- -

Comment insérer une carte imagée

- -

Étape 1 : l'image

- -

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

- - - -

On insère une image de la même façon que d'habitude (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.

- -

Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

- -
<img
-  src="image-map.png"
-  alt=""
-  usemap="#exemple-map-1" />
-
- -

Étape 2 : Activer les régions actives

- -

Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

- -
<map name="exemple-map-1">
-
-</map>
-
- -

Dans cet élément <map>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

- -

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

- -
-
{{htmlattrxref('shape','area')}}
-
{{htmlattrxref('coords','area')}}
-
-

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

- -
    -
  • Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
    • -
  • Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
    • -
  • Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).
    • -
- -

Les coordonnées exprimées sont données en pixels CSS.

- -

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

-
-
{{htmlattrxref('href','area')}}
-
Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.
-
{{htmlattrxref('alt','area')}}
-
-

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

- -

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

-
-
- -
<map name="exemple-map-1">
-  <area shape="circle" coords="200,250,25"
-    href="page-2.html" alt="exemple de cercle" />
-
-  <area shape="rect" coords="10, 5, 20, 15"
-    href="page-3.html" alt="exemple de rectangle" />
-
-</map>
- -

Étape 3 : S'assurer que la carte fonctionne pour chacun

- -

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

- -

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

- -

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

- -

En savoir plus

- - diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md new file mode 100644 index 0000000000..2bd7ccebb6 --- /dev/null +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md @@ -0,0 +1,125 @@ +--- +title: Ajouter une carte de zones cliquables sur une image +slug: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +tags: + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +original_slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image +--- +

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
+ +
+

Attention : Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

+
+ +

Les cartes imagées cliquables et leurs inconvénients

+ +

Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

+ +

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

+ +

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

+ +

Comment insérer une carte imagée

+ +

Étape 1 : l'image

+ +

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

+ + + +

On insère une image de la même façon que d'habitude (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.

+ +

Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

+ +
<img
+  src="image-map.png"
+  alt=""
+  usemap="#exemple-map-1" />
+
+ +

Étape 2 : Activer les régions actives

+ +

Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

+ +
<map name="exemple-map-1">
+
+</map>
+
+ +

Dans cet élément <map>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

+ +

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

+ +
+
{{htmlattrxref('shape','area')}}
+
{{htmlattrxref('coords','area')}}
+
+

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

+ +
    +
  • Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
    • +
  • Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
    • +
  • Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).
    • +
+ +

Les coordonnées exprimées sont données en pixels CSS.

+ +

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

+
+
{{htmlattrxref('href','area')}}
+
Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.
+
{{htmlattrxref('alt','area')}}
+
+

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

+ +

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

+
+
+ +
<map name="exemple-map-1">
+  <area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="exemple de cercle" />
+
+  <area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="exemple de rectangle" />
+
+</map>
+ +

Étape 3 : S'assurer que la carte fonctionne pour chacun

+ +

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

+ +

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

+ +

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html deleted file mode 100644 index 8dd4f33264..0000000000 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Astuces de création de pages HTML à affichage rapide -slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages -tags: - - HTML - - Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages -original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide ---- -

C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
- Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.

- -

Réduire le poids de la page

- -

Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:

- - - -

Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.

- -

Réduisez le nombre de fichiers

- -

Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions HTTP nécessaire pour télécharger une page.

- - - -

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

- -

Réduire les domaines des recherches

- -

Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.

- -

Réutiliser le contenu du cache

- -

Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.
- En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.
- En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.
-
- Plus d'informations:
-
-    1. HTTP Conditional Get for RSS Hackers
-    2. HTTP 304: Not Modified
-    3. On HTTP Last-Modified and ETag

- -

Réduire le nombre de scripts en ligne

- -

Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().

- -

Utilisez le CSS moderne et des balises valides

- -

L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
- Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
- En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, HTML Tidy  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.

- -

Segmentez votre contenu

- -

Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:

- -
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-
-
- -

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

- -
> TABLE <TABLE> ...</
-> TABLE <TABLE> ...</
-> TABLE <TABLE> ...</
- -

Préciser la taille des images et des tableaux

- -

Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
- Les tableaux doivent utiliser le sélecteur CSS selector:property combination:

- -
  table-layout: fixed;
-
-
- -

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

- -

Choisissez les versions des navigateur ciblés

- -


- Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.
-
- Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.
-
- Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.

- -

Liens connexes

- -


-     * Optimisez vos pages avec Yslow
-     * Livre: "Speed Up Your Site" par Andy King
-     * Site Optimization Tutorial (WebMonkey) (en anglais) 
-     * Best Practices for Speeding Up Your Web Site (en anglais) 

- -

 

- -

Document d'information d'origine
-
-     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages

diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md new file mode 100644 index 0000000000..8dd4f33264 --- /dev/null +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -0,0 +1,119 @@ +--- +title: Astuces de création de pages HTML à affichage rapide +slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages +tags: + - HTML + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide +--- +

C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
+ Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.

+ +

Réduire le poids de la page

+ +

Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:

+ + + +

Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.

+ +

Réduisez le nombre de fichiers

+ +

Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions HTTP nécessaire pour télécharger une page.

+ + + +

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

+ +

Réduire les domaines des recherches

+ +

Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.

+ +

Réutiliser le contenu du cache

+ +

Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.
+ En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.
+ En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.
+
+ Plus d'informations:
+
+    1. HTTP Conditional Get for RSS Hackers
+    2. HTTP 304: Not Modified
+    3. On HTTP Last-Modified and ETag

+ +

Réduire le nombre de scripts en ligne

+ +

Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().

+ +

Utilisez le CSS moderne et des balises valides

+ +

L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
+ Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
+ En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, HTML Tidy  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.

+ +

Segmentez votre contenu

+ +

Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+
+ +

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

+ +
> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+ +

Préciser la taille des images et des tableaux

+ +

Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
+ Les tableaux doivent utiliser le sélecteur CSS selector:property combination:

+ +
  table-layout: fixed;
+
+
+ +

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

+ +

Choisissez les versions des navigateur ciblés

+ +


+ Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.
+
+ Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.
+
+ Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.

+ +

Liens connexes

+ +


+     * Optimisez vos pages avec Yslow
+     * Livre: "Speed Up Your Site" par Andy King
+     * Site Optimization Tutorial (WebMonkey) (en anglais) 
+     * Best Practices for Speeding Up Your Web Site (en anglais) 

+ +

 

+ +

Document d'information d'origine
+
+     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages

diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html deleted file mode 100644 index c4a834b1a4..0000000000 --- a/files/fr/learn/html/howto/define_terms_with_html/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Définir des termes avec HTML -slug: Learn/HTML/Howto/Define_terms_with_HTML -tags: - - Beginner - - Guide - - HTML - - Learn -translation_of: Learn/HTML/Howto/Define_terms_with_HTML -original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML ---- -

HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
- -

Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :

- -
-
-
Bleu (adjectif)
-
La couleur du ciel lors d'un temps clair.
- Le ciel est bleu.
-
-
- -

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

- -
-

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

-
- -

Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.

- -

Comment écrire un description informelle

- -

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

- -

On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :

- -
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
-
- -
-

Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.

-
- -

Cas spécifique : les abréviations

- -

En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.

- -
<p>
-  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
-   est un langage de description utilisé pour structurer des documents sur le Web.
-</p>
- -
-

Note : La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

-
- -

Améliorer l'accessibilité

- -

{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :

- -
<p>
-  <span id="ff">
-    <dfn aria-describedby="ff">Firefox</dfn>
-    est le navigateur web créé et développé par la Fondation Mozilla.
-  </span>
-  Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
-</p>
- -

Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.

- -

Comment construire une liste de descriptions

- -

Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).

- -
-

Note : Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

-
- -

Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.

- -

Un exemple simple

- -

Voici un exemple simple qui dresse une liste de descriptions de plats :

- -
<dl>
-  <dt>jambalaya</dt>
-    <dd>
-      une entrée à base de riz qui contient généralement
-      du poulet, des saucisses, des fruits de mer et des
-      épices
-    </dd>
-
-  <dt>sukiyaki</dt>
-    <dd>
-      une spécialité japonaise à base de fines tranches de
-      viande, de légumes, de nouilles et qui est cuite dans
-      un sauce soja et du saké
-    </dd>
-
-  <dt>chianti</dt>
-    <dd>
-      un vin italien, sec, originaire de Toscane
-    </dd>
-</dl>
-
- -
-

Note : La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.

-
- -

Améliorer l'aspect visuel

- -

Voici comment un navigateur affichera la liste précédente :

- -

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

- -

Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :

- -
dt {
-  font-weight: bold;
-}
-
- -

Cela permettra d'obtenir le résultat suivant :

- -

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

- -

En savoir plus

- - diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.md b/files/fr/learn/html/howto/define_terms_with_html/index.md new file mode 100644 index 0000000000..c4a834b1a4 --- /dev/null +++ b/files/fr/learn/html/howto/define_terms_with_html/index.md @@ -0,0 +1,150 @@ +--- +title: Définir des termes avec HTML +slug: Learn/HTML/Howto/Define_terms_with_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_HTML +original_slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML +--- +

HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
+ +

Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :

+ +
+
+
Bleu (adjectif)
+
La couleur du ciel lors d'un temps clair.
+ Le ciel est bleu.
+
+
+ +

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

+ +
+

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

+
+ +

Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.

+ +

Comment écrire un description informelle

+ +

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

+ +

On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :

+ +
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
+
+ +
+

Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.

+
+ +

Cas spécifique : les abréviations

+ +

En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.

+ +
<p>
+  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
+   est un langage de description utilisé pour structurer des documents sur le Web.
+</p>
+ +
+

Note : La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

+
+ +

Améliorer l'accessibilité

+ +

{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :

+ +
<p>
+  <span id="ff">
+    <dfn aria-describedby="ff">Firefox</dfn>
+    est le navigateur web créé et développé par la Fondation Mozilla.
+  </span>
+  Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
+</p>
+ +

Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.

+ +

Comment construire une liste de descriptions

+ +

Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).

+ +
+

Note : Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

+
+ +

Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.

+ +

Un exemple simple

+ +

Voici un exemple simple qui dresse une liste de descriptions de plats :

+ +
<dl>
+  <dt>jambalaya</dt>
+    <dd>
+      une entrée à base de riz qui contient généralement
+      du poulet, des saucisses, des fruits de mer et des
+      épices
+    </dd>
+
+  <dt>sukiyaki</dt>
+    <dd>
+      une spécialité japonaise à base de fines tranches de
+      viande, de légumes, de nouilles et qui est cuite dans
+      un sauce soja et du saké
+    </dd>
+
+  <dt>chianti</dt>
+    <dd>
+      un vin italien, sec, originaire de Toscane
+    </dd>
+</dl>
+
+ +
+

Note : La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.

+
+ +

Améliorer l'aspect visuel

+ +

Voici comment un navigateur affichera la liste précédente :

+ +

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

+ +

Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :

+ +
dt {
+  font-weight: bold;
+}
+
+ +

Cela permettra d'obtenir le résultat suivant :

+ +

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html deleted file mode 100644 index e5f130e8ca..0000000000 --- a/files/fr/learn/html/howto/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Apprendre à utiliser HTML pour résoudre des problèmes -slug: Learn/HTML/Howto -tags: - - CodingScripting - - HTML -translation_of: Learn/HTML/Howto -original_slug: Apprendre/HTML/Comment ---- -

Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.

- -

Cas d'utilisation fréquents

- -

HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :

- -

Structure de base

- -

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

- - - -

Sémantique de base pour le texte

- -

Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.

- - -

Les hyperliens

- -

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

- - - -

Images et multimédia

- - - -

Script et mise en forme

- -

HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.

- - - -

Intégrer du contenu

- - - -

Problèmes avancés ou rares

- -

Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :

- -

Les formulaires

- -

Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :

- - - -

Les informations tabulaires

- -

Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :

- - - -

La représentation de données

- - - -

Interactivité

- - - -

Sémantique avancée pour les éléments textuels

- - - -

Images et multimédia avancés

- - - -

L'internationalisation

- -

HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.

- - \ No newline at end of file diff --git a/files/fr/learn/html/howto/index.md b/files/fr/learn/html/howto/index.md new file mode 100644 index 0000000000..e5f130e8ca --- /dev/null +++ b/files/fr/learn/html/howto/index.md @@ -0,0 +1,137 @@ +--- +title: Apprendre à utiliser HTML pour résoudre des problèmes +slug: Learn/HTML/Howto +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +original_slug: Apprendre/HTML/Comment +--- +

Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.

+ +

Cas d'utilisation fréquents

+ +

HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :

+ +

Structure de base

+ +

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

+ + + +

Sémantique de base pour le texte

+ +

Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.

+ + +

Les hyperliens

+ +

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

+ + + +

Images et multimédia

+ + + +

Script et mise en forme

+ +

HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.

+ + + +

Intégrer du contenu

+ + + +

Problèmes avancés ou rares

+ +

Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :

+ +

Les formulaires

+ +

Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :

+ + + +

Les informations tabulaires

+ +

Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :

+ + + +

La représentation de données

+ + + +

Interactivité

+ + + +

Sémantique avancée pour les éléments textuels

+ + + +

Images et multimédia avancés

+ + + +

L'internationalisation

+ +

HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.

+ + \ No newline at end of file diff --git a/files/fr/learn/html/howto/use_data_attributes/index.html b/files/fr/learn/html/howto/use_data_attributes/index.html deleted file mode 100644 index f18055985b..0000000000 --- a/files/fr/learn/html/howto/use_data_attributes/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Utiliser les attributs de données -slug: Learn/HTML/Howto/Use_data_attributes -tags: - - Guide - - HTML - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes -original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes ---- -
{{LearnSidebar}}
- -

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.

- -

Syntaxe HTML

- -

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :

- -
<article
-  id="voitureelectrique"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="voitures">
-...
-</article>
- -

Accéder via du code JavaScript

- -

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Pour obtenir un attribut data avec l'objet dataset, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe data- (notez que les tirets sont convertis en camelCase).

- -
var article = document.getElementById('voitureelectrique');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "voitures"
- -

Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre article.dataset.columns = 5 mettrait l'attribut à "5".

- -

Accéder via du code CSS

- -

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

- -
article::before {
-  content: attr(data-parent);
-}
- -

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

Tout cela est visible dans l'exemple JSBin. 

- -

Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de capture vidéo d'écran où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

- -

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

- -

Problèmes

- -

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. 

- -

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  ne prennent pas en charge le dataset. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un dataset est même plus lent que lire les données avec getAttribute().

- -

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

- -

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

- -

Voir aussi

- - diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md new file mode 100644 index 0000000000..f18055985b --- /dev/null +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -0,0 +1,80 @@ +--- +title: Utiliser les attributs de données +slug: Learn/HTML/Howto/Use_data_attributes +tags: + - Guide + - HTML + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes +--- +
{{LearnSidebar}}
+ +

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.

+ +

Syntaxe HTML

+ +

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :

+ +
<article
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures">
+...
+</article>
+ +

Accéder via du code JavaScript

+ +

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Pour obtenir un attribut data avec l'objet dataset, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe data- (notez que les tirets sont convertis en camelCase).

+ +
var article = document.getElementById('voitureelectrique');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "voitures"
+ +

Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre article.dataset.columns = 5 mettrait l'attribut à "5".

+ +

Accéder via du code CSS

+ +

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Tout cela est visible dans l'exemple JSBin. 

+ +

Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de capture vidéo d'écran où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

+ +

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

+ +

Problèmes

+ +

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. 

+ +

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  ne prennent pas en charge le dataset. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un dataset est même plus lent que lire les données avec getAttribute().

+ +

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

+ +

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

+ +

Voir aussi

+ + diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html deleted file mode 100644 index e57980829e..0000000000 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Utiliser JavaScript au sein d'une page web -slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage -tags: - - Beginner - - HTML - - JavaScript - - OpenPractices -translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage -original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web ---- -

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
- -

À propos de JavaScript

- -

{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.

- -
-

Note : Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

-
- -

Comment déclencher le code JavaScript depuis le document HTML

- -

Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser script : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.

- -

Faire référence à un script externe

- -

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :

- -
<script src="chemin/vers/le/script.js"></script>
- -

Inscrire le code JavaScript dans le document HTML

- -

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

- -
<script>
-window.addEventListener('load', function () {
-  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
-});
-</script>
- -

Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :

- - - -

Utiliser les scripts de façon accessible

- -

L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :

- - - -

En savoir plus

- - diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md new file mode 100644 index 0000000000..e57980829e --- /dev/null +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -0,0 +1,98 @@ +--- +title: Utiliser JavaScript au sein d'une page web +slug: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +original_slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web +--- +

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
+ +

À propos de JavaScript

+ +

{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.

+ +
+

Note : Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

+
+ +

Comment déclencher le code JavaScript depuis le document HTML

+ +

Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser script : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.

+ +

Faire référence à un script externe

+ +

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :

+ +
<script src="chemin/vers/le/script.js"></script>
+ +

Inscrire le code JavaScript dans le document HTML

+ +

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

+ +
<script>
+window.addEventListener('load', function () {
+  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
+});
+</script>
+ +

Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :

+ + + +

Utiliser les scripts de façon accessible

+ +

L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :

+ + + +

En savoir plus

+ + diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html deleted file mode 100644 index 95e31501ca..0000000000 --- a/files/fr/learn/html/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'Apprendre le HTML : guides et didacticiels' -slug: Learn/HTML -tags: - - Apprentissage - - Débutant - - Guide - - HTML - - Introduction - - Rubrique -translation_of: Learn/HTML -original_slug: Apprendre/HTML ---- -
{{LearnSidebar}}
- -
-
-

Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.

-
-
- -

Parcours d'apprentissage

- - - -

L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :

- - - -

Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans Installer les outils de base, et comprendre comment créer et gérer les fichiers,comme détaillé dans Gérer les fichiers — ces deux articles font partie de notre module Commencer avec le Web dédié aux débutants.

- -

Il est recommandé de passer par Commencer avec le Web avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article Les bases du HTML est également couvert dans notre module Introduction au HTML, quoique beaucoup plus en détail.

- -

Modules

- -

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.

- -
-
Introduction au HTML
-
Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
-
Multimedia et intégration
-
Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
-
Tableaux HTML
-
Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
-
Formulaire HTML
-
Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
-
- -

Résolution de problèmes courants en HTML

- -

Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.

- -

Voir aussi

- -
-
HTML (HyperText Markup Language) sur MDN
-
Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
-
\ No newline at end of file diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md new file mode 100644 index 0000000000..95e31501ca --- /dev/null +++ b/files/fr/learn/html/index.md @@ -0,0 +1,61 @@ +--- +title: 'Apprendre le HTML : guides et didacticiels' +slug: Learn/HTML +tags: + - Apprentissage + - Débutant + - Guide + - HTML + - Introduction + - Rubrique +translation_of: Learn/HTML +original_slug: Apprendre/HTML +--- +
{{LearnSidebar}}
+ +
+
+

Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.

+
+
+ +

Parcours d'apprentissage

+ + + +

L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :

+ + + +

Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans Installer les outils de base, et comprendre comment créer et gérer les fichiers,comme détaillé dans Gérer les fichiers — ces deux articles font partie de notre module Commencer avec le Web dédié aux débutants.

+ +

Il est recommandé de passer par Commencer avec le Web avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article Les bases du HTML est également couvert dans notre module Introduction au HTML, quoique beaucoup plus en détail.

+ +

Modules

+ +

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.

+ +
+
Introduction au HTML
+
Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
+
Multimedia et intégration
+
Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
+
Tableaux HTML
+
Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
+
Formulaire HTML
+
Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
+
+ +

Résolution de problèmes courants en HTML

+ +

Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.

+ +

Voir aussi

+ +
+
HTML (HyperText Markup Language) sur MDN
+
Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
+
\ No newline at end of file diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html deleted file mode 100644 index d3602ccd19..0000000000 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,673 +0,0 @@ ---- -title: Formatage avancé du texte -slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -tags: - - Apprendre - - Citation - - Codage - - Débutant - - Guide - - HTML - - Texte - - abréviation - - listes descriptives - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectifs :Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.
- -

Listes descriptives

- -

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :

- -
soliloque
-Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
-monologue
-Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
-aparté
-Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
- -

Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :

- -
<dl>
-  <dt>soliloque</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
-  <dt>monologue</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
-  <dt>aparté</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
-</dl>
- -

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

- -
-
soliloque
-
Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
-
monologue
-
Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
-
aparté
-
Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
-
- -

Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :

- -
-<dl>
- <dt>aparté</dt>
- <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
- <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd>
-</dl>
-
- -

Apprentissage interactif : balisez une série de définitions

- -

Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ Code modifiable pour que faire apparaître une liste de définitions dans la Zone de rendu. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.

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

{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Citations

- -

Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.

- -

Blocs de citation

- -

Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <blockquote> :

- -
<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
-de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
- -

Exemple de bloc de citation

-

Pour le changer en bloc de citation, on ferait simplement ceci :

- -
<blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
-  <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
-     indique que le bloc de texte inclus est une citation étendue.</p>
-</blockquote>
- -

Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :

-

{{EmbedLiveSample("Blocs_de_citation")}}

- -

Citations en ligne

- -

Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :

- -

Exemple de citation en ligne

- -
<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
-pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
- -

Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :

- -

{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}

- -

Citations

- -

Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :

- -
<p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
-<cite>page blockquote du MDN</cite></a>:
-</p>
-
-<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
-   indique que le bloc de texte inclus est une citation étendue.</p>
-
-<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
-   pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
- — <a href="/fr/docs/Web/HTML/Element/q">
-<cite>page q du MDN</cite></a>.</p>
- -

Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple quotations.html.

- - - -

Apprentissage actif : Qui a dit quoi ?

- -

Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :

- -
    -
  1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut cite.
    2. -
  2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut cite.
    3. -
  3. vous incorporiez un élément <cite> pour chaque citation
    4. -
- -

L'origine des citations dont vous aurez besoin se trouvent aux pages :

- - - -

Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}

- -

Abréviations

- -

Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :

- -
<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
-
-<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
- - - -

Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :

- -

Nous utilisons l'HTML pour structurer nos documents web.

- -

Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.

- -
-

Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.

-
- -

Apprentissage actif : marquer une abréviation

- -

Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.

- - - - - - - -
{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}
- -

Balisage des détails de contact

- -

HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :

- -
<address>
-  <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Exposants et indices

- -

Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :

- -
<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
-<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
- -

Les sorties produites par ces lignes de code se présentent comme suit :

- -

Ma date de naissance est le 1er mai 2001.

- -

La formule chimique de la caféine est C8H10N4O2.

- -

Si x^2 égale 9, x doit valoir 3 ou -3.

- -

Représentation du code informatique

- -

HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :

- - - -

Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Owww, arrête de me toucher !');
-}</code></pre>
-
-<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
-
-<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p>
-
-
-<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data.
-64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre>
-
- -

Ce code se présente ainsi :

- -

{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}

- -

Balisage des heures et dates

- -

HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :

- -
<time datetime="2016-01-20">20 janvier 2016</time>
- -

En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :

- - - -

Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.

- -

L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :

- -
<!-- Simple date standard -->
-<time datetime="2016-01-20">20 janvier 2016</time>
-<!-- Juste l'année et le mois -->
-<time datetime="2016-01">janvier 2016</time>
-<!-- Juste le mois et les jour -->
-<time datetime="01-20">20 janvier</time>
-<!-- Juste l'heure, heure et minutes -->
-<time datetime="19:30">19h30</time>
-<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
-<time datetime="19:30:01.856">19h30m1,856s</time>
-<!-- Date et heure -->
-<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
-<!-- Date et heure avec décalage de fuseau horaire -->
-<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
-<!-- Appel d'un numéro de semains donné -->
-<time datetime="2016-W04">La 4e semaine de 2016</time>
- -

Résumé

- - - -

Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre Référence des éléments HTML (la section sémantique de texte en ligne serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md new file mode 100644 index 0000000000..d3602ccd19 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -0,0 +1,673 @@ +--- +title: Formatage avancé du texte +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - Apprendre + - Citation + - Codage + - Débutant + - Guide + - HTML + - Texte + - abréviation + - listes descriptives + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectifs :Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.
+ +

Listes descriptives

+ +

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :

+ +
soliloque
+Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+monologue
+Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+aparté
+Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
+ +

Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :

+ +
<dl>
+  <dt>soliloque</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
+  <dt>monologue</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
+  <dt>aparté</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+</dl>
+ +

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

+ +
+
soliloque
+
Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+
monologue
+
Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+
aparté
+
Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
+
+ +

Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :

+ +
+<dl>
+ <dt>aparté</dt>
+ <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+ <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd>
+</dl>
+
+ +

Apprentissage interactif : balisez une série de définitions

+ +

Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ Code modifiable pour que faire apparaître une liste de définitions dans la Zone de rendu. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.

+ + + + + + + + + + + +

{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citations

+ +

Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.

+ +

Blocs de citation

+ +

Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <blockquote> :

+ +
<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
+de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
+ +

Exemple de bloc de citation

+

Pour le changer en bloc de citation, on ferait simplement ceci :

+ +
<blockquote cite="/fr/docs/Web/HTML/Element/blockquote">
+  <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
+     indique que le bloc de texte inclus est une citation étendue.</p>
+</blockquote>
+ +

Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :

+

{{EmbedLiveSample("Blocs_de_citation")}}

+ +

Citations en ligne

+ +

Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :

+ +

Exemple de citation en ligne

+ +
<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
+pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+ +

Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :

+ +

{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}

+ +

Citations

+ +

Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :

+ +
<p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote">
+<cite>page blockquote du MDN</cite></a>:
+</p>
+
+<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
+   indique que le bloc de texte inclus est une citation étendue.</p>
+
+<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu
+   pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+ — <a href="/fr/docs/Web/HTML/Element/q">
+<cite>page q du MDN</cite></a>.</p>
+ +

Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple quotations.html.

+ + + +

Apprentissage actif : Qui a dit quoi ?

+ +

Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :

+ +
    +
  1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut cite.
    2. +
  2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut cite.
    3. +
  3. vous incorporiez un élément <cite> pour chaque citation
    4. +
+ +

L'origine des citations dont vous aurez besoin se trouvent aux pages :

+ + + +

Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

Abréviations

+ +

Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :

+ +
<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
+
+<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
+ + + +

Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :

+ +

Nous utilisons l'HTML pour structurer nos documents web.

+ +

Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.

+ +
+

Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.

+
+ +

Apprentissage actif : marquer une abréviation

+ +

Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.

+ + + + + + + +
{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}
+ +

Balisage des détails de contact

+ +

HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :

+ +
<address>
+  <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Exposants et indices

+ +

Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :

+ +
<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
+<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
+ +

Les sorties produites par ces lignes de code se présentent comme suit :

+ +

Ma date de naissance est le 1er mai 2001.

+ +

La formule chimique de la caféine est C8H10N4O2.

+ +

Si x^2 égale 9, x doit valoir 3 ou -3.

+ +

Représentation du code informatique

+ +

HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :

+ + + +

Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, arrête de me toucher !');
+}</code></pre>
+
+<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
+
+<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p>
+
+
+<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data.
+64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre>
+
+ +

Ce code se présente ainsi :

+ +

{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}

+ +

Balisage des heures et dates

+ +

HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :

+ +
<time datetime="2016-01-20">20 janvier 2016</time>
+ +

En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :

+ + + +

Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.

+ +

L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :

+ +
<!-- Simple date standard -->
+<time datetime="2016-01-20">20 janvier 2016</time>
+<!-- Juste l'année et le mois -->
+<time datetime="2016-01">janvier 2016</time>
+<!-- Juste le mois et les jour -->
+<time datetime="01-20">20 janvier</time>
+<!-- Juste l'heure, heure et minutes -->
+<time datetime="19:30">19h30</time>
+<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
+<time datetime="19:30:01.856">19h30m1,856s</time>
+<!-- Date et heure -->
+<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
+<!-- Date et heure avec décalage de fuseau horaire -->
+<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
+<!-- Appel d'un numéro de semains donné -->
+<time datetime="2016-W04">La 4e semaine de 2016</time>
+ +

Résumé

+ + + +

Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre Référence des éléments HTML (la section sémantique de texte en ligne serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index abaeb6d167..0000000000 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Création d'hyperliens -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -tags: - - Apprendre - - Codage - - Débutant - - Guide - - HTML - - Liens - - Title - - URL - - absolu - - hyperliens - - relatif -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectif :Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.
- -

Qu'est-ce un hyperlien ?

- -

Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web une toile — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).

- -
-

Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).

-
- -

La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- -

Anatomie d'un lien

- -

Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.

- -
<p>Je suis en train de créer un lien à
-<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
-</p>
- -

qui donne le résultat suivant :

- -

Je suis en train de créer un lien à la page d'accueil de Mozilla.

- -

Ajouter des informations d'assistance avec l'attribut title

- -

L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :

- -
<p>Je suis en train de créer un lien à
-<a href="https://www.mozilla.org/fr/"
-   title="Le meilleur endroit pour trouver plus d'informations sur la
-  mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
-</p>
- -

Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :

- -

Je suis en train de créer un lien vers la page d'accueil de Mozilla

- -
-

Note : le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de title. Si une information de title est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.

-
- -

Apprentissage actif : création de votre propre exemple de lien

- -

C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre fichier modèle index.html fera parfaitement l'affaire).

- - - -

Liens de niveau bloc

- -

Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des éléments bloc . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.

- -
<a href="https://www.mozilla.org/fr/">
-  <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
-</a>
- -
-

Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.

-
- -

Une brève présentation des URL et des chemins

- -

Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.

- -

Une URL, ou Uniform Resource Locator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse https://www.mozilla.org/en-US/.

- -

Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).

- -

Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.

- -

La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).

- -

Il y a aussi deux répertoires dans la racine — pdfs et projects. Chacun d'eux comporte un seul fichier — respectivement un PDF (project-brief.pdf) et un fichier index.html. Notez que vous pouvez heureusement avoir deux fichiers index.html dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second index.html peut être le portail des informations relatives au projet.

- - - -
-

Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.

-
- -

Fragments de documents

- -

Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :

- -
<h2 id="Adresse_mailing">Adresse de mailing</h2>
- -

Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :

- -
<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
- -

Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :

- -
<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
- -

URL absolue vs. URL relative

- -

Deux termes que vous rencontrerez sur le Web sont URL absolue et URL relative :

- -

URL absolue : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page index.html est téléversée dans le dossier nommé projects à la racine du serveur web, et que le domaine du site est http://www.example.com, la page sera accessible à l'adresse http://www.example.com/projects/index.html (ou même seulement http://www.example.com/projects/, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme index.htm, si ce n'est pas précisé dans l'URL).

- -

Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.

- -

URL relative : pointe vers un emplacement qui est relatif au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en http://www.example.com/projects/index.html vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., project-brief.pdf — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de projects appelé pdfs, le lien relatif serait pdfs/project-brief.pdf (l'URL absolue équivalente serait http://www.example.com/projects/pdfs/project-brief.pdf.)

- -

Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre index.html du dossier projects vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative pdfs/project-brief.pdf qui s'y trouve pointerait alors vers un fichier situé en http://www.example.com/pdfs/project-brief.pdf, et non vers un fichier situé en http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Bien sûr, l'emplacement du fichier project-brief.pdf et du dossier pdfs ne changera pas subitement du fait que vous avez déplacé le fichier index.html : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !

- -

Meilleures pratiques de liens

- -

Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.

- - - -

Utilisez une formulation claire des liens

- -

Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens accessibles à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :

- - - -

Regardons un exemple particulier :

- -

Bon texte de lien: Télécharger Firefox

- -
<p><a href="https://firefox.com/">
-  Télécharger Firefox
-</a></p>
- -

Mauvais texte de lien : Cliquer ici pour télécharger Firefox

- -
<p><a href="https://firefox.com/">
-  Cliquer ici
-</a>
-pour télécharger Firefox</p>
-
- -

Autres conseils :

- - - -

Utilisez des liens relatifs partout où c'est possible

- -

Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un même site web. (pour les liens vers un autre site web, vous aurez besoin d'utiliser un lien absolu) :

- - - -

Liaison vers des ressources non-HTML : signalez‑les clairement

- -

Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :

- - - -

Voici quelques exemples suggérant les genres de texte pouvant être employé :

- -
<p><a href="http://www.exemple.com/rapport-volumineux.pdf">
-  Télécharger le rapport des ventes (PDF, 10Mo)
-</a></p>
-
-<p><a href="http://www.exemple.com/flux-video/" target="_blank">
-  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
-</a></p>
-
-<p><a href="http://www.exemple.com/jeu-de-voiture">
-  Jouer au jeu de voiture (nécessite Flash)
-</a></p>
- -

Utilisez l'attribut download pour faire un lien vers un téléchargement

- -

Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :

- -
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
-   download="firefox-latest-64bit-installer.exe">
-  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
-</a>
- -

Apprentissage actif : création d'un menu de navigation

- -

Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.

- -

Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier navigation-menu-start pour une liste complète des fichiers).

- - - -

Vous devez :

- -
    -
  1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.
    2. -
  2. Changer chaque nom de page en un lien vers cette page.
    3. -
  3. Copier le menu de navigation dans chaque page.
    4. -
  4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.
    5. -
- -

L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :

- -

Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.

- -
-

Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.

-
- -

Liens de courriel

- -

Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL mailto:.

- -

Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :

- -
<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
-
- -

Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.

- -

En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.

- -

Spécification des détails

- -

En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL mailto que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont subject, cc et body (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.

- -

Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :

- -
<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
-  Envoyer un mail avec copie, copie cachée, sujet et corps de message
-</a>
- -
-

Note : La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être percent-escaped. Notez également l'utilisation du point d'interrogation (?) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL mailto:. C'est la notation standard des requêtes URL. Lire La méthode GET pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.

-
- -

Voici quelques autres exemples d'URL mailto :

- - - -

Résumé

- -

C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.

- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md new file mode 100644 index 0000000000..abaeb6d167 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -0,0 +1,334 @@ +--- +title: Création d'hyperliens +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Apprendre + - Codage + - Débutant + - Guide + - HTML + - Liens + - Title + - URL + - absolu + - hyperliens + - relatif +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectif :Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.
+ +

Qu'est-ce un hyperlien ?

+ +

Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web une toile — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).

+ +
+

Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).

+
+ +

La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

Anatomie d'un lien

+ +

Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.

+ +
<p>Je suis en train de créer un lien à
+<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
+</p>
+ +

qui donne le résultat suivant :

+ +

Je suis en train de créer un lien à la page d'accueil de Mozilla.

+ +

Ajouter des informations d'assistance avec l'attribut title

+ +

L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :

+ +
<p>Je suis en train de créer un lien à
+<a href="https://www.mozilla.org/fr/"
+   title="Le meilleur endroit pour trouver plus d'informations sur la
+  mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
+</p>
+ +

Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :

+ +

Je suis en train de créer un lien vers la page d'accueil de Mozilla

+ +
+

Note : le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de title. Si une information de title est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.

+
+ +

Apprentissage actif : création de votre propre exemple de lien

+ +

C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre fichier modèle index.html fera parfaitement l'affaire).

+ + + +

Liens de niveau bloc

+ +

Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des éléments bloc . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.

+ +
<a href="https://www.mozilla.org/fr/">
+  <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
+</a>
+ +
+

Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.

+
+ +

Une brève présentation des URL et des chemins

+ +

Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.

+ +

Une URL, ou Uniform Resource Locator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse https://www.mozilla.org/en-US/.

+ +

Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).

+ +

Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.

+ +

La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).

+ +

Il y a aussi deux répertoires dans la racine — pdfs et projects. Chacun d'eux comporte un seul fichier — respectivement un PDF (project-brief.pdf) et un fichier index.html. Notez que vous pouvez heureusement avoir deux fichiers index.html dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second index.html peut être le portail des informations relatives au projet.

+ + + +
+

Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.

+
+ +

Fragments de documents

+ +

Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :

+ +
<h2 id="Adresse_mailing">Adresse de mailing</h2>
+ +

Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :

+ +
<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
+ +

Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :

+ +
<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
+ +

URL absolue vs. URL relative

+ +

Deux termes que vous rencontrerez sur le Web sont URL absolue et URL relative :

+ +

URL absolue : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page index.html est téléversée dans le dossier nommé projects à la racine du serveur web, et que le domaine du site est http://www.example.com, la page sera accessible à l'adresse http://www.example.com/projects/index.html (ou même seulement http://www.example.com/projects/, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme index.htm, si ce n'est pas précisé dans l'URL).

+ +

Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.

+ +

URL relative : pointe vers un emplacement qui est relatif au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en http://www.example.com/projects/index.html vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., project-brief.pdf — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de projects appelé pdfs, le lien relatif serait pdfs/project-brief.pdf (l'URL absolue équivalente serait http://www.example.com/projects/pdfs/project-brief.pdf.)

+ +

Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre index.html du dossier projects vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative pdfs/project-brief.pdf qui s'y trouve pointerait alors vers un fichier situé en http://www.example.com/pdfs/project-brief.pdf, et non vers un fichier situé en http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Bien sûr, l'emplacement du fichier project-brief.pdf et du dossier pdfs ne changera pas subitement du fait que vous avez déplacé le fichier index.html : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !

+ +

Meilleures pratiques de liens

+ +

Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.

+ + + +

Utilisez une formulation claire des liens

+ +

Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens accessibles à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :

+ + + +

Regardons un exemple particulier :

+ +

Bon texte de lien: Télécharger Firefox

+ +
<p><a href="https://firefox.com/">
+  Télécharger Firefox
+</a></p>
+ +

Mauvais texte de lien : Cliquer ici pour télécharger Firefox

+ +
<p><a href="https://firefox.com/">
+  Cliquer ici
+</a>
+pour télécharger Firefox</p>
+
+ +

Autres conseils :

+ + + +

Utilisez des liens relatifs partout où c'est possible

+ +

Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un même site web. (pour les liens vers un autre site web, vous aurez besoin d'utiliser un lien absolu) :

+ + + +

Liaison vers des ressources non-HTML : signalez‑les clairement

+ +

Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :

+ + + +

Voici quelques exemples suggérant les genres de texte pouvant être employé :

+ +
<p><a href="http://www.exemple.com/rapport-volumineux.pdf">
+  Télécharger le rapport des ventes (PDF, 10Mo)
+</a></p>
+
+<p><a href="http://www.exemple.com/flux-video/" target="_blank">
+  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
+</a></p>
+
+<p><a href="http://www.exemple.com/jeu-de-voiture">
+  Jouer au jeu de voiture (nécessite Flash)
+</a></p>
+ +

Utilisez l'attribut download pour faire un lien vers un téléchargement

+ +

Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
+   download="firefox-latest-64bit-installer.exe">
+  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
+</a>
+ +

Apprentissage actif : création d'un menu de navigation

+ +

Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.

+ +

Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier navigation-menu-start pour une liste complète des fichiers).

+ + + +

Vous devez :

+ +
    +
  1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.
    2. +
  2. Changer chaque nom de page en un lien vers cette page.
    3. +
  3. Copier le menu de navigation dans chaque page.
    4. +
  4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.
    5. +
+ +

L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :

+ +

Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.

+ +
+

Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.

+
+ +

Liens de courriel

+ +

Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL mailto:.

+ +

Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :

+ +
<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
+
+ +

Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.

+ +

En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.

+ +

Spécification des détails

+ +

En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL mailto que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont subject, cc et body (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.

+ +

Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :

+ +
<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
+  Envoyer un mail avec copie, copie cachée, sujet et corps de message
+</a>
+ +
+

Note : La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être percent-escaped. Notez également l'utilisation du point d'interrogation (?) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL mailto:. C'est la notation standard des requêtes URL. Lire La méthode GET pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.

+
+ +

Voici quelques autres exemples d'URL mailto :

+ + + +

Résumé

+ +

C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.

+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html deleted file mode 100644 index ed0cfa6a2b..0000000000 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Déboguer de l'HTML -slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML -tags: - - Codage - - Débutant - - Erreur - - Guide - - HTML - - Validation - - débogage - - validateur -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML -original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées aux pages Commencer avec le HTML, Fondamentaux du texte HTML et Création d'hyperliens.
Objectif :Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.
- -

Déboguer n'est pas un problème

- -

Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.

- -

Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez println!(Salut, Ô Monde!"); il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.

- -

Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.

- -

HTML et le débogage

- - - -

HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est interprété, pas compilé). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus permissive que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.

- -

Code permissif

- -

Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :

- - - - - -

HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !

- -
-

Note : HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.

-
- -

Apprentissage actif : étude avec un code permissif

- -

Voici le moment venu d'étudier le caractère permissif du code HTML.

- -
    -
  1. Primo, télécharchez notre démo debug-example et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit malformé, par opposition à bien-formé).
    2. -
  2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés.
    3. -
  3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément body est affiché) : - 
        <h1>Exemple de HTML à déboguer</h1>
-
-    <p>Quelles sont les causes d'erreur en HTML ?
-
-    <ul>
-      <li>Éléments non fermés : si un élément n'est <strong>pas
-          fermé proprement, ses effets peuvent déborder sur des
-          zones que vous ne souhaitiez pas.
-
-      <li>Éléments incorrectement imbriqués : imbriquer des
-          éléments proprement est également très important pour
-          que le code se comporte correctement.
-          <strong>caractères gras <em>ou gras et italiques ?</strong>
-          qu'est‑ce ?</em>
-
-      <li>Attributs non fermés : autre source courante de problèmes
-          en HTML. Voici un exemple: <a href="https://www.mozilla.org/>
-          lien à la page d'accueil de Mozilla</a>
-    </ul>
    -
    4. -
  4. Revoyons les problèmes : -
      -
    • Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.
      • -
    • Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.
      • -
    • Cette partie est mal imbriquée : <strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.
      • -
    • La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.
      • -
    -
    5. -
  5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
    6. -
  6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
    7. -
  7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes devraient donner le même résultat) : -
      -
    • Les éléments p et li ont été pourvus de balises fermantes.
      • -
    • L'endroit où le premier élément <strong> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises strong, jusqu'à la fin du document !
      • -
    • L'imbrication incorrecte a été corrigée ainsi : - 
      <strong>caractères gras
-  <em>ou caractères gras et italiques ?</em>
-</strong>
-<em> qu'est ce ?</em>
      -
      • -
    • Le lien avec les guillemets manquants a été illico détruit. Le dernier élément li ressemble à ceci : - 
      <li>
-  <strong>Attributs non fermés : autre source courante de problèmes
-en HTML. Voici un exemple :</strong>
-</li>
      -
      • -
    -
    8. -
- -

Validation d'un HTML

- -

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?

- -

La meilleure stratégie consiste à faire passer votre page HTML par le Markup Validation Service (Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.

- -

La page d'accueil du validateur HTML

- -

Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).

- -

Apprentissage actif : validation d'un document HTML

- -

Essayons cet outil avec notre document exemple.

- -
    -
  1. D'abord, chargez le Markup Validation Service dans un des onglets du navigateur, si ce n'est déjà fait.
    2. -
  2. Basculez sur l'onglet Validate by Direct Input.
    3. -
  3. Copiez la totalité du code du document (pas uniquement l'élément body) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.
    4. -
  4. Pressez le bouton Check.
    5. -
- -

Cela vous donnera une liste d'erreurs et autres informations.

- -

La liste des résultats de la validation de HTML par le service de validation du W3C.

- -

Interprétation des messages d'erreur

- -

Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.

- - - -

Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.

- -

Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie :

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Résumé

- -

Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md new file mode 100644 index 0000000000..ed0cfa6a2b --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -0,0 +1,194 @@ +--- +title: Déboguer de l'HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - Codage + - Débutant + - Erreur + - Guide + - HTML + - Validation + - débogage + - validateur +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées aux pages Commencer avec le HTML, Fondamentaux du texte HTML et Création d'hyperliens.
Objectif :Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.
+ +

Déboguer n'est pas un problème

+ +

Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.

+ +

Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez println!(Salut, Ô Monde!"); il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.

+ +

Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.

+ +

HTML et le débogage

+ + + +

HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est interprété, pas compilé). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus permissive que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.

+ +

Code permissif

+ +

Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :

+ + + + + +

HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !

+ +
+

Note : HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.

+
+ +

Apprentissage actif : étude avec un code permissif

+ +

Voici le moment venu d'étudier le caractère permissif du code HTML.

+ +
    +
  1. Primo, télécharchez notre démo debug-example et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit malformé, par opposition à bien-formé).
    2. +
  2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés.
    3. +
  3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément body est affiché) : + 
        <h1>Exemple de HTML à déboguer</h1>
+
+    <p>Quelles sont les causes d'erreur en HTML ?
+
+    <ul>
+      <li>Éléments non fermés : si un élément n'est <strong>pas
+          fermé proprement, ses effets peuvent déborder sur des
+          zones que vous ne souhaitiez pas.
+
+      <li>Éléments incorrectement imbriqués : imbriquer des
+          éléments proprement est également très important pour
+          que le code se comporte correctement.
+          <strong>caractères gras <em>ou gras et italiques ?</strong>
+          qu'est‑ce ?</em>
+
+      <li>Attributs non fermés : autre source courante de problèmes
+          en HTML. Voici un exemple: <a href="https://www.mozilla.org/>
+          lien à la page d'accueil de Mozilla</a>
+    </ul>
    +
    4. +
  4. Revoyons les problèmes : +
      +
    • Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.
      • +
    • Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.
      • +
    • Cette partie est mal imbriquée : <strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.
      • +
    • La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.
      • +
    +
    5. +
  5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
    6. +
  6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
    7. +
  7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes devraient donner le même résultat) : +
      +
    • Les éléments p et li ont été pourvus de balises fermantes.
      • +
    • L'endroit où le premier élément <strong> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises strong, jusqu'à la fin du document !
      • +
    • L'imbrication incorrecte a été corrigée ainsi : + 
      <strong>caractères gras
+  <em>ou caractères gras et italiques ?</em>
+</strong>
+<em> qu'est ce ?</em>
      +
      • +
    • Le lien avec les guillemets manquants a été illico détruit. Le dernier élément li ressemble à ceci : + 
      <li>
+  <strong>Attributs non fermés : autre source courante de problèmes
+en HTML. Voici un exemple :</strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validation d'un HTML

+ +

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?

+ +

La meilleure stratégie consiste à faire passer votre page HTML par le Markup Validation Service (Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.

+ +

La page d'accueil du validateur HTML

+ +

Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).

+ +

Apprentissage actif : validation d'un document HTML

+ +

Essayons cet outil avec notre document exemple.

+ +
    +
  1. D'abord, chargez le Markup Validation Service dans un des onglets du navigateur, si ce n'est déjà fait.
    2. +
  2. Basculez sur l'onglet Validate by Direct Input.
    3. +
  3. Copiez la totalité du code du document (pas uniquement l'élément body) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.
    4. +
  4. Pressez le bouton Check.
    5. +
+ +

Cela vous donnera une liste d'erreurs et autres informations.

+ +

La liste des résultats de la validation de HTML par le service de validation du W3C.

+ +

Interprétation des messages d'erreur

+ +

Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.

+ + + +

Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.

+ +

Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie :

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Résumé

+ +

Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html deleted file mode 100644 index 2ffb0e3cdf..0000000000 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Structure de Site Web et de document -slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -tags: - - Codage - - Disposition - - Débutant - - Guide - - HTML - - Page - - Site - - blocs - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
-
- -

De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML. Comment fonctionnent les liens hyperlinks , comme décrit dans Création d'hyperliens.
Objectif : -

Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.

-
- -

Principales parties d'un document

- -

Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :

- -
-
En‑tête (header)
-
Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.
-
Barre de navigation
-
Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.
-
Contenu principal
-
Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page.
-
Barre latérale
-
-

Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.

-
-
Pied de page
-
-

Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.

- Un « site web typique » pourrait ressembler à quelque chose comme ceci :
-
- -

un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.

- -

HTML pour structurer un contenu

- -

L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et utiliser le bon élément pour le bon travail.

- -

C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?

- -
-

Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).

-
- -

Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.

- -

Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :

- - - -

Apprentissage actif : exploration du code de l'exemple

- -

Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également dans le dépôt Github). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Intitulé de ma page</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">
-
-    <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
-         HTML5 fonctionne correctement avec les anciennes versions de
-         Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Voici notre en‑tête principale utilisée dans toutes les pages
-         de notre site web -->
-    <header>
-      <h1>En-tête</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Accueil</a></li>
-        <li><a href="#">L'équipe</a></li>
-        <li><a href="#">Projets</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- Un formulaire de recherche est une autre façon de naviguer de
-            façon non‑linéaire dans un site. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Rechercher">
-         <input type="submit" value="Lancer !">
-       </form>
-     </nav>
-
-    <!-- Ici nous mettons le contenu de la page -->
-    <main>
-
-      <!-- Il contient un article -->
-      <article>
-        <h2>En-tête d'article</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>Sous‑section</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>Autre sous‑section</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>
-
-      <!-- Le contenu « à côté » peut aussi être intégré dans le contenu
-           principal -->
-      <aside>
-        <h2>En relation</h2>
-        <ul>
-          <li><a href="#">Combien j'aime être près des rivages</a></li>
-          <li><a href="#">Combien j'aime être près de la mer</a></li>
-          <li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
-          <li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
-          <li><a href="#">Eh bien…</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
-    <footer>
-      <p>©Copyright 2050 par personne. Tous droits reversés.</p>
-    </footer>
-
-  </body>
-</html>
- -

Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.

- -

Plus de détails à propos des éléments de mise en page

- -

La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la référence aux éléments HTML. Pour l'instant, il convient de bien comprendre les principales définitions :

- - - -

Enveloppes non‑sémantiques

- -

Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.

- -

{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :

- -
<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
-alors qu'il titubait en travers de la porte <span class="editor-note">
-[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p>
- -

Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.

- -

{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :

- -
<div class="panier">
-  <h2>Panier d'achat</h2>
-  <ul>
-    <li>
-      <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Total des achats : €237,89</p>
-</div>
- -

Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.

- -
-

Attention : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.

-
- -

Sauts de ligne et traits horizontaux

- -

Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :

- -

<br> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :

- -
<p>Il y avait une fois une fille nommée Nell<br>
-Qui aimait écrire du HTML<br>
-Mais ses structures et sémantiques affligeantes<br>
-rendaient de ses marquages la lecture inélégante.</p>
- -

Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :

- -

Il y avait une fois une fille nommée Nell
- Qui aimait écrire du HTML
- Mais ses structures et sémantiques affligeantes
- rendaient de ses marquages la lecture inélégante.

- -

Les éléments <hr> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :

- -

Exemple avec hr

- -
<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
-<hr>
-<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
- -

sera rendu ainsi :

-

{{EmbedLiveSample("Exemple_avec_hr")}}

- -

Planification d'un site web simple

- -

Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !

- -
    -
  1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
    2. -
  2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
    3. -
  3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
    4. -
  4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
    5. -
  5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
    6. -
- -

Apprentissage actif : créez la cartographie de votre propre site

- -

Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?

- -
-

Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.

-
- -

Résumé

- -

Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md new file mode 100644 index 0000000000..2ffb0e3cdf --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -0,0 +1,291 @@ +--- +title: Structure de Site Web et de document +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +tags: + - Codage + - Disposition + - Débutant + - Guide + - HTML + - Page + - Site + - blocs + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
+
+ +

De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML. Comment fonctionnent les liens hyperlinks , comme décrit dans Création d'hyperliens.
Objectif : +

Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.

+
+ +

Principales parties d'un document

+ +

Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :

+ +
+
En‑tête (header)
+
Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.
+
Barre de navigation
+
Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.
+
Contenu principal
+
Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page.
+
Barre latérale
+
+

Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.

+
+
Pied de page
+
+

Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.

+ Un « site web typique » pourrait ressembler à quelque chose comme ceci :
+
+ +

un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.

+ +

HTML pour structurer un contenu

+ +

L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et utiliser le bon élément pour le bon travail.

+ +

C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?

+ +
+

Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).

+
+ +

Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.

+ +

Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :

+ + + +

Apprentissage actif : exploration du code de l'exemple

+ +

Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également dans le dépôt Github). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Intitulé de ma page</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">
+
+    <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
+         HTML5 fonctionne correctement avec les anciennes versions de
+         Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Voici notre en‑tête principale utilisée dans toutes les pages
+         de notre site web -->
+    <header>
+      <h1>En-tête</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Accueil</a></li>
+        <li><a href="#">L'équipe</a></li>
+        <li><a href="#">Projets</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- Un formulaire de recherche est une autre façon de naviguer de
+            façon non‑linéaire dans un site. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Rechercher">
+         <input type="submit" value="Lancer !">
+       </form>
+     </nav>
+
+    <!-- Ici nous mettons le contenu de la page -->
+    <main>
+
+      <!-- Il contient un article -->
+      <article>
+        <h2>En-tête d'article</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>Sous‑section</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>Autre sous‑section</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>
+
+      <!-- Le contenu « à côté » peut aussi être intégré dans le contenu
+           principal -->
+      <aside>
+        <h2>En relation</h2>
+        <ul>
+          <li><a href="#">Combien j'aime être près des rivages</a></li>
+          <li><a href="#">Combien j'aime être près de la mer</a></li>
+          <li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
+          <li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
+          <li><a href="#">Eh bien…</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
+    <footer>
+      <p>©Copyright 2050 par personne. Tous droits reversés.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.

+ +

Plus de détails à propos des éléments de mise en page

+ +

La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la référence aux éléments HTML. Pour l'instant, il convient de bien comprendre les principales définitions :

+ + + +

Enveloppes non‑sémantiques

+ +

Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.

+ +

{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :

+ +
<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
+alors qu'il titubait en travers de la porte <span class="editor-note">
+[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p>
+ +

Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.

+ +

{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :

+ +
<div class="panier">
+  <h2>Panier d'achat</h2>
+  <ul>
+    <li>
+      <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total des achats : €237,89</p>
+</div>
+ +

Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.

+ +
+

Attention : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.

+
+ +

Sauts de ligne et traits horizontaux

+ +

Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :

+ +

<br> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :

+ +
<p>Il y avait une fois une fille nommée Nell<br>
+Qui aimait écrire du HTML<br>
+Mais ses structures et sémantiques affligeantes<br>
+rendaient de ses marquages la lecture inélégante.</p>
+ +

Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :

+ +

Il y avait une fois une fille nommée Nell
+ Qui aimait écrire du HTML
+ Mais ses structures et sémantiques affligeantes
+ rendaient de ses marquages la lecture inélégante.

+ +

Les éléments <hr> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :

+ +

Exemple avec hr

+ +
<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
+<hr>
+<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
+ +

sera rendu ainsi :

+

{{EmbedLiveSample("Exemple_avec_hr")}}

+ +

Planification d'un site web simple

+ +

Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !

+ +
    +
  1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
    2. +
  2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
    3. +
  3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
    4. +
  4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
    5. +
  5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
    6. +
+ +

Apprentissage actif : créez la cartographie de votre propre site

+ +

Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?

+ +
+

Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.

+
+ +

Résumé

+ +

Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index dce8e89b0e..0000000000 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,725 +0,0 @@ ---- -title: Commencer avec le HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -tags: - - Attributs - - Codage - - Commentaires - - Débutant - - Elements - - Entités - - Guide - - HTML - - espace -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started -original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

- - - - - - - - - - - - -
Prérequis :Notions sur le fonctionnement d'un ordinateur, avoir installé les logiciels de base et savoir gérer les fichiers.
Objectif :Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.
- -

Qu'est ce que le HTML ?

- -

{{glossary("HTML")}} (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

- -
Mon chat est très grincheux
- -

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :

- -
<p>Mon chat est très grincheux</p>
- -
-

Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.

-
- -

Anatomie d'un élément HTML

- -

Regardons notre élément paragraphe d'un peu plus près :

- -

- -

Les principales parties de notre élément sont :

- -
    -
  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;
    2. -
  2. La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;
    3. -
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;
    4. -
  4. L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.
    5. -
- -

Apprentissage actif : créer votre premier élément HTML

- -

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}

- -

Eléments imbriqués

- -

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :

- -
<p>Mon chat est <strong>très</strong> grincheux.</p>
- -

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément strong, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

- -
<p>Mon chat est <strong>très grincheux.</p></strong>
- -

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

- -

Éléments bloc vs en ligne

- -

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

- - - -

Prenez l'exemple suivant :

- -
<em>premier</em><em>deuxième</em><em>troisième</em>
-
-<p>quatrième</p><p>cinquième</p><p>sixième</p>
-
- -

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

- -

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}

- -
-

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

-
- -
-

Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.

-
- -
-

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

-
- -

Éléments vides

- -

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
- -

Cela affichera l'élément suivant sur votre page :

- -

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -

Attributs

- -

Les éléments peuvent aussi avoir des attributs, qui comme suit:

- -

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

- -

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

- -

Pour créer un attribut, il faut :

- -
    -
  1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
    2. -
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
    3. -
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.
    4. -
- -

Apprentissage actif : ajouter des attributs à un élément

- -

Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

- - - -

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}

- -

Les attributs booléens

- -

Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

- -
<input type="text" disabled="disabled">
- -

Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

Ces deux exemples vous donneront le résultat suivant :

- -

{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}

- -

Omettre des guillemets autour des valeurs d'attribut

- -

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

- -
<a href=https://www.mozilla.org/>mon site web favori</a>
- -

Cependant, si nous ajoutons l'attribut title dans ce même style, cela devient incorrect :

- -
<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a>
- -

En effet, le navigateur interprétera mal la balise, pensant que l'attribut title est en fait quatre attributs — un attribut title avec la valeur « La » et trois attributs booléens, « page », « d\'accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de title donne.

- -

{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

- -

Guillemets simples ou doubles ?

- -

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :

- -
<a href="http://www.exemple.com">Un lien vers mon exemple.</a>
-
-<a href='http://www.example.com'>Un lien vers mon exemple</a>
- -

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :

- -
<a href="http://www.exemple.com'>Un lien vers mon exemple.</a>
- -

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

- -
<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a>
- -

Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser une entité HTML pour représenter ce caractère spécial.

- -

Anatomie d'un document HTML

- -

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page test</title>
-  </head>
-  <body>
-    <p>Voici ma page web</p>
-  </body>
-</html>
- -

Ici, nous avons :

- -
    -
  1. <!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C'est tout ce que vous avez vraiment besoin de savoir.
    2. -
  2. <html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.
    3. -
  3. <head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.
    4. -
  4. <meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard.
    5. -
  5. <title></title> : l'élément title. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris.
    6. -
  6. <body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
    7. -
- -

Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

- -

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :

- -
    -
  1. copier l'exemple de page HTML ci-dessus.
    2. -
  2. créer un nouveau fichier dans votre éditeur de texte.
    3. -
  3. coller le code dans le nouveau fichier texte.
    4. -
  4. enregistrer le fichier sous index.html.
    5. -
- -
-

Note : Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.

-
- -

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

- -

Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :

- - - -

Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Espace vide en HTML

- -

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:

- -
<p>Les chiens sont idiots.</p>
-
-<p>Les chiens        sont
-           idiots.</p>
- -

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

- -

Références d'entités : inclure les caractères spéciaux en HTML

- -

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?

- -

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Le caractèreRéference équivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :

- -
<p>En HTML, un paragraphe se définit avec l'élément <p>.</p>
-
-<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p>
- -

Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère.

- -

{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note : Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.

-
- -

Commentaires en HTML

- -

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.

- -

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple :

- -
<p>Je ne suis pas dans un commentaire</p>
-
-<!-- <p>Je suis dans un commmentaire!</p> -->
- -

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

- -

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Résumé

- -

Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !

- -
-

Note : À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.

-
- -

Voir aussi

- - - -
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.md b/files/fr/learn/html/introduction_to_html/getting_started/index.md new file mode 100644 index 0000000000..dce8e89b0e --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.md @@ -0,0 +1,725 @@ +--- +title: Commencer avec le HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - Attributs + - Codage + - Commentaires + - Débutant + - Elements + - Entités + - Guide + - HTML + - espace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

+ + + + + + + + + + + + +
Prérequis :Notions sur le fonctionnement d'un ordinateur, avoir installé les logiciels de base et savoir gérer les fichiers.
Objectif :Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.
+ +

Qu'est ce que le HTML ?

+ +

{{glossary("HTML")}} (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

+ +
Mon chat est très grincheux
+ +

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :

+ +
<p>Mon chat est très grincheux</p>
+ +
+

Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.

+
+ +

Anatomie d'un élément HTML

+ +

Regardons notre élément paragraphe d'un peu plus près :

+ +

+ +

Les principales parties de notre élément sont :

+ +
    +
  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;
    2. +
  2. La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;
    3. +
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;
    4. +
  4. L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.
    5. +
+ +

Apprentissage actif : créer votre premier élément HTML

+ +

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}

+ +

Eléments imbriqués

+ +

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :

+ +
<p>Mon chat est <strong>très</strong> grincheux.</p>
+ +

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément strong, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

+ +
<p>Mon chat est <strong>très grincheux.</p></strong>
+ +

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

+ +

Éléments bloc vs en ligne

+ +

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

+ + + +

Prenez l'exemple suivant :

+ +
<em>premier</em><em>deuxième</em><em>troisième</em>
+
+<p>quatrième</p><p>cinquième</p><p>sixième</p>
+
+ +

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

+ +

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}

+ +
+

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

+
+ +
+

Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.

+
+ +
+

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

+
+ +

Éléments vides

+ +

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
+ +

Cela affichera l'élément suivant sur votre page :

+ +

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Attributs

+ +

Les éléments peuvent aussi avoir des attributs, qui comme suit:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

+ +

Pour créer un attribut, il faut :

+ +
    +
  1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
    2. +
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
    3. +
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.
    4. +
+ +

Apprentissage actif : ajouter des attributs à un élément

+ +

Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

+ + + +

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}

+ +

Les attributs booléens

+ +

Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

+ +
<input type="text" disabled="disabled">
+ +

Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Ces deux exemples vous donneront le résultat suivant :

+ +

{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}

+ +

Omettre des guillemets autour des valeurs d'attribut

+ +

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

+ +
<a href=https://www.mozilla.org/>mon site web favori</a>
+ +

Cependant, si nous ajoutons l'attribut title dans ce même style, cela devient incorrect :

+ +
<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a>
+ +

En effet, le navigateur interprétera mal la balise, pensant que l'attribut title est en fait quatre attributs — un attribut title avec la valeur « La » et trois attributs booléens, « page », « d\'accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de title donne.

+ +

{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

+ +

Guillemets simples ou doubles ?

+ +

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :

+ +
<a href="http://www.exemple.com">Un lien vers mon exemple.</a>
+
+<a href='http://www.example.com'>Un lien vers mon exemple</a>
+ +

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :

+ +
<a href="http://www.exemple.com'>Un lien vers mon exemple.</a>
+ +

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

+ +
<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a>
+ +

Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser une entité HTML pour représenter ce caractère spécial.

+ +

Anatomie d'un document HTML

+ +

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page test</title>
+  </head>
+  <body>
+    <p>Voici ma page web</p>
+  </body>
+</html>
+ +

Ici, nous avons :

+ +
    +
  1. <!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C'est tout ce que vous avez vraiment besoin de savoir.
    2. +
  2. <html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.
    3. +
  3. <head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.
    4. +
  4. <meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard.
    5. +
  5. <title></title> : l'élément title. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris.
    6. +
  6. <body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
    7. +
+ +

Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

+ +

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :

+ +
    +
  1. copier l'exemple de page HTML ci-dessus.
    2. +
  2. créer un nouveau fichier dans votre éditeur de texte.
    3. +
  3. coller le code dans le nouveau fichier texte.
    4. +
  4. enregistrer le fichier sous index.html.
    5. +
+ +
+

Note : Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.

+
+ +

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

+ +

Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :

+ + + +

Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Espace vide en HTML

+ +

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:

+ +
<p>Les chiens sont idiots.</p>
+
+<p>Les chiens        sont
+           idiots.</p>
+ +

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

+ +

Références d'entités : inclure les caractères spéciaux en HTML

+ +

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?

+ +

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Le caractèreRéference équivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :

+ +
<p>En HTML, un paragraphe se définit avec l'élément <p>.</p>
+
+<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p>
+ +

Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère.

+ +

{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note : Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.

+
+ +

Commentaires en HTML

+ +

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.

+ +

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple :

+ +
<p>Je ne suis pas dans un commentaire</p>
+
+<!-- <p>Je suis dans un commmentaire!</p> -->
+ +

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

+ +

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Résumé

+ +

Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !

+ +
+

Note : À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.

+
+ +

Voir aussi

+ + + +
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index 213a383e88..0000000000 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,951 +0,0 @@ ---- -title: Fondamentaux du texte HTML -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -tags: - - Apprendre - - Débutant - - Guide - - HTML - - Introduction à l'HTML - - Listes - - Paragraphes - - Texte - - Titres - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -original_slug: Apprendre/HTML/Introduction_à_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")}}
- -

L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.

- - - - - - - - - - - - -
Pré-requis: -

Connaître les bases du langage HTML, telles que traitées à la page Commencer avec le HTML.

-
Objectif: -

Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.

-
- -

Les bases : titres et paragraphes

- -

La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Le contenu structuré facilite la lecture et la rend plus agréable.

- -

En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :

- -
<p>Je suis un paragraphe, oh oui je le suis.</p>
- -

Chaque titre doit être contenu dans un élément titre :

- -
<h1>Je suis le titre de l'histoire.</h1>
- -

Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <h1> représente le titre principal, <h2> représente un sous-titre, <h3> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <h6>.

- -

Implémentation de la hiérarchie structurale

- -

Dans une histoire, la balise <h1> représenterait le titre de l'histoire, les balises <h2> représenteraient les titres des chapitres, les balises <h3> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <h6>.

- -
<h1>L'ennui mortel</h1>
-
-<p>par Chris Mills</p>
-
-<h2>Chapitre I : La nuit noire</h2>
-
-<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p>
-
-<h2>Chapitre II : Le silence éternel</h2>
-
-<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p>
-
-<h3>Le spectre parle</h3>
-
-<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p>
- -

C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :

- - - -

Pourquoi faut-il structurer un document ?

- -

Pour répondre à cette question, regardons la page text-start.html — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche Entrée ou ⏎)

- -

Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !

- -

Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.

- -

Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :

- - - -

Il est donc nécessaire d'ajouter des balises de structuration du contenu.

- -

Apprentissage actif : structurer le contenu

- -

Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ Sortie directe.

- -

Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}

- -

Pourquoi a-t-on besoin de sémantique ?

- -

La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)

- -

Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».

- -
<h1>Ceci est un titre principal</h1>
- -

Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).

- -

D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :

- -
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span>
- -

C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.

- -

Listes

- -

Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.

- -

Listes non-ordonnées

- -

Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :

- -
lait
-œufs
-pain
-houmous
- -

Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (unorderd list) qui enveloppe tous les éléments de la liste:

- -
<ul>
-lait
-œufs
-pain
-houmous
-</ul>
- -

Chaque item est contenu dans un élément {{htmlelement("li")}} (list item):

- -
<ul>
-  <li>lait</li>
-  <li>œufs</li>
-  <li>pain</li>
-  <li>houmous</li>
-</ul>
- -

Apprentissage actif : mettre des balises à une liste non-ordonnée

- -

Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}

- -

Listes ordonnées

- -

Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:

- -
Roulez jusqu'au bout de la route
-Tournez à droite
-Allez tout droit aux deux premiers ronds-points
-Tournez à gauche au troisième rond-point
-Roulez sur 300 mètres, l'école est sur votre droite
- -

Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (ordered list), et non dans <ul>:

- -
<ol>
-  <li>Roulez jusqu'au bout de la route</li>
-  <li>Tournez à droite</li>
-  <li>Allez tout droit aux deux premiers ronds-points</li>
-  <li>Tournez à gauche au troisième rond-point</li>
-  <li>Roulez sur 300 mètres, l'école est sur votre droite</li>
-</ol>
- -

Apprentissage actif : baliser une liste ordonnée

- -

Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}

- -

Apprentissage actif : mettre des balises pour une recette de cuisine

- -

Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}

- -

Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.

- -

Imbriquer des listes

- -

Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :

- -
<ol>
-  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
-  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
-  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li>
-  <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
-  <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
-</ol>
-
- -

Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :

- -
<ol>
-  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
-  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
-  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
-    <ul>
-      <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
-      <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
-    </ul>
-  </li>
-</ol>
-
- -

N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.

- -

Soulignement et importance

- -

Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.

- -

Emphase

- -

Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.

- -

« Je suis content que vous n'ayez pas été en retard. »

- -

« Je suis content que vous n'ayez pas été en retard. »

- -

La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.

- -

En HTML, nous utilisons l'élément {{htmlelement("em")}} (emphase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).

- -
<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p>
- -

Grande importance

- -

Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :

- -

Ce liquide est hautement toxique.

- -

Je compte sur vous. Ne soyez pas en retard !

- -

En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).

- -
<p>Ce liquide est <strong>hautement toxique</strong>.</p>
-
-<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
- -

Il est possible d'imbriquer strong et em :

- -
<p>Ce liquide est <strong>hautement toxique</strong> —
-si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
- -

Apprentissage actif : soulignez l'important

- -

Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.

- - - - - - - - -

{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}

- -

Italique, gras, soulignement…

- -

Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés éléments de présentation et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.

- -

HTML5 a redéfini <b>, <i> et <u> avec de nouveaux rôles sémantiques quelques peu déroutants.

- -

Voici la meilleure règle d'or : il est probablement approprié d'utiliser <b>, <i>, ou <u> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.

- - - -
-

Note : Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.

-
- -
<!-- noms scientifiques -->
-<p>
-  Le colibri à gorge rouge (<i>Archilochus colubris</i>)
-  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
-</p>
-
-<!-- mots dans une langue étrangère -->
-<p>
-  Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>.
-</p>
-
-<!-- une faute d'orthographe connue -->
-<p>
-  Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>.
-</p>
-
-<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions -->
-<ol>
-  <li>
-    <b>Trancher</b> deux morceaux de pain dans la miche.
-  </li>
-  <li>
-    <b>Mettre</b> une rondelle de tomate et une feuille de laitue
-    entre les deux tranches de pain.
-  </li>
-</ol>
- -

Résumé

- -

C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment créer des hyperliens, qui est peut-être l'élément le plus important sur le Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md new file mode 100644 index 0000000000..213a383e88 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -0,0 +1,951 @@ +--- +title: Fondamentaux du texte HTML +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - Apprendre + - Débutant + - Guide + - HTML + - Introduction à l'HTML + - Listes + - Paragraphes + - Texte + - Titres + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Apprendre/HTML/Introduction_à_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")}}
+ +

L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.

+ + + + + + + + + + + + +
Pré-requis: +

Connaître les bases du langage HTML, telles que traitées à la page Commencer avec le HTML.

+
Objectif: +

Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.

+
+ +

Les bases : titres et paragraphes

+ +

La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Le contenu structuré facilite la lecture et la rend plus agréable.

+ +

En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :

+ +
<p>Je suis un paragraphe, oh oui je le suis.</p>
+ +

Chaque titre doit être contenu dans un élément titre :

+ +
<h1>Je suis le titre de l'histoire.</h1>
+ +

Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <h1> représente le titre principal, <h2> représente un sous-titre, <h3> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <h6>.

+ +

Implémentation de la hiérarchie structurale

+ +

Dans une histoire, la balise <h1> représenterait le titre de l'histoire, les balises <h2> représenteraient les titres des chapitres, les balises <h3> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <h6>.

+ +
<h1>L'ennui mortel</h1>
+
+<p>par Chris Mills</p>
+
+<h2>Chapitre I : La nuit noire</h2>
+
+<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p>
+
+<h2>Chapitre II : Le silence éternel</h2>
+
+<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p>
+
+<h3>Le spectre parle</h3>
+
+<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p>
+ +

C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :

+ + + +

Pourquoi faut-il structurer un document ?

+ +

Pour répondre à cette question, regardons la page text-start.html — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche Entrée ou ⏎)

+ +

Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !

+ +

Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.

+ +

Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :

+ + + +

Il est donc nécessaire d'ajouter des balises de structuration du contenu.

+ +

Apprentissage actif : structurer le contenu

+ +

Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ Sortie directe.

+ +

Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}

+ +

Pourquoi a-t-on besoin de sémantique ?

+ +

La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)

+ +

Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».

+ +
<h1>Ceci est un titre principal</h1>
+ +

Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).

+ +

D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :

+ +
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span>
+ +

C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.

+ +

Listes

+ +

Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.

+ +

Listes non-ordonnées

+ +

Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :

+ +
lait
+œufs
+pain
+houmous
+ +

Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (unorderd list) qui enveloppe tous les éléments de la liste:

+ +
<ul>
+lait
+œufs
+pain
+houmous
+</ul>
+ +

Chaque item est contenu dans un élément {{htmlelement("li")}} (list item):

+ +
<ul>
+  <li>lait</li>
+  <li>œufs</li>
+  <li>pain</li>
+  <li>houmous</li>
+</ul>
+ +

Apprentissage actif : mettre des balises à une liste non-ordonnée

+ +

Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}

+ +

Listes ordonnées

+ +

Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:

+ +
Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers ronds-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite
+ +

Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (ordered list), et non dans <ul>:

+ +
<ol>
+  <li>Roulez jusqu'au bout de la route</li>
+  <li>Tournez à droite</li>
+  <li>Allez tout droit aux deux premiers ronds-points</li>
+  <li>Tournez à gauche au troisième rond-point</li>
+  <li>Roulez sur 300 mètres, l'école est sur votre droite</li>
+</ol>
+ +

Apprentissage actif : baliser une liste ordonnée

+ +

Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}

+ +

Apprentissage actif : mettre des balises pour une recette de cuisine

+ +

Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}

+ +

Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.

+ +

Imbriquer des listes

+ +

Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :

+ +
<ol>
+  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
+  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
+  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li>
+  <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
+  <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
+</ol>
+
+ +

Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :

+ +
<ol>
+  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
+  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
+  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
+    <ul>
+      <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
+      <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
+    </ul>
+  </li>
+</ol>
+
+ +

N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.

+ +

Soulignement et importance

+ +

Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.

+ +

Emphase

+ +

Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.

+ +

« Je suis content que vous n'ayez pas été en retard. »

+ +

« Je suis content que vous n'ayez pas été en retard. »

+ +

La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.

+ +

En HTML, nous utilisons l'élément {{htmlelement("em")}} (emphase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).

+ +
<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p>
+ +

Grande importance

+ +

Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :

+ +

Ce liquide est hautement toxique.

+ +

Je compte sur vous. Ne soyez pas en retard !

+ +

En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).

+ +
<p>Ce liquide est <strong>hautement toxique</strong>.</p>
+
+<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
+ +

Il est possible d'imbriquer strong et em :

+ +
<p>Ce liquide est <strong>hautement toxique</strong> —
+si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
+ +

Apprentissage actif : soulignez l'important

+ +

Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.

+ + + + + + + + +

{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}

+ +

Italique, gras, soulignement…

+ +

Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés éléments de présentation et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.

+ +

HTML5 a redéfini <b>, <i> et <u> avec de nouveaux rôles sémantiques quelques peu déroutants.

+ +

Voici la meilleure règle d'or : il est probablement approprié d'utiliser <b>, <i>, ou <u> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.

+ + + +
+

Note : Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.

+
+ +
<!-- noms scientifiques -->
+<p>
+  Le colibri à gorge rouge (<i>Archilochus colubris</i>)
+  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
+</p>
+
+<!-- mots dans une langue étrangère -->
+<p>
+  Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>.
+</p>
+
+<!-- une faute d'orthographe connue -->
+<p>
+  Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>.
+</p>
+
+<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions -->
+<ol>
+  <li>
+    <b>Trancher</b> deux morceaux de pain dans la miche.
+  </li>
+  <li>
+    <b>Mettre</b> une rondelle de tomate et une feuille de laitue
+    entre les deux tranches de pain.
+  </li>
+</ol>
+ +

Résumé

+ +

C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment créer des hyperliens, qui est peut-être l'élément le plus important sur le Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html deleted file mode 100644 index d4a5b51dbd..0000000000 --- a/files/fr/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Introduction au HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - Codage - - HTML - - Introduction au HTML - - Landing - - Liens - - Structure - - Texte - - head - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML -original_slug: Apprendre/HTML/Introduction_à_HTML ---- -
{{LearnSidebar}}
- -

Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.

- -

Prérequis

- -

Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu'expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s'adresse aux débutants.

- -
-

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.

- -
-
Commencer avec le HTML
-
Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.
-
Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML
-
head dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).
-
Les concepts fondamentaux du HTML liés au texte
-
Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi sémantiser), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.
-
Créer des hyperliens
-
Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.
-
La mise en forme avancée du texte
-
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
-
La structure d'un document et d'un site web
-
De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.
-
Déboguer du code HTML
-
Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider.
-
- -

Évaluations

- -

Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.

- -
-
Utiliser les bons éléments pour une lettre
-
Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.
-
Organiser la structure d'une page
-
Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.
-
- -

Voir également

- -
-
Web literacy basics 1
-
Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.
-
diff --git a/files/fr/learn/html/introduction_to_html/index.md b/files/fr/learn/html/introduction_to_html/index.md new file mode 100644 index 0000000000..d4a5b51dbd --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/index.md @@ -0,0 +1,66 @@ +--- +title: Introduction au HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - Codage + - HTML + - Introduction au HTML + - Landing + - Liens + - Structure + - Texte + - head + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Apprendre/HTML/Introduction_à_HTML +--- +
{{LearnSidebar}}
+ +

Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.

+ +

Prérequis

+ +

Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu'expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s'adresse aux débutants.

+ +
+

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.

+ +
+
Commencer avec le HTML
+
Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.
+
Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML
+
head dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).
+
Les concepts fondamentaux du HTML liés au texte
+
Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi sémantiser), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.
+
Créer des hyperliens
+
Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.
+
La mise en forme avancée du texte
+
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
+
La structure d'un document et d'un site web
+
De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.
+
Déboguer du code HTML
+
Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider.
+
+ +

Évaluations

+ +

Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.

+ +
+
Utiliser les bons éléments pour une lettre
+
Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.
+
Organiser la structure d'une page
+
Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.
+
+ +

Voir également

+ +
+
Web literacy basics 1
+
Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.
+
diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html deleted file mode 100644 index faa34e068d..0000000000 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Faire une lettre -slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -tags: - - Codage - - Débutant - - Evaluation - - HTML - - Liens - - Texte - - en-tête -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.

- - - - - - - - - - - - -
Prérequis :Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte.
Objectif :Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>.
- -

Point de départ

- -

Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure dans l'HTML. Créez un nouveau fichier .html avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme JSBin ou Thimble pour faire l'exercice.)

- -

Projet « lettre »

- -

Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.

- -

Sémantique de blocs/structures :

- - - -

Sémantique en ligne :

- - - -

Dans l'en‑tête du document :

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.

- -

Présentation de la lettre

- -

Évaluation

- -

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md new file mode 100644 index 0000000000..faa34e068d --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md @@ -0,0 +1,104 @@ +--- +title: Faire une lettre +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +tags: + - Codage + - Débutant + - Evaluation + - HTML + - Liens + - Texte + - en-tête +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.

+ + + + + + + + + + + + +
Prérequis :Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte.
Objectif :Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>.
+ +

Point de départ

+ +

Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure dans l'HTML. Créez un nouveau fichier .html avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme JSBin ou Thimble pour faire l'exercice.)

+ +

Projet « lettre »

+ +

Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.

+ +

Sémantique de blocs/structures :

+ + + +

Sémantique en ligne :

+ + + +

Dans l'en‑tête du document :

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.

+ +

Présentation de la lettre

+ +

Évaluation

+ +

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html deleted file mode 100644 index 0fa7c74921..0000000000 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Structurer une page de contenu -slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
-{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.

- - - - - - - - - - - - -
Prérequis :Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur Structure de Site Web et de document
Objectif :Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.
- -

Point de départ

- -

Pour commencer cet exercice, vous pouvez télécharger l'archive contenant les fichiers nécessaires à cette évaluation. Elle contient :

- - - -

Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme JSBin ou Thimble pour faire votre évaluation.

- -

Aperçu du projet

- -

Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :

- - - -

Vous devez ajouter les enveloppes appropriées pour :

- - - -

Vous devez aussi

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.

- -

L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.

- -

Évaluation

- -

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

- -

{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md new file mode 100644 index 0000000000..0fa7c74921 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md @@ -0,0 +1,97 @@ +--- +title: Structurer une page de contenu +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.

+ + + + + + + + + + + + +
Prérequis :Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur Structure de Site Web et de document
Objectif :Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.
+ +

Point de départ

+ +

Pour commencer cet exercice, vous pouvez télécharger l'archive contenant les fichiers nécessaires à cette évaluation. Elle contient :

+ + + +

Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme JSBin ou Thimble pour faire votre évaluation.

+ +

Aperçu du projet

+ +

Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :

+ + + +

Vous devez ajouter les enveloppes appropriées pour :

+ + + +

Vous devez aussi

+ + + +

Conseils et astuces

+ + + +

Exemple

+ +

La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.

+ +

L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.

+ +

Évaluation

+ +

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

+ +

{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index af254c337d..0000000000 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Qu'avez-vous dans la tête ? Métadonnées en HTML -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
- -

L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.

- - - - - - - - - - - - -
Prérequis:Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs:En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.
- -

Qu'est-ce que l'en-tête de HTML ?

- -

Revoyons le document HTML de base de l' article précédent:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page test</title>
-  </head>
-  <body>
-    <p>Voici ma page</p>
-  </body>
-</html>
- -

Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

- -
<head>
-  <meta charset="utf-8">
-  <title>Ma page test</title>
-</head>
- -

Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

- -

Ajouter un titre

- -

Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !

- - - -

Apprentissage actif : inspection d'un exemple simple

- -
    -
  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre page-titre-exemple sur le dépôt Github. Pour ce faire, soit : - -
      -
    1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.
      2. -
    2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.
      3. -
    -
    2. -
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : -

    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !

    -
    3. -
  3. -

    Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

    -
    4. -
- -

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.

- -

Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.

- -

Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.

- -

Métadonnées : l'élément <meta>

- -

Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

- -

Définition de l'encodage des caractères du document

- -

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

- -
<meta charset="utf-8">
- -

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :

- -

Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :

- -

Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.

- -
-

Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.

-
- -

Apprentissage actif : expérience avec l'encodage des caractères

- -

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Ajouter le nom de l'auteur et une description

- -

De nombreux éléments <meta> icontiennent les attributs name et content :

- - - -

Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="La Zone Apprentissage des documents web
-du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
-savoir pour commencer le développement de pages webs et d'applications.">
- -

Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

- -

Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme Search Engine Optimization ou {{glossary("SEO")}} — optimisation du moteur de recherche.)

- -

Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.

- -

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

- -
    -
  1. Allez sur la page d'accueil de Mozilla Developer Network.
    2. -
  2. Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
    3. -
  3. Trouvez la balise méta description. Elle ressemble à ceci : - 
    <meta name="description" content="MDN Web Docs fournit
- des informations sur les technologies web ouvertes comme HTML,
- CSS et les API utilisées pour les sites web et les applications
- web. On y trouve également de la documentation destinées aux
- développeurs à propos des produits Mozilla tels que les
- outils de développement de Firefox.">
    -
    4. -
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! -

    Une page de recherche Google pour "MDN web docs"

    -
    5. -
- -
-

Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

-
- -
-

Note : Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.

-
- -

Autres types de métadonnées

- -

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

- -

Par exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

- -
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
-<meta property="og:description" content="MDN Web Docs fournit des
-informations sur les technologies web ouvertes comme HTML, CSS et les API
-utilisées pour les sites web et les applications web. On y trouve également
-de la documentation destinées aux développeurs à propos des produits
-Mozilla tels que les outils de développement de Firefox.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Ajouter des icônes personnalisées à un site

- -

Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

- -

La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.

- -

Une favicône peut être ajoutée à votre page de la façon suivante :

- -
    -
  1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)
    2. -
  2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer : - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Voici un exemple de favicône dans un panneau de favoris :

- -

Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.

- -

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

- -
<!-- troisième-génération iPad avec haute-résolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
-<!-- iPhone avec haute-résolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
-<!-- iPad de première et deuxième génération : -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
-<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
-<!-- favicône de base -->
-<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
- -

Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.

- -

Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.

- -

Application des CSS et JavaScript au HTML

- -

À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.

- - - -

Apprentissage actif : appliquer des CSS et du JavaScript à une page

- -
    -
  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
    2. -
  2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.
    3. -
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.
    4. -
- -

Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :

- -

Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.

- - - -
-

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

-
- -

Définition de la langue principale du document

- -

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)

- -
<html lang="fr">
- -

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)

- -

Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :

- -
<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
- -

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

- -

Résumé

- -

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md new file mode 100644 index 0000000000..af254c337d --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -0,0 +1,287 @@ +--- +title: Qu'avez-vous dans la tête ? Métadonnées en HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.

+ + + + + + + + + + + + +
Prérequis:Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs:En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.
+ +

Qu'est-ce que l'en-tête de HTML ?

+ +

Revoyons le document HTML de base de l' article précédent:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page test</title>
+  </head>
+  <body>
+    <p>Voici ma page</p>
+  </body>
+</html>
+ +

Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Ma page test</title>
+</head>
+ +

Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

+ +

Ajouter un titre

+ +

Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !

+ + + +

Apprentissage actif : inspection d'un exemple simple

+ +
    +
  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre page-titre-exemple sur le dépôt Github. Pour ce faire, soit : + +
      +
    1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.
      2. +
    2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.
      3. +
    +
    2. +
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : +

    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <title> apparaît !

    +
    3. +
  3. +

    Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

    +
    4. +
+ +

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.

+ +

Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.

+ +

Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.

+ +

Métadonnées : l'élément <meta>

+ +

Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

+ +

Définition de l'encodage des caractères du document

+ +

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

+ +
<meta charset="utf-8">
+ +

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :

+ +

Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :

+ +

Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.

+ +
+

Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.

+
+ +

Apprentissage actif : expérience avec l'encodage des caractères

+ +

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Ajouter le nom de l'auteur et une description

+ +

De nombreux éléments <meta> icontiennent les attributs name et content :

+ + + +

Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="La Zone Apprentissage des documents web
+du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
+savoir pour commencer le développement de pages webs et d'applications.">
+ +

Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

+ +

Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme Search Engine Optimization ou {{glossary("SEO")}} — optimisation du moteur de recherche.)

+ +

Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.

+ +

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

+ +
    +
  1. Allez sur la page d'accueil de Mozilla Developer Network.
    2. +
  2. Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
    3. +
  3. Trouvez la balise méta description. Elle ressemble à ceci : + 
    <meta name="description" content="MDN Web Docs fournit
+ des informations sur les technologies web ouvertes comme HTML,
+ CSS et les API utilisées pour les sites web et les applications
+ web. On y trouve également de la documentation destinées aux
+ développeurs à propos des produits Mozilla tels que les
+ outils de développement de Firefox.">
    +
    4. +
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! +

    Une page de recherche Google pour "MDN web docs"

    +
    5. +
+ +
+

Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

+
+ +
+

Note : Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.

+
+ +

Autres types de métadonnées

+ +

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

+ +

Par exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

+ +
<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
+<meta property="og:description" content="MDN Web Docs fournit des
+informations sur les technologies web ouvertes comme HTML, CSS et les API
+utilisées pour les sites web et les applications web. On y trouve également
+de la documentation destinées aux développeurs à propos des produits
+Mozilla tels que les outils de développement de Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Ajouter des icônes personnalisées à un site

+ +

Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

+ +

La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.

+ +

Une favicône peut être ajoutée à votre page de la façon suivante :

+ +
    +
  1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)
    2. +
  2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer : + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Voici un exemple de favicône dans un panneau de favoris :

+ +

Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.

+ +

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

+ +
<!-- troisième-génération iPad avec haute-résolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
+<!-- iPhone avec haute-résolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
+<!-- iPad de première et deuxième génération : -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
+<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
+<!-- favicône de base -->
+<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
+ +

Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.

+ +

Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.

+ +

Application des CSS et JavaScript au HTML

+ +

À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.

+ + + +

Apprentissage actif : appliquer des CSS et du JavaScript à une page

+ +
    +
  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
    2. +
  2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.
    3. +
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.
    4. +
+ +

Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :

+ +

Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.

+ + + +
+

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

+
+ +

Définition de la langue principale du document

+ +

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)

+ +
<html lang="fr">
+ +

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)

+ +

Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :

+ +
<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

+ +

Résumé

+ +

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html deleted file mode 100644 index e8cddd0909..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Ajouter des images vectorielles à une page web -slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -tags: - - Graphics - - Guide - - HTML - - Intermediate - - Learn - - SVG -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web ---- -

{{LearnSidebar}}
- {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple et comment insérer une image dans un document HTML.
Objectifs :Apprendre comment intégrer une image SVG dans une page web.
- -

Qu'est-ce que SVG ? Qu'apporte-t-il ?

- -

SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.

- -

Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.

- -

Au contraire, les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant srcset et sizes.

- -

De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.

- -

Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.

- -
-

Note : Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.

-
- -

La méthode rapide : {{htmlelement("img")}}

- -

Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut height ou width (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez lire ce tutoriel sur <img>.

- -
<img
-    src="equilateral.svg"
-    alt="un triangle aux trois côtés égaux"
-    height="87px"
-    width="100px" />
- -

Avantages

- - - -

Inconvénients

- - - -
-

Note :

- -
- -

Comment inclure une image SVG directement dans le code du document

- -

Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <svg>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

La balise <svg> n'a pas besoin des attributs version, baseProfile ou xmlns. Assurez-vous de bien retirer les déclarations d'espaces de noms (namespace) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser SVG Optimiser ou Scour.

- -

Avantages

- - - -

Inconvénients

- - - - - -

Comment intégrer un SVG dans un élément {{htmlelement("object")}}

- -

Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :

- -
<object data="parallelogramme.svg"
-    width="300"
-    height="250"
-    type="image/svg+xml">
-
-<img src="parallelogramme.png"
-    alt="un quadrilatère dont les côtés sont parallèles deux à deux" />
-
-</object>
-
-
- -

Inconvénients

- - - -

Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}

- -

Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <iframe> n'est donc qu'une variation de l'intégration d'une page web dans une autre page web.

- -

Voici un rapide exemple :

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" />
-</iframe>
- -

iframe permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les iframe.

- -

De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.

- -

En savoir plus

- - diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md new file mode 100644 index 0000000000..e8cddd0909 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -0,0 +1,180 @@ +--- +title: Ajouter des images vectorielles à une page web +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +tags: + - Graphics + - Guide + - HTML + - Intermediate + - Learn + - SVG +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +original_slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple et comment insérer une image dans un document HTML.
Objectifs :Apprendre comment intégrer une image SVG dans une page web.
+ +

Qu'est-ce que SVG ? Qu'apporte-t-il ?

+ +

SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.

+ +

Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.

+ +

Au contraire, les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant srcset et sizes.

+ +

De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.

+ +

Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.

+ +
+

Note : Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.

+
+ +

La méthode rapide : {{htmlelement("img")}}

+ +

Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut height ou width (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez lire ce tutoriel sur <img>.

+ +
<img
+    src="equilateral.svg"
+    alt="un triangle aux trois côtés égaux"
+    height="87px"
+    width="100px" />
+ +

Avantages

+ + + +

Inconvénients

+ + + +
+

Note :

+ +
+ +

Comment inclure une image SVG directement dans le code du document

+ +

Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <svg>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

La balise <svg> n'a pas besoin des attributs version, baseProfile ou xmlns. Assurez-vous de bien retirer les déclarations d'espaces de noms (namespace) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser SVG Optimiser ou Scour.

+ +

Avantages

+ + + +

Inconvénients

+ + + + + +

Comment intégrer un SVG dans un élément {{htmlelement("object")}}

+ +

Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :

+ +
<object data="parallelogramme.svg"
+    width="300"
+    height="250"
+    type="image/svg+xml">
+
+<img src="parallelogramme.png"
+    alt="un quadrilatère dont les côtés sont parallèles deux à deux" />
+
+</object>
+
+
+ +

Inconvénients

+ + + +

Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}

+ +

Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <iframe> n'est donc qu'une variation de l'intégration d'une page web dans une autre page web.

+ +

Voici un rapide exemple :

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" />
+</iframe>
+ +

iframe permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les iframe.

+ +

De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html deleted file mode 100644 index abda8ddf31..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html +++ /dev/null @@ -1,504 +0,0 @@ ---- -title: Les images en HTML -slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -tags: - - Débutant - - Guide - - HTML - - Image - - Title - - alt text - - figcaption - - figure - - img - - src -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
- -

Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .

- - - - - - - - - - - - -
Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
Objectifs :Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.
- -

Comment intégrer une image à une page web ?

- -

Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.

- -
-

Note : Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.

-
- -

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :

- -
<img src="dinosaur.jpg">
- -

Et si cette image se trouve dans un sous-répertoire images situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :

- -
<img src="images/dinosaur.jpg">
- -

Ainsi de suite.

- -
-

Note : Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.

-
- -

Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :

- -
<img src="https://www.example.com/images/dinosaur.jpg">
- -

Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.

- -
-

Attention : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
-
- 1) Ce soit votre image (vous en êtes le créateur),
- 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
- 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
-
- Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut src vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...

-
- -

Le code au-dessus vous donnera, à peu prés, le résultat suivant :

- -

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

- -
-

Note : Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.

-
- -
-

Note : Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)

-
- -

Texte alternatif

- -

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth">
- -

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

- -

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

- -

Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :

- - - -

Que devriez-vous noter dans vos attributs alt ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :

- - - -

Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.

- -
-

Note : Pour plus d'informations, voyez notre guide  Textes Alternatifs

-
- -

Largeur et hauteur (width-height)

- -

Vous pouvez vous servir des attributs  width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341">
- -

Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :

- -

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

- -

C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.

- -

De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.

- -
-

Note : Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .

-
- -

Titre d'images

- -

Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth"
-     width="400"
-     height="341"
-     title="A T-Rex on display in the Manchester University Museum">
- -

Cela donne une info-bulle avec le texte entré dans l'attribut title :

- -

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

- -

Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.

- -

Pédagogie active : incorporer une image

- -

À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :

- -

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

- -

Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.

- -

Nous avons encore quelques petites choses pour vous :

- - - -

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

- - - - - - - -

{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- - - -

Légender des images avec figure et figcaption

- -

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :

- -
<div class="figure">
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <p>A T-Rex on display in the Manchester University Museum.</p>
-</div>
- -

C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?

- -

Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :

- -
<figure>
-  <img src="images/dinosaur.jpg"
-       alt="The head and torso of a dinosaur skeleton;
-            it has a large head with long sharp teeth"
-       width="400"
-       height="341">
-
-  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
-</figure>
- -

L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.

- -
-

Note : D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.

-
- -

Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

- - - -

Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

- -

Pédagogie active : créer un objet figure

- -

Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :

- - - -

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

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

{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Images d'arrière-plan CSS

- -

Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et background , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :

- -
p {
-  background-image: url("images/dinosaur.jpg");
-}
- -

Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !

- -

En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.

- -
-

Note : Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .

-
- -

C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.

- -

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

- -

Dans ce module :

- - diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md new file mode 100644 index 0000000000..abda8ddf31 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -0,0 +1,504 @@ +--- +title: Les images en HTML +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Débutant + - Guide + - HTML + - Image + - Title + - alt text + - figcaption + - figure + - img + - src +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .

+ + + + + + + + + + + + +
Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
Objectifs :Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.
+ +

Comment intégrer une image à une page web ?

+ +

Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.

+ +
+

Note : Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.

+
+ +

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :

+ +
<img src="dinosaur.jpg">
+ +

Et si cette image se trouve dans un sous-répertoire images situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :

+ +
<img src="images/dinosaur.jpg">
+ +

Ainsi de suite.

+ +
+

Note : Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.

+
+ +

Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.

+ +
+

Attention : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
+
+ 1) Ce soit votre image (vous en êtes le créateur),
+ 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
+ 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
+
+ Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut src vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...

+
+ +

Le code au-dessus vous donnera, à peu prés, le résultat suivant :

+ +

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

+ +
+

Note : Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.

+
+ +
+

Note : Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)

+
+ +

Texte alternatif

+ +

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :

+ + + +

Que devriez-vous noter dans vos attributs alt ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :

+ + + +

Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.

+ +
+

Note : Pour plus d'informations, voyez notre guide  Textes Alternatifs

+
+ +

Largeur et hauteur (width-height)

+ +

Vous pouvez vous servir des attributs  width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341">
+ +

Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.

+ +

De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.

+ +
+

Note : Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .

+
+ +

Titre d'images

+ +

Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth"
+     width="400"
+     height="341"
+     title="A T-Rex on display in the Manchester University Museum">
+ +

Cela donne une info-bulle avec le texte entré dans l'attribut title :

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.

+ +

Pédagogie active : incorporer une image

+ +

À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.

+ +

Nous avons encore quelques petites choses pour vous :

+ + + +

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

+ + + + + + + +

{{ EmbedLiveSample('Pédagogie_active_incorporer_une_image', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ + + +

Légender des images avec figure et figcaption

+ +

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+ +

C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?

+ +

Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="The head and torso of a dinosaur skeleton;
+            it has a large head with long sharp teeth"
+       width="400"
+       height="341">
+
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+ +

L'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.

+ +
+

Note : D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.

+
+ +

Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

+ + + +

Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

+ +

Pédagogie active : créer un objet figure

+ +

Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :

+ + + +

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

+ + + + + + + + + + + +

{{ EmbedLiveSample('Pédagogie_active_créer_un_objet_figure', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Images d'arrière-plan CSS

+ +

Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et background , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !

+ +

En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.

+ +
+

Note : Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .

+
+ +

C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

+ +

Dans ce module :

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index 445c2724fe..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Multimédia et Intégration -slug: Learn/HTML/Multimedia_and_embedding -tags: - - Apprentissage - - Audio - - Codage - - Débutant - - Evaluation - - Flash - - Guide - - HTML - - Image Vectorielle - - Images - - Interactivité - - SVG - - Video - - iframes - - imagemaps -translation_of: Learn/HTML/Multimedia_and_embedding -original_slug: Apprendre/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

- -

Prérequis

- -

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

- -
-

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

- -
-
Images en HTML
-
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
-
Vidéo et contenu audio
-
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
-
De <object> à <iframe> — autres techniques d'intégration
-
À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
-
Ajouter des images vectorielles sur le Web 
-
Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
-
Images adaptatives
-
-

Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du responsive design, un futur sujet CSS que vous pourrez apprendre.

-
-
- -

Évaluations

- -

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

- -
-
Évaluation : page d'accueil Mozilla
-
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
-
- -

À voir aussi

- -
-
Intégrer une carte interactive en haut d'une image
-
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
-
Web Principes fondamentaux 2
-
-

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

-
-
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md new file mode 100644 index 0000000000..445c2724fe --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/index.md @@ -0,0 +1,72 @@ +--- +title: Multimédia et Intégration +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Apprentissage + - Audio + - Codage + - Débutant + - Evaluation + - Flash + - Guide + - HTML + - Image Vectorielle + - Images + - Interactivité + - SVG + - Video + - iframes + - imagemaps +translation_of: Learn/HTML/Multimedia_and_embedding +original_slug: Apprendre/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

+ +

Prérequis

+ +

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

+ +
+

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

+ +
+
Images en HTML
+
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
+
Vidéo et contenu audio
+
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
+
De <object> à <iframe> — autres techniques d'intégration
+
À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
+
Ajouter des images vectorielles sur le Web 
+
Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
+
Images adaptatives
+
+

Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du responsive design, un futur sujet CSS que vous pourrez apprendre.

+
+
+ +

Évaluations

+ +

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

+ +
+
Évaluation : page d'accueil Mozilla
+
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
+
+ +

À voir aussi

+ +
+
Intégrer une carte interactive en haut d'une image
+
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
+
Web Principes fondamentaux 2
+
+

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

+
+
diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html deleted file mode 100644 index 37cd4e8230..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 'Évaluation : page d''accueil Mozilla' -slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page -translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page -original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !

- - - - - - - - - - - - -
Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
Objectif:Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").
- -

Point de départ

- -

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

- -

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

- -
-

Note : le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.

-
- -

Énoncé du projet

- -

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

- -

Préparer les images

- -

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

- - - -

Donnez-leur des noms similaires comme :  firefoxlogo400.png et firefoxlogo120.png.

- -

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espacefurther-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

- -

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

- -
-

Note : Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.

-
- -

Ajouter un logo à l'en-tête

- -

A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.

- -

Ajouter une vidéo dans le contenu principal de l'article

- -

Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

- -

Ajouter des images adaptatives aux liens vers les ressources externes

- -

Dans l'élément {{htmlelement("div")}} de la catégorie further-info vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.

- -

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

- -

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

- -
-

Note : Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.

-
- -

Un panda rouge créatif

- -

Dans l'élément {{htmlelement("div")}} de la catégorie red-panda, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

- -

Exemple

- -

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

- -

A wide shot of our example splash page

- -

A narrow shot of our example splash page

- -

Évaluation

- -

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

- -

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Dans ce module :

- - - -

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md new file mode 100644 index 0000000000..37cd4e8230 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -0,0 +1,111 @@ +--- +title: 'Évaluation : page d''accueil Mozilla' +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +original_slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !

+ + + + + + + + + + + + +
Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
Objectif:Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").
+ +

Point de départ

+ +

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

+ +

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

+ +
+

Note : le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.

+
+ +

Énoncé du projet

+ +

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

+ +

Préparer les images

+ +

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

+ + + +

Donnez-leur des noms similaires comme :  firefoxlogo400.png et firefoxlogo120.png.

+ +

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espacefurther-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

+ +

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

+ +
+

Note : Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.

+
+ +

Ajouter un logo à l'en-tête

+ +

A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.

+ +

Ajouter une vidéo dans le contenu principal de l'article

+ +

Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

+ +

Ajouter des images adaptatives aux liens vers les ressources externes

+ +

Dans l'élément {{htmlelement("div")}} de la catégorie further-info vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.

+ +

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

+ +

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

+ +
+

Note : Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.

+
+ +

Un panda rouge créatif

+ +

Dans l'élément {{htmlelement("div")}} de la catégorie red-panda, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

+ +

Exemple

+ +

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Évaluation

+ +

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Dans ce module :

+ + + +

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html deleted file mode 100644 index c840ee2f9e..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Des objets aux « iframe » — autres techniques d'intégration -slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -tags: - - Apprentissage - - Article - - Codage - - Débutant - - Flash - - Guide - - HTML - - Integration - - Multimédia et intégration - - Object - - embed - - iframe -translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
- -

Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
Objectif :Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.
- -

Une courte histoire de l'intégration

- -

Il y a longtemps, sur le Web, il était courant d'utiliser des cadres pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé frameset (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.

- -

 

- -

Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.

- -

Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.

- -

Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.

- -

 

- -

Apprentissage actif : utilisations classiques de l'intégration

- -

Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien Youtube, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.

- -
    -
  1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.
    2. -
  2. Au‑dessous de la vidéo, vous devez trouver un bouton Share (Partager) — cliquez‑le pour afficher les options de partage.
    3. -
  3. Sélectionnez le bouton Embed (Intégrer) et vous obtiendrez un morceau de code <iframe> — copiez‑le.
    4. -
  4. Inserez ce code dans la boîte Input ci‑dessous, et voyez le résultat dans Output.
    5. -
- -

En prime, vous pouvez aussi essayer d'intégrer une carte Google Map dans l'exemple.

- -
    -
  1. Allez sur Google Maps et trouvez une carte qui vous plaise.
    2. -
  2. Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
    3. -
  3. Selectionnez l'option Share or embed map (Partager ou intégrer une carte).
    4. -
  4. Selectionnez l'option Embed map (intégrer une carte), qui vous fournira du code <iframe> — copiez‑le.
    5. -
  5. Inserez‑le dans la boîte Input di‑dessous et voyez le résultat dans Output.
    6. -
- -

Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.

- - - - - - - -

{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Iframes en détail

- -

Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme Disqus, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <iframe>.

- -

Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :

- -
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
-        width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox>
-  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
-    Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
-</iframe>
- -

Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <iframe> :

- -
-
{{htmlattrxref('allowfullscreen','iframe')}}
-
Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
-
{{htmlattrxref('frameborder','iframe')}}
-
Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
-
{{htmlattrxref('src','iframe')}}
-
Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
-
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
-
Ces attributs définissent la largeur et la hauteur souhaitée pour <iframe>.
-
Contenu de repli
-
Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <iframe></iframe> qui seront affichées si l'explorateur ne prend pas en charge <iframe>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <iframe>.
-
{{htmlattrxref('sandbox','iframe')}}
-
Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <iframe> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
-
- -
-

Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).

-
- -

Problèmes de sécurité

- -

Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <iframe> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <iframe> — il faut juste être prudent. Poursuivons ...

- -

Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.

- -
-

Note : Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.

-
- -

Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.

- -

N'intégrer que si nécessaire

- -

Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."

- -

Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.

- -
-

Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.

-
- -

Utilisez HTTPS

- -

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :

- -
    -
  1.     HTTPS réduit les risques d'altération du contenu distant lors du transfert,
    2. -
  2.     HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.
    3. -
- -

L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.

- -
-

Note : Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.

-
- -

Toujours utiliser l'attribut  sandbox

- -

Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un sandbox (bac à sable).

- -

Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut sandbox sans paramètres, comme montré dans notre exemple précédent.

- -

Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».

- -
-

Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.

-
- -

Configurer  les directives CSP

- -

{{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.

- -
-

Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.

-
- -

Les éléments <embed> et <object>

- -

Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !

- -
-

Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.

-
- -

Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.

- -

Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
{{glossary("type MIME", 'type de media')}} précis du contenu intégré{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
noms et valeurs à passer en paramètre au greffonattributs adéquats avec ces noms et valeurséléments de la simple balise {{htmlelement("param")}}, contenus dans <object>
contenu HTML indépendant en repli en cas de ressources inaccessiblesnon pris en charge (<noembed> a été abandonné)contenu dans <object>, après les éléments <param>
- -

 

- -
-

Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).

-
- -

Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):

- -
<embed src="whoosh.swf" quality="medium"
-       bgcolor="#ffffff" width="550" height="400"
-       name="whoosh" align="middle" allowScriptAccess="sameDomain"
-       allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer">
- -

Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.

- -

Regardons maintenant un exemple avec <object> ; il intègre  un PDF dans une  (voir  l'exemple en direct et le code source) :

- -
<object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch>
-  <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p>
-</object>
- -

Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux problèmes d'accessibilité et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.

- -

Le cas « greffons »

- -

Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.

- -

Mettez‑vous à portée de tout le monde. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.

- - - -

Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.

- -

Résumé

- -

Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.

- -

D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.

- -

 

- -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md new file mode 100644 index 0000000000..c840ee2f9e --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -0,0 +1,397 @@ +--- +title: Des objets aux « iframe » — autres techniques d'intégration +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +tags: + - Apprentissage + - Article + - Codage + - Débutant + - Flash + - Guide + - HTML + - Integration + - Multimédia et intégration + - Object + - embed + - iframe +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
Objectif :Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.
+ +

Une courte histoire de l'intégration

+ +

Il y a longtemps, sur le Web, il était courant d'utiliser des cadres pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé frameset (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.

+ +

 

+ +

Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.

+ +

Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.

+ +

Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.

+ +

 

+ +

Apprentissage actif : utilisations classiques de l'intégration

+ +

Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien Youtube, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.

+ +
    +
  1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.
    2. +
  2. Au‑dessous de la vidéo, vous devez trouver un bouton Share (Partager) — cliquez‑le pour afficher les options de partage.
    3. +
  3. Sélectionnez le bouton Embed (Intégrer) et vous obtiendrez un morceau de code <iframe> — copiez‑le.
    4. +
  4. Inserez ce code dans la boîte Input ci‑dessous, et voyez le résultat dans Output.
    5. +
+ +

En prime, vous pouvez aussi essayer d'intégrer une carte Google Map dans l'exemple.

+ +
    +
  1. Allez sur Google Maps et trouvez une carte qui vous plaise.
    2. +
  2. Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
    3. +
  3. Selectionnez l'option Share or embed map (Partager ou intégrer une carte).
    4. +
  4. Selectionnez l'option Embed map (intégrer une carte), qui vous fournira du code <iframe> — copiez‑le.
    5. +
  5. Inserez‑le dans la boîte Input di‑dessous et voyez le résultat dans Output.
    6. +
+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.

+ + + + + + + +

{{ EmbedLiveSample("Apprentissage_actif_utilisations_classiques_de_l'intégration", 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Iframes en détail

+ +

Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme Disqus, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <iframe>.

+ +

Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
+</iframe>
+ +

Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <iframe> :

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
+
{{htmlattrxref('frameborder','iframe')}}
+
Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
+
{{htmlattrxref('src','iframe')}}
+
Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
+
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
+
Ces attributs définissent la largeur et la hauteur souhaitée pour <iframe>.
+
Contenu de repli
+
Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <iframe></iframe> qui seront affichées si l'explorateur ne prend pas en charge <iframe>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <iframe>.
+
{{htmlattrxref('sandbox','iframe')}}
+
Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <iframe> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
+
+ +
+

Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).

+
+ +

Problèmes de sécurité

+ +

Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <iframe> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <iframe> — il faut juste être prudent. Poursuivons ...

+ +

Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.

+ +
+

Note : Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.

+
+ +

Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.

+ +

N'intégrer que si nécessaire

+ +

Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."

+ +

Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.

+ +
+

Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.

+
+ +

Utilisez HTTPS

+ +

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :

+ +
    +
  1.     HTTPS réduit les risques d'altération du contenu distant lors du transfert,
    2. +
  2.     HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.
    3. +
+ +

L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.

+ +
+

Note : Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.

+
+ +

Toujours utiliser l'attribut  sandbox

+ +

Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un sandbox (bac à sable).

+ +

Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut sandbox sans paramètres, comme montré dans notre exemple précédent.

+ +

Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».

+ +
+

Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.

+
+ +

Configurer  les directives CSP

+ +

{{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.

+ +
+

Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.

+
+ +

Les éléments <embed> et <object>

+ +

Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !

+ +
+

Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.

+
+ +

Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.

+ +

Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
{{glossary("type MIME", 'type de media')}} précis du contenu intégré{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
noms et valeurs à passer en paramètre au greffonattributs adéquats avec ces noms et valeurséléments de la simple balise {{htmlelement("param")}}, contenus dans <object>
contenu HTML indépendant en repli en cas de ressources inaccessiblesnon pris en charge (<noembed> a été abandonné)contenu dans <object>, après les éléments <param>
+ +

 

+ +
+

Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).

+
+ +

Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.

+ +

Regardons maintenant un exemple avec <object> ; il intègre  un PDF dans une  (voir  l'exemple en direct et le code source) :

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p>
+</object>
+ +

Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux problèmes d'accessibilité et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.

+ +

Le cas « greffons »

+ +

Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.

+ +

Mettez‑vous à portée de tout le monde. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.

+ + + +

Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.

+ +

Résumé

+ +

Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.

+ +

D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.

+ +

 

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html deleted file mode 100644 index 29f0d234da..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Images adaptatives -slug: Learn/HTML/Multimedia_and_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images -original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.

- - - - - - - - - - - - -
Prérequis :Vous devriez connaître les fondamentaux de HTML et comment ajouter des images statiques à une page web.
Objectifs :Apprendre comment utiliser des fonctionnalités comme srcset et l'élément <picture> pour implémenter des solutions d'images adaptatives sur les sites web.
- -

Pourquoi des images adaptatives ?

- -

Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :

- -

Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre

- -

Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :

- - - -

Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !

- -

Notre site d'exemple vu sur un écran étroit  la première image est réduite à telle point qu'il est difficile d'y voir les détails.

- -

Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de décisions de nature artistique.

- -

De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des changements de résolution — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des graphiques vectoriels, une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).

- -

Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.

- -

Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.

- -

Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.

- -

Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).

- -
-

Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).

-
- -

Comment créer des images adaptatives ?

- -

Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément <img> du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a sans doute de meilleurs outils que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.

- -

Commutations de résolution : tailles différentes

- -

Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard <img> vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :

- -
<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
- -

Mais il est possible d'utiliser deux nouveaux attributs — srcset et sizes — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier responsive.html sur GitHub (voyez aussi le code source) :

- -
-<img srcset="elva-fairy-480w.jpg 480w,
-             elva-fairy-800w.jpg 800w"
-     sizes="(max-width: 600px) 480px,
-            800px"
-     src="elva-fairy-800w.jpg"
-     alt="Elva dressed as a fairy">
-
- -

Les attributs srcset et sizes paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.

- -

srcset définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :

- -
    -
  1. un nom de fichier image (elva-fairy-480w.jpg),
    2. -
  2. un espace,
    3. -
  3. la largeur intrinsèque en pixels (480w) — notez l'utilisation de l'unité w, et non px comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur Cmd + I pour faire apparaître l'écran des infos).
    4. -
- -

sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :

- -
    -
  1. une condition pour le média ((max-width:480px)) — vous pourrez en savoir plus à ce propos dans l'article sur les CSS, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
    2. -
  2. une espace,
    3. -
  3. la largeur de la place occupée par l'image si la condition pour le média est vraie (440px).
    4. -
- -
-

Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.

-
- -

Ainsi, une fois ces attributs en place, le navigateur va :

- -
    -
  1. noter la largeur du périphérique,
    2. -
  2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
    3. -
  3. noter la largeur d'emplacement demandée par le média,
    4. -
  4. charger l'image référencée dans la liste srcset qui est la plus proche de la taille choisie.
    5. -
- -

Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.

- -
-

Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.

-

Pour observer les images chargées, vous pouvez utiliser l'onglet Moniteur réseau dans les outils de développement de Firefox.

-
- -

Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut src.

- -
-

Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).

-
- - -

Commutation de résolution : même taille, résolutions différentes

- -

Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant srcset avec x-descriptors et sans sizes — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans srcset-resolutions.html (voir aussi le code source) :

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
-
- -

Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo.Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :

- -
img {
-  width: 320px;
-}
- -

Dans ce cas, sizes n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans srcset. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image elva-fairy-320w.jpg sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image elva‑fairy-640w.jpg sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.

- -

Décision de nature artistique

- -

Pour résumer, le problème des décisions de nature artistique réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément <picture> nous permet d'implémenter ce type de solution.

- -

Revenons à notre exemple initial du fichier not-responsive.html. Cette image nécessite d'opérer un choix de nature artistique :

- -
<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
- -

Arrangeons cela avec <picture>} ! Comme pour <vidéo> et <audio>, l'élément <picture> est une enveloppe conteneur de plusieurs éléments <source>} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément <img>}. Le code dans responsive.html ressemblera à :

- -
<picture>
-  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
-  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
-  <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
-</picture>
-
- - - -

Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :

- -

Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.

- -
-

Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.

-
- -

Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?

- -

Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme srcset. Vous ne pourriez pas, par exemple, charger l'élément <img>}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.

- - - -

Utilisez largement les formats d'image modernes

- -

Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.

- -

<picture> nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs type de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux">
-</picture>
-
- - - -

Testez vos compétences !

- -

Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir Créer une page de présentation de Mozilla.

- -

Résumé

- -

Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :

- - - -

Cet article est aussi la conclusion de l'ensemble du module Multimedia et intégration ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.

- -

Voir aussi

- - - -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans ce module

- - \ No newline at end of file diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md new file mode 100644 index 0000000000..29f0d234da --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -0,0 +1,236 @@ +--- +title: Images adaptatives +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +original_slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.

+ + + + + + + + + + + + +
Prérequis :Vous devriez connaître les fondamentaux de HTML et comment ajouter des images statiques à une page web.
Objectifs :Apprendre comment utiliser des fonctionnalités comme srcset et l'élément <picture> pour implémenter des solutions d'images adaptatives sur les sites web.
+ +

Pourquoi des images adaptatives ?

+ +

Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :

+ +

Cet exemple de site est montré tel qu'il s'affiche sur un écran large - ici la première image s'affiche bien, et comme elle est suffisamment grande on voit le détail de l'image (promeneurs) en son centre

+ +

Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :

+ + + +

Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !

+ +

Notre site d'exemple vu sur un écran étroit  la première image est réduite à telle point qu'il est difficile d'y voir les détails.

+ +

Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de décisions de nature artistique.

+ +

De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des changements de résolution — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des graphiques vectoriels, une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas).

+ +

Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web.

+ +

Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.

+ +

Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus.

+ +

Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).

+ +
+

Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).

+
+ +

Comment créer des images adaptatives ?

+ +

Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément <img> du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a sans doute de meilleurs outils que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.

+ +

Commutations de résolution : tailles différentes

+ +

Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard <img> vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :

+ +
<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
+ +

Mais il est possible d'utiliser deux nouveaux attributs — srcset et sizes — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier responsive.html sur GitHub (voyez aussi le code source) :

+ +
+<img srcset="elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 600px) 480px,
+            800px"
+     src="elva-fairy-800w.jpg"
+     alt="Elva dressed as a fairy">
+
+ +

Les attributs srcset et sizes paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu.

+ +

srcset définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :

+ +
    +
  1. un nom de fichier image (elva-fairy-480w.jpg),
    2. +
  2. un espace,
    3. +
  3. la largeur intrinsèque en pixels (480w) — notez l'utilisation de l'unité w, et non px comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur Cmd + I pour faire apparaître l'écran des infos).
    4. +
+ +

sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule :

+ +
    +
  1. une condition pour le média ((max-width:480px)) — vous pourrez en savoir plus à ce propos dans l'article sur les CSS, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
    2. +
  2. une espace,
    3. +
  3. la largeur de la place occupée par l'image si la condition pour le média est vraie (440px).
    4. +
+ +
+

Note : pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.

+
+ +

Ainsi, une fois ces attributs en place, le navigateur va :

+ +
    +
  1. noter la largeur du périphérique,
    2. +
  2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
    3. +
  3. noter la largeur d'emplacement demandée par le média,
    4. +
  4. charger l'image référencée dans la liste srcset qui est la plus proche de la taille choisie.
    5. +
+ +

Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante.

+ +
+

Note : lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du viewport (dont vous pouvez avoir une approximation via l'instruction document.querySelector("html").clientWidth dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page about:debugging de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau.

+

Pour observer les images chargées, vous pouvez utiliser l'onglet Moniteur réseau dans les outils de développement de Firefox.

+
+ +

Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut src.

+ +
+

Note : dans l'élément <head> du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception).

+
+ + +

Commutation de résolution : même taille, résolutions différentes

+ +

Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant srcset avec x-descriptors et sans sizes — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans srcset-resolutions.html (voir aussi le code source) :

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
+
+ +

Une photo d'une petite fille habillée en fée avec un filtre appliqué à l'image pour obtenir l'effet d'une vieille photo.Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :

+ +
img {
+  width: 320px;
+}
+ +

Dans ce cas, sizes n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans srcset. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image elva-fairy-320w.jpg sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image elva‑fairy-640w.jpg sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.

+ +

Décision de nature artistique

+ +

Pour résumer, le problème des décisions de nature artistique réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément <picture> nous permet d'implémenter ce type de solution.

+ +

Revenons à notre exemple initial du fichier not-responsive.html. Cette image nécessite d'opérer un choix de nature artistique :

+ +
<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
+ +

Arrangeons cela avec <picture>} ! Comme pour <vidéo> et <audio>, l'élément <picture> est une enveloppe conteneur de plusieurs éléments <source>} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément <img>}. Le code dans responsive.html ressemblera à :

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
+</picture>
+
+ + + +

Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :

+ +

Notre exemple vu sur un écran assez large : la première image est OK et on voit le détail au centre.Notre exemple vu sur un écran étroit où l'élément picture permet de passer la première image à une image en portrait, plus utile sur un écran étroit.

+ +
+

Note : vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.

+
+ +

Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?

+ +

Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme srcset. Vous ne pourriez pas, par exemple, charger l'élément <img>}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.

+ + + +

Utilisez largement les formats d'image modernes

+ +

Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.

+ +

<picture> nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs type de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge :

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux">
+</picture>
+
+ + + +

Testez vos compétences !

+ +

Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir Créer une page de présentation de Mozilla.

+ +

Résumé

+ +

Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :

+ + + +

Cet article est aussi la conclusion de l'ensemble du module Multimedia et intégration ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.

+ +

Voir aussi

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans ce module

+ + \ No newline at end of file diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 75e2a70ecd..0000000000 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Contenu audio et vidéo -slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Article - - Audio - - Débutant - - Guide - - HTML - - Légendes - - Video - - pistes (audio ou texte) - - sous‑titres -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
Objectifs :Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.
- -

Audio et vidéo sur le web

- -

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

- -

Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.

- -

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.

- -
-

Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.

-
- -

L' élément <video>

- -

L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

- -
<video src="rabbit320.webm" controls>
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p>
-</video>
- -

Les fonctionnalités de ce code sont :

- -
-
{{htmlattrxref("src","video")}}
-
De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
-
{{htmlattrxref("controls","video")}}
-
Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
-
Le paragraphe dans la balise <video>
-
Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
-
- -

La vidéo intégrée donnerait quelque chose comme ça :

- -

A simple video player showing a video of a small white rabbit

- -

Faites un essai avec l'exemple ici. (voyez aussi le code source.)

- -

Gestion de différents formats

- -

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

- -

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

- -

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

- - - -

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

- -
-

Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.

-
- -

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

- -

 

- -
-

Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.

- -

 

-
- -

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour, (essayez-le directement ici aussi) :

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p>
-</video>
- -

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

- -

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

- -

 

- -
-

Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.

-
- -

Autres fonctionnalités de <video>

- -

Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
-</video>
-
- -

Cela produit une sortie du type suivant :

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

- -

Voici les nouvelles fonctionnalités :

- -
-
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
-
Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable rapport de proportions. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
-
{{htmlattrxref("autoplay","video")}}
-
Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
-
{{htmlattrxref("loop","video")}}
-
Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
-
{{htmlattrxref("muted","video")}}
-
Cet attribut coupe le son de la vidéo par défaut.
-
{{htmlattrxref("poster","video")}}
-
Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
-
{{htmlattrxref("preload","video")}}
-
-

Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :

- -
    -
  • "none" : ne pas mettre le fichier dans un tampon
    • -
  • "auto" : mettre le fichier média dans un tampon
    • -
  • "metadata" : ne mettre que les métadonnées dans le tampon
    • -
-
-
- -

Vous trouverez cet exemple prêt pour l'interprétation sur Github ( voir aussi le  code source). Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

- -

L'élément  <audio>

- -

L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
-</audio>
- -

Vous verrez quelque chose de ce genre dans un navigateur :

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note : Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)

-
- -

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :

- - - -

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

- -

Afficher du texte dans une vidéo

- -

Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :

- - - -

Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.

- -
-

Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.

-
- -

WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :

- -
-
les sous‑titres (subtitles)
-
Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
-
les légendes (captions) 
-
Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.
-
les descriptions programmées (descriptions) 
-
Textes convertis en audio, pour aider les personnes avec des défauts de vision.
-
- -

Un fichier WebVTT typique ressemblera à :

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-Ceci est le premier sous‑titre.
-
-2
-00:00:30.739 --> 00:00:34.074
-Ceci est le deuxième.
-
-  ...
-
- -

Pour qu'il soit affiché avec la diffusion du média HTML, il faut :

- -
    -
  1. Enregistrer le fichier avec l'extension .vtt dans un endroit sensé.
    2. -
  2. Lier le fichier .vtt avec l'élément {{htmlelement("track")}}. <track> doit être placé entre les balises <audio> ou <video>, mais après tous les éléments <source>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  subtitles, captions ou descriptions. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
    3. -
- -

Voici un exemple :

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :

- -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 

- -
-

Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.

-
- -

Apprentissage interactif : intégrer vos propres vidéos et audios

- -

Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme Miro Video Converter et Audacity. Nous aimerions que vous essayiez !

- -

Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  échantillons audio et vidéo pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.

- -

Il vous faudra :

- -
    -
  1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
    2. -
  2. Créer un nouveau fichier HTML dans le même répertoire nommé :  index.html.
    3. -
  3. Ajouter des éléments  <audio> et  <video> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
    4. -
  4. Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  type.
    5. -
  5. Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
    6. -
- -

En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.

- -

Résumé

- -

Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.

- -

Consultez aussi :

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Contenu du module :

- - - -

 

- -
-
- - diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md new file mode 100644 index 0000000000..75e2a70ecd --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -0,0 +1,315 @@ +--- +title: Contenu audio et vidéo +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Article + - Audio + - Débutant + - Guide + - HTML + - Légendes + - Video + - pistes (audio ou texte) + - sous‑titres +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +original_slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
Objectifs :Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.
+ +

Audio et vidéo sur le web

+ +

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

+ +

Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.

+ +

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.

+ +
+

Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.

+
+ +

L' élément <video>

+ +

L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

+ +
<video src="rabbit320.webm" controls>
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p>
+</video>
+ +

Les fonctionnalités de ce code sont :

+ +
+
{{htmlattrxref("src","video")}}
+
De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
+
{{htmlattrxref("controls","video")}}
+
Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
+
Le paragraphe dans la balise <video>
+
Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
+
+ +

La vidéo intégrée donnerait quelque chose comme ça :

+ +

A simple video player showing a video of a small white rabbit

+ +

Faites un essai avec l'exemple ici. (voyez aussi le code source.)

+ +

Gestion de différents formats

+ +

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

+ +

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

+ +

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

+ + + +

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

+ +
+

Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.

+
+ +

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

+ +

 

+ +
+

Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.

+ +

 

+
+ +

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour, (essayez-le directement ici aussi) :

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p>
+</video>
+ +

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

+ +

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

+ +

 

+ +
+

Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.

+
+ +

Autres fonctionnalités de <video>

+ +

Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
+</video>
+
+ +

Cela produit une sortie du type suivant :

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

+ +

Voici les nouvelles fonctionnalités :

+ +
+
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
+
Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable rapport de proportions. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
+
{{htmlattrxref("autoplay","video")}}
+
Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
+
{{htmlattrxref("loop","video")}}
+
Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
+
{{htmlattrxref("muted","video")}}
+
Cet attribut coupe le son de la vidéo par défaut.
+
{{htmlattrxref("poster","video")}}
+
Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
+
{{htmlattrxref("preload","video")}}
+
+

Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :

+ +
    +
  • "none" : ne pas mettre le fichier dans un tampon
    • +
  • "auto" : mettre le fichier média dans un tampon
    • +
  • "metadata" : ne mettre que les métadonnées dans le tampon
    • +
+
+
+ +

Vous trouverez cet exemple prêt pour l'interprétation sur Github ( voir aussi le  code source). Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

+ +

L'élément  <audio>

+ +

L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
+</audio>
+ +

Vous verrez quelque chose de ce genre dans un navigateur :

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note : Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)

+
+ +

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :

+ + + +

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

+ +

Afficher du texte dans une vidéo

+ +

Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :

+ + + +

Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.

+ +
+

Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.

+
+ +

WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :

+ +
+
les sous‑titres (subtitles)
+
Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
+
les légendes (captions) 
+
Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.
+
les descriptions programmées (descriptions) 
+
Textes convertis en audio, pour aider les personnes avec des défauts de vision.
+
+ +

Un fichier WebVTT typique ressemblera à :

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+Ceci est le premier sous‑titre.
+
+2
+00:00:30.739 --> 00:00:34.074
+Ceci est le deuxième.
+
+  ...
+
+ +

Pour qu'il soit affiché avec la diffusion du média HTML, il faut :

+ +
    +
  1. Enregistrer le fichier avec l'extension .vtt dans un endroit sensé.
    2. +
  2. Lier le fichier .vtt avec l'élément {{htmlelement("track")}}. <track> doit être placé entre les balises <audio> ou <video>, mais après tous les éléments <source>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  subtitles, captions ou descriptions. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
    3. +
+ +

Voici un exemple :

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 

+ +
+

Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.

+
+ +

Apprentissage interactif : intégrer vos propres vidéos et audios

+ +

Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme Miro Video Converter et Audacity. Nous aimerions que vous essayiez !

+ +

Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  échantillons audio et vidéo pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.

+ +

Il vous faudra :

+ +
    +
  1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
    2. +
  2. Créer un nouveau fichier HTML dans le même répertoire nommé :  index.html.
    3. +
  3. Ajouter des éléments  <audio> et  <video> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
    4. +
  4. Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  type.
    5. +
  5. Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
    6. +
+ +

En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.

+ +

Résumé

+ +

Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.

+ +

Consultez aussi :

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Contenu du module :

+ + + +

 

+ +
+
+ + diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html deleted file mode 100644 index 7a6f46a012..0000000000 --- a/files/fr/learn/html/tables/advanced/index.html +++ /dev/null @@ -1,476 +0,0 @@ ---- -title: 'Tableaux HTML : dispositions avancées et accessibilité' -slug: Learn/HTML/Tables/Advanced -tags: - - Accessibilité - - Apprentissage - - Article - - Avancés - - Codage - - Débutant - - En-têtes - - HTML - - Imbrication - - Portée - - Tableaux - - caption - - resume - - tbody - - tfoot - - thead -translation_of: Learn/HTML/Tables/Advanced -original_slug: Apprendre/HTML/Tableaux/Advanced ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

- - - - - - - - - - - - -
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.
- -

Ajouter un titre aux tableaux avec <caption>

- -

Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.

- -
<table>
-  <caption>Dinosaures dans le Jurassique</caption>
-
-  ...
-</table>
- -

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.

- -

Le titre est placé directement sous la balise <table>.

- -
-

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

-
- -

Apprentissage actif : Ajouter un titre

- -

Essayons en revisitant un exemple rencontré dans l'article précédent.

- -
    -
  1. Ouvrez le planning du professeur de langue de la fin de Tableaux HTML : notions de base ou faites une copie locale du fichier timetable-fixed.html.
    2. -
  2. Ajoutez un titre approprié pour le tableau.
    3. -
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
    4. -
- -
-

Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

-
- -

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

- -

Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.

- -

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

- -

Pour les utiliser :

- - - -
-

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

-
- -

Apprentissage actif : Ajout d'une structure au tableau

- -

Mettons en œuvre ces nouveaux éléments.

- -
    -
  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
    2. -
  2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
    3. -
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.
    4. -
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
    5. -
  5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
    6. -
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : - 
    tbody {
-  font-size: 90%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-
    -
    7. -
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.
    8. -
- -
-

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

-
- -

Le code de votre tableau fini devrait ressembler à quelque chose comme :

- - - -

{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

-
- -

Tableaux imbriqués

- -

Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

- -

Le balisage suivant montre un tableau simple imbriqué :

- -
<table id="table1">
-  <tr>
-    <th>title1</th>
-    <th>title2</th>
-    <th>title3</th>
-  </tr>
-  <tr>
-    <td id="nested">
-      <table id="table2">
-        <tr>
-          <td>cell1</td>
-          <td>cell2</td>
-          <td>cell3</td>
-        </tr>
-      </table>
-    </td>
-    <td>cell2</td>
-    <td>cell3</td>
-  </tr>
-  <tr>
-    <td>cell4</td>
-    <td>cell5</td>
-    <td>cell6</td>
-  </tr>
-</table>
- -

Voici la sortie qui en résulte :

- - - - - - - - - - - - - - - - - - - -
title1title2title3
- - - - - - - - -
cell1cell2cell3
- 		cell2cell3
cell4cell5cell6
- -

Tableaux pour utilisateurs malvoyants

- -

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Articles vendus Août 2016
  VêtementsAccessoires
  PantalonsJupesRobesBraceletsBagues
BelgiqueAnvers5622437223
Gand4618506115
Bruxelles5127386928
Pays-basAmsterdam8934698538
Utrecht8012433619
- -

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

- -
-

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

-
- -

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

- -

Utilisation des en-têtes de colonnes et de lignes

- -

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

- -

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

- -

L'attribut scope

- -

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

- -
<thead>
-  <tr>
-    <th scope="col">Achats</th>
-    <th scope="col">Ou ?</th>
-    <th scope="col">Date</th>
-    <th scope="col">Avis</th>
-    <th scope="col">Coût (€)</th>
-  </tr>
-</thead>
- -

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

- -
<tr>
-  <th scope="row">Coupe de cheveux</th>
-  <td>Coiffeur</td>
-  <td>12/09</td>
-  <td>Bonne idée</td>
-  <td>30</td>
-</tr>
- -

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

- -

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

- -

Les attributs id et headers

- -

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

- -
    -
  1. Vous ajoutez un identifiant unique id à chaque élément <th>.
    2. -
  2. Vous ajoutez un attribut headers à chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.
    3. -
- -

Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

- -

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :

- -
<thead>
-  <tr>
-    <th id="purchase">Achats</th>
-    <th id="location">Où ?</th>
-    <th id="date">Date</th>
-    <th id="evaluation">Avis</th>
-    <th id="cost">Coût (€)</th>
-  </tr>
-</thead>
-<tbody>
-<tr>
-  <th id="haircut">Coupe de cheveux</th>
-  <td headers="location haircut">Coiffeur</td>
-  <td headers="date haircut">12/09</td>
-  <td headers="evaluation haircut">Bonne idée</td>
-  <td headers="cost haircut">30</td>
-</tr>
-
-  ...
-
-</tbody>
- -
-

Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

-
- -

Apprentissage actif : jouer avec scope et headers

- -
    -
  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items‑sold.html et minimal-table.css, dans un nouveau répertoire.
    2. -
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
    3. -
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.
    4. -
- -
-

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
-          et items-sold-headers.html (voir aussi directement).

-
- -

Résumé

- -

Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.

- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -
-
-

Dans ce module

- - -
-
diff --git a/files/fr/learn/html/tables/advanced/index.md b/files/fr/learn/html/tables/advanced/index.md new file mode 100644 index 0000000000..7a6f46a012 --- /dev/null +++ b/files/fr/learn/html/tables/advanced/index.md @@ -0,0 +1,476 @@ +--- +title: 'Tableaux HTML : dispositions avancées et accessibilité' +slug: Learn/HTML/Tables/Advanced +tags: + - Accessibilité + - Apprentissage + - Article + - Avancés + - Codage + - Débutant + - En-têtes + - HTML + - Imbrication + - Portée + - Tableaux + - caption + - resume + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +original_slug: Apprendre/HTML/Tableaux/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

+ + + + + + + + + + + + +
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.
+ +

Ajouter un titre aux tableaux avec <caption>

+ +

Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.

+ +
<table>
+  <caption>Dinosaures dans le Jurassique</caption>
+
+  ...
+</table>
+ +

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.

+ +

Le titre est placé directement sous la balise <table>.

+ +
+

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

+
+ +

Apprentissage actif : Ajouter un titre

+ +

Essayons en revisitant un exemple rencontré dans l'article précédent.

+ +
    +
  1. Ouvrez le planning du professeur de langue de la fin de Tableaux HTML : notions de base ou faites une copie locale du fichier timetable-fixed.html.
    2. +
  2. Ajoutez un titre approprié pour le tableau.
    3. +
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
    4. +
+ +
+

Note : Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

+
+ +

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

+ +

Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.

+ +

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

+ +

Pour les utiliser :

+ + + +
+

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

+
+ +

Apprentissage actif : Ajout d'une structure au tableau

+ +

Mettons en œuvre ces nouveaux éléments.

+ +
    +
  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
    2. +
  2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
    3. +
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.
    4. +
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
    5. +
  5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
    6. +
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.
    8. +
+ +
+

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

+
+ +

Le code de votre tableau fini devrait ressembler à quelque chose comme :

+ + + +

{{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

+
+ +

Tableaux imbriqués

+ +

Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

+ +

Le balisage suivant montre un tableau simple imbriqué :

+ +
<table id="table1">
+  <tr>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
+  </tr>
+  <tr>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
+  </tr>
+</table>
+ +

Voici la sortie qui en résulte :

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

Tableaux pour utilisateurs malvoyants

+ +

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Articles vendus Août 2016
  VêtementsAccessoires
  PantalonsJupesRobesBraceletsBagues
BelgiqueAnvers5622437223
Gand4618506115
Bruxelles5127386928
Pays-basAmsterdam8934698538
Utrecht8012433619
+ +

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

+ +
+

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

+
+ +

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

+ +

Utilisation des en-têtes de colonnes et de lignes

+ +

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

+ +

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

+ +

L'attribut scope

+ +

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

+ +
<thead>
+  <tr>
+    <th scope="col">Achats</th>
+    <th scope="col">Ou ?</th>
+    <th scope="col">Date</th>
+    <th scope="col">Avis</th>
+    <th scope="col">Coût (€)</th>
+  </tr>
+</thead>
+ +

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

+ +
<tr>
+  <th scope="row">Coupe de cheveux</th>
+  <td>Coiffeur</td>
+  <td>12/09</td>
+  <td>Bonne idée</td>
+  <td>30</td>
+</tr>
+ +

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

+ +

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

+ +

Les attributs id et headers

+ +

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

+ +
    +
  1. Vous ajoutez un identifiant unique id à chaque élément <th>.
    2. +
  2. Vous ajoutez un attribut headers à chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.
    3. +
+ +

Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

+ +

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :

+ +
<thead>
+  <tr>
+    <th id="purchase">Achats</th>
+    <th id="location">Où ?</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Avis</th>
+    <th id="cost">Coût (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Coupe de cheveux</th>
+  <td headers="location haircut">Coiffeur</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Bonne idée</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Note : Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

+
+ +

Apprentissage actif : jouer avec scope et headers

+ +
    +
  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items‑sold.html et minimal-table.css, dans un nouveau répertoire.
    2. +
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
    3. +
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.
    4. +
+ +
+

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
+          et items-sold-headers.html (voir aussi directement).

+
+ +

Résumé

+ +

Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+
+

Dans ce module

+ + +
+
diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html deleted file mode 100644 index fe9ef9ef91..0000000000 --- a/files/fr/learn/html/tables/basics/index.html +++ /dev/null @@ -1,557 +0,0 @@ ---- -title: 'Tableaux HTML : notions de base' -slug: Learn/HTML/Tables/Basics -tags: - - Apprentissage - - Article - - Bases - - Codage - - Débutant - - En-têtes - - HTML - - Tableaux - - cellule - - col - - colgroup - - colspan - - rangées - - rowspan -translation_of: Learn/HTML/Tables/Basics -original_slug: Apprendre/HTML/Tableaux/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.

- - - - - - - - - - - - -
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :Se familiariser avec les tableaux HTML.
- -

Qu'est-ce qu'un tableau ?

- -

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

- -

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

A swimming timetable showing a sample data table

- -

Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :

- -

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

- -

Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .

- -

Comment fonctionne un tableau ?

- -

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric).
NomMasse (1024kg)Diamètre (km)Densité (kg/m3)Gravité (m/s2)Durée du jour (hours)Distance du Soleil (106km)Température moyenne (°C)Nombre de lunesNotes
Planètes telluriquesMercure0.3304,87954273.74222.657.91670La plus proche du Soleil
Venus4.8712,10452438.92802.0108.24640
Terre5.9712,75655149.824.0149.6151Notre monde
Mars0.6426,79239333.724.7227.9-652La planète rouge
Planètes joviennesGéantes gazeusesJupiter1898142,984132623.19.9778.6-11067La plus grosse planète
Saturne568120,5366879.010.71433.5-14062
Géantes glacéesUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Planètes nainesPluton0.01462,37020950.7153.35906.4-2255Déclassée en tant que planète en 2006 mais décision controverséee.
- -

Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

- -

Style de tableau

- -

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.

- -

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.

- -

Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.

- -

Quand NE PAS utiliser de tableaux en HTML ?

- -

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Mises en page dans notre Module d'apprentissage à l'Accessibilité. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

- -

Bref, utiliser les tableaux pour la mise en page au lieu des techniques des CSS est une mauvaise idée. En voici les principales raisons :

- -
    -
  1. Les tableaux de mise en page diminuent l'accessibilité aux malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
    2. -
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
    3. -
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
    4. -
- -

Apprentissage actif : créer votre premier tableau

- -

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

- -
    -
  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    2. -
  2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    3. -
  3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - 
    <td>Bonjour, je suis votre première cellule.</td>
    -
    4. -
  4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : - 
    <td>Bonjour, je suis votre première cellule </td>
-<td>je suis votre deuxième cellule</td>
-<td>je suis votre troisième cellule</td>
-<td>je suis votre quatrième cellule</td>
    -
    5. -
- -

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

- -

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table rangée »). Étudions cela maintenant.

- -
    -
  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi : - - 
    <tr>
-  <td>Bonjour, je suis votre première cellule </td>
-  <td>je suis votre deuxième cellule </td>
-  <td>je suis votre troisième cellule </td>
-  <td>je suis votre quatrième cellule </td>
-</tr>
    -
    2. -
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
    3. -
- -

Il devrait en résulter un tableau qui ressemble à :

- - - - - - - - - - - - - - - - -
Bonjour, je suis votre première cellule.je suis votre deuxième cellule.je suis votre troisième celluleje suis votre quatrième cellule
Deuxième ligne, première cellule.Cellule 2.Cellule 3.Cellule 4.
- -
-

Note : Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

-
- -

Ajouter des en-têtes avec <th>

- -

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Race</td>
-    <td>Jack Russell</td>
-    <td>Poodle</td>
-    <td>Streetdog</td>
-    <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-    <td>Age</td>
-    <td>16</td>
-    <td>9</td>
-    <td>10</td>
-    <td>5</td>
-  </tr>
-  <tr>
-    <td>Propriétaire</td>
-    <td>Belle-mère</td>
-    <td>Moi</td>
-    <td>Moi</td>
-    <td>Belle-soeur</td>
-  </tr>
-  <tr>
-    <td>Habitudes alimentaires</td>
-    <td>Mange tous les restes</td>
-    <td>Grignotte la nourriture</td>
-    <td>Mange copieusement</td>
-    <td>Mange jusqu'à ce qu'il éclate</td>
-  </tr>
-</table>
- -

Maintenant, le rendu du tableau réel :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
RaceJack RussellPoodleStreetdogCocker Spaniel
Age169105
PropriétaireBelle-mèreMoiMoiBelle-soeur
Habitudes alimentairesMange tous les restesGrignotte la nourritureMange copieusementMange jusqu'à ce qu'il éclate
- -

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

- -

Apprentissage actif : en-tête de tableau

- -

Améliorons ce tableau.

- -
    -
  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
    2. -
  2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
    3. -
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
    4. -
- -
-

Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

-
- -

Pourquoi les en-têtes sont-ils utiles ?

- -

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

- -
-

Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

-
- -

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

- -

Étendre des cellules sur plusieurs lignes ou colonnes

- -

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

- -

Le code initial ressemble à cela :

- -
<table>
-  <tr>
-    <th>Animaux</th>
-  </tr>
-  <tr>
-    <th>Hippopotame</th>
-  </tr>
-  <tr>
-    <th>Cheval</th>
-    <td>Jument</td>
-  </tr>
-  <tr>
-    <td>Étalon</td>
-  </tr>
-  <tr>
-    <th>Crocodile</th>
-  </tr>
-  <tr>
-    <th>Poulet</th>
-    <td>Coq</td>
-  </tr>
-  <tr>
-    <td>Coq</td>
-  </tr>
-</table>
- -

Mais le résultat ne nous donne pas ce que nous voulions :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animaux
Hippopotame
ChevalJument
Étalon
Crocodile
PouletCoq
Coq
- -

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

- -

Utilisons colspan et rowspan pour améliorer ce tableau.

- -
    -
  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
    2. -
  2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
    3. -
  3. Enfin, utilisez rowspan pour mettre « Cheval » and « Poulet » sur deux lignes.
    4. -
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
    5. -
- -
-

Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

-
- -

Attribuer un style commun aux colonnes

- -

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.

- -

Premier exemple

-

Observez l'exemple simple suivant :

- -
<table>
-  <tr>
-    <th>Data 1</th>
-    <th style="background-color: yellow">Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td style="background-color: yellow">Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
-  </tr>
-</table>
- -

Ce qui nous donne comme résultat :

-

{{EmbedLiveSample("Premier_exemple")}}

- -

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

- -

Autres exemples

- -
 <table>
-   <colgroup>
-    <col>
-    <col style="background-color: yellow">
-  </colgroup>
-  <tr>
-    <th>Data 1</th>
-    <th>Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td>Orange</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
-  </tr>
-</table>
- -

En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.

- -

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.

- -

Apprentissage actif : colgroup et col

- -

Maintenant, il est temps de vous y mettre vous-même.

- -

Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

- -

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

- -

Recréez le tableau en suivant les étapes ci-dessous.

- -
    -
  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
    2. -
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
    3. -
  3. Les deux premières colonnes doivent rester sans style.
    4. -
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
    5. -
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
    6. -
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
    7. -
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    9. -
- -

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (à voir aussi directement) sur GitHub .

- -

Résumé

- -

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- - - -
-

Dans ce module

- - -
diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md new file mode 100644 index 0000000000..fe9ef9ef91 --- /dev/null +++ b/files/fr/learn/html/tables/basics/index.md @@ -0,0 +1,557 @@ +--- +title: 'Tableaux HTML : notions de base' +slug: Learn/HTML/Tables/Basics +tags: + - Apprentissage + - Article + - Bases + - Codage + - Débutant + - En-têtes + - HTML + - Tableaux + - cellule + - col + - colgroup + - colspan + - rangées + - rowspan +translation_of: Learn/HTML/Tables/Basics +original_slug: Apprendre/HTML/Tableaux/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.

+ + + + + + + + + + + + +
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :Se familiariser avec les tableaux HTML.
+ +

Qu'est-ce qu'un tableau ?

+ +

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .

+ +

Comment fonctionne un tableau ?

+ +

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric).
NomMasse (1024kg)Diamètre (km)Densité (kg/m3)Gravité (m/s2)Durée du jour (hours)Distance du Soleil (106km)Température moyenne (°C)Nombre de lunesNotes
Planètes telluriquesMercure0.3304,87954273.74222.657.91670La plus proche du Soleil
Venus4.8712,10452438.92802.0108.24640
Terre5.9712,75655149.824.0149.6151Notre monde
Mars0.6426,79239333.724.7227.9-652La planète rouge
Planètes joviennesGéantes gazeusesJupiter1898142,984132623.19.9778.6-11067La plus grosse planète
Saturne568120,5366879.010.71433.5-14062
Géantes glacéesUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Planètes nainesPluton0.01462,37020950.7153.35906.4-2255Déclassée en tant que planète en 2006 mais décision controverséee.
+ +

Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

+ +

Style de tableau

+ +

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.

+ +

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.

+ +

Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.

+ +

Quand NE PAS utiliser de tableaux en HTML ?

+ +

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Mises en page dans notre Module d'apprentissage à l'Accessibilité. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

+ +

Bref, utiliser les tableaux pour la mise en page au lieu des techniques des CSS est une mauvaise idée. En voici les principales raisons :

+ +
    +
  1. Les tableaux de mise en page diminuent l'accessibilité aux malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
    2. +
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
    3. +
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
    4. +
+ +

Apprentissage actif : créer votre premier tableau

+ +

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

+ +
    +
  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    2. +
  2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    3. +
  3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : + 
    <td>Bonjour, je suis votre première cellule.</td>
    +
    4. +
  4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : + 
    <td>Bonjour, je suis votre première cellule </td>
+<td>je suis votre deuxième cellule</td>
+<td>je suis votre troisième cellule</td>
+<td>je suis votre quatrième cellule</td>
    +
    5. +
+ +

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

+ +

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table rangée »). Étudions cela maintenant.

+ +
    +
  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi : + + 
    <tr>
+  <td>Bonjour, je suis votre première cellule </td>
+  <td>je suis votre deuxième cellule </td>
+  <td>je suis votre troisième cellule </td>
+  <td>je suis votre quatrième cellule </td>
+</tr>
    +
    2. +
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
    3. +
+ +

Il devrait en résulter un tableau qui ressemble à :

+ + + + + + + + + + + + + + + + +
Bonjour, je suis votre première cellule.je suis votre deuxième cellule.je suis votre troisième celluleje suis votre quatrième cellule
Deuxième ligne, première cellule.Cellule 2.Cellule 3.Cellule 4.
+ +
+

Note : Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

+
+ +

Ajouter des en-têtes avec <th>

+ +

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Race</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Propriétaire</td>
+    <td>Belle-mère</td>
+    <td>Moi</td>
+    <td>Moi</td>
+    <td>Belle-soeur</td>
+  </tr>
+  <tr>
+    <td>Habitudes alimentaires</td>
+    <td>Mange tous les restes</td>
+    <td>Grignotte la nourriture</td>
+    <td>Mange copieusement</td>
+    <td>Mange jusqu'à ce qu'il éclate</td>
+  </tr>
+</table>
+ +

Maintenant, le rendu du tableau réel :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
RaceJack RussellPoodleStreetdogCocker Spaniel
Age169105
PropriétaireBelle-mèreMoiMoiBelle-soeur
Habitudes alimentairesMange tous les restesGrignotte la nourritureMange copieusementMange jusqu'à ce qu'il éclate
+ +

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

+ +

Apprentissage actif : en-tête de tableau

+ +

Améliorons ce tableau.

+ +
    +
  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
    2. +
  2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
    3. +
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
    4. +
+ +
+

Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

+
+ +

Pourquoi les en-têtes sont-ils utiles ?

+ +

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

+ +
+

Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

+
+ +

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

+ +

Étendre des cellules sur plusieurs lignes ou colonnes

+ +

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

+ +

Le code initial ressemble à cela :

+ +
<table>
+  <tr>
+    <th>Animaux</th>
+  </tr>
+  <tr>
+    <th>Hippopotame</th>
+  </tr>
+  <tr>
+    <th>Cheval</th>
+    <td>Jument</td>
+  </tr>
+  <tr>
+    <td>Étalon</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Poulet</th>
+    <td>Coq</td>
+  </tr>
+  <tr>
+    <td>Coq</td>
+  </tr>
+</table>
+ +

Mais le résultat ne nous donne pas ce que nous voulions :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animaux
Hippopotame
ChevalJument
Étalon
Crocodile
PouletCoq
Coq
+ +

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

+ +

Utilisons colspan et rowspan pour améliorer ce tableau.

+ +
    +
  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
    2. +
  2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
    3. +
  3. Enfin, utilisez rowspan pour mettre « Cheval » and « Poulet » sur deux lignes.
    4. +
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
    5. +
+ +
+

Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

+
+ +

Attribuer un style commun aux colonnes

+ +

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.

+ +

Premier exemple

+

Observez l'exemple simple suivant :

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Ce qui nous donne comme résultat :

+

{{EmbedLiveSample("Premier_exemple")}}

+ +

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

+ +

Autres exemples

+ +
 <table>
+   <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Orange</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.

+ +

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.

+ +

Apprentissage actif : colgroup et col

+ +

Maintenant, il est temps de vous y mettre vous-même.

+ +

Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recréez le tableau en suivant les étapes ci-dessous.

+ +
    +
  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
    2. +
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
    3. +
  3. Les deux premières colonnes doivent rester sans style.
    4. +
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
    5. +
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
    6. +
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
    7. +
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    9. +
+ +

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (à voir aussi directement) sur GitHub .

+ +

Résumé

+ +

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ + + +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html deleted file mode 100644 index e29779b351..0000000000 --- a/files/fr/learn/html/tables/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Les tableaux en HTML -slug: Learn/HTML/Tables -tags: - - Article - - CodingScripting - - Débutant - - Guide - - HTML - - Landing - - Module - - Tableaux -translation_of: Learn/HTML/Tables -original_slug: Apprendre/HTML/Tableaux ---- -
{{LearnSidebar}}
- -

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

- -

Prérequis

- -

Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants :

- -
-
Bases à propos des Tableaux en HTML
-
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
-
Caractéristiques avancées des Tableaux HTML et accessibilité
-
Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.
-
- -

Évaluation des connaissances

- -
-
Structuration de données sur les planètes
-
Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
-
diff --git a/files/fr/learn/html/tables/index.md b/files/fr/learn/html/tables/index.md new file mode 100644 index 0000000000..e29779b351 --- /dev/null +++ b/files/fr/learn/html/tables/index.md @@ -0,0 +1,44 @@ +--- +title: Les tableaux en HTML +slug: Learn/HTML/Tables +tags: + - Article + - CodingScripting + - Débutant + - Guide + - HTML + - Landing + - Module + - Tableaux +translation_of: Learn/HTML/Tables +original_slug: Apprendre/HTML/Tableaux +--- +
{{LearnSidebar}}
+ +

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants :

+ +
+
Bases à propos des Tableaux en HTML
+
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
+
Caractéristiques avancées des Tableaux HTML et accessibilité
+
Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.
+
+ +

Évaluation des connaissances

+ +
+
Structuration de données sur les planètes
+
Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
+
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html deleted file mode 100644 index 303bf2fdf9..0000000000 --- a/files/fr/learn/html/tables/structuring_planet_data/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: "Revue\_: structurer les données des planètes" -slug: Learn/HTML/Tables/Structuring_planet_data -translation_of: Learn/HTML/Tables/Structuring_planet_data -original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.

- - - - - - - - - - - - -
Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
- -

Point de départ

- -

Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.

- -
-

Note : Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.

-
- -

Résumé du projet

- -

Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.

- -

Le tableau terminé devrait ressembler à celui-ci :

- -

- -

Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)

- - - -

Étapes à suivre

- -

Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier planets-data.txt. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.

- -
    -
  1. Ouvrez votre copie de blank-template.html, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.
    2. -
  2. Ajoutez la légende fournie à votre tableau.
    3. -
  3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.
    4. -
  4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.
    5. -
  5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.
    6. -
  6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.
    7. -
  7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).
    8. -
- -

Conseils et astuces

- - - -

Correction

- -

Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de Learning Area Discourse thread, ou dans le #mdn canal IRC sur Mozilla IRC. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !

- -

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.md b/files/fr/learn/html/tables/structuring_planet_data/index.md new file mode 100644 index 0000000000..303bf2fdf9 --- /dev/null +++ b/files/fr/learn/html/tables/structuring_planet_data/index.md @@ -0,0 +1,73 @@ +--- +title: "Revue\_: structurer les données des planètes" +slug: Learn/HTML/Tables/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +original_slug: Apprendre/HTML/Tableaux/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.

+ + + + + + + + + + + + +
Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
+ +

Point de départ

+ +

Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.

+ +
+

Note : Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.

+
+ +

Résumé du projet

+ +

Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.

+ +

Le tableau terminé devrait ressembler à celui-ci :

+ +

+ +

Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)

+ + + +

Étapes à suivre

+ +

Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier planets-data.txt. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.

+ +
    +
  1. Ouvrez votre copie de blank-template.html, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.
    2. +
  2. Ajoutez la légende fournie à votre tableau.
    3. +
  3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.
    4. +
  4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.
    5. +
  5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.
    6. +
  6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.
    7. +
  7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).
    8. +
+ +

Conseils et astuces

+ + + +

Correction

+ +

Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de Learning Area Discourse thread, ou dans le #mdn canal IRC sur Mozilla IRC. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/fr/learn/index.html b/files/fr/learn/index.html deleted file mode 100644 index b21e54c010..0000000000 --- a/files/fr/learn/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Apprendre le développement web -slug: Learn -tags: - - Apprendre - - Beginner - - CSS - - Débutant - - HTML - - Index - - Introduction - - Landing - - Web -translation_of: Learn -original_slug: Apprendre ---- -

{{LearnSidebar}}

- -

Bienvenue dans l'Espace d'apprentissage (Learning Area) de MDN. Cet ensemble d'articles a pour but de fournir aux développeurs web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.

- -

Le but de cette section de MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant le reste du contenu de MDN et d'autres ressources.

- -

Si vous débutez complètement, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le Web et ses technologies.

- -

Quoi de neuf ?

- -

Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver les notes de version de l'espace de formation afin de vous indiquer ce qui a changé - n'hésitez pas à revenir fréquemment !

- -

Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'il en manque, envoyez-nous un message sur notre Forum de discussion.

- -
-

Vous voulez devenir un développeur web front-end ?

-

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

-

Commencer

-
- -

Par où commencer ?

- -
-
Complètement débutant
-
Si vous êtes totalement débutant dans le développement web, nous vous recommandons de commencer par travailler notre module « Premiers pas sur le Web », qui est une introduction pratique au développement web.
-
Au-delà des bases
-
Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module Introduction au HTML, puis voyez le module Introduction aux CSS.
-
Écrire des scripts
-
Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules JavaScript : premiers pas et Premiers pas côté serveur.
-
Les frameworks et l'outillage
-
Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier les outils de développement web côté client et éventuellement approfondir les frameworks JavaScript côté client, ainsi que la programmation des sites web côté serveur.
-
- -
-

Note : Notre Glossaire fournit des définitions de la terminologie employée.

-
- -

{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}

- -

Rubriques couvertes

- -

Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage de MDN.

- -
-
Débuter avec le développement web
-
Une introduction pratique au développement web pour les vrais débutants.
-
HTML — structuration du Web
-
Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail.
-
CSS — mise en forme du Web
-
CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS.
-
JavaScript — des scripts dynamiques coté client
-
C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript.
-
Les formulaires web — Manipuler les données saisies par les utilisateurs
-
Les formulaires web sont un outil puissant pour interagir avec les utilisateurs. Ils permettent notamment de collecter des données ou d'offrir aux utilisateurs la possibilité de contrôler l'interface qu'ils utilisent. Dans ces articles, nous verrons les aspects essentiels sur la structure, la mise en forme et les interactions avec les formulaires web.
-
Accessibilité — rendre le Web utilisable par tous
-
L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire.
-
Performances du Web - rendre les sites web rapides et dynamiques
-
La performance web est l'art de s'assurer que les applications web se téléchargent rapidement et sont réactives à l'interaction de l'utilisateur, indépendamment de la bande passante, de la taille de l'écran, du réseau ou des capacités du dispositif de l'utilisateur.
-
Outils et tests
-
Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs, les linters, les outils de transformations et de mise en forme, les systèmes de gestion de version, et les outils de déploiement.
-
Programmation de site web coté serveur
-
Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js).
-
- -

Obtenir nos exemples de code

- -

Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous disponibles sur GitHub. Si vous souhaitez les copier tous sur votre ordinateur, le plus simple est de télécharger un ZIP de la dernière branche du code principal.

- -

Si vous préférez copier le dépôt d'une manière plus flexible qui permet des mises à jour automatiques, vous pouvez suivre les instructions plus complexes :

- -
    -
  1. Installer Git sur votre machine. C'est le logiciel sous-jacent de contrôle de version sur lequel GitHub fonctionne.
    2. -
  2. S'inscrire pour obtenir un compte GitHub.
    3. -
  3. Une fois inscrit, se connecter dans github.com avec votre nom d'utilisateur et votre mot de passe.
    4. -
  4. Ouvrir l'invite de commande (Windows) ou un terminal (Linux, macOS).
    5. -
  5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : - 
    git clone https://github.com/mdn/learning-area
    -
    6. -
  6. Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la commande cd).
    7. -
- -

Vous pouvez mettre à jour le dépôt de learning-area pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes :

- -
    -
  1. Dans votre terminal/invite de commande, allez dans le répertoire learning-area avec cd. Par exemple, si vous êtes dans son répertoire parent : - 
    cd learning-area
    -
    2. -
  2. Mettez à jour le dépôt avec la commande : - 
    git pull
    -
    3. -
- -

Nous contacter

- -

Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le fil de discussion de l'Espace d'apprentissage. N'hésitez pas à nous faire part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation.

- -

Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la façon dont vous pouvez aider, et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage.

- -

Voir aussi

- -
-
Mozilla Developer Newsletter
-
Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence.
-
Learn JavaScript
-
Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique.
-
Web demystified
-
Une grande série de vidéos expliquant les principes fondamentaux du Web, destinée aux débutants absolus en matière de développement web. Créé par Jérémie Patonnier.
-
Codecademy
-
Un site interactif pour apprendre les langages de programmation à partir du début.
-
BitDegree
-
Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants.
-
Code.org
-
Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants.
-
EXLskills
-
Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet.
-
freeCodeCamp.org
-
Site interactif avec didacticiels et projets pour apprendre le développement web.
-
Web literacy map
-
Un framework pour l'initiation à la maîtrise du Web et aux compétences du XXIe siècle, qui donne également accès à des activités d'enseignement classées par catégorie.
-
Edabit
-
Des milliers de défis JavaScript interactifs.
-
diff --git a/files/fr/learn/index.md b/files/fr/learn/index.md new file mode 100644 index 0000000000..b21e54c010 --- /dev/null +++ b/files/fr/learn/index.md @@ -0,0 +1,138 @@ +--- +title: Apprendre le développement web +slug: Learn +tags: + - Apprendre + - Beginner + - CSS + - Débutant + - HTML + - Index + - Introduction + - Landing + - Web +translation_of: Learn +original_slug: Apprendre +--- +

{{LearnSidebar}}

+ +

Bienvenue dans l'Espace d'apprentissage (Learning Area) de MDN. Cet ensemble d'articles a pour but de fournir aux développeurs web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.

+ +

Le but de cette section de MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant le reste du contenu de MDN et d'autres ressources.

+ +

Si vous débutez complètement, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le Web et ses technologies.

+ +

Quoi de neuf ?

+ +

Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver les notes de version de l'espace de formation afin de vous indiquer ce qui a changé - n'hésitez pas à revenir fréquemment !

+ +

Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'il en manque, envoyez-nous un message sur notre Forum de discussion.

+ +
+

Vous voulez devenir un développeur web front-end ?

+

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+

Commencer

+
+ +

Par où commencer ?

+ +
+
Complètement débutant
+
Si vous êtes totalement débutant dans le développement web, nous vous recommandons de commencer par travailler notre module « Premiers pas sur le Web », qui est une introduction pratique au développement web.
+
Au-delà des bases
+
Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module Introduction au HTML, puis voyez le module Introduction aux CSS.
+
Écrire des scripts
+
Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules JavaScript : premiers pas et Premiers pas côté serveur.
+
Les frameworks et l'outillage
+
Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier les outils de développement web côté client et éventuellement approfondir les frameworks JavaScript côté client, ainsi que la programmation des sites web côté serveur.
+
+ +
+

Note : Notre Glossaire fournit des définitions de la terminologie employée.

+
+ +

{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}

+ +

Rubriques couvertes

+ +

Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage de MDN.

+ +
+
Débuter avec le développement web
+
Une introduction pratique au développement web pour les vrais débutants.
+
HTML — structuration du Web
+
Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail.
+
CSS — mise en forme du Web
+
CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS.
+
JavaScript — des scripts dynamiques coté client
+
C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript.
+
Les formulaires web — Manipuler les données saisies par les utilisateurs
+
Les formulaires web sont un outil puissant pour interagir avec les utilisateurs. Ils permettent notamment de collecter des données ou d'offrir aux utilisateurs la possibilité de contrôler l'interface qu'ils utilisent. Dans ces articles, nous verrons les aspects essentiels sur la structure, la mise en forme et les interactions avec les formulaires web.
+
Accessibilité — rendre le Web utilisable par tous
+
L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire.
+
Performances du Web - rendre les sites web rapides et dynamiques
+
La performance web est l'art de s'assurer que les applications web se téléchargent rapidement et sont réactives à l'interaction de l'utilisateur, indépendamment de la bande passante, de la taille de l'écran, du réseau ou des capacités du dispositif de l'utilisateur.
+
Outils et tests
+
Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs, les linters, les outils de transformations et de mise en forme, les systèmes de gestion de version, et les outils de déploiement.
+
Programmation de site web coté serveur
+
Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js).
+
+ +

Obtenir nos exemples de code

+ +

Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous disponibles sur GitHub. Si vous souhaitez les copier tous sur votre ordinateur, le plus simple est de télécharger un ZIP de la dernière branche du code principal.

+ +

Si vous préférez copier le dépôt d'une manière plus flexible qui permet des mises à jour automatiques, vous pouvez suivre les instructions plus complexes :

+ +
    +
  1. Installer Git sur votre machine. C'est le logiciel sous-jacent de contrôle de version sur lequel GitHub fonctionne.
    2. +
  2. S'inscrire pour obtenir un compte GitHub.
    3. +
  3. Une fois inscrit, se connecter dans github.com avec votre nom d'utilisateur et votre mot de passe.
    4. +
  4. Ouvrir l'invite de commande (Windows) ou un terminal (Linux, macOS).
    5. +
  5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : + 
    git clone https://github.com/mdn/learning-area
    +
    6. +
  6. Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la commande cd).
    7. +
+ +

Vous pouvez mettre à jour le dépôt de learning-area pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes :

+ +
    +
  1. Dans votre terminal/invite de commande, allez dans le répertoire learning-area avec cd. Par exemple, si vous êtes dans son répertoire parent : + 
    cd learning-area
    +
    2. +
  2. Mettez à jour le dépôt avec la commande : + 
    git pull
    +
    3. +
+ +

Nous contacter

+ +

Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le fil de discussion de l'Espace d'apprentissage. N'hésitez pas à nous faire part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation.

+ +

Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la façon dont vous pouvez aider, et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage.

+ +

Voir aussi

+ +
+
Mozilla Developer Newsletter
+
Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence.
+
Learn JavaScript
+
Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique.
+
Web demystified
+
Une grande série de vidéos expliquant les principes fondamentaux du Web, destinée aux débutants absolus en matière de développement web. Créé par Jérémie Patonnier.
+
Codecademy
+
Un site interactif pour apprendre les langages de programmation à partir du début.
+
BitDegree
+
Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants.
+
Code.org
+
Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants.
+
EXLskills
+
Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet.
+
freeCodeCamp.org
+
Site interactif avec didacticiels et projets pour apprendre le développement web.
+
Web literacy map
+
Un framework pour l'initiation à la maîtrise du Web et aux compétences du XXIe siècle, qui donne également accès à des activités d'enseignement classées par catégorie.
+
Edabit
+
Des milliers de défis JavaScript interactifs.
+
diff --git a/files/fr/learn/index/index.html b/files/fr/learn/index/index.html deleted file mode 100644 index 040b4c9da2..0000000000 --- a/files/fr/learn/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Index -slug: Learn/Index -tags: - - Index - - Learn - - MDN - - Meta -translation_of: Learn/Index -original_slug: Apprendre/Index ---- -

{{Index("/fr/docs/Apprendre")}}

diff --git a/files/fr/learn/index/index.md b/files/fr/learn/index/index.md new file mode 100644 index 0000000000..040b4c9da2 --- /dev/null +++ b/files/fr/learn/index/index.md @@ -0,0 +1,12 @@ +--- +title: Index +slug: Learn/Index +tags: + - Index + - Learn + - MDN + - Meta +translation_of: Learn/Index +original_slug: Apprendre/Index +--- +

{{Index("/fr/docs/Apprendre")}}

diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.html b/files/fr/learn/javascript/asynchronous/async_await/index.html deleted file mode 100644 index 5955c0f27f..0000000000 --- a/files/fr/learn/javascript/asynchronous/async_await/index.html +++ /dev/null @@ -1,546 +0,0 @@ ---- -title: Faciliter la programmation asynchrone avec async et await -slug: Learn/JavaScript/Asynchronous/Async_await -tags: - - Beginner - - CodingScripting - - Guide - - JavaScript - - Learn - - Promises - - async - - asynchronous - - await -translation_of: Learn/JavaScript/Asynchronous/Async_await ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
- -

Plus récemment, les fonctions async et le mot-clé await ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript, compréhension du code asynchrone en général et des promesses.
Objectif :Comprendre async/await et comment les utiliser.
- -

Les bases de async/await

- -

L'utilisation async/await dans votre code comporte deux parties.

- -

Le mot-clé async

- -

Tout d'abord, nous avons le mot-clé async, que vous mettez devant une déclaration de fonction pour la transformer en une fonction asynchrone. Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé await pour invoquer du code asynchrone.

- -

Essayez de taper les lignes suivantes dans la console JS de votre navigateur :

- -
function hello() { return "Bonjour" };
-hello();
- -

La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?

- -

Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :

- -
async function hello() { return "Bonjour" };
-hello();
- -

Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.

- -

Vous pouvez également créer une expression de fonction asynchrone, comme suit :

- -
let hello = async function() { return "Bonjour" };
-hello();
- -

Et vous pouvez utiliser les fonctions fléchées :

- -
let hello = async () => { return "Bonjour" };
- -

Elles font toutes à peu près la même chose.

- -

Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc .then() :

- -
hello().then((value) => console.log(value));
- -

ou même simplement un raccourci tel que

- -
hello().then(console.log);
- -

Comme nous l'avons vu dans l'article précédent.

- -

Ainsi, le mot-clé async est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.

- -

Le mot-clé await

- -

L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé await. await ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec des modules JavaScript.

- -

await peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.

- -

Vous pouvez utiliser await lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.

- -

Voici un exemple trivial :

- -
async function hello() {
-  return salutation = await Promise.resolve("Bonjour");
-};
-
-hello().then(console.log);
- -

Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.

- -

Réécriture du code des promesses avec async/await

- -

Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :

- -
fetch('coffee.jpg')
-.then(response => {
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return response.blob();
-})
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
- -

À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
- -

Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs .then() partout !

- -

Étant donné qu'un mot-clé async transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de await, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e => console.log(e));
- -

Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre exemple en direct (voir aussi le code source).

- -

Mais comment est-ce que cela fonctionne ?

- -

Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé async avant le mot-clé function. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, await ne fonctionne qu'à l'intérieur de fonctions async.

- -

À l'intérieur de la définition de la fonction myFetch(), vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc .then() à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé await avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé await fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !

- -

Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :

- -
let response = await fetch('coffee.jpg');
- -

La réponse retournée par la promesse fetch() remplie est affectée à la variable response lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un Blob à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc await ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction myFetch().

- -

Cela signifie que lorsque nous appelons la fonction myFetch(), elle retourne une promesse, de sorte que nous pouvons enchaîner un .then() à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.

- -

Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs .then() pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.

- -

Ajout de la gestion des erreurs

- -

Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.

- -

Vous pouvez utiliser une structure synchrone try...catch avec async/await. Cet exemple développe la première version du code que nous avons montré ci-dessus :

- -
async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();
- -

Le bloc catch() {} reçoit un objet d'erreur, que nous avons appelé e ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.

- -

Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc .catch() à la fin de l'appel .then(), comme ceci :

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =>
-  console.log(e)
-);
- -

En effet, le bloc .catch() attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc try/catch ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction myFetch() lorsqu'elle est appelée.

- -

Vous pouvez trouver ces deux exemples sur GitHub :

- - - -

En attente d'un Promise.all()

- -

async/await est construit au-dessus de Promises, il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut Promise.all() — vous pouvez tout à fait attendre un appel Promise.all() pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à un exemple que nous avons vu dans notre article précédent. Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.

- -

En convertissant cela en async/await (voir la démo live et le code source), cela ressemble maintenant à ceci :

- -
async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =>
-  console.log(e)
-);
- -

Vous verrez que la fonction fetchAndDecode() a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne Promise.all() :

- -
let values = await Promise.all([coffee, tea, description]);
- -

En utilisant await ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau values, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, displayContent(), et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc .then() fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.

- -

Pour la gestion des erreurs, nous avons inclus un bloc .catch() sur notre appel displayContent() ; cela permettra de gérer les erreurs survenant dans les deux fonctions.

- -
-

Note : Il est également possible d'utiliser un bloc finally au sein d'une fonction asynchrone, à la place d'un bloc asynchrone .finally(), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre exemple en direct (voir aussi le code source).

-
- -

Gérer les ralentissements potentiellement causés par async/await

- -

Il est vraiment utile de connaître async/await, mais il y a quelques inconvénients à prendre en compte.

- -

async/await donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé await bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.

- -
async function makeResult(items) {
-  let newArr = [];
-  for(let i=0; i < items.length; i++) {
-    newArr.push('word_'+i);
-  }
-  return newArr;
-}
-
-async function getResult() {
-  let result = await makeResult(items); // Bloqué sur cette ligne
-  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
-}
- -

Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque await attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas async/await.

- -

Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets Promise dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.

- -

Nous disposons de deux exemples - slow-async-await.html (voir le code source) et fast-async-await.html (voir le code source). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel setTimeout() :

- -
function timeoutPromise(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("fait");
-    }, interval);
-  });
-};
- -

Ensuite, chacun comprend une fonction asynchrone timeTest() qui attend trois appels timeoutPromise() :

- -
async function timeTest() {
-  ...
-}
- -

Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse timeTest() met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :

- -
let startTime = Date.now();
-timeTest().then(() => {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps pris en millisecondes : " + timeTaken);
-})
- -

C'est la fonction timeTest() qui diffère dans chaque cas.

- -

Dans l'exemple slow-async-await.html, timeTest() ressemble à ceci :

- -
async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}
- -

Ici, nous attendons les trois appels timeoutPromise() directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.

- -

Dans l'exemple fast-async-await.html, timeTest() ressemble à ceci :

- -
async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}
- -

Ici, nous stockons les trois objets Promise dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.

- -

Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !

- -

Gestion des erreurs

- -

La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.

- -

Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction catch à la fin :

- -
function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  await timeoutPromiseResolve(5000);
-  await timeoutPromiseReject(2000);
-  await timeoutPromiseResolve(3000);
-}
-
-let startTime = Date.now();
-timeTest().then(() => {})
-.catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
- -

Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.

- -

Voyons maintenant la deuxième approche :

- -
function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  await timeoutPromiseResolve1;
-  await timeoutPromiseReject2;
-  await timeoutPromiseResolve3;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
- -

Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.

- -

Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser Promise.all() comme vu auparavant :

- -
function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
-  return results;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
- -

Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.

- -

La méthode Promise.all() rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode Promise.allSettled() à la place.

- -

Méthodes de classe async/await

- -

Une dernière remarque avant de poursuivre, vous pouvez même ajouter async devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et await des promesses à l'intérieur de celles-ci. Jetez un œil au code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet, puis regardez notre version modifiée avec une méthode async :

- -
class Personne {
-  constructor(prenom, nomFamille, age, genre, interets) {
-    this.nom = {
-      prenom,
-      nomFamille
-    };
-    this.age = age;
-    this.genre = genre;
-    this.interets = interets;
-  }
-
-  async salutation() {
-    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
-  };
-
-  aurevoir() {
-    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
-  };
-}
-
-let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
- -

La méthode de la première classe peut maintenant être utilisée de la manière suivante :

- -
han.salutation().then(console.log);
- -

Prise en charge des navigateurs

- -

L'une des considérations à prendre en compte pour décider d'utiliser async/awaitest la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.

- -

Si vous souhaitez utiliser async/await mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque BabelJS. Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le polyfill « prothèse d'émulation » de Babel peut automatiquement fournir des fallbacks « solutions de secours » qui fonctionnent dans les anciens navigateurs.

- -

Conclusion

- -

Et voilà, async/await offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.

- -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.md b/files/fr/learn/javascript/asynchronous/async_await/index.md new file mode 100644 index 0000000000..5955c0f27f --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/async_await/index.md @@ -0,0 +1,546 @@ +--- +title: Faciliter la programmation asynchrone avec async et await +slug: Learn/JavaScript/Asynchronous/Async_await +tags: + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Promises + - async + - asynchronous + - await +translation_of: Learn/JavaScript/Asynchronous/Async_await +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+ +

Plus récemment, les fonctions async et le mot-clé await ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript, compréhension du code asynchrone en général et des promesses.
Objectif :Comprendre async/await et comment les utiliser.
+ +

Les bases de async/await

+ +

L'utilisation async/await dans votre code comporte deux parties.

+ +

Le mot-clé async

+ +

Tout d'abord, nous avons le mot-clé async, que vous mettez devant une déclaration de fonction pour la transformer en une fonction asynchrone. Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé await pour invoquer du code asynchrone.

+ +

Essayez de taper les lignes suivantes dans la console JS de votre navigateur :

+ +
function hello() { return "Bonjour" };
+hello();
+ +

La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?

+ +

Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :

+ +
async function hello() { return "Bonjour" };
+hello();
+ +

Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.

+ +

Vous pouvez également créer une expression de fonction asynchrone, comme suit :

+ +
let hello = async function() { return "Bonjour" };
+hello();
+ +

Et vous pouvez utiliser les fonctions fléchées :

+ +
let hello = async () => { return "Bonjour" };
+ +

Elles font toutes à peu près la même chose.

+ +

Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc .then() :

+ +
hello().then((value) => console.log(value));
+ +

ou même simplement un raccourci tel que

+ +
hello().then(console.log);
+ +

Comme nous l'avons vu dans l'article précédent.

+ +

Ainsi, le mot-clé async est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.

+ +

Le mot-clé await

+ +

L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé await. await ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec des modules JavaScript.

+ +

await peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.

+ +

Vous pouvez utiliser await lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.

+ +

Voici un exemple trivial :

+ +
async function hello() {
+  return salutation = await Promise.resolve("Bonjour");
+};
+
+hello().then(console.log);
+ +

Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.

+ +

Réécriture du code des promesses avec async/await

+ +

Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :

+ +
fetch('coffee.jpg')
+.then(response => {
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return response.blob();
+})
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+ +

À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+ +

Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs .then() partout !

+ +

Étant donné qu'un mot-clé async transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de await, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e => console.log(e));
+ +

Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre exemple en direct (voir aussi le code source).

+ +

Mais comment est-ce que cela fonctionne ?

+ +

Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé async avant le mot-clé function. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, await ne fonctionne qu'à l'intérieur de fonctions async.

+ +

À l'intérieur de la définition de la fonction myFetch(), vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc .then() à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé await avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé await fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !

+ +

Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :

+ +
let response = await fetch('coffee.jpg');
+ +

La réponse retournée par la promesse fetch() remplie est affectée à la variable response lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un Blob à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc await ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction myFetch().

+ +

Cela signifie que lorsque nous appelons la fonction myFetch(), elle retourne une promesse, de sorte que nous pouvons enchaîner un .then() à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.

+ +

Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs .then() pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.

+ +

Ajout de la gestion des erreurs

+ +

Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.

+ +

Vous pouvez utiliser une structure synchrone try...catch avec async/await. Cet exemple développe la première version du code que nous avons montré ci-dessus :

+ +
async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();
+ +

Le bloc catch() {} reçoit un objet d'erreur, que nous avons appelé e ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.

+ +

Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc .catch() à la fin de l'appel .then(), comme ceci :

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =>
+  console.log(e)
+);
+ +

En effet, le bloc .catch() attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc try/catch ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction myFetch() lorsqu'elle est appelée.

+ +

Vous pouvez trouver ces deux exemples sur GitHub :

+ + + +

En attente d'un Promise.all()

+ +

async/await est construit au-dessus de Promises, il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut Promise.all() — vous pouvez tout à fait attendre un appel Promise.all() pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à un exemple que nous avons vu dans notre article précédent. Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.

+ +

En convertissant cela en async/await (voir la démo live et le code source), cela ressemble maintenant à ceci :

+ +
async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =>
+  console.log(e)
+);
+ +

Vous verrez que la fonction fetchAndDecode() a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne Promise.all() :

+ +
let values = await Promise.all([coffee, tea, description]);
+ +

En utilisant await ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau values, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, displayContent(), et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc .then() fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.

+ +

Pour la gestion des erreurs, nous avons inclus un bloc .catch() sur notre appel displayContent() ; cela permettra de gérer les erreurs survenant dans les deux fonctions.

+ +
+

Note : Il est également possible d'utiliser un bloc finally au sein d'une fonction asynchrone, à la place d'un bloc asynchrone .finally(), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre exemple en direct (voir aussi le code source).

+
+ +

Gérer les ralentissements potentiellement causés par async/await

+ +

Il est vraiment utile de connaître async/await, mais il y a quelques inconvénients à prendre en compte.

+ +

async/await donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé await bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.

+ +
async function makeResult(items) {
+  let newArr = [];
+  for(let i=0; i < items.length; i++) {
+    newArr.push('word_'+i);
+  }
+  return newArr;
+}
+
+async function getResult() {
+  let result = await makeResult(items); // Bloqué sur cette ligne
+  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
+}
+ +

Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque await attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas async/await.

+ +

Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets Promise dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.

+ +

Nous disposons de deux exemples - slow-async-await.html (voir le code source) et fast-async-await.html (voir le code source). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel setTimeout() :

+ +
function timeoutPromise(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("fait");
+    }, interval);
+  });
+};
+ +

Ensuite, chacun comprend une fonction asynchrone timeTest() qui attend trois appels timeoutPromise() :

+ +
async function timeTest() {
+  ...
+}
+ +

Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse timeTest() met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :

+ +
let startTime = Date.now();
+timeTest().then(() => {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps pris en millisecondes : " + timeTaken);
+})
+ +

C'est la fonction timeTest() qui diffère dans chaque cas.

+ +

Dans l'exemple slow-async-await.html, timeTest() ressemble à ceci :

+ +
async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}
+ +

Ici, nous attendons les trois appels timeoutPromise() directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.

+ +

Dans l'exemple fast-async-await.html, timeTest() ressemble à ceci :

+ +
async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}
+ +

Ici, nous stockons les trois objets Promise dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.

+ +

Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !

+ +

Gestion des erreurs

+ +

La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.

+ +

Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction catch à la fin :

+ +
function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  await timeoutPromiseResolve(5000);
+  await timeoutPromiseReject(2000);
+  await timeoutPromiseResolve(3000);
+}
+
+let startTime = Date.now();
+timeTest().then(() => {})
+.catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+ +

Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.

+ +

Voyons maintenant la deuxième approche :

+ +
function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
+  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
+  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
+
+  await timeoutPromiseResolve1;
+  await timeoutPromiseReject2;
+  await timeoutPromiseResolve3;
+}
+
+let startTime = Date.now();
+timeTest().then(() => {
+}).catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+ +

Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.

+ +

Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser Promise.all() comme vu auparavant :

+ +
function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
+  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
+  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
+
+  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
+  return results;
+}
+
+let startTime = Date.now();
+timeTest().then(() => {
+}).catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+ +

Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.

+ +

La méthode Promise.all() rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode Promise.allSettled() à la place.

+ +

Méthodes de classe async/await

+ +

Une dernière remarque avant de poursuivre, vous pouvez même ajouter async devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et await des promesses à l'intérieur de celles-ci. Jetez un œil au code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet, puis regardez notre version modifiée avec une méthode async :

+ +
class Personne {
+  constructor(prenom, nomFamille, age, genre, interets) {
+    this.nom = {
+      prenom,
+      nomFamille
+    };
+    this.age = age;
+    this.genre = genre;
+    this.interets = interets;
+  }
+
+  async salutation() {
+    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
+  };
+
+  aurevoir() {
+    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
+  };
+}
+
+let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
+ +

La méthode de la première classe peut maintenant être utilisée de la manière suivante :

+ +
han.salutation().then(console.log);
+ +

Prise en charge des navigateurs

+ +

L'une des considérations à prendre en compte pour décider d'utiliser async/awaitest la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.

+ +

Si vous souhaitez utiliser async/await mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque BabelJS. Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le polyfill « prothèse d'émulation » de Babel peut automatiquement fournir des fallbacks « solutions de secours » qui fonctionnent dans les anciens navigateurs.

+ +

Conclusion

+ +

Et voilà, async/await offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html deleted file mode 100644 index 0b71c56c49..0000000000 --- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.html +++ /dev/null @@ -1,553 +0,0 @@ ---- -title: Choisir la bonne approche -slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach -tags: - - Beginner - - Intervals - - JavaScript - - Learn - - Optimize - - Promises - - async - - asynchronous - - await - - requestAnimationFrame - - setInterval - - setTimeout - - timeouts -translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
- -

Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, une compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Être capable de faire un choix judicieux quant à l'utilisation de différentes techniques de programmation asynchrone.
- -

Fonctions de rappels (callbacks) asynchrones

- -

Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou callback en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonOui (rappels récursifs)Oui (rappels imbriqués)Non
- -

Exemple de code

- -

Un exemple qui charge une ressource via l'API XMLHttpRequest (l'exécuter en direct, et voir la source) :

- -
function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
- -

Pièges

- - - -

Compatibilité des navigateurs

- -

Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.

- -

Plus d'informations

- - - -

setTimeout()

- -

setTimeout() est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
OuiOui (délais récursifs)Oui (délais d'attente imbriqués)Non
- -

Exemple de code

- -

Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console (voir son exécution en direct, et voir le code source) :

- -
let myGreeting = setTimeout(function() {
-  console.log('Bonjour, M. Univers !');
-}, 2000)
- -

Pièges

- -

Vous pouvez utiliser des appels récursifs à setTimeout() pour exécuter une fonction de manière répétée de façon similaire à setInterval(), en utilisant un code comme celui-ci :

- -
let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);
- -

Il existe une différence entre setTimeout() appelé récursivement et setInterval() :

- - - -

Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser setTimeout() récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.

- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

- -

Plus d'informations

- - - -

setInterval()

- -

setInterval() est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que requestAnimationFrame(), mais elle permet de choisir le rythme d'exécution.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonOuiNon (à moins qu'elles ne soient les mêmes)Non
- -

Exemple de code

- -

La fonction suivante crée un nouvel objet Date(), en extrait une chaîne de temps à l'aide de toLocaleTimeString(), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de setInterval(), créant l'effet d'une horloge numérique qui se met à jour une fois par seconde (voir cela en direct, et aussi voir la source) :

- -
function displayTime() {
-  let date = new Date();
-  let time = date.toLocaleTimeString();
-  document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
- -

Pièges

- - - -

Compatibilité des navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

- -

Plus d'informations

- - - -

requestAnimationFrame()

- -

requestAnimationFrame() est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de setInterval()/setTimeout() récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonOuiNon (à moins que ce soit les mêmes)Non
- -

Exemple de code

- -

Une toupie animée simple ; vous pouvez trouver cet exemple en direct sur GitHub (voir le code source) :

- -
const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount > 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();
- -

Pièges

- - - -

Compatibilité des navigateurs

- -

{{Compat("api.Window.requestAnimationFrame")}}

- -

Plus d'informations

- - - -

Promises (Promesses)

- -

Les promesses sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonNonOuiVoir Promise.all(), en dessous
- -

Exemple de code

- -

Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément <img> ; voyez-le aussi en direct, et voyez aussi le code source :

- -
fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
- -

Pièges

- -

Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :

- -
remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...
- -

Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :

- -
remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});
- -

ou encore :

- -
remotedb.allDocs(...)
-.then(resultOfAllDocs => {
-  return localdb.put(...);
-})
-.then(resultOfPut => {
-  return localdb.get(...);
-})
-.then(resultOfGet => {
-  return localdb.put(...);
-})
-.catch(err => console.log(err));
- -

Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article Nous avons un problème avec les promesses (en), par Nolan Lawson.

- -

Compatibilité des navigateurs

- -

{{Compat("javascript.builtins.Promise")}}

- -

Plus d'informations

- - - -

Promise.all()

- -

Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonNonNonOui
- -

Exemple de code

- -

L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise Promise.all() pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — le voir fonctionner, et voir son code source :

- -
function fetchAndDecode(url, type) {
-  // Retourner la promesse de niveau supérieur, de sorte que le résultat
-  // de l'ensemble de la chaîne est retourné hors de la fonction
-  return fetch(url).then(response => {
-    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
-  });
-}
-
-// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
-// et stocker leurs promesses dans des variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Utiliser Promise.all() pour exécuter le code uniquement lorsque
-// les trois appels de fonction ont été résolus
-Promise.all([coffee, tea, description]).then(values => {
-  console.log(values);
-  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
-  // créer des URL d'objets à partir des blobs.
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Afficher les images dans les éléments <img>
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Afficher le texte d'un paragraphe
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});
- -

Pièges

- - - -

Compatibilité des navigateurs

- -

{{Compat("javascript.builtins.Promise.all")}}

- -

Plus d'informations

- - - -

async/await

- -

Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.

- - - - - - - - - - - - - - - - - - - -
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonNonOuiOui (en combinaison avec Promise.all())
- -

Exemple de code

- -

L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await (voir en direct, et voir le code source) :

- -
async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();
- -

Pièges

- - - -

Compatibilité des navigateurs

- -

{{Compat("javascript.statements.async_function")}}

- -

Plus d'informations

- - - -

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md new file mode 100644 index 0000000000..0b71c56c49 --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md @@ -0,0 +1,553 @@ +--- +title: Choisir la bonne approche +slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +tags: + - Beginner + - Intervals + - JavaScript + - Learn + - Optimize + - Promises + - async + - asynchronous + - await + - requestAnimationFrame + - setInterval + - setTimeout + - timeouts +translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+ +

Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, une compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Être capable de faire un choix judicieux quant à l'utilisation de différentes techniques de programmation asynchrone.
+ +

Fonctions de rappels (callbacks) asynchrones

+ +

Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou callback en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonOui (rappels récursifs)Oui (rappels imbriqués)Non
+ +

Exemple de code

+ +

Un exemple qui charge une ressource via l'API XMLHttpRequest (l'exécuter en direct, et voir la source) :

+ +
function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+ +

Pièges

+ + + +

Compatibilité des navigateurs

+ +

Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.

+ +

Plus d'informations

+ + + +

setTimeout()

+ +

setTimeout() est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
OuiOui (délais récursifs)Oui (délais d'attente imbriqués)Non
+ +

Exemple de code

+ +

Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console (voir son exécution en direct, et voir le code source) :

+ +
let myGreeting = setTimeout(function() {
+  console.log('Bonjour, M. Univers !');
+}, 2000)
+ +

Pièges

+ +

Vous pouvez utiliser des appels récursifs à setTimeout() pour exécuter une fonction de manière répétée de façon similaire à setInterval(), en utilisant un code comme celui-ci :

+ +
let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);
+ +

Il existe une différence entre setTimeout() appelé récursivement et setInterval() :

+ + + +

Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser setTimeout() récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

+ +

Plus d'informations

+ + + +

setInterval()

+ +

setInterval() est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que requestAnimationFrame(), mais elle permet de choisir le rythme d'exécution.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonOuiNon (à moins qu'elles ne soient les mêmes)Non
+ +

Exemple de code

+ +

La fonction suivante crée un nouvel objet Date(), en extrait une chaîne de temps à l'aide de toLocaleTimeString(), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de setInterval(), créant l'effet d'une horloge numérique qui se met à jour une fois par seconde (voir cela en direct, et aussi voir la source) :

+ +
function displayTime() {
+  let date = new Date();
+  let time = date.toLocaleTimeString();
+  document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+ +

Pièges

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}

+ +

Plus d'informations

+ + + +

requestAnimationFrame()

+ +

requestAnimationFrame() est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de setInterval()/setTimeout() récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonOuiNon (à moins que ce soit les mêmes)Non
+ +

Exemple de code

+ +

Une toupie animée simple ; vous pouvez trouver cet exemple en direct sur GitHub (voir le code source) :

+ +
const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount > 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();
+ +

Pièges

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.requestAnimationFrame")}}

+ +

Plus d'informations

+ + + +

Promises (Promesses)

+ +

Les promesses sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonNonOuiVoir Promise.all(), en dessous
+ +

Exemple de code

+ +

Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément <img> ; voyez-le aussi en direct, et voyez aussi le code source :

+ +
fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+ +

Pièges

+ +

Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :

+ +
remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...
+ +

Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :

+ +
remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});
+ +

ou encore :

+ +
remotedb.allDocs(...)
+.then(resultOfAllDocs => {
+  return localdb.put(...);
+})
+.then(resultOfPut => {
+  return localdb.get(...);
+})
+.then(resultOfGet => {
+  return localdb.put(...);
+})
+.catch(err => console.log(err));
+ +

Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article Nous avons un problème avec les promesses (en), par Nolan Lawson.

+ +

Compatibilité des navigateurs

+ +

{{Compat("javascript.builtins.Promise")}}

+ +

Plus d'informations

+ + + +

Promise.all()

+ +

Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonNonNonOui
+ +

Exemple de code

+ +

L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise Promise.all() pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — le voir fonctionner, et voir son code source :

+ +
function fetchAndDecode(url, type) {
+  // Retourner la promesse de niveau supérieur, de sorte que le résultat
+  // de l'ensemble de la chaîne est retourné hors de la fonction
+  return fetch(url).then(response => {
+    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
+  });
+}
+
+// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
+// et stocker leurs promesses dans des variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Utiliser Promise.all() pour exécuter le code uniquement lorsque
+// les trois appels de fonction ont été résolus
+Promise.all([coffee, tea, description]).then(values => {
+  console.log(values);
+  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
+  // créer des URL d'objets à partir des blobs.
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Afficher les images dans les éléments <img>
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Afficher le texte d'un paragraphe
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});
+ +

Pièges

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("javascript.builtins.Promise.all")}}

+ +

Plus d'informations

+ + + +

async/await

+ +

Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.

+ + + + + + + + + + + + + + + + + + + +
Utile pour…
Opération unique retardéeOpération répétéeOpérations séquentielles multiplesOpérations simultanées multiples
NonNonOuiOui (en combinaison avec Promise.all())
+ +

Exemple de code

+ +

L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await (voir en direct, et voir le code source) :

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();
+ +

Pièges

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("javascript.statements.async_function")}}

+ +

Plus d'informations

+ + + +

{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.html b/files/fr/learn/javascript/asynchronous/concepts/index.html deleted file mode 100644 index ee10969b47..0000000000 --- a/files/fr/learn/javascript/asynchronous/concepts/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Concepts généraux de programmation asynchrone -slug: Learn/JavaScript/Asynchronous/Concepts -tags: - - JavaScript - - Learn - - Promises - - Threads - - asynchronous - - blocking -translation_of: Learn/JavaScript/Asynchronous/Concepts ---- -
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
- -

Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Comprendre les concepts de base de la programmation asynchrone et la façon dont elles se manifestent dans les navigateurs Web et dans JavaScript.
- -

Asynchrone ?

- -

Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.

- -

Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".

- -

Spinner multicolore pour macOS avec ballon de plage.

- - -

C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la programmation asynchrone. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.

- -

Code bloquant

- -

Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code bloquant ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.

- -

Examinons quelques exemples qui montrent ce que nous entendons par blocage.

- -

Dans notre exemple simple-sync.html (voir le fonctionnement en direct), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :

- -
const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date;
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
-  document.body.appendChild(pElem);
-});
- -

Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.

- -
-

Note : L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.

-
- -

Dans notre deuxième exemple, simple-sync-ui-blocking.html (voir en direct), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :

- - - -
function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('Vous avez cliqué sur moi !');
-);
- -

Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.

- -
-

Note : D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.

-
- -

Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur un seul thread. À ce stade, nous devons introduire le concept de threads.

- -

Les threads

- -

Un thread est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque thread ne peut effectuer qu'une seule tâche à la fois :

- -
Tâche A --> Tâche B --> Tâche C
- -

Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.

- -

Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :

- -
Processus 1: Tâche A --> Tâche B
-Processus 2: Tâche C --> Tâche D
- -

JavaScript n'a qu'un thread

- -

JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le main thread. Notre exemple ci-dessus est exécuté comme ceci :

- -
processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
- -

Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. Les Web workers vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.

- -
Processus principal : Tâche A --> Tâche C
-Processus du Worker : Tâche coûteuse B
- -

Dans cette optique, jetez un coup d'œil à simple-sync-worker.html (voyez-le fonctionner en direct), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (worker) séparé. Vous pouvez voir le code du worker ici : worker.js. Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le worker a fini ses calculs, la date est affichée dans la console.

- -

Code asynchrone

- -

Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au DOM. Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.

- -

Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :

- -
Processus principal : Tâche A --> Tâche B
- -

Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.

- -
Processus principal : Tâche A --> Tâche B --> |Tâche D|
-Processus du Worker : Tâche C --------------> |       |
- -

Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.

- -

Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que Promise permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :

- -
Processus principal : Tâche A                   Tâche B
-Promesse :               |__opération asynchrone__|
- -

Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.

- -

Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !

- -

Conclusion

- -

La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.

- -
{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.md b/files/fr/learn/javascript/asynchronous/concepts/index.md new file mode 100644 index 0000000000..ee10969b47 --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/concepts/index.md @@ -0,0 +1,165 @@ +--- +title: Concepts généraux de programmation asynchrone +slug: Learn/JavaScript/Asynchronous/Concepts +tags: + - JavaScript + - Learn + - Promises + - Threads + - asynchronous + - blocking +translation_of: Learn/JavaScript/Asynchronous/Concepts +--- +
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+ +

Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Comprendre les concepts de base de la programmation asynchrone et la façon dont elles se manifestent dans les navigateurs Web et dans JavaScript.
+ +

Asynchrone ?

+ +

Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.

+ +

Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".

+ +

Spinner multicolore pour macOS avec ballon de plage.

+ + +

C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la programmation asynchrone. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.

+ +

Code bloquant

+ +

Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code bloquant ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.

+ +

Examinons quelques exemples qui montrent ce que nous entendons par blocage.

+ +

Dans notre exemple simple-sync.html (voir le fonctionnement en direct), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date;
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
+  document.body.appendChild(pElem);
+});
+ +

Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.

+ +
+

Note : L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.

+
+ +

Dans notre deuxième exemple, simple-sync-ui-blocking.html (voir en direct), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :

+ + + +
function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('Vous avez cliqué sur moi !');
+);
+ +

Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.

+ +
+

Note : D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.

+
+ +

Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur un seul thread. À ce stade, nous devons introduire le concept de threads.

+ +

Les threads

+ +

Un thread est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque thread ne peut effectuer qu'une seule tâche à la fois :

+ +
Tâche A --> Tâche B --> Tâche C
+ +

Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.

+ +

Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :

+ +
Processus 1: Tâche A --> Tâche B
+Processus 2: Tâche C --> Tâche D
+ +

JavaScript n'a qu'un thread

+ +

JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le main thread. Notre exemple ci-dessus est exécuté comme ceci :

+ +
processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
+ +

Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. Les Web workers vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.

+ +
Processus principal : Tâche A --> Tâche C
+Processus du Worker : Tâche coûteuse B
+ +

Dans cette optique, jetez un coup d'œil à simple-sync-worker.html (voyez-le fonctionner en direct), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (worker) séparé. Vous pouvez voir le code du worker ici : worker.js. Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le worker a fini ses calculs, la date est affichée dans la console.

+ +

Code asynchrone

+ +

Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au DOM. Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.

+ +

Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :

+ +
Processus principal : Tâche A --> Tâche B
+ +

Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.

+ +
Processus principal : Tâche A --> Tâche B --> |Tâche D|
+Processus du Worker : Tâche C --------------> |       |
+ +

Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.

+ +

Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que Promise permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :

+ +
Processus principal : Tâche A                   Tâche B
+Promesse :               |__opération asynchrone__|
+ +

Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.

+ +

Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !

+ +

Conclusion

+ +

La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.

+ +
{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/asynchronous/index.html b/files/fr/learn/javascript/asynchronous/index.html deleted file mode 100644 index 0688d5de42..0000000000 --- a/files/fr/learn/javascript/asynchronous/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: JavaScript asynchrone -slug: Learn/JavaScript/Asynchronous -tags: - - Beginner - - CodingScripting - - Guide - - JavaScript - - Landing - - Promises - - async - - asynchronous - - await - - callbacks - - requestAnimationFrame - - setInterval - - setTimeout -translation_of: Learn/JavaScript/Asynchronous ---- -
{{LearnSidebar}}
- -

Dans ce module, nous examinons le JavaScript asynchrone, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.

- -
-

Vous cherchez à devenir une développeuse ou un développeur web front-end ?

-

Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

-

Commencer -

-
- -

Prérequis

- -

Le JavaScript asynchrone est un sujet assez avancé, et il vous est conseillé de travailler sur les modules Premiers pas en JavaScript et Blocs de construction de JavaScript avant d'attaquer cette leçon.

- -

Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article Concepts généraux de programmation asynchrone de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module Introduction au JavaScript asynchrone.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.

-
- -

Guides

- -
-
Concepts généraux de programmation asynchrone
-
Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devez comprendre ces concepts avant de travailler sur les autres articles du module.
-
Introduction au JavaScript asynchrone
-
Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques JavaScript asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.
-
JavaScript asynchrone coopératif : Délais et intervalles
-
Nous examinons ici les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), nous expliquons à quoi elles servent et nous examinons leurs problèmes inhérents.
-
Gérer les opérations asynchrones avec élégance grâce aux Promesses
-
Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce que l'action précédente soit terminée, ou de réagir à son échec. C'est très utile pour mettre en place une séquence d'opérations qui fonctionne correctement. Cet article vous montre comment les promesses fonctionnent, où vous les verrez utilisées dans les API Web et comment écrire les vôtres.
-
Faciliter la programmation asynchrone avec async et await
-
Les promesses peuvent être quelque peu complexes à mettre en place et à comprendre, c'est pourquoi les navigateurs modernes ont implémenté les fonctions async et l'opérateur await. Le premier permet aux fonctions standard de se comporter implicitement de manière asynchrone avec les promesses, tandis que le second peut être utilisé à l'intérieur des fonctions async pour attendre les promesses avant que la fonction ne continue. Cela rend l'enchaînement des promesses plus simple et plus facile à lire.
-
Choisir la bonne approche
-
Pour terminer ce module, nous examinerons les différentes techniques et fonctionnalités de codage que nous avons abordées tout au long de ce module, et nous verrons lesquelles vous devez utiliser et à quel moment, avec des recommandations et des rappels des pièges courants le cas échéant.
-
- -

Voir aussi

- - diff --git a/files/fr/learn/javascript/asynchronous/index.md b/files/fr/learn/javascript/asynchronous/index.md new file mode 100644 index 0000000000..0688d5de42 --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/index.md @@ -0,0 +1,62 @@ +--- +title: JavaScript asynchrone +slug: Learn/JavaScript/Asynchronous +tags: + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Promises + - async + - asynchronous + - await + - callbacks + - requestAnimationFrame + - setInterval + - setTimeout +translation_of: Learn/JavaScript/Asynchronous +--- +
{{LearnSidebar}}
+ +

Dans ce module, nous examinons le JavaScript asynchrone, pourquoi il est important et comment il peut être utilisé afin de gérer efficacement les opérations potentiellement bloquantes telles que la récupération de ressources sur un serveur.

+ +
+

Vous cherchez à devenir une développeuse ou un développeur web front-end ?

+

Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+

Commencer +

+
+ +

Prérequis

+ +

Le JavaScript asynchrone est un sujet assez avancé, et il vous est conseillé de travailler sur les modules Premiers pas en JavaScript et Blocs de construction de JavaScript avant d'attaquer cette leçon.

+ +

Si vous n'êtes pas familier avec le concept de programmation asynchrone, vous devriez absolument commencer par l'article Concepts généraux de programmation asynchrone de ce module. Si vous connaissez ce concept, vous pouvez probablement passer directement au module Introduction au JavaScript asynchrone.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de codage en ligne tel que JSBin ou Glitch.

+
+ +

Guides

+ +
+
Concepts généraux de programmation asynchrone
+
Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devez comprendre ces concepts avant de travailler sur les autres articles du module.
+
Introduction au JavaScript asynchrone
+
Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques JavaScript asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.
+
JavaScript asynchrone coopératif : Délais et intervalles
+
Nous examinons ici les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), nous expliquons à quoi elles servent et nous examinons leurs problèmes inhérents.
+
Gérer les opérations asynchrones avec élégance grâce aux Promesses
+
Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce que l'action précédente soit terminée, ou de réagir à son échec. C'est très utile pour mettre en place une séquence d'opérations qui fonctionne correctement. Cet article vous montre comment les promesses fonctionnent, où vous les verrez utilisées dans les API Web et comment écrire les vôtres.
+
Faciliter la programmation asynchrone avec async et await
+
Les promesses peuvent être quelque peu complexes à mettre en place et à comprendre, c'est pourquoi les navigateurs modernes ont implémenté les fonctions async et l'opérateur await. Le premier permet aux fonctions standard de se comporter implicitement de manière asynchrone avec les promesses, tandis que le second peut être utilisé à l'intérieur des fonctions async pour attendre les promesses avant que la fonction ne continue. Cela rend l'enchaînement des promesses plus simple et plus facile à lire.
+
Choisir la bonne approche
+
Pour terminer ce module, nous examinerons les différentes techniques et fonctionnalités de codage que nous avons abordées tout au long de ce module, et nous verrons lesquelles vous devez utiliser et à quel moment, avec des recommandations et des rappels des pièges courants le cas échéant.
+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.html b/files/fr/learn/javascript/asynchronous/introducing/index.html deleted file mode 100644 index 1a352017dd..0000000000 --- a/files/fr/learn/javascript/asynchronous/introducing/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Introduction au JavaScript asynchrone -slug: Learn/JavaScript/Asynchronous/Introducing -tags: - - Beginner - - CodingScripting - - Guide - - Introducing - - JavaScript - - Learn - - Promises - - async - - asynchronous - - await - - callbacks -translation_of: Learn/JavaScript/Asynchronous/Introducing ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
- -

Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Se familiariser avec ce qu'est le JavaScript asynchrone, comment il diffère du JavaScript synchrone et quels sont ses cas d'utilisation.
- -

JavaScript synchrone

- -

Pour nous permettre de comprendre ce qu'est le JavaScript asynchrone, nous devons commencer par nous assurer que nous comprenons ce qu'est le JavaScript synchrone. Cette section récapitule certaines des informations que nous avons vues dans l'article précédent.

- -

Une grande partie des fonctionnalités que nous avons examinées dans les modules précédents du domaine d'apprentissage sont synchrones - vous exécutez un certain code, et le résultat est renvoyé dès que le navigateur peut le faire. Examinons un exemple simple (voir en direct ici, et voir la source) :

- -
const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  alert(`Vous avez cliqué sur moi !`);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
-  document.body.appendChild(pElem);
-});
-
- -

Dans ce bloc, les lignes sont exécutées les unes après les autres :

- -
    -
  1. Nous saisissons une référence à un élément <button> qui est déjà disponible dans le DOM.
    2. -
  2. Nous lui ajoutons un écouteur d'événements click afin que lorsque le bouton est cliqué : -
      -
    1. Un message alert() apparaît.
      2. -
    2. Une fois l'alerte rejetée, nous créons un élément <p>.
      3. -
    3. Nous lui donnons ensuite du contenu textuel.
      4. -
    4. Enfin, nous ajoutons le paragraphe au corps du document.
      5. -
    -
    3. -
- -

Pendant que chaque opération est en cours de traitement, rien d'autre ne peut se produire - le rendu est mis en pause. Cela est dû au fait que, comme nous l'avons dit dans l'article précédent, JavaScript est ne dispose que d'un seul thread. Une seule chose peut se produire à la fois, sur le thread principal, et tout le reste est bloqué jusqu'à la fin d'une opération.

- -

Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :

- - - -

{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}

- -
-

Note : Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.

-
- -

JavaScript asynchrone

- -

Pour des raisons illustrées précédemment (par exemple, en rapport avec le blocage), de nombreuses fonctionnalités des API Web utilisent désormais du code asynchrone pour s'exécuter, en particulier celles qui accèdent à un type de ressource ou le récupèrent à partir d'un périphérique externe, par exemple en récupérant un fichier sur le réseau, en accédant à une base de données et en renvoyant des données, en accédant à un flux vidéo à partir d'une webcam ou en diffusant l'affichage vers un casque VR.

- -

Pourquoi est-il difficile de faire fonctionner un code synchrone ? Prenons un exemple rapide. Lorsque vous récupérez une image sur un serveur, vous ne pouvez pas renvoyer le résultat immédiatement. Cela signifie que l'exemple suivant (pseudocode) ne fonctionnerait pas :

- -
let response = fetch('myImage.png'); // la récupération est asynchrone
-let blob = response.blob();
-// afficher votre blob d'image à l'écran d'une manière ou d'une autre
- -

C'est parce que vous ne savez pas combien de temps l'image prendra pour être téléchargée, donc lorsque vous viendrez à exécuter la deuxième ligne, elle lancera une erreur (éventuellement par intermittence, éventuellement à chaque fois) parce que la réponse response n'est pas encore disponible. Au lieu de cela, vous avez besoin que votre code attende que la réponse response soit retournée avant d'essayer de lui faire quoi que ce soit d'autre.

- -

Il existe deux principaux types de code asynchrone que vous rencontrerez dans le code JavaScript : les anciens rappels et le code plus récent de type promesse. Dans les sections suivantes, nous allons examiner chacun d'eux à tour de rôle.

- -

Fonctions de rappel asynchrones

- -

Les callbacks asynchrones ou fonctions de rappels asynchrones sont des fonctions qui sont passées comme arguments lors de l'appel d'une fonction qui commencera à exécuter du code en arrière-plan. Lorsque le code d'arrière-plan a fini de s'exécuter, il appelle la fonction de rappel pour vous faire savoir que le travail est terminé, ou pour vous faire savoir que quelque chose d'intéressant s'est produit. L'utilisation des callbacks est un peu démodée aujourd'hui, mais vous les verrez encore dans un certain nombre d'API plus anciennes encore couramment utilisées.

- -

Un exemple de rappel asynchrone est le deuxième paramètre de la méthode addEventListener() (comme nous pouvons le voir en action ci-dessous) :

- -
btn.addEventListener('click', () => {
-  alert(`Vous avez cliqué sur moi !`);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
-  document.body.appendChild(pElem);
-});
- -

Le premier paramètre est le type d'événement à écouter, et le deuxième paramètre est une fonction de rappel qui est invoquée lorsque l'événement est déclenché.

- -

Lorsque nous passons une fonction de rappel comme argument à une autre fonction, nous ne passons que la référence de la fonction comme argument, c'est-à-dire que la fonction de rappel n'est pas exécutée immédiatement. Elle est « rappelée » (d'où son nom) de manière asynchrone quelque part dans le corps de la fonction contenante. La fonction contenante est responsable de l'exécution de la fonction de rappel le moment venu.

- -

Vous pouvez écrire votre propre fonction contenant un callback assez facilement. Examinons un autre exemple qui charge une ressource via l'API XMLHttpRequest (exécutez-le code en direct, et voir sa source) :

- -
function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
- -

Ici, nous créons une fonction displayImage() qui représente un blob qui lui est passé sous forme d'URL d'objet, puis crée une image dans laquelle afficher l'URL, en l'annexant au <body> du document. Cependant, nous créons ensuite une fonction loadAsset() qui prend une fonction de rappel en paramètre, ainsi qu'une URL à récupérer et un type de contenu. Elle utilise XMLHttpRequest (souvent abrégé en "XHR") pour récupérer la ressource à l'URL donnée, puis passe la réponse à la fonction de rappel pour qu'elle fasse quelque chose avec. Dans ce cas, le callback attend que l'appel XHR termine le téléchargement de la ressource (en utilisant l'écouteur d'événement onload) avant de la transmettre au callback.

- -

Les fonctions de rappel sont polyvalentes - non seulement elles permettent de contrôler l'ordre dans lequel les fonctions sont exécutées et quelles données sont transmises entre elles, mais elles permettent également de transmettre des données à différentes fonctions en fonction des circonstances. Ainsi, vous pourriez avoir différentes actions à exécuter sur la réponse téléchargée, comme processingJSON(), displayText(), etc.

- -

Notez que tous les callbacks ne sont pas asynchrones - certains s'exécutent de manière synchrone. Par exemple, lorsque nous utilisons Array.prototype.forEach() pour parcourir en boucle les éléments d'un tableau (voir en direct, et la source) :

- -
const gods = ['Apollon', 'Artémis', 'Arès', 'Zeus'];
-
-gods.forEach(function (eachName, index){
-  console.log(`${index}. ${eachName}`);
-});
- -

Dans cet exemple, nous parcourons en boucle un tableau de dieux grecs et nous imprimons les numéros d'index et les valeurs sur la console. Le paramètre attendu de forEach() est une fonction de rappel, qui prend elle-même deux paramètres, une référence au nom du tableau et aux valeurs d'index. Cependant, elle n'attend rien - elle s'exécute immédiatement.

- -

Promesses

- -

Les promesses sont le nouveau style de code asynchrone que vous verrez utilisé dans les API Web modernes. Un bon exemple est l'API fetch(), qui est en fait comme une version moderne et plus efficace de XMLHttpRequest. Voyons un exemple rapide, tiré de notre article Fetching data from the server :

- -
fetch('products.json').then(function(response) {
-  return response.json();
-}).then(function(json) {
-  let products = json;
-  initialize(products);
-}).catch(function(err) {
-  console.log('Problème de récupération : ' + err.message);
-});
- -
-

Note : Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).

-
- -

Nous voyons ici fetch() prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une promesse. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».

- -

Il faut parfois s'habituer à ce concept, qui ressemble un peu au Chat de Schrödinger en action. Aucun des résultats possibles ne s'est encore produit, donc l'opération de récupération est actuellement en attente du résultat du navigateur qui tente de terminer l'opération à un moment donné dans le futur. Nous avons ensuite trois autres blocs de code enchaînés à la fin de fetch() :

- - - -
-

Note : Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.

-
- -

La file d'attente des événements

- -

Les opérations asynchrones comme les promesses sont placées dans une file d'attente d'événements, qui s'exécute après que le processus principal a terminé son traitement afin qu'elles ne bloquent pas l'exécution du code JavaScript suivant. Les opérations mises en file d'attente se terminent dès que possible puis renvoient leurs résultats à l'environnement JavaScript.

- -

Promesses contre callbacks

- -

Les promesses présentent certaines similitudes avec les anciennes fonctions de rappel. Il s'agit essentiellement d'un objet retourné auquel vous attachez des fonctions de rappel, plutôt que de devoir passer des callbacks dans une fonction.

- -

Cependant, les promesses sont spécifiquement conçues pour gérer les opérations asynchrones et présentent de nombreux avantages par rapport aux fonctions de rappel classiques :

- - - -

La nature du code asynchrone

- -

Explorons un exemple qui illustre davantage la nature du code asynchrone, en montrant ce qui peut se produire lorsque nous ne sommes pas pleinement conscients de l'ordre d'exécution du code et les problèmes liés à la tentative de traiter le code asynchrone comme du code synchrone. L'exemple suivant est assez similaire à ce que nous avons vu auparavant (voir en direct, et la source). Une différence est que nous avons inclus un certain nombre d'instructions console.log() pour illustrer un ordre dans lequel on pourrait penser que le code s'exécute.

- -
console.log(`Démarrage`);
-let image;
-
-fetch('coffee.jpg').then((response) => {
-  console.log(`Ça a fonctionné :)`)
-  return response.blob();
-}).then((myBlob) => {
-  let objectURL = URL.createObjectURL(myBlob);
-  image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch((error) => {
-  console.log(`Il y a eu un problème avec votre opération de récupération : ${error.message}`);
-});
-
-console.log(`C'est fait !`);
- -

Le navigateur va commencer à exécuter le code, voir la première instruction console.log() (Démarrage) et l'exécuter, puis créer la variable image.

- -

Il passera ensuite à la ligne suivante et commencera à exécuter le bloc fetch() mais, comme fetch() s'exécute de manière asynchrone sans blocage, l'exécution du code se poursuit après le code lié à la promesse, atteignant ainsi l'instruction finale console.log() (C'est fait !) et la sortant sur la console.

- -

Ce n'est qu'une fois que le bloc fetch() a complètement fini de s'exécuter et de délivrer son résultat à travers les blocs .then() que nous verrons enfin apparaître le deuxième message console.log() (Ça a fonctionné :)). Les messages sont donc apparus dans un ordre différent de celui auquel on pourrait s'attendre :

- - - -

Si cela vous déconcerte, considérez le petit exemple suivant :

- -
console.log(`Enregistrement de l'événement de clics`);
-
-button.addEventListener('click', () => {
-  console.log(`Obtenir un clic`);
-});
-
-console.log(`Tout est bon !`);
- -

Le comportement est très similaire - les premier et troisième messages console.log() s'affichent immédiatement, mais le deuxième est bloqué jusqu'à ce que quelqu'un clique sur le bouton de la souris. L'exemple précédent fonctionne de la même manière, sauf que dans ce cas, le deuxième message est bloqué sur la chaîne de promesses allant chercher une ressource puis l'affichant à l'écran, plutôt que sur un clic.

- -

Dans un exemple de code moins trivial, ce type de configuration pourrait poser un problème - vous ne pouvez pas inclure un bloc de code asynchrone qui renvoie un résultat, sur lequel vous vous appuyez ensuite dans un bloc de code synchrone. Vous ne pouvez tout simplement pas garantir que la fonction asynchrone retournera avant que le navigateur ait traité le bloc de synchronisation.

- -

Pour voir cela en action, essayez de prendre une copie locale de notre exemple, et changez le quatrième appel console.log() par le suivant :

- -
console.log (`Tout est bon ! ${image.src} est affiché.`);
- -

Vous devriez maintenant obtenir une erreur dans votre console au lieu du troisième message :

- -
TypeError: image is undefined; can't access its "src" property
- -

Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction console.log(), le bloc fetch() n'a pas fini de s'exécuter, de sorte que la variable image n'a pas reçu de valeur.

- -
-

Note : Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.

-
- -

Apprentissage actif : rendez tout asynchrone !

- -

Pour corriger l'exemple problématique de fetch() et faire en sorte que les trois déclarations console.log() apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration console.log() s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc .then() enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc then(). Essayez de corriger cela maintenant.

- -
-

Note : Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.

-
- -

Conclusion

- -

Dans sa forme la plus élémentaire, JavaScript est un langage synchrone, bloquant et à un seul processus, dans lequel une seule opération peut être en cours à la fois. Mais les navigateurs web définissent des fonctions et des API qui nous permettent d'enregistrer des fonctions qui ne doivent pas être exécutées de manière synchrone, mais qui doivent être invoquées de manière asynchrone lorsqu'un événement quelconque se produit (le passage du temps, l'interaction de l'utilisateur avec la souris ou l'arrivée de données sur le réseau, par exemple). Cela signifie que vous pouvez laisser votre code faire plusieurs choses en même temps sans arrêter ou bloquer votre processus principal.

- -

Le fait de vouloir exécuter du code de manière synchrone ou asynchrone dépend de ce que l'on essaie de faire.

- -

Il y a des moments où nous voulons que les choses se chargent et se produisent immédiatement. Par exemple, lorsque vous appliquez des styles définis par l'utilisateur à une page web, vous voulez que les styles soient appliqués dès que possible.

- -

Cependant, si nous exécutons une opération qui prend du temps, comme l'interrogation d'une base de données et l'utilisation des résultats pour remplir des modèles, il est préférable d'écarter cette opération du thread principal et de réaliser la tâche de manière asynchrone. Avec le temps, vous apprendrez quand il est plus judicieux de choisir une technique asynchrone plutôt qu'une technique synchrone.

- -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/asynchronous/introducing/index.md b/files/fr/learn/javascript/asynchronous/introducing/index.md new file mode 100644 index 0000000000..1a352017dd --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/introducing/index.md @@ -0,0 +1,286 @@ +--- +title: Introduction au JavaScript asynchrone +slug: Learn/JavaScript/Asynchronous/Introducing +tags: + - Beginner + - CodingScripting + - Guide + - Introducing + - JavaScript + - Learn + - Promises + - async + - asynchronous + - await + - callbacks +translation_of: Learn/JavaScript/Asynchronous/Introducing +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
+ +

Dans cet article, nous récapitulons brièvement les problèmes associés au JavaScript synchrone, et nous jetons un premier coup d'œil à certaines des différentes techniques asynchrones que vous rencontrerez, en montrant comment elles peuvent nous aider à résoudre ces problèmes.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Se familiariser avec ce qu'est le JavaScript asynchrone, comment il diffère du JavaScript synchrone et quels sont ses cas d'utilisation.
+ +

JavaScript synchrone

+ +

Pour nous permettre de comprendre ce qu'est le JavaScript asynchrone, nous devons commencer par nous assurer que nous comprenons ce qu'est le JavaScript synchrone. Cette section récapitule certaines des informations que nous avons vues dans l'article précédent.

+ +

Une grande partie des fonctionnalités que nous avons examinées dans les modules précédents du domaine d'apprentissage sont synchrones - vous exécutez un certain code, et le résultat est renvoyé dès que le navigateur peut le faire. Examinons un exemple simple (voir en direct ici, et voir la source) :

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  alert(`Vous avez cliqué sur moi !`);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
+  document.body.appendChild(pElem);
+});
+
+ +

Dans ce bloc, les lignes sont exécutées les unes après les autres :

+ +
    +
  1. Nous saisissons une référence à un élément <button> qui est déjà disponible dans le DOM.
    2. +
  2. Nous lui ajoutons un écouteur d'événements click afin que lorsque le bouton est cliqué : +
      +
    1. Un message alert() apparaît.
      2. +
    2. Une fois l'alerte rejetée, nous créons un élément <p>.
      3. +
    3. Nous lui donnons ensuite du contenu textuel.
      4. +
    4. Enfin, nous ajoutons le paragraphe au corps du document.
      5. +
    +
    3. +
+ +

Pendant que chaque opération est en cours de traitement, rien d'autre ne peut se produire - le rendu est mis en pause. Cela est dû au fait que, comme nous l'avons dit dans l'article précédent, JavaScript est ne dispose que d'un seul thread. Une seule chose peut se produire à la fois, sur le thread principal, et tout le reste est bloqué jusqu'à la fin d'une opération.

+ +

Ainsi, dans l'exemple ci-dessus, après avoir cliqué sur le bouton, le paragraphe n'apparaîtra qu'après avoir appuyé sur le bouton OK dans la boîte d'alerte. Vous pouvez l'essayer vous-même :

+ + + +

{{EmbedLiveSample('synchronous_javascript', '100%', '110px')}}

+ +
+

Note : Il est important de se rappeler que alert(), tout en étant très utile pour démontrer une opération de blocage synchrone, est horrible à utiliser dans des applications du monde réel.

+
+ +

JavaScript asynchrone

+ +

Pour des raisons illustrées précédemment (par exemple, en rapport avec le blocage), de nombreuses fonctionnalités des API Web utilisent désormais du code asynchrone pour s'exécuter, en particulier celles qui accèdent à un type de ressource ou le récupèrent à partir d'un périphérique externe, par exemple en récupérant un fichier sur le réseau, en accédant à une base de données et en renvoyant des données, en accédant à un flux vidéo à partir d'une webcam ou en diffusant l'affichage vers un casque VR.

+ +

Pourquoi est-il difficile de faire fonctionner un code synchrone ? Prenons un exemple rapide. Lorsque vous récupérez une image sur un serveur, vous ne pouvez pas renvoyer le résultat immédiatement. Cela signifie que l'exemple suivant (pseudocode) ne fonctionnerait pas :

+ +
let response = fetch('myImage.png'); // la récupération est asynchrone
+let blob = response.blob();
+// afficher votre blob d'image à l'écran d'une manière ou d'une autre
+ +

C'est parce que vous ne savez pas combien de temps l'image prendra pour être téléchargée, donc lorsque vous viendrez à exécuter la deuxième ligne, elle lancera une erreur (éventuellement par intermittence, éventuellement à chaque fois) parce que la réponse response n'est pas encore disponible. Au lieu de cela, vous avez besoin que votre code attende que la réponse response soit retournée avant d'essayer de lui faire quoi que ce soit d'autre.

+ +

Il existe deux principaux types de code asynchrone que vous rencontrerez dans le code JavaScript : les anciens rappels et le code plus récent de type promesse. Dans les sections suivantes, nous allons examiner chacun d'eux à tour de rôle.

+ +

Fonctions de rappel asynchrones

+ +

Les callbacks asynchrones ou fonctions de rappels asynchrones sont des fonctions qui sont passées comme arguments lors de l'appel d'une fonction qui commencera à exécuter du code en arrière-plan. Lorsque le code d'arrière-plan a fini de s'exécuter, il appelle la fonction de rappel pour vous faire savoir que le travail est terminé, ou pour vous faire savoir que quelque chose d'intéressant s'est produit. L'utilisation des callbacks est un peu démodée aujourd'hui, mais vous les verrez encore dans un certain nombre d'API plus anciennes encore couramment utilisées.

+ +

Un exemple de rappel asynchrone est le deuxième paramètre de la méthode addEventListener() (comme nous pouvons le voir en action ci-dessous) :

+ +
btn.addEventListener('click', () => {
+  alert(`Vous avez cliqué sur moi !`);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
+  document.body.appendChild(pElem);
+});
+ +

Le premier paramètre est le type d'événement à écouter, et le deuxième paramètre est une fonction de rappel qui est invoquée lorsque l'événement est déclenché.

+ +

Lorsque nous passons une fonction de rappel comme argument à une autre fonction, nous ne passons que la référence de la fonction comme argument, c'est-à-dire que la fonction de rappel n'est pas exécutée immédiatement. Elle est « rappelée » (d'où son nom) de manière asynchrone quelque part dans le corps de la fonction contenante. La fonction contenante est responsable de l'exécution de la fonction de rappel le moment venu.

+ +

Vous pouvez écrire votre propre fonction contenant un callback assez facilement. Examinons un autre exemple qui charge une ressource via l'API XMLHttpRequest (exécutez-le code en direct, et voir sa source) :

+ +
function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+ +

Ici, nous créons une fonction displayImage() qui représente un blob qui lui est passé sous forme d'URL d'objet, puis crée une image dans laquelle afficher l'URL, en l'annexant au <body> du document. Cependant, nous créons ensuite une fonction loadAsset() qui prend une fonction de rappel en paramètre, ainsi qu'une URL à récupérer et un type de contenu. Elle utilise XMLHttpRequest (souvent abrégé en "XHR") pour récupérer la ressource à l'URL donnée, puis passe la réponse à la fonction de rappel pour qu'elle fasse quelque chose avec. Dans ce cas, le callback attend que l'appel XHR termine le téléchargement de la ressource (en utilisant l'écouteur d'événement onload) avant de la transmettre au callback.

+ +

Les fonctions de rappel sont polyvalentes - non seulement elles permettent de contrôler l'ordre dans lequel les fonctions sont exécutées et quelles données sont transmises entre elles, mais elles permettent également de transmettre des données à différentes fonctions en fonction des circonstances. Ainsi, vous pourriez avoir différentes actions à exécuter sur la réponse téléchargée, comme processingJSON(), displayText(), etc.

+ +

Notez que tous les callbacks ne sont pas asynchrones - certains s'exécutent de manière synchrone. Par exemple, lorsque nous utilisons Array.prototype.forEach() pour parcourir en boucle les éléments d'un tableau (voir en direct, et la source) :

+ +
const gods = ['Apollon', 'Artémis', 'Arès', 'Zeus'];
+
+gods.forEach(function (eachName, index){
+  console.log(`${index}. ${eachName}`);
+});
+ +

Dans cet exemple, nous parcourons en boucle un tableau de dieux grecs et nous imprimons les numéros d'index et les valeurs sur la console. Le paramètre attendu de forEach() est une fonction de rappel, qui prend elle-même deux paramètres, une référence au nom du tableau et aux valeurs d'index. Cependant, elle n'attend rien - elle s'exécute immédiatement.

+ +

Promesses

+ +

Les promesses sont le nouveau style de code asynchrone que vous verrez utilisé dans les API Web modernes. Un bon exemple est l'API fetch(), qui est en fait comme une version moderne et plus efficace de XMLHttpRequest. Voyons un exemple rapide, tiré de notre article Fetching data from the server :

+ +
fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  let products = json;
+  initialize(products);
+}).catch(function(err) {
+  console.log('Problème de récupération : ' + err.message);
+});
+ +
+

Note : Vous pouvez trouver la version finale sur GitHub (voir la source ici, et aussi voir le fonctionnement en direct).

+
+ +

Nous voyons ici fetch() prendre un seul paramètre - l'URL d'une ressource que vous souhaitez récupérer sur le réseau - et renvoyer une promesse. La promesse est un objet représentant l'achèvement ou l'échec de l'opération asynchrone. Elle représente un état intermédiaire, en quelque sorte. En substance, c'est la façon dont le navigateur dit « Je promets de vous donner la réponse dès que possible », d'où le nom de « promesse ».

+ +

Il faut parfois s'habituer à ce concept, qui ressemble un peu au Chat de Schrödinger en action. Aucun des résultats possibles ne s'est encore produit, donc l'opération de récupération est actuellement en attente du résultat du navigateur qui tente de terminer l'opération à un moment donné dans le futur. Nous avons ensuite trois autres blocs de code enchaînés à la fin de fetch() :

+ + + +
+

Note : Vous en apprendrez beaucoup plus sur les promesses plus tard dans le module, alors ne vous inquiétez pas si vous ne les comprenez pas encore complètement.

+
+ +

La file d'attente des événements

+ +

Les opérations asynchrones comme les promesses sont placées dans une file d'attente d'événements, qui s'exécute après que le processus principal a terminé son traitement afin qu'elles ne bloquent pas l'exécution du code JavaScript suivant. Les opérations mises en file d'attente se terminent dès que possible puis renvoient leurs résultats à l'environnement JavaScript.

+ +

Promesses contre callbacks

+ +

Les promesses présentent certaines similitudes avec les anciennes fonctions de rappel. Il s'agit essentiellement d'un objet retourné auquel vous attachez des fonctions de rappel, plutôt que de devoir passer des callbacks dans une fonction.

+ +

Cependant, les promesses sont spécifiquement conçues pour gérer les opérations asynchrones et présentent de nombreux avantages par rapport aux fonctions de rappel classiques :

+ + + +

La nature du code asynchrone

+ +

Explorons un exemple qui illustre davantage la nature du code asynchrone, en montrant ce qui peut se produire lorsque nous ne sommes pas pleinement conscients de l'ordre d'exécution du code et les problèmes liés à la tentative de traiter le code asynchrone comme du code synchrone. L'exemple suivant est assez similaire à ce que nous avons vu auparavant (voir en direct, et la source). Une différence est que nous avons inclus un certain nombre d'instructions console.log() pour illustrer un ordre dans lequel on pourrait penser que le code s'exécute.

+ +
console.log(`Démarrage`);
+let image;
+
+fetch('coffee.jpg').then((response) => {
+  console.log(`Ça a fonctionné :)`)
+  return response.blob();
+}).then((myBlob) => {
+  let objectURL = URL.createObjectURL(myBlob);
+  image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch((error) => {
+  console.log(`Il y a eu un problème avec votre opération de récupération : ${error.message}`);
+});
+
+console.log(`C'est fait !`);
+ +

Le navigateur va commencer à exécuter le code, voir la première instruction console.log() (Démarrage) et l'exécuter, puis créer la variable image.

+ +

Il passera ensuite à la ligne suivante et commencera à exécuter le bloc fetch() mais, comme fetch() s'exécute de manière asynchrone sans blocage, l'exécution du code se poursuit après le code lié à la promesse, atteignant ainsi l'instruction finale console.log() (C'est fait !) et la sortant sur la console.

+ +

Ce n'est qu'une fois que le bloc fetch() a complètement fini de s'exécuter et de délivrer son résultat à travers les blocs .then() que nous verrons enfin apparaître le deuxième message console.log() (Ça a fonctionné :)). Les messages sont donc apparus dans un ordre différent de celui auquel on pourrait s'attendre :

+ + + +

Si cela vous déconcerte, considérez le petit exemple suivant :

+ +
console.log(`Enregistrement de l'événement de clics`);
+
+button.addEventListener('click', () => {
+  console.log(`Obtenir un clic`);
+});
+
+console.log(`Tout est bon !`);
+ +

Le comportement est très similaire - les premier et troisième messages console.log() s'affichent immédiatement, mais le deuxième est bloqué jusqu'à ce que quelqu'un clique sur le bouton de la souris. L'exemple précédent fonctionne de la même manière, sauf que dans ce cas, le deuxième message est bloqué sur la chaîne de promesses allant chercher une ressource puis l'affichant à l'écran, plutôt que sur un clic.

+ +

Dans un exemple de code moins trivial, ce type de configuration pourrait poser un problème - vous ne pouvez pas inclure un bloc de code asynchrone qui renvoie un résultat, sur lequel vous vous appuyez ensuite dans un bloc de code synchrone. Vous ne pouvez tout simplement pas garantir que la fonction asynchrone retournera avant que le navigateur ait traité le bloc de synchronisation.

+ +

Pour voir cela en action, essayez de prendre une copie locale de notre exemple, et changez le quatrième appel console.log() par le suivant :

+ +
console.log (`Tout est bon ! ${image.src} est affiché.`);
+ +

Vous devriez maintenant obtenir une erreur dans votre console au lieu du troisième message :

+ +
TypeError: image is undefined; can't access its "src" property
+ +

Cela est dû au fait qu'au moment où le navigateur tente d'exécuter la troisième instruction console.log(), le bloc fetch() n'a pas fini de s'exécuter, de sorte que la variable image n'a pas reçu de valeur.

+ +
+

Note : Pour des raisons de sécurité, vous ne pouvez pas fetch() les fichiers de votre système de fichiers local (ou exécuter d'autres opérations de ce type localement) ; pour exécuter l'exemple ci-dessus localement, vous devrez le faire passer par un serveur web local.

+
+ +

Apprentissage actif : rendez tout asynchrone !

+ +

Pour corriger l'exemple problématique de fetch() et faire en sorte que les trois déclarations console.log() apparaissent dans l'ordre souhaité, vous pourriez faire en sorte que la troisième déclaration console.log() s'exécute également de manière asynchrone. Cela peut être fait en la déplaçant à l'intérieur d'un autre bloc .then() enchaîné à la fin du deuxième, ou en la déplaçant à l'intérieur du deuxième bloc then(). Essayez de corriger cela maintenant.

+ +
+

Note : Si vous êtes bloqué, vous pouvez trouver une réponse ici (voyez-la fonctionner en direct). Vous pouvez également trouver beaucoup plus d'informations sur les promesses dans notre guide Gérer les opérations asynchrones avec élégance grâce aux Promesses, plus loin dans ce module.

+
+ +

Conclusion

+ +

Dans sa forme la plus élémentaire, JavaScript est un langage synchrone, bloquant et à un seul processus, dans lequel une seule opération peut être en cours à la fois. Mais les navigateurs web définissent des fonctions et des API qui nous permettent d'enregistrer des fonctions qui ne doivent pas être exécutées de manière synchrone, mais qui doivent être invoquées de manière asynchrone lorsqu'un événement quelconque se produit (le passage du temps, l'interaction de l'utilisateur avec la souris ou l'arrivée de données sur le réseau, par exemple). Cela signifie que vous pouvez laisser votre code faire plusieurs choses en même temps sans arrêter ou bloquer votre processus principal.

+ +

Le fait de vouloir exécuter du code de manière synchrone ou asynchrone dépend de ce que l'on essaie de faire.

+ +

Il y a des moments où nous voulons que les choses se chargent et se produisent immédiatement. Par exemple, lorsque vous appliquez des styles définis par l'utilisateur à une page web, vous voulez que les styles soient appliqués dès que possible.

+ +

Cependant, si nous exécutons une opération qui prend du temps, comme l'interrogation d'une base de données et l'utilisation des résultats pour remplir des modèles, il est préférable d'écarter cette opération du thread principal et de réaliser la tâche de manière asynchrone. Avec le temps, vous apprendrez quand il est plus judicieux de choisir une technique asynchrone plutôt qu'une technique synchrone.

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/asynchronous/promises/index.html b/files/fr/learn/javascript/asynchronous/promises/index.html deleted file mode 100644 index 69f6de6a21..0000000000 --- a/files/fr/learn/javascript/asynchronous/promises/index.html +++ /dev/null @@ -1,576 +0,0 @@ ---- -title: Gérer les opérations asynchrones avec élégance grâce aux promesses -slug: Learn/JavaScript/Asynchronous/Promises -tags: - - Beginner - - CodingScripting - - Guide - - JavaScript - - Learn - - Promises - - async - - asynchronous - - catch - - finally - - then -translation_of: Learn/JavaScript/Asynchronous/Promises ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
- -

Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Comprendre les promesses et savoir comment les utiliser.
- -

Que sont les promesses ?

- -

Nous avons examiné les promesses (Promise) brièvement dans le premier article du cours, mais ici nous allons les examiner de manière beaucoup plus approfondie.

- -

Essentiellement, une promesse est un objet qui représente un état intermédiaire d'une opération - en fait, c'est une promesse qu'un résultat d'une certaine nature sera retourné à un moment donné dans le futur. Il n'y a aucune garantie du moment exact où l'opération se terminera et où le résultat sera renvoyé, mais il est une garantie que lorsque le résultat est disponible, ou que la promesse échoue, le code que vous fournissez sera exécuté afin de faire autre chose avec un résultat réussi, ou de gérer gracieusement un cas d'échec.

- -

En général, vous êtes moins intéressé par le temps qu'une opération asynchrone prendra pour renvoyer son résultat (à moins bien sûr qu'elle ne prenne beaucoup trop de temps !), et plus intéressé par le fait de pouvoir répondre à son retour, quel que soit le moment. Et bien sûr, il est agréable que cela ne bloque pas le reste de l'exécution du code.

- -

L'une des utilisations les plus courantes des promesses concerne les API web qui renvoient une promesse. Considérons une hypothétique application de chat vidéo. L'application dispose d'une fenêtre contenant une liste des amis de l'utilisateur, et un clic sur un bouton à côté d'un utilisateur lance un appel vidéo vers cet utilisateur.

- -

Le gestionnaire de ce bouton appelle getUserMedia() afin d'avoir accès à la caméra et au microphone de l'utilisateur. Puisque getUserMedia() doit s'assurer que l'utilisateur a la permission d'utiliser ces dispositifs et lui demander quel microphone utiliser et quelle caméra utiliser (ou s'il s'agit d'un appel vocal uniquement, parmi d'autres options possibles), il peut bloquer jusqu'à ce que non seulement toutes ces décisions soient prises, mais aussi que la caméra et le microphone soient activés. En outre, l'utilisateur peut ne pas répondre immédiatement à ces demandes d'autorisation. Cela peut potentiellement prendre beaucoup de temps.

- -

Puisque l'appel à getUserMedia() est effectué depuis le processus principal du navigateur, l'ensemble du navigateur est bloqué jusqu'à ce que getUserMedia() retourne une réponse ! Évidemment, ce n'est pas une option viable ; sans les promesses, tout dans le navigateur devient inutilisable jusqu'à ce que l'utilisateur décide ce qu'il faut faire de la caméra et du microphone. Ainsi, au lieu d'attendre l'utilisateur, d'obtenir l'activation des périphériques choisis et de retourner directement le MediaStream pour le flux créé à partir des sources sélectionnées, getUserMedia() retourne une promesse qui est résolue avec le MediaStream une fois qu'il est disponible.

- -

Le code qu'utiliserait l'application de chat vidéo pourrait ressembler à ceci :

- -
function handleCallButton(evt) {
-  setStatusMessage("Appel...");
-  navigator.mediaDevices.getUserMedia({video: true, audio: true})
-    .then(chatStream => {
-      selfViewElem.srcObject = chatStream;
-      chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream));
-      setStatusMessage("Connecté");
-    }).catch(err => {
-      setStatusMessage("Échec de la connexion");
-    });
-}
-
- -

Cette fonction commence par utiliser une fonction appelée setStatusMessage() pour mettre à jour un affichage d'état avec le message "Appel...", indiquant qu'un appel est tenté.Il appelle ensuite getUserMedia(), demandant un flux qui a à la fois des pistes vidéo et audio, puis une fois que cela a été obtenu, configure un élément vidéo pour montrer le flux provenant de la caméra comme une "vue de soi", puis prend chacune des pistes du flux et les ajoute à la RTCPeerConnection WebRTC représentant une connexion à un autre utilisateur. Après cela, l'affichage de l'état est mis à jour pour indiquer "Connecté".

- -

Si getUserMedia() échoue, le bloc catch s'exécute. Celui-ci utilise setStatusMessage() pour mettre à jour la case d'état afin d'indiquer qu'une erreur s'est produite.

- -

La chose importante ici est que l'appel getUserMedia() revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction handleCallButton() est déjà retournée au code qui l'a appelée, lorsque getUserMedia() a fini de travailler, elle appelle le gestionnaire que vous fournissez. Tant que l'application ne suppose pas que le flux a commencé, elle peut continuer à fonctionner.

- -
-

Note : Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article L'essentiel du WebRTC. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.

-
- -

Le problème des fonctions de rappel

- -

Pour bien comprendre pourquoi les promesses sont une bonne chose, il est utile de repenser aux anciennes fonctions de rappel (callback) et de comprendre pourquoi elles sont problématiques.

- -

Prenons l'exemple de la commande d'une pizza. Il y a certaines étapes que vous devez franchir pour que votre commande soit réussie, et cela n'a pas vraiment de sens d'essayer de les exécuter dans le désordre, ou dans l'ordre mais avant que chaque étape précédente ne soit tout à fait terminée :

- -
    -
  1. Vous choisissez les garnitures que vous voulez. Cela peut prendre un certain temps si vous êtes indécis, et peut échouer si vous n'arrivez pas à vous décider, ou si vous décidez de prendre un curry à la place.
    2. -
  2. Vous passez ensuite votre commande. Le retour d'une pizza peut prendre un certain temps et peut échouer si le restaurant ne dispose pas des ingrédients nécessaires à sa cuisson.
    3. -
  3. Vous récupérez ensuite votre pizza et la mangez. Cela peut échouer si, par exemple, vous avez oublié votre portefeuille et ne pouvez pas payer la pizza !
    4. -
- -

Avec l'ancien modèle de rappels, une représentation en pseudo-code de la fonctionnalité ci-dessus pourrait ressembler à quelque chose comme ceci :

- -
chooseToppings(function(toppings) {
-  placeOrder(toppings, function(order) {
-    collectOrder(order, function(pizza) {
-      eatPizza(pizza);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
- -

Cela est désordonné et difficile à lire (souvent appelé « callback hell »), nécessite que le failureCallback() soit appelé plusieurs fois (une fois pour chaque fonction imbriquée), avec d'autres problèmes en plus.

- -

Améliorations avec des promesses

- -

Les promesses facilitent grandement l'écriture, l'analyse et l'exécution de situations telles que celle décrite ci-dessus. Si nous avions représenté le pseudo-code ci-dessus en utilisant des promesses asynchrones à la place, nous aurions obtenu quelque chose comme ceci :

- -
chooseToppings()
-.then(function(toppings) {
-  return placeOrder(toppings);
-})
-.then(function(order) {
-  return collectOrder(order);
-})
-.then(function(pizza) {
-  eatPizza(pizza);
-})
-.catch(failureCallback);
- -

C'est bien mieux - il est plus facile de voir ce qui se passe, nous n'avons besoin que d'un seul bloc .catch() pour gérer toutes les erreurs, cela ne bloque pas le processus principal (nous pouvons donc continuer à jouer à des jeux vidéo en attendant que la pizza soit prête à être collectée), et chaque opération a la garantie d'attendre que les opérations précédentes soient terminées avant de s'exécuter. Nous sommes en mesure d'enchaîner plusieurs actions asynchrones pour qu'elles se produisent les unes après les autres de cette façon, car chaque bloc .then() renvoie une nouvelle promesse qui se résout lorsque le bloc .then() a fini de s'exécuter. Astucieux, non ?

- -

En utilisant les fonctions flèches, vous pouvez simplifier encore plus le code :

- -
chooseToppings()
-.then(toppings =>
-  placeOrder(toppings)
-)
-.then(order =>
-  collectOrder(order)
-)
-.then(pizza =>
-  eatPizza(pizza)
-)
-.catch(failureCallback);
- -

Ou encore ça :

- -
chooseToppings()
-.then(toppings => placeOrder(toppings))
-.then(order => collectOrder(order))
-.then(pizza => eatPizza(pizza))
-.catch(failureCallback);
- -

Cela fonctionne car avec les fonctions flèches () => x est un raccourci valide pour () => { return x ; }.

- -

Vous pourriez même le faire ainsi, puisque les fonctions ne font que passer leurs arguments directement, et qu'il n'y a donc pas besoin de cette couche supplémentaire de fonctions :

- -
chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);
- -

Cependant, la lecture n'est pas aussi facile et cette syntaxe peut ne pas être utilisable si vos blocs sont plus complexes que ce que nous avons montré ici.

- -
-

Note : Vous pouvez apporter d'autres améliorations avec la syntaxe async/await, que nous aborderons dans le prochain article.

-
- -

Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences :

- - - -

Explication de la syntaxe de base des promesses : exemple concret

- -

Il est important de comprendre les promesses, car la plupart des API Web modernes les utilisent pour les fonctions qui exécutent des tâches potentiellement longues. Pour utiliser les technologies Web modernes, vous devrez utiliser des promesses. Plus loin dans ce chapitre, nous verrons comment écrire votre propre promesse, mais pour l'instant, nous allons nous pencher sur quelques exemples simples que vous rencontrerez dans les API Web.

- -

Dans le premier exemple, nous allons utiliser la méthode fetch() pour récupérer une image sur le web, la méthode blob() pour transformer le contenu brut du corps de la réponse fetch en un objet Blob, puis afficher ce blob à l'intérieur d'un élément <img>. Cet exemple est très similaire à celui que nous avons examiné dans le premier article, mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses.

- -
-

Note : L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL file://). Vous devez l'exécuter via un serveur de test local, ou utiliser une solution en ligne telle que Glitch ou les pages GitHub.

-
- -
    -
  1. -

    Tout d'abord, téléchargez notre modèle HTML simple et le fichier image que nous allons récupérer.

    -
    2. -
  2. -

    Ajoutez un élément <script> au bas de l'élément HTML <body>.

    -
    3. -
  3. -

    À l'intérieur de votre élément <script>, ajoutez la ligne suivante :

    - 
    let promise = fetch('coffee.jpg');
    -

    Cela appelle la méthode fetch(), en lui passant en paramètre l'URL de l'image à récupérer sur le réseau. Cette méthode peut également prendre un objet d'options comme second paramètre facultatif, mais nous n'utilisons que la version la plus simple pour le moment. Nous stockons l'objet promesse retourné par fetch() à l'intérieur d'une variable appelée promise. Comme nous l'avons dit précédemment, cet objet représente un état intermédiaire qui n'est initialement ni un succès ni un échec - le terme officiel pour une promesse dans cet état est en attente (pending en anglais).

    -
    4. -
  4. -

    Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une réponse est retournée), nous invoquons la méthode .then() de l'objet promesse. La fonction de rappel à l'intérieur du bloc .then() s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet Response — en langage de promesse, lorsqu'elle a été remplie (fullfilled en anglais). On lui passe l'objet Response retourné en tant que paramètre.

    -
    -

    Note : Le fonctionnement d'un bloc .then() est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de AddEventListener(). Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un .then() ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.

    -
    -

    Nous exécutons immédiatement la méthode blob() sur cette réponse pour nous assurer que le corps de la réponse est entièrement téléchargé, et lorsqu'il est disponible, le transformer en un objet Blob avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit :

    - 
    response => response.blob()
    -

    qui est un raccourci de

    - 
    function(response) {
-  return response.blob();
-}
    -

    Malheureusement, nous devons faire un peu plus que cela. Les promesses de récupération n'échouent pas sur les erreurs 404 ou 500 - seulement sur quelque chose de catastrophique comme une panne de réseau. Au lieu de cela, elles réussissent, mais avec la propriété response.ok définie à false. Pour produire une erreur sur un 404, par exemple, nous devons vérifier la valeur de response.ok, et si c'est false, lancer une erreur, ne renvoyant le blob que si elle est à true. Cela peut être fait comme suit - ajoutez les lignes suivantes sous votre première ligne de JavaScript.

    - 
    let promise2 = promise.then(response => {
-  if (!response.ok) {
-    throw new Error(`erreur HTTP ! statut : ${response.status}`);
-  } else {
-    return response.blob();
-  }
-});
    -
    5. -
  5. -

    Chaque appel à la méthode .then() crée une nouvelle promesse. Ceci est très utile ; parce que la méthode blob() renvoie également une promesse, nous pouvons manipuler l'objet Blob qu'elle renvoie sur l'accomplissement en invoquant la méthode .then() de la seconde promesse. Parce que nous voulons faire quelque chose d'un peu plus complexe au blob que de simplement exécuter une seule méthode sur lui et renvoyer le résultat, nous devrons envelopper le corps de la fonction dans des accolades cette fois (sinon, ça lancera une erreur).

    -

    Ajoutez ce qui suit à la fin de votre code :

    - 
    let promise3 = promise2.then(myBlob => {
-})
    -
    6. -
  6. -

    Maintenant, remplissons le corps de la fonction de rappel .then(). Ajoutez les lignes suivantes à l'intérieur des accolades :

    - 
    let objectURL = URL.createObjectURL(myBlob);
-let image = document.createElement('img');
-image.src = objectURL;
-document.body.appendChild(image);
    -

    Nous exécutons ici la méthode URL.createObjectURL(), en lui passant en paramètre le Blob renvoyé lors de la réalisation de la deuxième promesse. Cela permettra de renvoyer une URL pointant vers l'objet. Ensuite, nous créons un élément <img>, définissons son attribut src comme étant égal à l'URL de l'objet et l'ajoutons au DOM, de sorte que l'image s'affiche sur la page !

    -
    7. -
- -

Si vous enregistrez le fichier HTML que vous venez de créer et le chargez dans votre navigateur, vous verrez que l'image s'affiche dans la page comme prévu. Bon travail !

- -
-

Note : Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne fetch() et blob(), et simplement créer un élément <img> et définir la valeur de son attribut src à l'URL du fichier image, coffee.jpg. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.

-
- -

Réagir à un échec

- -

Il manque quelque chose — actuellement, il n'y a rien pour gérer explicitement les erreurs si l'une des promesses échoue (rejects, en anglais). Nous pouvons ajouter la gestion des erreurs en exécutant la méthode .catch() de la promesse précédente. Ajoutez ceci maintenant :

- -
let errorCase = promise3.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
- -

Pour voir cela en action, essayez de mal orthographier l'URL de l'image et de recharger la page. L'erreur sera signalée dans la console des outils de développement de votre navigateur.

- -

Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc .catch() du tout, mais pensez-y - cela nous permet de contrôler la gestion des erreurs exactement comme nous le voulons. Dans une application réelle, votre bloc .catch() pourrait réessayer de récupérer l'image, ou afficher une image par défaut, ou demander à l'utilisateur de fournir une URL d'image différente, ou autre.

- -
-

Note : Vous pouvez voir notre version de l'exemple en direct (voir également son code source).

-
- -

Enchaîner les blocs

- -

C'est une façon très manuscrite d'écrire cela ; nous l'avons délibérément fait pour vous aider à comprendre clairement ce qui se passe. Comme nous l'avons montré plus haut dans l'article, vous pouvez enchaîner les blocs .then() (et aussi les blocs .catch()). Le code ci-dessus pourrait aussi être écrit comme ceci (voir aussi simple-fetch-chained.html sur GitHub) :

- -
fetch('coffee.jpg')
-.then(response => {
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  } else {
-    return response.blob();
-  }
-})
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
- -

Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc .then() suivant.

- -
-

Note : Les blocs .then()/.catch() dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc try...catch dans du code synchrone. Gardez à l'esprit que le try...catch synchrone ne fonctionnera pas dans du code asynchrone.

-
- -

Récapitulatif de la terminologie des promesses

- -

Il y avait beaucoup à couvrir dans la section ci-dessus, alors revenons-y rapidement pour vous donner un court guide que vous pouvez mettre en favoris et utiliser pour vous rafraîchir la mémoire à l'avenir. Vous devriez également revoir la section ci-dessus quelques fois de plus pour vous assurer que ces concepts sont bien assimilés.

- -
    -
  1. Lorsqu'une promesse est créée, elle n'est ni dans un état de réussite ni dans un état d'échec. On dit qu'elle est en attente.
    2. -
  2. Lorsqu'une promesse est retournée, on dit qu'elle est résolue. -
      -
    1. Une promesse résolue avec succès est dite remplie. Elle retourne une valeur, à laquelle on peut accéder en enchaînant un bloc .then() à la fin de la chaîne de promesses. La fonction de rappel à l'intérieur du bloc .then() contiendra la valeur de retour de la promesse.
      2. -
    2. Une promesse résolue non aboutie est dite rejetée. Elle renvoie une raison, un message d'erreur indiquant pourquoi la promesse a été rejetée. On peut accéder à cette raison en enchaînant un bloc .catch() à la fin de la chaîne de promesses.
      3. -
    -
    3. -
- -

Exécution du code en réponse à des promesses multiples remplies

- -

L'exemple ci-dessus nous a montré certaines des bases réelles de l'utilisation des promesses. Voyons maintenant quelques fonctionnalités plus avancées. Pour commencer, enchaîner des processus pour qu'ils se réalisent l'un après l'autre, c'est très bien, mais que faire si vous voulez exécuter du code seulement après que tout un tas de promesses aient toutes été remplies ?

- -

Vous pouvez le faire avec la méthode statique ingénieusement nommée Promise.all(). Celle-ci prend un tableau de promesses comme paramètre d'entrée et retourne un nouvel objet Promise qui ne se réalisera que si et quand toutes les promesses du tableau se réaliseront. Cela ressemble à quelque chose comme ceci :

- -
Promise.all([a, b, c]).then(values => {
-  ...
-});
- -

Si elles se réalisent toutes, la fonction de callback du bloc .then() enchaîné se verra passer un tableau contenant tous ces résultats en paramètre. Si l'une des promesses passées à Promise.all() rejette, le bloc entier sera rejeté.

- -

Cela peut être très utile. Imaginez que nous récupérions des informations pour alimenter dynamiquement en contenu une fonction de l'interface utilisateur de notre page. Dans de nombreux cas, il est préférable de recevoir toutes les données et de n'afficher que le contenu complet, plutôt que d'afficher des informations partielles.

- -

Construisons un autre exemple pour montrer cela en action.

- -
    -
  1. -

    Téléchargez une nouvelle copie de notre modèle de page, et mettez à nouveau un élément <script> juste avant la balise de fermeture </body>.

    -
    2. -
  2. -

    Téléchargez nos fichiers sources (coffee.jpg, tea.jpg, et description.txt), ou n'hésitez pas à y substituer les vôtres.

    -
    3. -
  3. -

    Dans notre script, nous allons d'abord définir une fonction qui retourne les promesses que nous voulons envoyer à Promise.all(). Cela serait facile si nous voulions simplement exécuter le bloc Promise.all() en réponse à trois opérations fetch() qui se terminent. Nous pourrions simplement faire quelque chose comme :

    - 
    let a = fetch(url1);
-let b = fetch(url2);
-let c = fetch(url3);
-
-Promise.all([a, b, c]).then(values => {
-  ...
-});
    -

    Lorsque la promesse est réalisée, les values (valeurs) passées dans le gestionnaire de réalisation contiendraient trois objets Response, un pour chacune des opérations fetch() qui se sont terminées.

    -

    Cependant, nous ne voulons pas faire cela. Notre code ne se soucie pas de savoir quand les opérations fetch() sont effectuées. Au lieu de cela, ce que nous voulons, ce sont les données chargées. Cela signifie que nous voulons exécuter le bloc Promise.all() lorsque nous récupérons des blobs utilisables représentant les images, et une chaîne de texte utilisable. Nous pouvons écrire une fonction qui fait cela ; ajoutez ce qui suit à l'intérieur de votre élément <script> :

    - 
    function fetchAndDecode(url, type) {
-  return fetch(url).then(response => {
-    if(!response.ok) {
-      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-    } else {
-      if(type === 'blob') {
-        return response.blob();
-      } else if(type === 'text') {
-        return response.text();
-      }
-    }
-  })
-  .catch(e => {
-    console.log(
-      `Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
-  });
-}
    -

    Cela semble un peu complexe, alors nous allons le faire étape par étape :

    -
      -
    1. Tout d'abord, nous définissons la fonction, en lui passant une URL et une chaîne représentant le type de ressource qu'elle va chercher.
      2. -
    2. À l'intérieur du corps de la fonction, nous avons une structure similaire à celle que nous avons vue dans le premier exemple — nous appelons la fonction fetch() pour récupérer la ressource à l'URL spécifiée, puis nous l'enchaînons sur une autre promesse qui renvoie le corps de réponse décodé (ou « lu »). Il s'agissait toujours de la méthode blob() dans l'exemple précédent.
      3. -
    3. Cependant, deux choses sont différentes ici : -
        -
      • Tout d'abord, la deuxième promesse que nous retournons est différente en fonction de la valeur type. À l'intérieur de la fonction de rappel .then(), nous incluons une simple déclaration if ... else if pour retourner une promesse différente selon le type de fichier que nous devons décoder (dans ce cas, nous avons le choix entre blob et text, mais il serait facile d'étendre cela pour traiter d'autres types également).
        • -
      • Deuxièmement, nous avons ajouté le mot-clé return avant l'appel fetch(). Cela a pour effet d'exécuter toute la chaîne, puis d'exécuter le résultat final (c'est-à-dire la promesse retournée par blob() ou text()) comme valeur de retour de la fonction que nous venons de définir. En effet, les instructions return font remonter les résultats au sommet de la chaîne.
        • -
      -
      4. -
    4. -

      À la fin du bloc, nous enchaînons sur un appel .catch(), pour gérer les cas d'erreur qui peuvent survenir avec l'une des promesses passées dans le tableau à .all(). Si l'une des promesses est rejetée, le bloc .catch() vous fera savoir laquelle avait un problème. Le bloc .all() (voir ci-dessous) s'exécutera quand même, mais il n'affichera pas les ressources qui ont eu des problèmes. Rappelez-vous que, une fois que vous avez traité la promesse avec un bloc .catch(), la promesse résultante est considérée comme résolue mais avec une valeur de undefined ; c'est pourquoi, dans ce cas, le bloc .all() sera toujours rempli. Si vous vouliez que le bloc .all() rejette, vous devriez plutôt enchaîner le bloc .catch() à la fin du .all().

      -
      5. -
    -

    Le code à l'intérieur du corps de la fonction est asynchrone et basé sur une promesse, donc en fait, la fonction entière agit comme une promesse — pratique.

    -
    4. -
  4. -

    Ensuite, nous appelons notre fonction trois fois pour commencer le processus de récupération et de décodage des images et du texte et nous stockons chacune des promesses retournées dans une variable. Ajoutez le texte suivant sous votre code précédent :

    - 
    let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
    -
    5. -
  5. -

    Ensuite, nous allons définir un bloc Promesse.all() pour exécuter un certain code uniquement lorsque les trois promesses stockées ci-dessus se sont réalisées avec succès. Pour commencer, ajoutez un bloc avec une fonction de rappel vide à l'intérieur de l'appel .then(), comme ceci :

    - 
    Promise.all([coffee, tea, description]).then(values => {
-
-});
    -

    Vous pouvez voir qu'elle prend un tableau contenant les promesses comme paramètre. La fonction de rappel .then() ne sera exécutée que lorsque les trois promesses seront résolues ; lorsque cela se produira, on lui transmettra un tableau contenant les résultats des promesses individuelles (c'est-à-dire les corps de réponse décodés), un peu comme suit [coffee-results, tea-results, description-results].

    -
    6. -
  6. -

    Enfin, ajoutez ce qui suit à l'intérieur de la fonction de rappel. Nous utilisons ici un code de synchronisation assez simple pour stocker les résultats dans des variables séparées (en créant des URL d'objets à partir des blobs), puis nous affichons les images et le texte sur la page.

    - 
    console.log(values);
-// Stocke chaque valeur renvoyée par les promesses dans
-// des variables distinctes ; crée des URL d'objets à partir des blobs.
-let objectURL1 = URL.createObjectURL(values[0]);
-let objectURL2 = URL.createObjectURL(values[1]);
-let descText = values[2];
-
-// Affiche les images dans les éléments <img>
-let image1 = document.createElement('img');
-let image2 = document.createElement('img');
-image1.src = objectURL1;
-image2.src = objectURL2;
-document.body.appendChild(image1);
-document.body.appendChild(image2);
-
-// Affiche le texte d'un paragraphe
-let para = document.createElement('p');
-para.textContent = descText;
-document.body.appendChild(para);
    -
    7. -
  7. -

    Sauvegardez et actualisez et vous devriez voir vos composants d'interface utilisateur chargés, bien que d'une manière peu attrayante !

    -
    8. -
- -

Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment.

- -
-

Note : Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - voir en direct, et voir le code source.

-
- -
-

Note : Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de Promise.all(), en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.

-

De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété type explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP Content-Type de la réponse dans chaque cas en utilisant response.headers.get("content-type"), puis agir en conséquence.

-
- -

Exécution d'un code final après l'accomplissement/le rejet d'une promesse.

- -

Il y aura des cas où vous voudrez exécuter un bloc de code final après la fin d'une promesse, qu'elle se soit réalisée ou rejetée. Auparavant, vous deviez inclure le même code dans les deux fonctions de rappel .then() et .catch(), par exemple :

- -
myPromise
-.then(response => {
-  doSomething(response);
-  runFinalCode();
-})
-.catch(e => {
-  returnError(e);
-  runFinalCode();
-});
- -

Dans les navigateurs modernes plus récents, la méthode .finally() est disponible, et peut être enchaînée à la fin de votre chaîne de promesses régulière, ce qui vous permet de réduire les répétitions de code et de faire les choses de manière plus élégante. Le code ci-dessus peut maintenant être écrit comme suit :

- -
myPromise
-.then(response => {
-  doSomething(response);
-})
-.catch(e => {
-  returnError(e);
-})
-.finally(() => {
-  runFinalCode();
-});
- -

Pour un exemple réel, jetez un œil à notre démonstration promesse-finally.html (voir le code source). Cela fonctionne de la même manière que la démo Promesse.all() que nous avons examinée dans la section ci-dessus, sauf que dans la fonction fetchAndDecode(), nous enchaînons un appel finally() à la fin de la chaîne :

- -
function fetchAndDecode(url, type) {
-  return fetch(url).then(response => {
-    if(!response.ok) {
-      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-    } else {
-      if(type === 'blob') {
-        return response.blob();
-      } else if(type === 'text') {
-        return response.text();
-      }
-    }
-  })
-  .catch(e => {
-    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
-  })
-  .finally(() => {
-    console.log(`La tentative de récupération de "${url}" est terminée.`);
-  });
-}
- -

Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée.

- -
-

Note : then()/catch()/finally() est l'équivalent asynchrone de try/catch/finally en code synchrone.

-
- -

Construire vos propres promesses personnalisées

- -

La bonne nouvelle est que, d'une certaine manière, vous avez déjà construit vos propres promesses. Lorsque vous avez enchaîné plusieurs promesses avec des blocs .then(), ou que vous les avez autrement combinées pour créer une fonctionnalité personnalisée, vous créez déjà vos propres fonctions asynchrones personnalisées basées sur des promesses. Prenez notre fonction fetchAndDecode() des exemples précédents, par exemple.

- -

La combinaison de différentes API basées sur les promesses pour créer des fonctionnalités personnalisées est de loin la façon la plus courante dont vous ferez des choses personnalisées avec les promesses, et montre la flexibilité et la puissance de la base de la plupart des API modernes autour du même principe. Il existe toutefois un autre moyen.

- -

Utilisation du constructeur Promise()

- -

Il est possible de construire vos propres promesses en utilisant le constructeur Promise(). La principale situation dans laquelle vous voudrez faire cela est lorsque vous avez du code basé sur une API asynchrone de la vieille école qui n'est pas basée sur les promesses, et que vous voulez promettre. Cela s'avère pratique lorsque vous avez besoin d'utiliser du code, des bibliothèques ou des frameworks existants, plus anciens, avec du code moderne basé sur les promesses.

- -

Examinons un exemple simple pour vous aider à démarrer — ici, nous enveloppons un appel setTimeout() avec une promesse — cela exécute une fonction après deux secondes qui résout la promesse (en passant l'appel resolve()) avec une chaîne de caractères de "Succès ! ".

- -
let timeoutPromise = new Promise((resolve, reject) => {
-  setTimeout(() => {
-    resolve('Succès !');
-  }, 2000);
-});
- -

resolve() et reject() sont des fonctions que vous appelez pour réaliser ou rejeter la promesse nouvellement créée. Dans ce cas, la promesse se réalise avec une chaîne de caractères "Succès !".

- -

Ainsi, lorsque vous appelez cette promesse, vous pouvez enchaîner un bloc .then() à la fin de celle-ci et on lui passera une chaîne de caractères "Succès !". Dans le code ci-dessous, nous alertons ce message :

- -
timeoutPromise
-.then((message) => {
-  alert(message);
-})
- -

ou même simplement

- -
timeoutPromise.then(alert);
- -

Essayez de l'exécuter en direct pour voir le résultat (voir aussi le code source).

- -

L'exemple ci-dessus n'est pas très flexible - la promesse ne peut jamais s'accomplir qu'avec une seule chaîne de caractères, et elle n'a aucune sorte de condition reject() spécifiée (il est vrai que setTimeout() n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple).

- -
-

Note : Pourquoi resolve(), et pas fulfill() ? La réponse que nous vous donnerons, pour l'instant, est c'est compliqué.

-
- -

Rejeter une promesse personnalisée

- -

Nous pouvons créer une promesse rejetée à l'aide de la méthode reject() — tout comme resolve(), celle-ci prend une seule valeur, mais dans ce cas, c'est la raison du rejet, c'est-à-dire l'erreur qui sera transmise dans le bloc .catch().

- -

Étendons l'exemple précédent pour avoir quelques conditions reject() ainsi que pour permettre de transmettre différents messages en cas de succès.

- -

Prenez une copie de l'exemple précédent, et remplacez la définition de timeoutPromise() existante par celle-ci :

- -
function timeoutPromise(message, interval) {
-  return new Promise((resolve, reject) => {
-    if (message === '' || typeof message !== 'string') {
-      reject('Le message est vide ou n'est pas une chaîne de caractères');
-    } else if (interval < 0 || typeof interval !== 'number') {
-      reject(`L'intervalle est négatif ou n'est pas un nombre`);
-    } else {
-      setTimeout(() => {
-        resolve(message);
-      }, interval);
-    }
-  });
-};
- -

Ici, nous passons deux arguments dans une fonction personnalisée - un message pour faire quelque chose avec, et l'intervalle de temps à passer avant de faire la chose. À l'intérieur de la fonction, nous renvoyons un nouvel objet Promise — l'invocation de la fonction renverra la promesse que nous voulons utiliser.

- -

À l'intérieur du constructeur Promise, nous effectuons plusieurs vérifications dans des structures if ... else :

- -
    -
  1. Tout d'abord, nous vérifions si le message est approprié pour être alerté. Si c'est une chaîne de caractères vide ou pas une chaîne de caractères du tout, nous rejetons la promesse avec un message d'erreur approprié.
    2. -
  2. Ensuite, nous vérifions si l'intervalle est une valeur d'intervalle appropriée. S'il est négatif ou n'est pas un nombre, nous rejetons la promesse avec un message d'erreur approprié.
    3. -
  3. Enfin, si les paramètres semblent tous deux OK, nous résolvons la promesse avec le message spécifié après que l'intervalle spécifié se soit écoulé en utilisant setTimeout().
    4. -
- -

Puisque la fonction timeoutPromise() renvoie un objet Promise, nous pouvons enchaîner .then(), .catch(), etc. sur elle pour faire usage de ses fonctionnalités. Utilisons-le maintenant - remplaçons l'utilisation précédente de timeoutPromise par celle-ci :

- -
timeoutPromise('Bonjour à tous !', 1000)
-.then(message => {
-   alert(message);
-})
-.catch(e => {
-  console.log('Erreur : ' + e);
-});
- -

Lorsque vous enregistrez et exécutez le code tel quel, après une seconde, vous obtiendrez le message d'alerte. Essayez maintenant de définir le message sur une chaîne vide ou l'intervalle sur un nombre négatif, par exemple, et vous pourrez voir la promesse rejetée avec les messages d'erreur appropriés ! Vous pouvez également essayer de faire autre chose avec le message résolu plutôt que de simplement créer une alerte.

- -
-

Note : Vous pouvez trouver notre version de cet exemple sur GitHub sur custom-promise2.html (voir aussi le code source).

-
- -

Un exemple plus concret

- -

L'exemple ci-dessus est resté volontairement simple pour rendre les concepts faciles à comprendre, mais il n'est pas vraiment très asynchrone. La nature asynchrone est essentiellement feinte en utilisant setTimeout(), bien qu'il montre quand même que les promesses sont utiles pour créer une fonction personnalisée avec un flux d'opérations raisonnable, une bonne gestion des erreurs, etc.

- -

Un exemple que nous aimerions vous inviter à étudier, qui montre effectivement une application asynchrone utile du constructeur Promise(), est la bibliothèque idb de Jake Archibald. Celle-ci prend l'API IndexedDB API, qui est une API à l'ancienne basée sur des callbacks pour stocker et récupérer des données côté client, et vous permet de l'utiliser avec des promesses. Dans le code, vous verrez que le même type de techniques que nous avons évoqué plus haut est utilisé. Le bloc suivant convertit le modèle de requête de base utilisé par de nombreuses méthodes IndexedDB pour utiliser des promesses (voir ce code, par exemple).

- -

Conclusion

- -

Les promesses sont un bon moyen de construire des applications asynchrones lorsque nous ne connaissons pas la valeur de retour d'une fonction ou le temps qu'elle prendra pour retourner une réponse. Elles permettent d'exprimer et de raisonner plus facilement sur des séquences d'opérations asynchrones sans callbacks profondément imbriqués, et elles supportent un style de gestion des erreurs qui est similaire à l'instruction synchrone try...catch.

- -

Les promesses fonctionnent dans les dernières versions de tous les navigateurs modernes ; le seul endroit où la prise en charge des promesses posera problème est Opera Mini et IE11 et les versions antérieures.

- -

Nous n'avons pas abordé toutes les fonctionnalités des promesses dans cet article, mais seulement les plus intéressantes et les plus utiles. Au fur et à mesure que vous vous familiariserez avec les promesses, vous découvrirez d'autres fonctionnalités et techniques.

- -

La plupart des API Web modernes sont basées sur des promesses, vous devrez donc comprendre les promesses pour en tirer le meilleur parti. Parmi ces API, citons WebRTC, Web Audio API, MediaStream API, et bien d'autres encore. Les promesses seront de plus en plus importantes au fil du temps, donc apprendre à les utiliser et à les comprendre est une étape importante dans l'apprentissage du JavaScript moderne.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/asynchronous/promises/index.md b/files/fr/learn/javascript/asynchronous/promises/index.md new file mode 100644 index 0000000000..69f6de6a21 --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/promises/index.md @@ -0,0 +1,576 @@ +--- +title: Gérer les opérations asynchrones avec élégance grâce aux promesses +slug: Learn/JavaScript/Asynchronous/Promises +tags: + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Promises + - async + - asynchronous + - catch + - finally + - then +translation_of: Learn/JavaScript/Asynchronous/Promises +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+ +

Les promesses sont une fonctionnalité relativement nouvelle du langage JavaScript qui vous permet de reporter d'autres actions jusqu'à ce qu'une action précédente soit terminée, ou de répondre à son échec. Ceci est utile pour mettre en place une séquence d'opérations asynchrones afin qu'elles fonctionnent correctement. Cet article vous montre comment les promesses fonctionnent, comment vous les verrez utilisées avec les API Web, et comment écrire les vôtres.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Comprendre les promesses et savoir comment les utiliser.
+ +

Que sont les promesses ?

+ +

Nous avons examiné les promesses (Promise) brièvement dans le premier article du cours, mais ici nous allons les examiner de manière beaucoup plus approfondie.

+ +

Essentiellement, une promesse est un objet qui représente un état intermédiaire d'une opération - en fait, c'est une promesse qu'un résultat d'une certaine nature sera retourné à un moment donné dans le futur. Il n'y a aucune garantie du moment exact où l'opération se terminera et où le résultat sera renvoyé, mais il est une garantie que lorsque le résultat est disponible, ou que la promesse échoue, le code que vous fournissez sera exécuté afin de faire autre chose avec un résultat réussi, ou de gérer gracieusement un cas d'échec.

+ +

En général, vous êtes moins intéressé par le temps qu'une opération asynchrone prendra pour renvoyer son résultat (à moins bien sûr qu'elle ne prenne beaucoup trop de temps !), et plus intéressé par le fait de pouvoir répondre à son retour, quel que soit le moment. Et bien sûr, il est agréable que cela ne bloque pas le reste de l'exécution du code.

+ +

L'une des utilisations les plus courantes des promesses concerne les API web qui renvoient une promesse. Considérons une hypothétique application de chat vidéo. L'application dispose d'une fenêtre contenant une liste des amis de l'utilisateur, et un clic sur un bouton à côté d'un utilisateur lance un appel vidéo vers cet utilisateur.

+ +

Le gestionnaire de ce bouton appelle getUserMedia() afin d'avoir accès à la caméra et au microphone de l'utilisateur. Puisque getUserMedia() doit s'assurer que l'utilisateur a la permission d'utiliser ces dispositifs et lui demander quel microphone utiliser et quelle caméra utiliser (ou s'il s'agit d'un appel vocal uniquement, parmi d'autres options possibles), il peut bloquer jusqu'à ce que non seulement toutes ces décisions soient prises, mais aussi que la caméra et le microphone soient activés. En outre, l'utilisateur peut ne pas répondre immédiatement à ces demandes d'autorisation. Cela peut potentiellement prendre beaucoup de temps.

+ +

Puisque l'appel à getUserMedia() est effectué depuis le processus principal du navigateur, l'ensemble du navigateur est bloqué jusqu'à ce que getUserMedia() retourne une réponse ! Évidemment, ce n'est pas une option viable ; sans les promesses, tout dans le navigateur devient inutilisable jusqu'à ce que l'utilisateur décide ce qu'il faut faire de la caméra et du microphone. Ainsi, au lieu d'attendre l'utilisateur, d'obtenir l'activation des périphériques choisis et de retourner directement le MediaStream pour le flux créé à partir des sources sélectionnées, getUserMedia() retourne une promesse qui est résolue avec le MediaStream une fois qu'il est disponible.

+ +

Le code qu'utiliserait l'application de chat vidéo pourrait ressembler à ceci :

+ +
function handleCallButton(evt) {
+  setStatusMessage("Appel...");
+  navigator.mediaDevices.getUserMedia({video: true, audio: true})
+    .then(chatStream => {
+      selfViewElem.srcObject = chatStream;
+      chatStream.getTracks().forEach(track => myPeerConnection.addTrack(track, chatStream));
+      setStatusMessage("Connecté");
+    }).catch(err => {
+      setStatusMessage("Échec de la connexion");
+    });
+}
+
+ +

Cette fonction commence par utiliser une fonction appelée setStatusMessage() pour mettre à jour un affichage d'état avec le message "Appel...", indiquant qu'un appel est tenté.Il appelle ensuite getUserMedia(), demandant un flux qui a à la fois des pistes vidéo et audio, puis une fois que cela a été obtenu, configure un élément vidéo pour montrer le flux provenant de la caméra comme une "vue de soi", puis prend chacune des pistes du flux et les ajoute à la RTCPeerConnection WebRTC représentant une connexion à un autre utilisateur. Après cela, l'affichage de l'état est mis à jour pour indiquer "Connecté".

+ +

Si getUserMedia() échoue, le bloc catch s'exécute. Celui-ci utilise setStatusMessage() pour mettre à jour la case d'état afin d'indiquer qu'une erreur s'est produite.

+ +

La chose importante ici est que l'appel getUserMedia() revient presque immédiatement, même si le flux de la caméra n'a pas encore été obtenu. Même si la fonction handleCallButton() est déjà retournée au code qui l'a appelée, lorsque getUserMedia() a fini de travailler, elle appelle le gestionnaire que vous fournissez. Tant que l'application ne suppose pas que le flux a commencé, elle peut continuer à fonctionner.

+ +
+

Note : Vous pouvez en apprendre davantage sur ce sujet quelque peu avancé, si cela vous intéresse, dans l'article L'essentiel du WebRTC. Un code similaire à celui-ci, mais beaucoup plus complet, est utilisé dans cet exemple.

+
+ +

Le problème des fonctions de rappel

+ +

Pour bien comprendre pourquoi les promesses sont une bonne chose, il est utile de repenser aux anciennes fonctions de rappel (callback) et de comprendre pourquoi elles sont problématiques.

+ +

Prenons l'exemple de la commande d'une pizza. Il y a certaines étapes que vous devez franchir pour que votre commande soit réussie, et cela n'a pas vraiment de sens d'essayer de les exécuter dans le désordre, ou dans l'ordre mais avant que chaque étape précédente ne soit tout à fait terminée :

+ +
    +
  1. Vous choisissez les garnitures que vous voulez. Cela peut prendre un certain temps si vous êtes indécis, et peut échouer si vous n'arrivez pas à vous décider, ou si vous décidez de prendre un curry à la place.
    2. +
  2. Vous passez ensuite votre commande. Le retour d'une pizza peut prendre un certain temps et peut échouer si le restaurant ne dispose pas des ingrédients nécessaires à sa cuisson.
    3. +
  3. Vous récupérez ensuite votre pizza et la mangez. Cela peut échouer si, par exemple, vous avez oublié votre portefeuille et ne pouvez pas payer la pizza !
    4. +
+ +

Avec l'ancien modèle de rappels, une représentation en pseudo-code de la fonctionnalité ci-dessus pourrait ressembler à quelque chose comme ceci :

+ +
chooseToppings(function(toppings) {
+  placeOrder(toppings, function(order) {
+    collectOrder(order, function(pizza) {
+      eatPizza(pizza);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+ +

Cela est désordonné et difficile à lire (souvent appelé « callback hell »), nécessite que le failureCallback() soit appelé plusieurs fois (une fois pour chaque fonction imbriquée), avec d'autres problèmes en plus.

+ +

Améliorations avec des promesses

+ +

Les promesses facilitent grandement l'écriture, l'analyse et l'exécution de situations telles que celle décrite ci-dessus. Si nous avions représenté le pseudo-code ci-dessus en utilisant des promesses asynchrones à la place, nous aurions obtenu quelque chose comme ceci :

+ +
chooseToppings()
+.then(function(toppings) {
+  return placeOrder(toppings);
+})
+.then(function(order) {
+  return collectOrder(order);
+})
+.then(function(pizza) {
+  eatPizza(pizza);
+})
+.catch(failureCallback);
+ +

C'est bien mieux - il est plus facile de voir ce qui se passe, nous n'avons besoin que d'un seul bloc .catch() pour gérer toutes les erreurs, cela ne bloque pas le processus principal (nous pouvons donc continuer à jouer à des jeux vidéo en attendant que la pizza soit prête à être collectée), et chaque opération a la garantie d'attendre que les opérations précédentes soient terminées avant de s'exécuter. Nous sommes en mesure d'enchaîner plusieurs actions asynchrones pour qu'elles se produisent les unes après les autres de cette façon, car chaque bloc .then() renvoie une nouvelle promesse qui se résout lorsque le bloc .then() a fini de s'exécuter. Astucieux, non ?

+ +

En utilisant les fonctions flèches, vous pouvez simplifier encore plus le code :

+ +
chooseToppings()
+.then(toppings =>
+  placeOrder(toppings)
+)
+.then(order =>
+  collectOrder(order)
+)
+.then(pizza =>
+  eatPizza(pizza)
+)
+.catch(failureCallback);
+ +

Ou encore ça :

+ +
chooseToppings()
+.then(toppings => placeOrder(toppings))
+.then(order => collectOrder(order))
+.then(pizza => eatPizza(pizza))
+.catch(failureCallback);
+ +

Cela fonctionne car avec les fonctions flèches () => x est un raccourci valide pour () => { return x ; }.

+ +

Vous pourriez même le faire ainsi, puisque les fonctions ne font que passer leurs arguments directement, et qu'il n'y a donc pas besoin de cette couche supplémentaire de fonctions :

+ +
chooseToppings().then(placeOrder).then(collectOrder).then(eatPizza).catch(failureCallback);
+ +

Cependant, la lecture n'est pas aussi facile et cette syntaxe peut ne pas être utilisable si vos blocs sont plus complexes que ce que nous avons montré ici.

+ +
+

Note : Vous pouvez apporter d'autres améliorations avec la syntaxe async/await, que nous aborderons dans le prochain article.

+
+ +

Dans leur forme la plus basique, les promesses sont similaires aux écouteurs d'événements, mais avec quelques différences :

+ + + +

Explication de la syntaxe de base des promesses : exemple concret

+ +

Il est important de comprendre les promesses, car la plupart des API Web modernes les utilisent pour les fonctions qui exécutent des tâches potentiellement longues. Pour utiliser les technologies Web modernes, vous devrez utiliser des promesses. Plus loin dans ce chapitre, nous verrons comment écrire votre propre promesse, mais pour l'instant, nous allons nous pencher sur quelques exemples simples que vous rencontrerez dans les API Web.

+ +

Dans le premier exemple, nous allons utiliser la méthode fetch() pour récupérer une image sur le web, la méthode blob() pour transformer le contenu brut du corps de la réponse fetch en un objet Blob, puis afficher ce blob à l'intérieur d'un élément <img>. Cet exemple est très similaire à celui que nous avons examiné dans le premier article, mais nous le ferons un peu différemment au fur et à mesure que nous vous ferons construire votre propre code basé sur des promesses.

+ +
+

Note : L'exemple suivant ne fonctionnera pas si vous l'exécutez directement à partir du fichier (c'est-à-dire via une URL file://). Vous devez l'exécuter via un serveur de test local, ou utiliser une solution en ligne telle que Glitch ou les pages GitHub.

+
+ +
    +
  1. +

    Tout d'abord, téléchargez notre modèle HTML simple et le fichier image que nous allons récupérer.

    +
    2. +
  2. +

    Ajoutez un élément <script> au bas de l'élément HTML <body>.

    +
    3. +
  3. +

    À l'intérieur de votre élément <script>, ajoutez la ligne suivante :

    + 
    let promise = fetch('coffee.jpg');
    +

    Cela appelle la méthode fetch(), en lui passant en paramètre l'URL de l'image à récupérer sur le réseau. Cette méthode peut également prendre un objet d'options comme second paramètre facultatif, mais nous n'utilisons que la version la plus simple pour le moment. Nous stockons l'objet promesse retourné par fetch() à l'intérieur d'une variable appelée promise. Comme nous l'avons dit précédemment, cet objet représente un état intermédiaire qui n'est initialement ni un succès ni un échec - le terme officiel pour une promesse dans cet état est en attente (pending en anglais).

    +
    4. +
  4. +

    Pour répondre à l'achèvement réussi de l'opération lorsque cela se produit (dans ce cas, lorsqu'une réponse est retournée), nous invoquons la méthode .then() de l'objet promesse. La fonction de rappel à l'intérieur du bloc .then() s'exécute uniquement lorsque l'appel de la promesse se termine avec succès et retourne l'objet Response — en langage de promesse, lorsqu'elle a été remplie (fullfilled en anglais). On lui passe l'objet Response retourné en tant que paramètre.

    +
    +

    Note : Le fonctionnement d'un bloc .then() est similaire à celui de l'ajout d'un écouteur d'événements à un objet à l'aide de AddEventListener(). Il ne s'exécute pas avant qu'un événement ne se produise (lorsque la promesse se réalise). La différence la plus notable est qu'un .then() ne s'exécutera qu'une fois à chaque fois qu'il sera utilisé, alors qu'un écouteur d'événements pourrait être invoqué plusieurs fois.

    +
    +

    Nous exécutons immédiatement la méthode blob() sur cette réponse pour nous assurer que le corps de la réponse est entièrement téléchargé, et lorsqu'il est disponible, le transformer en un objet Blob avec lequel nous pouvons faire quelque chose. Le résultat de cette méthode est retourné comme suit :

    + 
    response => response.blob()
    +

    qui est un raccourci de

    + 
    function(response) {
+  return response.blob();
+}
    +

    Malheureusement, nous devons faire un peu plus que cela. Les promesses de récupération n'échouent pas sur les erreurs 404 ou 500 - seulement sur quelque chose de catastrophique comme une panne de réseau. Au lieu de cela, elles réussissent, mais avec la propriété response.ok définie à false. Pour produire une erreur sur un 404, par exemple, nous devons vérifier la valeur de response.ok, et si c'est false, lancer une erreur, ne renvoyant le blob que si elle est à true. Cela peut être fait comme suit - ajoutez les lignes suivantes sous votre première ligne de JavaScript.

    + 
    let promise2 = promise.then(response => {
+  if (!response.ok) {
+    throw new Error(`erreur HTTP ! statut : ${response.status}`);
+  } else {
+    return response.blob();
+  }
+});
    +
    5. +
  5. +

    Chaque appel à la méthode .then() crée une nouvelle promesse. Ceci est très utile ; parce que la méthode blob() renvoie également une promesse, nous pouvons manipuler l'objet Blob qu'elle renvoie sur l'accomplissement en invoquant la méthode .then() de la seconde promesse. Parce que nous voulons faire quelque chose d'un peu plus complexe au blob que de simplement exécuter une seule méthode sur lui et renvoyer le résultat, nous devrons envelopper le corps de la fonction dans des accolades cette fois (sinon, ça lancera une erreur).

    +

    Ajoutez ce qui suit à la fin de votre code :

    + 
    let promise3 = promise2.then(myBlob => {
+})
    +
    6. +
  6. +

    Maintenant, remplissons le corps de la fonction de rappel .then(). Ajoutez les lignes suivantes à l'intérieur des accolades :

    + 
    let objectURL = URL.createObjectURL(myBlob);
+let image = document.createElement('img');
+image.src = objectURL;
+document.body.appendChild(image);
    +

    Nous exécutons ici la méthode URL.createObjectURL(), en lui passant en paramètre le Blob renvoyé lors de la réalisation de la deuxième promesse. Cela permettra de renvoyer une URL pointant vers l'objet. Ensuite, nous créons un élément <img>, définissons son attribut src comme étant égal à l'URL de l'objet et l'ajoutons au DOM, de sorte que l'image s'affiche sur la page !

    +
    7. +
+ +

Si vous enregistrez le fichier HTML que vous venez de créer et le chargez dans votre navigateur, vous verrez que l'image s'affiche dans la page comme prévu. Bon travail !

+ +
+

Note : Vous remarquerez probablement que ces exemples sont quelque peu artificiels. Vous pourriez tout simplement vous passer de toute la chaîne fetch() et blob(), et simplement créer un élément <img> et définir la valeur de son attribut src à l'URL du fichier image, coffee.jpg. Nous avons toutefois choisi cet exemple parce qu'il démontre les promesses d'une manière simple et agréable, plutôt que pour sa pertinence dans le monde réel.

+
+ +

Réagir à un échec

+ +

Il manque quelque chose — actuellement, il n'y a rien pour gérer explicitement les erreurs si l'une des promesses échoue (rejects, en anglais). Nous pouvons ajouter la gestion des erreurs en exécutant la méthode .catch() de la promesse précédente. Ajoutez ceci maintenant :

+ +
let errorCase = promise3.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+ +

Pour voir cela en action, essayez de mal orthographier l'URL de l'image et de recharger la page. L'erreur sera signalée dans la console des outils de développement de votre navigateur.

+ +

Cela ne fait pas beaucoup plus que si vous ne preniez pas la peine d'inclure le bloc .catch() du tout, mais pensez-y - cela nous permet de contrôler la gestion des erreurs exactement comme nous le voulons. Dans une application réelle, votre bloc .catch() pourrait réessayer de récupérer l'image, ou afficher une image par défaut, ou demander à l'utilisateur de fournir une URL d'image différente, ou autre.

+ +
+

Note : Vous pouvez voir notre version de l'exemple en direct (voir également son code source).

+
+ +

Enchaîner les blocs

+ +

C'est une façon très manuscrite d'écrire cela ; nous l'avons délibérément fait pour vous aider à comprendre clairement ce qui se passe. Comme nous l'avons montré plus haut dans l'article, vous pouvez enchaîner les blocs .then() (et aussi les blocs .catch()). Le code ci-dessus pourrait aussi être écrit comme ceci (voir aussi simple-fetch-chained.html sur GitHub) :

+ +
fetch('coffee.jpg')
+.then(response => {
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  } else {
+    return response.blob();
+  }
+})
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+ +

Gardez à l'esprit que la valeur renvoyée par une promesse remplie devient le paramètre transmis à la fonction de rappel du bloc .then() suivant.

+ +
+

Note : Les blocs .then()/.catch() dans les promesses sont essentiellement l'équivalent asynchrone d'un bloc try...catch dans du code synchrone. Gardez à l'esprit que le try...catch synchrone ne fonctionnera pas dans du code asynchrone.

+
+ +

Récapitulatif de la terminologie des promesses

+ +

Il y avait beaucoup à couvrir dans la section ci-dessus, alors revenons-y rapidement pour vous donner un court guide que vous pouvez mettre en favoris et utiliser pour vous rafraîchir la mémoire à l'avenir. Vous devriez également revoir la section ci-dessus quelques fois de plus pour vous assurer que ces concepts sont bien assimilés.

+ +
    +
  1. Lorsqu'une promesse est créée, elle n'est ni dans un état de réussite ni dans un état d'échec. On dit qu'elle est en attente.
    2. +
  2. Lorsqu'une promesse est retournée, on dit qu'elle est résolue. +
      +
    1. Une promesse résolue avec succès est dite remplie. Elle retourne une valeur, à laquelle on peut accéder en enchaînant un bloc .then() à la fin de la chaîne de promesses. La fonction de rappel à l'intérieur du bloc .then() contiendra la valeur de retour de la promesse.
      2. +
    2. Une promesse résolue non aboutie est dite rejetée. Elle renvoie une raison, un message d'erreur indiquant pourquoi la promesse a été rejetée. On peut accéder à cette raison en enchaînant un bloc .catch() à la fin de la chaîne de promesses.
      3. +
    +
    3. +
+ +

Exécution du code en réponse à des promesses multiples remplies

+ +

L'exemple ci-dessus nous a montré certaines des bases réelles de l'utilisation des promesses. Voyons maintenant quelques fonctionnalités plus avancées. Pour commencer, enchaîner des processus pour qu'ils se réalisent l'un après l'autre, c'est très bien, mais que faire si vous voulez exécuter du code seulement après que tout un tas de promesses aient toutes été remplies ?

+ +

Vous pouvez le faire avec la méthode statique ingénieusement nommée Promise.all(). Celle-ci prend un tableau de promesses comme paramètre d'entrée et retourne un nouvel objet Promise qui ne se réalisera que si et quand toutes les promesses du tableau se réaliseront. Cela ressemble à quelque chose comme ceci :

+ +
Promise.all([a, b, c]).then(values => {
+  ...
+});
+ +

Si elles se réalisent toutes, la fonction de callback du bloc .then() enchaîné se verra passer un tableau contenant tous ces résultats en paramètre. Si l'une des promesses passées à Promise.all() rejette, le bloc entier sera rejeté.

+ +

Cela peut être très utile. Imaginez que nous récupérions des informations pour alimenter dynamiquement en contenu une fonction de l'interface utilisateur de notre page. Dans de nombreux cas, il est préférable de recevoir toutes les données et de n'afficher que le contenu complet, plutôt que d'afficher des informations partielles.

+ +

Construisons un autre exemple pour montrer cela en action.

+ +
    +
  1. +

    Téléchargez une nouvelle copie de notre modèle de page, et mettez à nouveau un élément <script> juste avant la balise de fermeture </body>.

    +
    2. +
  2. +

    Téléchargez nos fichiers sources (coffee.jpg, tea.jpg, et description.txt), ou n'hésitez pas à y substituer les vôtres.

    +
    3. +
  3. +

    Dans notre script, nous allons d'abord définir une fonction qui retourne les promesses que nous voulons envoyer à Promise.all(). Cela serait facile si nous voulions simplement exécuter le bloc Promise.all() en réponse à trois opérations fetch() qui se terminent. Nous pourrions simplement faire quelque chose comme :

    + 
    let a = fetch(url1);
+let b = fetch(url2);
+let c = fetch(url3);
+
+Promise.all([a, b, c]).then(values => {
+  ...
+});
    +

    Lorsque la promesse est réalisée, les values (valeurs) passées dans le gestionnaire de réalisation contiendraient trois objets Response, un pour chacune des opérations fetch() qui se sont terminées.

    +

    Cependant, nous ne voulons pas faire cela. Notre code ne se soucie pas de savoir quand les opérations fetch() sont effectuées. Au lieu de cela, ce que nous voulons, ce sont les données chargées. Cela signifie que nous voulons exécuter le bloc Promise.all() lorsque nous récupérons des blobs utilisables représentant les images, et une chaîne de texte utilisable. Nous pouvons écrire une fonction qui fait cela ; ajoutez ce qui suit à l'intérieur de votre élément <script> :

    + 
    function fetchAndDecode(url, type) {
+  return fetch(url).then(response => {
+    if(!response.ok) {
+      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+    } else {
+      if(type === 'blob') {
+        return response.blob();
+      } else if(type === 'text') {
+        return response.text();
+      }
+    }
+  })
+  .catch(e => {
+    console.log(
+      `Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
+  });
+}
    +

    Cela semble un peu complexe, alors nous allons le faire étape par étape :

    +
      +
    1. Tout d'abord, nous définissons la fonction, en lui passant une URL et une chaîne représentant le type de ressource qu'elle va chercher.
      2. +
    2. À l'intérieur du corps de la fonction, nous avons une structure similaire à celle que nous avons vue dans le premier exemple — nous appelons la fonction fetch() pour récupérer la ressource à l'URL spécifiée, puis nous l'enchaînons sur une autre promesse qui renvoie le corps de réponse décodé (ou « lu »). Il s'agissait toujours de la méthode blob() dans l'exemple précédent.
      3. +
    3. Cependant, deux choses sont différentes ici : +
        +
      • Tout d'abord, la deuxième promesse que nous retournons est différente en fonction de la valeur type. À l'intérieur de la fonction de rappel .then(), nous incluons une simple déclaration if ... else if pour retourner une promesse différente selon le type de fichier que nous devons décoder (dans ce cas, nous avons le choix entre blob et text, mais il serait facile d'étendre cela pour traiter d'autres types également).
        • +
      • Deuxièmement, nous avons ajouté le mot-clé return avant l'appel fetch(). Cela a pour effet d'exécuter toute la chaîne, puis d'exécuter le résultat final (c'est-à-dire la promesse retournée par blob() ou text()) comme valeur de retour de la fonction que nous venons de définir. En effet, les instructions return font remonter les résultats au sommet de la chaîne.
        • +
      +
      4. +
    4. +

      À la fin du bloc, nous enchaînons sur un appel .catch(), pour gérer les cas d'erreur qui peuvent survenir avec l'une des promesses passées dans le tableau à .all(). Si l'une des promesses est rejetée, le bloc .catch() vous fera savoir laquelle avait un problème. Le bloc .all() (voir ci-dessous) s'exécutera quand même, mais il n'affichera pas les ressources qui ont eu des problèmes. Rappelez-vous que, une fois que vous avez traité la promesse avec un bloc .catch(), la promesse résultante est considérée comme résolue mais avec une valeur de undefined ; c'est pourquoi, dans ce cas, le bloc .all() sera toujours rempli. Si vous vouliez que le bloc .all() rejette, vous devriez plutôt enchaîner le bloc .catch() à la fin du .all().

      +
      5. +
    +

    Le code à l'intérieur du corps de la fonction est asynchrone et basé sur une promesse, donc en fait, la fonction entière agit comme une promesse — pratique.

    +
    4. +
  4. +

    Ensuite, nous appelons notre fonction trois fois pour commencer le processus de récupération et de décodage des images et du texte et nous stockons chacune des promesses retournées dans une variable. Ajoutez le texte suivant sous votre code précédent :

    + 
    let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
    +
    5. +
  5. +

    Ensuite, nous allons définir un bloc Promesse.all() pour exécuter un certain code uniquement lorsque les trois promesses stockées ci-dessus se sont réalisées avec succès. Pour commencer, ajoutez un bloc avec une fonction de rappel vide à l'intérieur de l'appel .then(), comme ceci :

    + 
    Promise.all([coffee, tea, description]).then(values => {
+
+});
    +

    Vous pouvez voir qu'elle prend un tableau contenant les promesses comme paramètre. La fonction de rappel .then() ne sera exécutée que lorsque les trois promesses seront résolues ; lorsque cela se produira, on lui transmettra un tableau contenant les résultats des promesses individuelles (c'est-à-dire les corps de réponse décodés), un peu comme suit [coffee-results, tea-results, description-results].

    +
    6. +
  6. +

    Enfin, ajoutez ce qui suit à l'intérieur de la fonction de rappel. Nous utilisons ici un code de synchronisation assez simple pour stocker les résultats dans des variables séparées (en créant des URL d'objets à partir des blobs), puis nous affichons les images et le texte sur la page.

    + 
    console.log(values);
+// Stocke chaque valeur renvoyée par les promesses dans
+// des variables distinctes ; crée des URL d'objets à partir des blobs.
+let objectURL1 = URL.createObjectURL(values[0]);
+let objectURL2 = URL.createObjectURL(values[1]);
+let descText = values[2];
+
+// Affiche les images dans les éléments <img>
+let image1 = document.createElement('img');
+let image2 = document.createElement('img');
+image1.src = objectURL1;
+image2.src = objectURL2;
+document.body.appendChild(image1);
+document.body.appendChild(image2);
+
+// Affiche le texte d'un paragraphe
+let para = document.createElement('p');
+para.textContent = descText;
+document.body.appendChild(para);
    +
    7. +
  7. +

    Sauvegardez et actualisez et vous devriez voir vos composants d'interface utilisateur chargés, bien que d'une manière peu attrayante !

    +
    8. +
+ +

Le code que nous avons fourni ici pour l'affichage des articles est assez rudimentaire, mais il fonctionne comme une explication pour le moment.

+ +
+

Note : Si vous êtes bloqué, vous pouvez comparer votre version du code à la nôtre, pour voir à quoi elle est censée ressembler - voir en direct, et voir le code source.

+
+ +
+

Note : Si vous amélioriez ce code, vous pourriez vouloir boucler sur une liste d'éléments à afficher, en récupérant et en décodant chacun d'eux, puis boucler sur les résultats à l'intérieur de Promise.all(), en exécutant une fonction différente pour afficher chacun d'eux en fonction du type de code. Cela permettrait de fonctionner pour n'importe quel nombre d'éléments, pas seulement trois.

+

De plus, vous pourriez déterminer quel est le type de fichier récupéré sans avoir besoin d'une propriété type explicite. Vous pourriez, par exemple, vérifier l'en-tête HTTP Content-Type de la réponse dans chaque cas en utilisant response.headers.get("content-type"), puis agir en conséquence.

+
+ +

Exécution d'un code final après l'accomplissement/le rejet d'une promesse.

+ +

Il y aura des cas où vous voudrez exécuter un bloc de code final après la fin d'une promesse, qu'elle se soit réalisée ou rejetée. Auparavant, vous deviez inclure le même code dans les deux fonctions de rappel .then() et .catch(), par exemple :

+ +
myPromise
+.then(response => {
+  doSomething(response);
+  runFinalCode();
+})
+.catch(e => {
+  returnError(e);
+  runFinalCode();
+});
+ +

Dans les navigateurs modernes plus récents, la méthode .finally() est disponible, et peut être enchaînée à la fin de votre chaîne de promesses régulière, ce qui vous permet de réduire les répétitions de code et de faire les choses de manière plus élégante. Le code ci-dessus peut maintenant être écrit comme suit :

+ +
myPromise
+.then(response => {
+  doSomething(response);
+})
+.catch(e => {
+  returnError(e);
+})
+.finally(() => {
+  runFinalCode();
+});
+ +

Pour un exemple réel, jetez un œil à notre démonstration promesse-finally.html (voir le code source). Cela fonctionne de la même manière que la démo Promesse.all() que nous avons examinée dans la section ci-dessus, sauf que dans la fonction fetchAndDecode(), nous enchaînons un appel finally() à la fin de la chaîne :

+ +
function fetchAndDecode(url, type) {
+  return fetch(url).then(response => {
+    if(!response.ok) {
+      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+    } else {
+      if(type === 'blob') {
+        return response.blob();
+      } else if(type === 'text') {
+        return response.text();
+      }
+    }
+  })
+  .catch(e => {
+    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
+  })
+  .finally(() => {
+    console.log(`La tentative de récupération de "${url}" est terminée.`);
+  });
+}
+ +

Cela permet d'envoyer un simple message à la console pour nous dire quand chaque tentative de récupération est terminée.

+ +
+

Note : then()/catch()/finally() est l'équivalent asynchrone de try/catch/finally en code synchrone.

+
+ +

Construire vos propres promesses personnalisées

+ +

La bonne nouvelle est que, d'une certaine manière, vous avez déjà construit vos propres promesses. Lorsque vous avez enchaîné plusieurs promesses avec des blocs .then(), ou que vous les avez autrement combinées pour créer une fonctionnalité personnalisée, vous créez déjà vos propres fonctions asynchrones personnalisées basées sur des promesses. Prenez notre fonction fetchAndDecode() des exemples précédents, par exemple.

+ +

La combinaison de différentes API basées sur les promesses pour créer des fonctionnalités personnalisées est de loin la façon la plus courante dont vous ferez des choses personnalisées avec les promesses, et montre la flexibilité et la puissance de la base de la plupart des API modernes autour du même principe. Il existe toutefois un autre moyen.

+ +

Utilisation du constructeur Promise()

+ +

Il est possible de construire vos propres promesses en utilisant le constructeur Promise(). La principale situation dans laquelle vous voudrez faire cela est lorsque vous avez du code basé sur une API asynchrone de la vieille école qui n'est pas basée sur les promesses, et que vous voulez promettre. Cela s'avère pratique lorsque vous avez besoin d'utiliser du code, des bibliothèques ou des frameworks existants, plus anciens, avec du code moderne basé sur les promesses.

+ +

Examinons un exemple simple pour vous aider à démarrer — ici, nous enveloppons un appel setTimeout() avec une promesse — cela exécute une fonction après deux secondes qui résout la promesse (en passant l'appel resolve()) avec une chaîne de caractères de "Succès ! ".

+ +
let timeoutPromise = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Succès !');
+  }, 2000);
+});
+ +

resolve() et reject() sont des fonctions que vous appelez pour réaliser ou rejeter la promesse nouvellement créée. Dans ce cas, la promesse se réalise avec une chaîne de caractères "Succès !".

+ +

Ainsi, lorsque vous appelez cette promesse, vous pouvez enchaîner un bloc .then() à la fin de celle-ci et on lui passera une chaîne de caractères "Succès !". Dans le code ci-dessous, nous alertons ce message :

+ +
timeoutPromise
+.then((message) => {
+  alert(message);
+})
+ +

ou même simplement

+ +
timeoutPromise.then(alert);
+ +

Essayez de l'exécuter en direct pour voir le résultat (voir aussi le code source).

+ +

L'exemple ci-dessus n'est pas très flexible - la promesse ne peut jamais s'accomplir qu'avec une seule chaîne de caractères, et elle n'a aucune sorte de condition reject() spécifiée (il est vrai que setTimeout() n'a pas vraiment de condition d'échec, donc cela n'a pas d'importance pour cet exemple).

+ +
+

Note : Pourquoi resolve(), et pas fulfill() ? La réponse que nous vous donnerons, pour l'instant, est c'est compliqué.

+
+ +

Rejeter une promesse personnalisée

+ +

Nous pouvons créer une promesse rejetée à l'aide de la méthode reject() — tout comme resolve(), celle-ci prend une seule valeur, mais dans ce cas, c'est la raison du rejet, c'est-à-dire l'erreur qui sera transmise dans le bloc .catch().

+ +

Étendons l'exemple précédent pour avoir quelques conditions reject() ainsi que pour permettre de transmettre différents messages en cas de succès.

+ +

Prenez une copie de l'exemple précédent, et remplacez la définition de timeoutPromise() existante par celle-ci :

+ +
function timeoutPromise(message, interval) {
+  return new Promise((resolve, reject) => {
+    if (message === '' || typeof message !== 'string') {
+      reject('Le message est vide ou n'est pas une chaîne de caractères');
+    } else if (interval < 0 || typeof interval !== 'number') {
+      reject(`L'intervalle est négatif ou n'est pas un nombre`);
+    } else {
+      setTimeout(() => {
+        resolve(message);
+      }, interval);
+    }
+  });
+};
+ +

Ici, nous passons deux arguments dans une fonction personnalisée - un message pour faire quelque chose avec, et l'intervalle de temps à passer avant de faire la chose. À l'intérieur de la fonction, nous renvoyons un nouvel objet Promise — l'invocation de la fonction renverra la promesse que nous voulons utiliser.

+ +

À l'intérieur du constructeur Promise, nous effectuons plusieurs vérifications dans des structures if ... else :

+ +
    +
  1. Tout d'abord, nous vérifions si le message est approprié pour être alerté. Si c'est une chaîne de caractères vide ou pas une chaîne de caractères du tout, nous rejetons la promesse avec un message d'erreur approprié.
    2. +
  2. Ensuite, nous vérifions si l'intervalle est une valeur d'intervalle appropriée. S'il est négatif ou n'est pas un nombre, nous rejetons la promesse avec un message d'erreur approprié.
    3. +
  3. Enfin, si les paramètres semblent tous deux OK, nous résolvons la promesse avec le message spécifié après que l'intervalle spécifié se soit écoulé en utilisant setTimeout().
    4. +
+ +

Puisque la fonction timeoutPromise() renvoie un objet Promise, nous pouvons enchaîner .then(), .catch(), etc. sur elle pour faire usage de ses fonctionnalités. Utilisons-le maintenant - remplaçons l'utilisation précédente de timeoutPromise par celle-ci :

+ +
timeoutPromise('Bonjour à tous !', 1000)
+.then(message => {
+   alert(message);
+})
+.catch(e => {
+  console.log('Erreur : ' + e);
+});
+ +

Lorsque vous enregistrez et exécutez le code tel quel, après une seconde, vous obtiendrez le message d'alerte. Essayez maintenant de définir le message sur une chaîne vide ou l'intervalle sur un nombre négatif, par exemple, et vous pourrez voir la promesse rejetée avec les messages d'erreur appropriés ! Vous pouvez également essayer de faire autre chose avec le message résolu plutôt que de simplement créer une alerte.

+ +
+

Note : Vous pouvez trouver notre version de cet exemple sur GitHub sur custom-promise2.html (voir aussi le code source).

+
+ +

Un exemple plus concret

+ +

L'exemple ci-dessus est resté volontairement simple pour rendre les concepts faciles à comprendre, mais il n'est pas vraiment très asynchrone. La nature asynchrone est essentiellement feinte en utilisant setTimeout(), bien qu'il montre quand même que les promesses sont utiles pour créer une fonction personnalisée avec un flux d'opérations raisonnable, une bonne gestion des erreurs, etc.

+ +

Un exemple que nous aimerions vous inviter à étudier, qui montre effectivement une application asynchrone utile du constructeur Promise(), est la bibliothèque idb de Jake Archibald. Celle-ci prend l'API IndexedDB API, qui est une API à l'ancienne basée sur des callbacks pour stocker et récupérer des données côté client, et vous permet de l'utiliser avec des promesses. Dans le code, vous verrez que le même type de techniques que nous avons évoqué plus haut est utilisé. Le bloc suivant convertit le modèle de requête de base utilisé par de nombreuses méthodes IndexedDB pour utiliser des promesses (voir ce code, par exemple).

+ +

Conclusion

+ +

Les promesses sont un bon moyen de construire des applications asynchrones lorsque nous ne connaissons pas la valeur de retour d'une fonction ou le temps qu'elle prendra pour retourner une réponse. Elles permettent d'exprimer et de raisonner plus facilement sur des séquences d'opérations asynchrones sans callbacks profondément imbriqués, et elles supportent un style de gestion des erreurs qui est similaire à l'instruction synchrone try...catch.

+ +

Les promesses fonctionnent dans les dernières versions de tous les navigateurs modernes ; le seul endroit où la prise en charge des promesses posera problème est Opera Mini et IE11 et les versions antérieures.

+ +

Nous n'avons pas abordé toutes les fonctionnalités des promesses dans cet article, mais seulement les plus intéressantes et les plus utiles. Au fur et à mesure que vous vous familiariserez avec les promesses, vous découvrirez d'autres fonctionnalités et techniques.

+ +

La plupart des API Web modernes sont basées sur des promesses, vous devrez donc comprendre les promesses pour en tirer le meilleur parti. Parmi ces API, citons WebRTC, Web Audio API, MediaStream API, et bien d'autres encore. Les promesses seront de plus en plus importantes au fil du temps, donc apprendre à les utiliser et à les comprendre est une étape importante dans l'apprentissage du JavaScript moderne.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html deleted file mode 100644 index e2f90a12fb..0000000000 --- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.html +++ /dev/null @@ -1,599 +0,0 @@ ---- -title: 'JavaScript asynchrone coopératif : délais et intervalles' -slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals -tags: - - Animation - - Beginner - - CodingScripting - - Guide - - Intervals - - JavaScript - - Loops - - asynchronous - - requestAnimationFrame - - setInterval - - setTimeout - - timeouts -translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
- -

Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Comprendre les boucles et les intervalles asynchrones et leur utilité.
- -

Introduction

- -

Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.

- -

Ces fonctions sont :

- -
-
setTimeout()
-
Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
-
setInterval()
-
Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
-
requestAnimationFrame()
-
La version moderne de setInterval(). Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
- -

Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).

- -

Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel setTimeout() ne s'exécute, ou entre les itérations de setInterval(). Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'après la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.

- -

Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.

- -

setTimeout()

- -

Comme nous l'avons dit précédemment, setTimeout() exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :

- - - -
-

Note : La quantité de temps spécifiée (ou le délai) n'est pas le temps garanti à l'exécution, mais plutôt le temps minimum à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.

-

En conséquence, un code comme setTimeout(fn, 0) s'exécutera dès que la pile sera vide, pas immédiatement. Si vous exécutez un code comme setTimeout(fn, 0) mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.

-
- -

Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte (voir son exécution en direct, et voir le code source) :

- -
let maSalutation = setTimeout(() => {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
- -

Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à setTimeout(). Les deux versions suivantes de l'extrait de code sont équivalentes à la première :

- -
// Avec une fonction nommée
-let maSalutation = setTimeout(function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-
-// Avec une fonction définie séparément
-function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}
-
-let maSalutation = setTimeout(direBonjour, 2000);
- -

Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.

- -

setTimeout() renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir Effacement des délais d'attente (ci-dessous) pour apprendre comment faire cela.

- -

Passage de paramètres à une fonction setTimeout()

- -

Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du setTimeout() doivent lui être passés comme paramètres supplémentaires à la fin de la liste.

- -

Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :

- -
function direBonjour(who) {
-  console.log(`Bonjour ${who} !`);
-}
- -

Maintenant, vous pouvez passer le nom de la personne dans l'appel setTimeout() comme troisième paramètre :

- -
let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
- -

Effacement des délais d'attente

- -

Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant clearTimeout(), en lui passant en paramètre l'identifiant de l'appel setTimeout(). Donc pour annuler notre timeout ci-dessus, vous feriez ceci :

- -
clearTimeout(maSalutation);
- -
-

Note : Voir greeter-app.html pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (voir aussi le code source).

-
- -

setInterval()

- -

setTimeout() fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?

- -

C'est là qu'intervient le setInterval(). Cela fonctionne de manière très similaire à setTimeout(), sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel setInterval().

- -

Prenons un exemple. La fonction suivante crée un nouvel objet Date(), en extrait une chaîne de temps en utilisant toLocaleTimeString(), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de setInterval(), créant l'effet d'une horloge numérique qui se met à jour une fois par seconde (voir cela en direct, et aussi voir la source) :

- -
function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
- -

Tout comme setTimeout(), setInterval() renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.

- -

Effacement des intervalles

- -

setInterval() continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel setInterval() à la fonction clearInterval() :

- -
const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);
- -

Apprentissage actif : Créez votre propre chronomètre !

- -

Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple setInterval-clock.html, et modifiez-le pour créer votre propre chronomètre simple.

- -

Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :

- - - -

Voici quelques conseils pour vous :

- - - -
-

Note : Si vous êtes bloqué, vous pouvez trouver notre version ici (voir le code source).

-
- -

Choses à garder à l'esprit concernant setTimeout() et setInterval()

- -

Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec setTimeout() et setInterval(). Passons-les en revue maintenant.

- -

Délais récursifs

- -

Il existe une autre façon d'utiliser setTimeout() : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser setInterval().

- -

L'exemple ci-dessous utilise un setTimeout() récursif pour exécuter la fonction passée toutes les 100 millisecondes :

- -
let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);
- -

Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise setInterval() pour accomplir le même effet :

- -
let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++;
-}, 100);
- -

Quelle est la différence entre le setTimeout() récursif et le setInterval() ?

- -

La différence entre les deux versions du code ci-dessus est subtile.

- - - -

Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le setTimeout() récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.

- -

Délais immédiats

- -

En utilisant 0 comme valeur pour setTimeout(), on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.

- -

Par exemple, le code ci-dessous (voir en direct) produit une alerte contenant "Hello", puis une alerte contenant "World" dès que vous cliquez sur OK sur la première alerte.

- -
setTimeout(() => {
-  alert('World');
-}, 0);
-
-alert('Hello');
- -

Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.

- -

Effacement avec clearTimeout() ou clearInterval()

- -

clearTimeout() et clearInterval() utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un setTimeout() ou setInterval().

- -

Par souci de cohérence, vous devriez utiliser clearTimeout() pour effacer les entrées setTimeout() et clearInterval() pour effacer les entrées setInterval(). Cela permettra d'éviter toute confusion.

- -

requestAnimationFrame()

- -

requestAnimationFrame() est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.

- -

Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme setInterval(), qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.

- -

(Plus d'informations à ce sujet sur CreativeJS (en).)

- -
-

Note : Vous trouverez des exemples d'utilisation de requestAnimationFrame() ailleurs dans le cours - voir par exemple Dessiner des éléments graphiques, et La construction d'objet en pratique.

-
- -

La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :

- -
function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez requestAnimationFrame() avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle requestAnimationFrame() de manière récursive.

- -
-

Note : Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, les animations CSS sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.

-

Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets 2D Canvas API ou WebGL), requestAnimationFrame() est la meilleure option dans la plupart des cas.

-
- -

Quelle est la vitesse de votre animation ?

- -

La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.

- -

Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de dégradation des images, ou saccades.

- -

Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (1000 / 60) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.

- -

requestAnimationFrame() essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, requestAnimationFrame() fera toujours du mieux qu'il peut avec ce dont il dispose.

- -

En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?

- -

Parlons un peu plus de la façon dont la méthode requestAnimationFrame() diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :

- -
function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

Voyons maintenant comment faire la même chose en utilisant setInterval() :

- -
function draw() {
-   // Le code du dessin va ici
-}
-
-setInterval(draw, 17);
- -

Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour requestAnimationFrame(). Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.

- -

setInterval(), d'autre part exige qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule 1000 millisecondes / 60Hz, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.

- -

Inclure un horodatage

- -

Le rappel réel passé à la fonction requestAnimationFrame() peut également recevoir un paramètre : une valeur timestamp, qui représente le temps depuis que le requestAnimationFrame() a commencé à s'exécuter.

- -

C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :

- -
let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Faire quelque chose en fonction du temps actuel
-
-   requestAnimationFrame(draw);
-}
-
-draw();
- -

Prise en charge des navigateurs

- -

requestAnimationFrame() est supporté par des navigateurs plus récents que pour setInterval()/setTimeout(). Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.

- -

Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser requestAnimationFrame().

- -

Un exemple simple

- -

Assez avec la théorie ! Construisons votre propre exemple personnel de requestAnimationFrame(). Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.

- -
-

Note : Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de requestAnimationFrame(), et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.

-
- -
    -

  1. Prenez un modèle HTML de base (comme celui-ci).

    2. -

  2. Placez un élément <div> vide à l'intérieur de l'élément <body>, puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.

    3. -

  3. Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du <body> à 100% de la hauteur de <html>, et centre le <div> à l'intérieur du <body>, horizontalement et verticalement.

    - 
    html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}
    -
    4. -

  4. Insérez un élément <script> juste au-dessus de la balise de fermeture </body>.

    5. -

  5. Insérez le JavaScript suivant dans votre élément <script>. Ici, vous stockez une référence à l'élément <div> ; à l'intérieur d'une constante, définissez une variable rotateCount à 0, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel requestAnimationFrame(), et en définissant une variable startTime à null, qui sera plus tard utilisée pour stocker l'heure de début de l'appel requestAnimationFrame().

    - 
    const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
    -
    6. -
  6. -

    Sous le code précédent, insérez une fonction draw() qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre timestamp :

    - 
    function draw(timestamp) {
-
-}
    -
    7. -

  7. À l'intérieur de draw(), ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le rotateCount à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :

    - 
      if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
    -
    8. -

  8. Sous la ligne précédente à l'intérieur de draw(), ajoutez le bloc suivant - il s'assure que la valeur de rotateCount est comprise entre 0 et 360 en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par 360) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme "128000 degrés".

    - 
    rotateCount %= 360;
    -
    9. -
  9. Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner : - 
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    -
    10. -

  10. Tout en bas, à l'intérieur de la fonction draw(), insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif requestAnimation(), qui prend la fonction draw() comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction draw() à un taux aussi proche que possible de 60 IPS.

    - 
    rAF = requestAnimationFrame(draw);
    -
    11. -

  11. Sous la définition de la fonction draw(), ajoutez un appel à la fonction draw() pour lancer l'animation.

    - 
    draw();
    -
    12. -
- -
-

Note : Vous pouvez trouver l'exemple terminé en direct sur GitHub. (Vous pouvez également voir le code source).

-
- -

Effacer un appel de requestAnimationFrame()

- -

Effacer un appel de requestAnimationFrame() peut être fait en appelant la méthode cancelAnimationFrame() correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").

- -

Il suffit de lui passer la valeur renvoyée par l'appel requestAnimationFrame() à annuler, que vous avez stockée dans la variable rAF :

- -
cancelAnimationFrame(rAF);
- -

Apprentissage actif : Démarrer et arrêter la toupie

- -

Dans cet exercice, nous aimerions que vous testiez la méthode cancelAnimationFrame() en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.

- -

Quelques conseils :

- - - -
-

Note : Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages exemple en direct et code source.

-
- -

Ralentissement d'une animation requestAnimationFrame()

- -

Une limitation de requestAnimationFrame() est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?

- -

C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article Dessiner des éléments graphiques :

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

- -

Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par requestAnimationFrame(), Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :

- -
if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}
- -

Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.

- -

...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour posX (position du personnage sur l'écran) par deux à chaque image :

- -
if (posX > width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}
- -

C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.

- -

La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le rotateCount que de un à chaque image, au lieu de deux.

- -

Apprentissage actif : un jeu de réaction

- -

Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche A, et l'autre avec la touche L.

- -

Lorsque l'on appuie sur le bouton Start, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant "PLAYERS GO !!" - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.

- -

{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}

- -

Travaillons ensemble :

- -
    -

  1. Tout d'abord, téléchargez le fichier de démarrage de l'application. Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.

    2. -

  2. À l'intérieur de l'élément vide <script> de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :

    - 
    const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');
    -

    Dans l'ordre, ce sont :

    -
      -
    1. Une référence à la toupie, afin que vous puissiez l'animer.
      2. -
    2. Une référence à l'élément <div> qui contient la toupie, utilisée pour l'afficher et la masquer.
      3. -
    3. Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
      4. -
    4. Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
      5. -
    5. Une variable non initialisée pour stocker ultérieurement l'appel requestAnimationFrame() qui anime la toupie.
      6. -
    6. Une référence au bouton de démarrage.
      7. -
    7. Une référence au paragraphe des résultats.
      8. -
    -
    3. -

  3. Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.

    - 
    function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}
    -
    4. -

  4. Ajoutez ensuite la fonction draw(), qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :

    - 
    function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  rotateCount %= 360;
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}
    -
    5. -

  5. Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant display : none;.

    - 
    result.style.display = 'none';
-spinnerContainer.style.display = 'none';
    -
    6. -

  6. Ensuite, définissez une fonction reset(), qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :

    - 
    function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}
    -
    7. -

  7. Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction start() appelle draw() pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton Start pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel setTimeout() qui exécute une fonction setEndgame() après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction start() lorsqu'il est cliqué.

    - 
    btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}
    -
    -

    Note : Vous verrez que cet exemple appelle setTimeout() sans stocker la valeur de retour. (Donc, pas let myTimeout = setTimeout(functionName, interval).)

    -

    Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !

    -
    -

    Le résultat net du code précédent est que lorsque le bouton Start est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction setEndgame(), que vous allez définir ensuite.

    -
    8. -

  8. Ajoutez ensuite la fonction suivante à votre code :

    - 
    function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'JOUEURS : ALLEZ-Y !!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    let isOver = false;
-    console.log(e.key);
-
-    if (e.key === "a") {
-      result.textContent = 'Le joueur 1 a gagné !!';
-      isOver = true;
-    } else if (e.key === "l") {
-      result.textContent = 'Le joueur 2 a gagné !!';
-      isOver = true;
-    }
-
-    if (isOver) {
-      document.removeEventListener('keydown', keyHandler);
-      setTimeout(reset, 5000);
-    }
-  };
-}
    -

    Son fonctionnement :

    -
      -
    1. Tout d'abord, annule l'animation de la toupie avec cancelAnimationFrame() (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
      2. -
    2. Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
      3. -
    3. Attache un écouteur d'événements keydown au document. Lorsqu'un bouton quelconque est enfoncé, la fonction keyHandler() est exécutée.
      4. -
    4. À l'intérieur de keyHandler(), le code inclut l'objet événement en tant que paramètre (représenté par e) - sa propriété key contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
      5. -
    5. Définit la variable isOver à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
      6. -
    6. Enregistre e.key dans la console, ce qui est un moyen utile de connaître la valeur key des différentes touches sur lesquelles vous appuyez.
      7. -
    7. Lorsque e.key est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque e.key est "l", affiche un message pour dire que le joueur 2 a gagné. (Note: Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus Shift), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez isOver à true.
      8. -
    8. Seulement si isOver est true, supprime l'écouteur d'événements keydown en utilisant removeEventListener() de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également setTimeout() pour appeler reset() après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
      9. -
    -
    9. -
- -

Voilà, c'est fait !

- -
-

Note : Si vous êtes bloqué, consultez notre version du jeu en live (voir également le code source).

-
- -

Conclusion

- -

Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.

- -

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md new file mode 100644 index 0000000000..e2f90a12fb --- /dev/null +++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md @@ -0,0 +1,599 @@ +--- +title: 'JavaScript asynchrone coopératif : délais et intervalles' +slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +tags: + - Animation + - Beginner + - CodingScripting + - Guide + - Intervals + - JavaScript + - Loops + - asynchronous + - requestAnimationFrame + - setInterval + - setTimeout + - timeouts +translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+ +

Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension raisonnable des principes fondamentaux de JavaScript.
Objectif :Comprendre les boucles et les intervalles asynchrones et leur utilité.
+ +

Introduction

+ +

Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.

+ +

Ces fonctions sont :

+ +
+
setTimeout()
+
Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
+
setInterval()
+
Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
+
requestAnimationFrame()
+
La version moderne de setInterval(). Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
+
+ +

Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).

+ +

Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel setTimeout() ne s'exécute, ou entre les itérations de setInterval(). Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'après la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.

+ +

Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.

+ +

setTimeout()

+ +

Comme nous l'avons dit précédemment, setTimeout() exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :

+ + + +
+

Note : La quantité de temps spécifiée (ou le délai) n'est pas le temps garanti à l'exécution, mais plutôt le temps minimum à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.

+

En conséquence, un code comme setTimeout(fn, 0) s'exécutera dès que la pile sera vide, pas immédiatement. Si vous exécutez un code comme setTimeout(fn, 0) mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.

+
+ +

Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte (voir son exécution en direct, et voir le code source) :

+ +
let maSalutation = setTimeout(() => {
+  console.log('Bonjour, M. Univers !');
+}, 2000);
+ +

Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à setTimeout(). Les deux versions suivantes de l'extrait de code sont équivalentes à la première :

+ +
// Avec une fonction nommée
+let maSalutation = setTimeout(function direBonjour() {
+  console.log('Bonjour, M. Univers !');
+}, 2000);
+
+// Avec une fonction définie séparément
+function direBonjour() {
+  console.log('Bonjour, M. Univers !');
+}
+
+let maSalutation = setTimeout(direBonjour, 2000);
+ +

Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.

+ +

setTimeout() renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir Effacement des délais d'attente (ci-dessous) pour apprendre comment faire cela.

+ +

Passage de paramètres à une fonction setTimeout()

+ +

Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du setTimeout() doivent lui être passés comme paramètres supplémentaires à la fin de la liste.

+ +

Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :

+ +
function direBonjour(who) {
+  console.log(`Bonjour ${who} !`);
+}
+ +

Maintenant, vous pouvez passer le nom de la personne dans l'appel setTimeout() comme troisième paramètre :

+ +
let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
+ +

Effacement des délais d'attente

+ +

Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant clearTimeout(), en lui passant en paramètre l'identifiant de l'appel setTimeout(). Donc pour annuler notre timeout ci-dessus, vous feriez ceci :

+ +
clearTimeout(maSalutation);
+ +
+

Note : Voir greeter-app.html pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé (voir aussi le code source).

+
+ +

setInterval()

+ +

setTimeout() fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?

+ +

C'est là qu'intervient le setInterval(). Cela fonctionne de manière très similaire à setTimeout(), sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel setInterval().

+ +

Prenons un exemple. La fonction suivante crée un nouvel objet Date(), en extrait une chaîne de temps en utilisant toLocaleTimeString(), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de setInterval(), créant l'effet d'une horloge numérique qui se met à jour une fois par seconde (voir cela en direct, et aussi voir la source) :

+ +
function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+ +

Tout comme setTimeout(), setInterval() renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.

+ +

Effacement des intervalles

+ +

setInterval() continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel setInterval() à la fonction clearInterval() :

+ +
const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);
+ +

Apprentissage actif : Créez votre propre chronomètre !

+ +

Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple setInterval-clock.html, et modifiez-le pour créer votre propre chronomètre simple.

+ +

Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :

+ + + +

Voici quelques conseils pour vous :

+ + + +
+

Note : Si vous êtes bloqué, vous pouvez trouver notre version ici (voir le code source).

+
+ +

Choses à garder à l'esprit concernant setTimeout() et setInterval()

+ +

Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec setTimeout() et setInterval(). Passons-les en revue maintenant.

+ +

Délais récursifs

+ +

Il existe une autre façon d'utiliser setTimeout() : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser setInterval().

+ +

L'exemple ci-dessous utilise un setTimeout() récursif pour exécuter la fonction passée toutes les 100 millisecondes :

+ +
let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);
+ +

Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise setInterval() pour accomplir le même effet :

+ +
let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++;
+}, 100);
+ +

Quelle est la différence entre le setTimeout() récursif et le setInterval() ?

+ +

La différence entre les deux versions du code ci-dessus est subtile.

+ + + +

Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le setTimeout() récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.

+ +

Délais immédiats

+ +

En utilisant 0 comme valeur pour setTimeout(), on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.

+ +

Par exemple, le code ci-dessous (voir en direct) produit une alerte contenant "Hello", puis une alerte contenant "World" dès que vous cliquez sur OK sur la première alerte.

+ +
setTimeout(() => {
+  alert('World');
+}, 0);
+
+alert('Hello');
+ +

Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.

+ +

Effacement avec clearTimeout() ou clearInterval()

+ +

clearTimeout() et clearInterval() utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un setTimeout() ou setInterval().

+ +

Par souci de cohérence, vous devriez utiliser clearTimeout() pour effacer les entrées setTimeout() et clearInterval() pour effacer les entrées setInterval(). Cela permettra d'éviter toute confusion.

+ +

requestAnimationFrame()

+ +

requestAnimationFrame() est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.

+ +

Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme setInterval(), qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.

+ +

(Plus d'informations à ce sujet sur CreativeJS (en).)

+ +
+

Note : Vous trouverez des exemples d'utilisation de requestAnimationFrame() ailleurs dans le cours - voir par exemple Dessiner des éléments graphiques, et La construction d'objet en pratique.

+
+ +

La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :

+ +
function draw() {
+   // Le code du dessin va ici
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez requestAnimationFrame() avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle requestAnimationFrame() de manière récursive.

+ +
+

Note : Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, les animations CSS sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.

+

Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets 2D Canvas API ou WebGL), requestAnimationFrame() est la meilleure option dans la plupart des cas.

+
+ +

Quelle est la vitesse de votre animation ?

+ +

La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.

+ +

Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de dégradation des images, ou saccades.

+ +

Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (1000 / 60) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.

+ +

requestAnimationFrame() essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, requestAnimationFrame() fera toujours du mieux qu'il peut avec ce dont il dispose.

+ +

En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?

+ +

Parlons un peu plus de la façon dont la méthode requestAnimationFrame() diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :

+ +
function draw() {
+   // Le code du dessin va ici
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

Voyons maintenant comment faire la même chose en utilisant setInterval() :

+ +
function draw() {
+   // Le code du dessin va ici
+}
+
+setInterval(draw, 17);
+ +

Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour requestAnimationFrame(). Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.

+ +

setInterval(), d'autre part exige qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule 1000 millisecondes / 60Hz, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.

+ +

Inclure un horodatage

+ +

Le rappel réel passé à la fonction requestAnimationFrame() peut également recevoir un paramètre : une valeur timestamp, qui représente le temps depuis que le requestAnimationFrame() a commencé à s'exécuter.

+ +

C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :

+ +
let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Faire quelque chose en fonction du temps actuel
+
+   requestAnimationFrame(draw);
+}
+
+draw();
+ +

Prise en charge des navigateurs

+ +

requestAnimationFrame() est supporté par des navigateurs plus récents que pour setInterval()/setTimeout(). Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.

+ +

Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser requestAnimationFrame().

+ +

Un exemple simple

+ +

Assez avec la théorie ! Construisons votre propre exemple personnel de requestAnimationFrame(). Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.

+ +
+

Note : Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de requestAnimationFrame(), et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.

+
+ +
    +

  1. Prenez un modèle HTML de base (comme celui-ci).

    2. +

  2. Placez un élément <div> vide à l'intérieur de l'élément <body>, puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.

    3. +

  3. Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du <body> à 100% de la hauteur de <html>, et centre le <div> à l'intérieur du <body>, horizontalement et verticalement.

    + 
    html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}
    +
    4. +

  4. Insérez un élément <script> juste au-dessus de la balise de fermeture </body>.

    5. +

  5. Insérez le JavaScript suivant dans votre élément <script>. Ici, vous stockez une référence à l'élément <div> ; à l'intérieur d'une constante, définissez une variable rotateCount à 0, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel requestAnimationFrame(), et en définissant une variable startTime à null, qui sera plus tard utilisée pour stocker l'heure de début de l'appel requestAnimationFrame().

    + 
    const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
    +
    6. +
  6. +

    Sous le code précédent, insérez une fonction draw() qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre timestamp :

    + 
    function draw(timestamp) {
+
+}
    +
    7. +

  7. À l'intérieur de draw(), ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le rotateCount à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :

    + 
      if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
    +
    8. +

  8. Sous la ligne précédente à l'intérieur de draw(), ajoutez le bloc suivant - il s'assure que la valeur de rotateCount est comprise entre 0 et 360 en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par 360) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme "128000 degrés".

    + 
    rotateCount %= 360;
    +
    9. +
  9. Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner : + 
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    +
    10. +

  10. Tout en bas, à l'intérieur de la fonction draw(), insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif requestAnimation(), qui prend la fonction draw() comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction draw() à un taux aussi proche que possible de 60 IPS.

    + 
    rAF = requestAnimationFrame(draw);
    +
    11. +

  11. Sous la définition de la fonction draw(), ajoutez un appel à la fonction draw() pour lancer l'animation.

    + 
    draw();
    +
    12. +
+ +
+

Note : Vous pouvez trouver l'exemple terminé en direct sur GitHub. (Vous pouvez également voir le code source).

+
+ +

Effacer un appel de requestAnimationFrame()

+ +

Effacer un appel de requestAnimationFrame() peut être fait en appelant la méthode cancelAnimationFrame() correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").

+ +

Il suffit de lui passer la valeur renvoyée par l'appel requestAnimationFrame() à annuler, que vous avez stockée dans la variable rAF :

+ +
cancelAnimationFrame(rAF);
+ +

Apprentissage actif : Démarrer et arrêter la toupie

+ +

Dans cet exercice, nous aimerions que vous testiez la méthode cancelAnimationFrame() en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.

+ +

Quelques conseils :

+ + + +
+

Note : Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages exemple en direct et code source.

+
+ +

Ralentissement d'une animation requestAnimationFrame()

+ +

Une limitation de requestAnimationFrame() est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?

+ +

C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article Dessiner des éléments graphiques :

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

+ +

Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par requestAnimationFrame(), Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :

+ +
if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}
+ +

Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.

+ +

...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour posX (position du personnage sur l'écran) par deux à chaque image :

+ +
if (posX > width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}
+ +

C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.

+ +

La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le rotateCount que de un à chaque image, au lieu de deux.

+ +

Apprentissage actif : un jeu de réaction

+ +

Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche A, et l'autre avec la touche L.

+ +

Lorsque l'on appuie sur le bouton Start, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant "PLAYERS GO !!" - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.

+ +

{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}

+ +

Travaillons ensemble :

+ +
    +

  1. Tout d'abord, téléchargez le fichier de démarrage de l'application. Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.

    2. +

  2. À l'intérieur de l'élément vide <script> de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :

    + 
    const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');
    +

    Dans l'ordre, ce sont :

    +
      +
    1. Une référence à la toupie, afin que vous puissiez l'animer.
      2. +
    2. Une référence à l'élément <div> qui contient la toupie, utilisée pour l'afficher et la masquer.
      3. +
    3. Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
      4. +
    4. Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
      5. +
    5. Une variable non initialisée pour stocker ultérieurement l'appel requestAnimationFrame() qui anime la toupie.
      6. +
    6. Une référence au bouton de démarrage.
      7. +
    7. Une référence au paragraphe des résultats.
      8. +
    +
    3. +

  3. Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.

    + 
    function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}
    +
    4. +

  4. Ajoutez ensuite la fonction draw(), qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :

    + 
    function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  rotateCount %= 360;
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}
    +
    5. +

  5. Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant display : none;.

    + 
    result.style.display = 'none';
+spinnerContainer.style.display = 'none';
    +
    6. +

  6. Ensuite, définissez une fonction reset(), qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :

    + 
    function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}
    +
    7. +

  7. Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction start() appelle draw() pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton Start pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel setTimeout() qui exécute une fonction setEndgame() après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction start() lorsqu'il est cliqué.

    + 
    btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}
    +
    +

    Note : Vous verrez que cet exemple appelle setTimeout() sans stocker la valeur de retour. (Donc, pas let myTimeout = setTimeout(functionName, interval).)

    +

    Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !

    +
    +

    Le résultat net du code précédent est que lorsque le bouton Start est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction setEndgame(), que vous allez définir ensuite.

    +
    8. +

  8. Ajoutez ensuite la fonction suivante à votre code :

    + 
    function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'JOUEURS : ALLEZ-Y !!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    let isOver = false;
+    console.log(e.key);
+
+    if (e.key === "a") {
+      result.textContent = 'Le joueur 1 a gagné !!';
+      isOver = true;
+    } else if (e.key === "l") {
+      result.textContent = 'Le joueur 2 a gagné !!';
+      isOver = true;
+    }
+
+    if (isOver) {
+      document.removeEventListener('keydown', keyHandler);
+      setTimeout(reset, 5000);
+    }
+  };
+}
    +

    Son fonctionnement :

    +
      +
    1. Tout d'abord, annule l'animation de la toupie avec cancelAnimationFrame() (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
      2. +
    2. Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
      3. +
    3. Attache un écouteur d'événements keydown au document. Lorsqu'un bouton quelconque est enfoncé, la fonction keyHandler() est exécutée.
      4. +
    4. À l'intérieur de keyHandler(), le code inclut l'objet événement en tant que paramètre (représenté par e) - sa propriété key contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
      5. +
    5. Définit la variable isOver à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
      6. +
    6. Enregistre e.key dans la console, ce qui est un moyen utile de connaître la valeur key des différentes touches sur lesquelles vous appuyez.
      7. +
    7. Lorsque e.key est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque e.key est "l", affiche un message pour dire que le joueur 2 a gagné. (Note: Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus Shift), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez isOver à true.
      8. +
    8. Seulement si isOver est true, supprime l'écouteur d'événements keydown en utilisant removeEventListener() de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également setTimeout() pour appeler reset() après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
      9. +
    +
    9. +
+ +

Voilà, c'est fait !

+ +
+

Note : Si vous êtes bloqué, consultez notre version du jeu en live (voir également le code source).

+
+ +

Conclusion

+ +

Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html deleted file mode 100644 index 696c4d50d3..0000000000 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Construire vos propres fonctions -slug: Learn/JavaScript/Building_blocks/Build_your_own_function -tags: - - Apprentissage - - Article - - Débutant - - Fonctions - - Guide - - I10n - - JavaScript - - Paramètres - - Scripting - - Tutoriel -translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function -original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
- -

Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.

- - - - - - - - - - - - -
Prérequis :Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.
Objectif :Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.
- -

Apprentissage actif : Construisons une fonction

- -

La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :

- -
alert('This is a message');
- -

La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.

- -

La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.

- -
-

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

-
- -

La fonction de base

- -

Pour commencer, mettons en place une fonction de base.

- -
-

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.

-
- -
    -
  1. Commencez par faire une copie locale du fichier function-start.html. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
    2. -
  2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <script> : - 
    function displayMessage() {
-
-}
    - Nous commençons avec le mot-clé function, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
    3. -
  3. Enfin, ajoutez le code suivant à l'intérieur des accolades : - 
    var html = document.querySelector('html');
-
-var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
-
-var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
-
-closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
    -
    4. -
- -

Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.

- -

La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée html, de façon à pouvoir l'utiliser plus tard :

- -
var html = document.querySelector('html');
- -

La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée panel (Dans la suite de l'article, nous parlerons simplement du panneau <div>.). Cet élément sera le conteneur extérieur de notre boîte de message.

- -

Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut class à notre panneau qui aura pour valeur msgBox. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe .msgBox dans le but de styliser la boîte de message ainsi que son contenu.

- -

Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable html créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <div> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <html>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.

- -
var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
- -

Les deux sections suivantes font usage des mêmes fonctions createElement() et appendChild() que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau <div>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.

- -
var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
- -

Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.

- -

Le gestionnaire onclick est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  onclick une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <div>.

- -
closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
- -

Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :

- -
<div class="msgBox">
-  <p>This is a message box</p>
-  <button>x</button>
-</div>
- -

Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.

- -

Appeler la fonction

- -

À présent, nous avons notre fonction définie comme il faut dans notre balise <script>, mais il ne se passera rien si on laisse les choses en l'état.

- -
    -
  1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : - 
    displayMessage();
    - Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.
    2. -
  2. -

    Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.

    - -

    Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.

    - -

    Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.

    -
    3. -
  3. Supprimez la ligne précédente que vous avez ajoutée.
    4. -
  4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : - 
    var btn = document.querySelector('button');
    -
    5. -
  5. Enfin, ajoutez la ligne suivante à la précédente : - 
    btn.onclick = displayMessage;
    - D'une manière similaire à notre ligne closeBtn.onclick... à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
    6. -
  6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.
    7. -
- -

Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :

- -
btn.onclick = displayMessage();
- -

Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.

- -

Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.

- -

Améliorer la fonction à l'aide de paramètres

- -

En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.

- -
    -
  1. Premièrement, mettons à jour la première ligne : - 
    function displayMessage() {
    - par : - - 
    function displayMessage(msgText, msgType) {
    - Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
    2. -
  2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : - 
    msg.textContent = 'This is a message box';
    - avec : - - 
    msg.textContent = msgText;
    -
    3. -
  3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : - 
    btn.onclick = displayMessage;
    - par ce bloc : - - 
    btn.onclick = function() {
-  displayMessage('Woo, this is a different message!');
-};
    - Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.
    4. -
  4. Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !
    5. -
- -

Un paramètre plus complexe

- -

Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre msgType, la fonction affichera une icône et une couleur d'arrière-plan différentes.

- -
    -
  1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML. - -
    -

    Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !

    -
    2. -
  2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur .msgBox en changeant : - 
    width: 200px;
    - par : - - 
    width: 242px;
    -
    3. -
  3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS .msgBox p { ... } : - 
    padding-left: 82px;
-background-position: 25px center;
-background-repeat: no-repeat;
    -
    4. -
  4. Maintenant, nous devons ajouter du code à notre fonction displayMessage() pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction : - 
    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';
-}
    - Ici, quand msgType a la valeur 'warning', l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si msgType a la valeur 'chat', l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre msgType n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans else { ... } est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre msgType n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
    5. -
  5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel displayMessage() : - 
    displayMessage('Woo, this is a different message!');
    - par soit l'un ou l'autre : - - 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-displayMessage('Brian: Hi there, how are you today?','chat');
    - Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
    6. -
- -
-

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

-
- -

Conclusion

- -

Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md new file mode 100644 index 0000000000..696c4d50d3 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md @@ -0,0 +1,243 @@ +--- +title: Construire vos propres fonctions +slug: Learn/JavaScript/Building_blocks/Build_your_own_function +tags: + - Apprentissage + - Article + - Débutant + - Fonctions + - Guide + - I10n + - JavaScript + - Paramètres + - Scripting + - Tutoriel +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.

+ + + + + + + + + + + + +
Prérequis :Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.
Objectif :Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.
+ +

Apprentissage actif : Construisons une fonction

+ +

La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :

+ +
alert('This is a message');
+ +

La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.

+ +

La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.

+ +
+

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

+
+ +

La fonction de base

+ +

Pour commencer, mettons en place une fonction de base.

+ +
+

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.

+
+ +
    +
  1. Commencez par faire une copie locale du fichier function-start.html. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
    2. +
  2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <script> : + 
    function displayMessage() {
+
+}
    + Nous commençons avec le mot-clé function, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
    3. +
  3. Enfin, ajoutez le code suivant à l'intérieur des accolades : + 
    var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
    +
    4. +
+ +

Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.

+ +

La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée html, de façon à pouvoir l'utiliser plus tard :

+ +
var html = document.querySelector('html');
+ +

La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée panel (Dans la suite de l'article, nous parlerons simplement du panneau <div>.). Cet élément sera le conteneur extérieur de notre boîte de message.

+ +

Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut class à notre panneau qui aura pour valeur msgBox. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe .msgBox dans le but de styliser la boîte de message ainsi que son contenu.

+ +

Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable html créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <div> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <html>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.

+ +
var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

Les deux sections suivantes font usage des mêmes fonctions createElement() et appendChild() que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau <div>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.

+ +
var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+ +

Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.

+ +

Le gestionnaire onclick est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  onclick une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <div>.

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.

+ +

Appeler la fonction

+ +

À présent, nous avons notre fonction définie comme il faut dans notre balise <script>, mais il ne se passera rien si on laisse les choses en l'état.

+ +
    +
  1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : + 
    displayMessage();
    + Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.
    2. +
  2. +

    Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.

    + +

    Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.

    + +

    Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.

    +
    3. +
  3. Supprimez la ligne précédente que vous avez ajoutée.
    4. +
  4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : + 
    var btn = document.querySelector('button');
    +
    5. +
  5. Enfin, ajoutez la ligne suivante à la précédente : + 
    btn.onclick = displayMessage;
    + D'une manière similaire à notre ligne closeBtn.onclick... à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
    6. +
  6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.
    7. +
+ +

Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :

+ +
btn.onclick = displayMessage();
+ +

Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.

+ +

Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.

+ +

Améliorer la fonction à l'aide de paramètres

+ +

En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.

+ +
    +
  1. Premièrement, mettons à jour la première ligne : + 
    function displayMessage() {
    + par : + + 
    function displayMessage(msgText, msgType) {
    + Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
    2. +
  2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : + 
    msg.textContent = 'This is a message box';
    + avec : + + 
    msg.textContent = msgText;
    +
    3. +
  3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : + 
    btn.onclick = displayMessage;
    + par ce bloc : + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.
    4. +
  4. Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !
    5. +
+ +

Un paramètre plus complexe

+ +

Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre msgType, la fonction affichera une icône et une couleur d'arrière-plan différentes.

+ +
    +
  1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML. + +
    +

    Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !

    +
    2. +
  2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur .msgBox en changeant : + 
    width: 200px;
    + par : + + 
    width: 242px;
    +
    3. +
  3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS .msgBox p { ... } : + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    4. +
  4. Maintenant, nous devons ajouter du code à notre fonction displayMessage() pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction : + 
    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';
+}
    + Ici, quand msgType a la valeur 'warning', l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si msgType a la valeur 'chat', l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre msgType n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans else { ... } est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre msgType n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
    5. +
  5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel displayMessage() : + 
    displayMessage('Woo, this is a different message!');
    + par soit l'un ou l'autre : + + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
    6. +
+ +
+

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

+
+ +

Conclusion

+ +

Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.html b/files/fr/learn/javascript/building_blocks/conditionals/index.html deleted file mode 100644 index 5a6a89cc13..0000000000 --- a/files/fr/learn/javascript/building_blocks/conditionals/index.html +++ /dev/null @@ -1,623 +0,0 @@ ---- -title: Prendre des décisions dans le code — conditions -slug: Learn/JavaScript/Building_blocks/conditionals -tags: - - Article - - CodingScripting - - Conditionnel - - Débutant - - JavaScript - - Switch - - conditions - - else - - if - - ternaire -translation_of: Learn/JavaScript/Building_blocks/conditionals -original_slug: Apprendre/JavaScript/Building_blocks/conditionals ---- -

{{LearnSidebar}}

- -

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

- -

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.

- - - - - - - - - - - - -
Prérequis :Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, Premiers pas en JavaScript.
Objectif :Comprendre comment utiliser les structures conditionnelles en JavaScript.
- -

Vous l'aurez à une condition !..

- -

Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)

- -

Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)

- -

- -

Instruction if ... else

- -

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste instruction if ... else.

- -

Syntaxe élémentaire if ... else

- -

La syntaxe élémentaire de if...else ressemble à cela en {{glossary("pseudocode")}}:

- -
if (condition) {
-  code à exécuter si la condition est true
-} else {
-  sinon exécuter cet autre code à la place
-}
- -

Ici nous avons:

- -
    -
  1. Le mot‑clé if suivie de parenthèses.
    2. -
  2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des opérateurs de comparaison que nous avons étudié dans le précédent module, et renverra true ou false.
    3. -
  3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
    4. -
  4. Le mot‑clé else.
    5. -
  5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas true.
    6. -
- -

Ce code est facile à lire pour une personne — il dit « si la condition renvoie true, exécuter le code A, sinon exécuter le code B ».

- -

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

- -
if (condition) {
-  code à exécuter si la condition est true
-}
-
-exécuter un autre code
- -

Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera toujours exécuté, que la condition ait renvoyé true ou false. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code ou l'autre, et non les deux.

- -

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans accolades, de manière abrégée, ainsi :

- -
if (condition) code à exécuter si la condition est true
-else exécute un autre code à la place
- -

Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.

- -

Un exemple concret

- -

Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :

- -
let coursesFaites = false;
-
-if (coursesFaites === true) {
-  let argentDePoche = 10;
-} else {
-  let argentDePoche = 5;
-}
- -

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

- -
-

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

-
- -

else if

- -

Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?

- -

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  const choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('else_if', '100%', 100) }}

- -
    -
  1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
    2. -
  2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <select> de sorte que la fonction setWeather() soit exécutée quand sa valeur change.
    3. -
  3. Quand cette fonction est exécutée, nous commençons par assigner à la variable choice la valeur actuellement sélectionnée dans l'élément <select>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de choice. Remarquez comment toutes les conditions sont testées avec des blocs else if() {...}, mis à part le tout premier testé avec un  bloc if() {...}.
    4. -
  4. Le tout dernier choix, à l'intérieur du bloc else {...}, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est true. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.
    5. -
- -
-

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

-
- -

Une note sur les opérateurs de comparaison

- -

Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre Mathématiques de base en JavaScript — nombres et opérateurs article. Nos choix sont :

- - - -
-

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

-
- -

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide  ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
- Par exemple :

- -
const fromage = 'Comté';
-
-if (fromage) {
-  console.log('Ouaips ! Du fromage pour mettre sur un toast.');
-} else {
-  console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
-}
- -

Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :

- -
let coursesFaites = false;
-
-if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
-  let argentDePoche = 10;
-} else {
-  let argentDePoche = 5;
-}
- -

 if ... else imbriqué

- -

Il est parfaitement correct d'ajouter une déclaration if...else à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :

- -
if (choice === 'sunny') {
-  if (temperature < 86) {
-    para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
-  } else if (temperature >= 86) {
-    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
-  }
-}
- -

Même si tout le code fonctionne ensemble, chaque déclaration if...else fonctionne indépendamment de l'autre.

- -

Opérateurs logiques AND, OR et NOT

- -

Si vous voulez tester plusieurs conditions sans imbriquer des instructions if...else , les opérateurs logiques pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :

- - - -

Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :

- -
if (choice === 'sunny' && temperature < 86) {
-  para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
-}
- -

Ainsi, par exemple, le premier bloc de code ne sera exécuté que si choice === 'sunny' ET temperature < 86 renvoient tous deux true.

- -

Voyons un petit exemple avec OR :

- -
if (camionDeGlaces || etatDeLaMaison === 'on fire') {
-  console.log('Vous devriez sortir de la maison rapidement.');
-} else {
-  console.log('Vous pouvez probablement rester dedans.');
-}
- -

Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur !,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :

- -
if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
-  console.log('Vous pouvez probablement rester dedans.');
-} else {
-  console.log('Vous devriez sortir de la maison rapidement.');
-}
- -

Dans cet extrait, si la déclaration avec OR renvoie true, l'opérateur NOT va nier l'ensemble : l'expression retournera donc false.

- -

Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors true :

- -
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
-  // exécuter le code
-}
- -

Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer true séparées par des || (OR) opérateurs. Par exemple :

- -
if (x === 5 || 7 || 10 || 20) {
-  // exécuter le code
-}
- -

Dans ce cas, la condition dans le if(...) sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours true. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :

- -
if (x === 5 || x === 7 || x === 10 ||x === 20) {
-  // exécuter le code
-}
- -

Instruction switch

- -

Les Instructions if...else  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.

- -

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :

- -
switch (expression) {
-  case choix1:
-    exécuter ce code
-    break;
-
-  case choix2:
-    exécuter ce code à la place
-    break;
-
-  // incorporez autant de case que vous le souhaitez
-
-  default:
-    sinon, exécutez juste ce code
-}
- -

Ici nous avons

- -
    -
  1. Le mot‑clé switch suivi de parenthèses.
    2. -
  2. Une expression ou une valeur mise entre les parenthèses.
    3. -
  3. Le mot‑clé case suivi d'une expression ou d'une valeur, et de deux‑points.
    4. -
  4. Le code exécuté si l'expression/valeur de case correspond à celles de switch.
    5. -
  5. Une déclaration break, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction switch.
    6. -
  6. Vous pouvez rajouter autant de cas que vous le souhaitez. (points 3–5)
    7. -
  7. Le mot‑clé default,  suivi d'une même structure de code qu'aux points 3-5, sauf que default n'a pas de choix après lui et n'a donc pas besoin de l'instruction break  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option default qui sera exécutée si aucun choix ne correspond.
    8. -
- -
-

Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.

-
- -

Un exemple de switch

- -

Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction switch à la place :

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-
-function setWeather() {
-  let choice = select.value;
-
-  switch (choice) {
-    case 'sunny':
-      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-      break;
-    case 'rainy':
-      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-      break;
-    case 'snowing':
-      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-      break;
-    case 'overcast':
-      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-      break;
-    default:
-      para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}

- -
-

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

-
- -

Opérateur ternaire

- -

Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

- -
( condition ) ? exécuter ce code : exécuter celui‑ci à la place
- -

Regardons cet exemple simple :

- -
let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
- -

Ici, nous avons une variable nommée est_anniversaire — si elle est true, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si est_anniversaire renvoie false, nous disons simplement « Bonjour ».

- -

Exemple opérateur ternaire

- -

L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.

- -
<label for="theme">Select theme: </label>
-<select id="theme">
-  <option value="white">White</option>
-  <option value="black">Black</option>
-</select>
-
-<h1>This is my website</h1>
- -
const select = document.querySelector('select');
-const html = document.querySelector('html');
-document.body.style.padding = '10px';
-
-function update(bgColor, textColor) {
-  html.style.backgroundColor = bgColor;
-  html.style.color = textColor;
-}
-
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
-
- -

{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.

- -

Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.

- -
-

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

-
- -

Apprentissage actif : un calendrier simple

- -

Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :

- - - -

Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction onchange, juste au dessous du commentaire // AJOUTER LA CONDITION ICI. Elle doit :

- -
    -
  1. Noter le mois choisi (enregistré dans la variable choice. Ce doit être la valeur de l'élément <select> après un changement, "Janvier" par exemple).
    2. -
  2. Faire en sorte que la variable nommée days soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.
    3. -
- -

Conseils :

- - - -

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".

- - - - - - - -

{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

- -

Activité : plus de choix de couleurs

- -

Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :

- - - -

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».

- - - - - -

{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}

- -

Conclusion

- -

C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.

- -

Voir aussi

- - - -

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md new file mode 100644 index 0000000000..5a6a89cc13 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md @@ -0,0 +1,623 @@ +--- +title: Prendre des décisions dans le code — conditions +slug: Learn/JavaScript/Building_blocks/conditionals +tags: + - Article + - CodingScripting + - Conditionnel + - Débutant + - JavaScript + - Switch + - conditions + - else + - if + - ternaire +translation_of: Learn/JavaScript/Building_blocks/conditionals +original_slug: Apprendre/JavaScript/Building_blocks/conditionals +--- +

{{LearnSidebar}}

+ +

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

+ +

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.

+ + + + + + + + + + + + +
Prérequis :Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, Premiers pas en JavaScript.
Objectif :Comprendre comment utiliser les structures conditionnelles en JavaScript.
+ +

Vous l'aurez à une condition !..

+ +

Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)

+ +

Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)

+ +

+ +

Instruction if ... else

+ +

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste instruction if ... else.

+ +

Syntaxe élémentaire if ... else

+ +

La syntaxe élémentaire de if...else ressemble à cela en {{glossary("pseudocode")}}:

+ +
if (condition) {
+  code à exécuter si la condition est true
+} else {
+  sinon exécuter cet autre code à la place
+}
+ +

Ici nous avons:

+ +
    +
  1. Le mot‑clé if suivie de parenthèses.
    2. +
  2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des opérateurs de comparaison que nous avons étudié dans le précédent module, et renverra true ou false.
    3. +
  3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
    4. +
  4. Le mot‑clé else.
    5. +
  5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas true.
    6. +
+ +

Ce code est facile à lire pour une personne — il dit « si la condition renvoie true, exécuter le code A, sinon exécuter le code B ».

+ +

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

+ +
if (condition) {
+  code à exécuter si la condition est true
+}
+
+exécuter un autre code
+ +

Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera toujours exécuté, que la condition ait renvoyé true ou false. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code ou l'autre, et non les deux.

+ +

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans accolades, de manière abrégée, ainsi :

+ +
if (condition) code à exécuter si la condition est true
+else exécute un autre code à la place
+ +

Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.

+ +

Un exemple concret

+ +

Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :

+ +
let coursesFaites = false;
+
+if (coursesFaites === true) {
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}
+ +

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

+ +
+

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

+
+ +

else if

+ +

Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?

+ +

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('else_if', '100%', 100) }}

+ +
    +
  1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
    2. +
  2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <select> de sorte que la fonction setWeather() soit exécutée quand sa valeur change.
    3. +
  3. Quand cette fonction est exécutée, nous commençons par assigner à la variable choice la valeur actuellement sélectionnée dans l'élément <select>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de choice. Remarquez comment toutes les conditions sont testées avec des blocs else if() {...}, mis à part le tout premier testé avec un  bloc if() {...}.
    4. +
  4. Le tout dernier choix, à l'intérieur du bloc else {...}, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est true. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.
    5. +
+ +
+

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

+
+ +

Une note sur les opérateurs de comparaison

+ +

Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre Mathématiques de base en JavaScript — nombres et opérateurs article. Nos choix sont :

+ + + +
+

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

+
+ +

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide  ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
+ Par exemple :

+ +
const fromage = 'Comté';
+
+if (fromage) {
+  console.log('Ouaips ! Du fromage pour mettre sur un toast.');
+} else {
+  console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
+}
+ +

Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :

+ +
let coursesFaites = false;
+
+if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}
+ +

 if ... else imbriqué

+ +

Il est parfaitement correct d'ajouter une déclaration if...else à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :

+ +
if (choice === 'sunny') {
+  if (temperature < 86) {
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
+  } else if (temperature >= 86) {
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
+  }
+}
+ +

Même si tout le code fonctionne ensemble, chaque déclaration if...else fonctionne indépendamment de l'autre.

+ +

Opérateurs logiques AND, OR et NOT

+ +

Si vous voulez tester plusieurs conditions sans imbriquer des instructions if...else , les opérateurs logiques pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :

+ + + +

Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :

+ +
if (choice === 'sunny' && temperature < 86) {
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
+} else if (choice === 'sunny' && temperature >= 86) {
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
+}
+ +

Ainsi, par exemple, le premier bloc de code ne sera exécuté que si choice === 'sunny' ET temperature < 86 renvoient tous deux true.

+ +

Voyons un petit exemple avec OR :

+ +
if (camionDeGlaces || etatDeLaMaison === 'on fire') {
+  console.log('Vous devriez sortir de la maison rapidement.');
+} else {
+  console.log('Vous pouvez probablement rester dedans.');
+}
+ +

Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur !,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :

+ +
if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
+  console.log('Vous pouvez probablement rester dedans.');
+} else {
+  console.log('Vous devriez sortir de la maison rapidement.');
+}
+ +

Dans cet extrait, si la déclaration avec OR renvoie true, l'opérateur NOT va nier l'ensemble : l'expression retournera donc false.

+ +

Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors true :

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // exécuter le code
+}
+ +

Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer true séparées par des || (OR) opérateurs. Par exemple :

+ +
if (x === 5 || 7 || 10 || 20) {
+  // exécuter le code
+}
+ +

Dans ce cas, la condition dans le if(...) sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours true. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // exécuter le code
+}
+ +

Instruction switch

+ +

Les Instructions if...else  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.

+ +

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :

+ +
switch (expression) {
+  case choix1:
+    exécuter ce code
+    break;
+
+  case choix2:
+    exécuter ce code à la place
+    break;
+
+  // incorporez autant de case que vous le souhaitez
+
+  default:
+    sinon, exécutez juste ce code
+}
+ +

Ici nous avons

+ +
    +
  1. Le mot‑clé switch suivi de parenthèses.
    2. +
  2. Une expression ou une valeur mise entre les parenthèses.
    3. +
  3. Le mot‑clé case suivi d'une expression ou d'une valeur, et de deux‑points.
    4. +
  4. Le code exécuté si l'expression/valeur de case correspond à celles de switch.
    5. +
  5. Une déclaration break, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction switch.
    6. +
  6. Vous pouvez rajouter autant de cas que vous le souhaitez. (points 3–5)
    7. +
  7. Le mot‑clé default,  suivi d'une même structure de code qu'aux points 3-5, sauf que default n'a pas de choix après lui et n'a donc pas besoin de l'instruction break  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option default qui sera exécutée si aucun choix ne correspond.
    8. +
+ +
+

Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.

+
+ +

Un exemple de switch

+ +

Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction switch à la place :

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  let choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}

+ +
+

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

+
+ +

Opérateur ternaire

+ +

Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

+ +
( condition ) ? exécuter ce code : exécuter celui‑ci à la place
+ +

Regardons cet exemple simple :

+ +
let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
+ +

Ici, nous avons une variable nommée est_anniversaire — si elle est true, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si est_anniversaire renvoie false, nous disons simplement « Bonjour ».

+ +

Exemple opérateur ternaire

+ +

L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
const select = document.querySelector('select');
+const html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.

+ +

Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.

+ +
+

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

+
+ +

Apprentissage actif : un calendrier simple

+ +

Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :

+ + + +

Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction onchange, juste au dessous du commentaire // AJOUTER LA CONDITION ICI. Elle doit :

+ +
    +
  1. Noter le mois choisi (enregistré dans la variable choice. Ce doit être la valeur de l'élément <select> après un changement, "Janvier" par exemple).
    2. +
  2. Faire en sorte que la variable nommée days soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.
    3. +
+ +

Conseils :

+ + + +

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".

+ + + + + + + +

{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

Activité : plus de choix de couleurs

+ +

Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :

+ + + +

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».

+ + + + + +

{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}

+ +

Conclusion

+ +

C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.

+ +

Voir aussi

+ + + +

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/events/index.html b/files/fr/learn/javascript/building_blocks/events/index.html deleted file mode 100644 index b8bd4ba3d6..0000000000 --- a/files/fr/learn/javascript/building_blocks/events/index.html +++ /dev/null @@ -1,568 +0,0 @@ ---- -title: Introduction aux évènements -slug: Learn/JavaScript/Building_blocks/Events -translation_of: Learn/JavaScript/Building_blocks/Events -original_slug: Apprendre/JavaScript/Building_blocks/Evènements ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
- -

Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
Objectif:Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.
- -

Une série d'événements heureux

- -

Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.

- -

- -

Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :

- - - -

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
-
- Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.

- -
-

Note : il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur

-
- -

Un exemple simple

- -

Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:

- -
<button>Change color</button>
- - - -

Le JavaScript ressemblera à ça :

- -
var btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random()*(number+1));
-}
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

 

- -

Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable btn pointe sur un élément <button> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété onclick   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <body> .
-
- Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <button>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.

- -

Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur ce lien.

- -

 

- -

Ce ne sont pas que des pages web

- -

Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.

- -

Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.

- -

Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.

- -

Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.

- -

De quelle manière utiliser les événements Web ?

- -

Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.

- -

Les propriétés du gestionnaire d'événement

- -

Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :

- -
var btn = document.querySelector('button');
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.

- -

Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;
- -

De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.

- -

Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:

- - - -

Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).

- -

Les gestionnaires d'événements en ligne : ne les utilisez pas !

- -

Vous pourriez également voir un motif comme celui-ci dans votre code:

- -
<button onclick="bgChange()">Press me</button>
-
- -
function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -
-

Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

-
- -

La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :

- -
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
- -

Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
-
- Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

- -

Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}
- -
-

Note : Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

-
- -

addEventListener() et removeEventListener()

- -

Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:

- -
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 : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

-
- -

Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction addEventListener(), dans une fonction anonyme, comme ceci:

- -
btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});
- -

Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:

- -
btn.removeEventListener('click', bgChange);
- -

Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
-
- D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:

- -
myElement.onclick = functionA;
-myElement.onclick = functionB;
- -

Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:

- -
myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
- -

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
-
- En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  addEventListener() et removeEventListener().

- -

Quel mécanisme devrais-je utiliser ?

- -

Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
-
- Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
-  

- - - -

Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:

- -
element.onclick = function1;
-element.onclick = function2;
-etc.
- -
-

Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.

-
- -

D'autres concepts liés aux événements

- -

Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.

- -

L'objet événement

- -

Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:

- -
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 : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

-
- -

Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.

- -
-

Note : Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

-
- -

e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:

- -
var divs = document.querySelectorAll('div');
-
-for (var i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}
- -

Résultat

- -

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

- - - -

{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.

- -

Éviter le comportement par défaut

- -

Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
-
- Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
-
- Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

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

Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :

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

Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :

- -

{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note : pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

-
- -

Le bouillonnement et la capture

- -

Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.

- - - -

{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

- -

Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:

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

Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :

- -
btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
- -

Nous ajoutons ensuite quelques gestionnaires d'événements onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.

- -
videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};
- -

Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.

- -

Explication du bouillonnement et de la capture

- -

Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
-
- Dans la phase de capture:

- - - -

Dans la phase de bouillonnement, l'opposé exact se produit:
-
-      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
-      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.

- -

- -

(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)

- -

Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :

- - - -

Régler le problème avec stopPropagation()

- -

C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
-
- Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:

- -
video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};
- -

Vous pouvez faire une copie locale du code source show-video-box.html et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).

- -
-

Note : Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.

-
- -
-

Note : Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

-
- -

Délégation d'événement

- -

Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
-
- Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.

- -

Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.

- -

Conclusion

- -

Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
-
- En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.

- -

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md new file mode 100644 index 0000000000..b8bd4ba3d6 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/events/index.md @@ -0,0 +1,568 @@ +--- +title: Introduction aux évènements +slug: Learn/JavaScript/Building_blocks/Events +translation_of: Learn/JavaScript/Building_blocks/Events +original_slug: Apprendre/JavaScript/Building_blocks/Evènements +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
Objectif:Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.
+ +

Une série d'événements heureux

+ +

Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.

+ +

+ +

Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :

+ + + +

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
+
+ Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.

+ +
+

Note : il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur

+
+ +

Un exemple simple

+ +

Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:

+ +
<button>Change color</button>
+ + + +

Le JavaScript ressemblera à ça :

+ +
var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

 

+ +

Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable btn pointe sur un élément <button> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété onclick   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <body> .
+
+ Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <button>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.

+ +

Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur ce lien.

+ +

 

+ +

Ce ne sont pas que des pages web

+ +

Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.

+ +

Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.

+ +

Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.

+ +

Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.

+ +

De quelle manière utiliser les événements Web ?

+ +

Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.

+ +

Les propriétés du gestionnaire d'événement

+ +

Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :

+ +
var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.

+ +

Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.

+ +

Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:

+ + + +

Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).

+ +

Les gestionnaires d'événements en ligne : ne les utilisez pas !

+ +

Vous pourriez également voir un motif comme celui-ci dans votre code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
+
+ Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

+ +

Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +
+

Note : Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

+
+ +

addEventListener() et removeEventListener()

+ +

Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:

+ +
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 : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction addEventListener(), dans une fonction anonyme, comme ceci:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:

+ +
btn.removeEventListener('click', bgChange);
+ +

Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
+
+ D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
+
+ En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  addEventListener() et removeEventListener().

+ +

Quel mécanisme devrais-je utiliser ?

+ +

Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
+
+ Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
+  

+ + + +

Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.

+
+ +

D'autres concepts liés aux événements

+ +

Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.

+ +

L'objet événement

+ +

Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:

+ +
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 : Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.

+ +
+

Note : Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

+
+ +

e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

Résultat

+ +

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

+ + + +

{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.

+ +

Éviter le comportement par défaut

+ +

Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
+
+ Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
+
+ Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

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

Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :

+ +
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!';
+  }
+}
+ +

Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :

+ +

{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note : pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

+
+ +

Le bouillonnement et la capture

+ +

Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.

+ + + +

{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:

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

Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

Nous ajoutons ensuite quelques gestionnaires d'événements onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.

+ +

Explication du bouillonnement et de la capture

+ +

Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
+
+ Dans la phase de capture:

+ + + +

Dans la phase de bouillonnement, l'opposé exact se produit:
+
+      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
+      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.

+ +

+ +

(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)

+ +

Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :

+ + + +

Régler le problème avec stopPropagation()

+ +

C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
+
+ Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

Vous pouvez faire une copie locale du code source show-video-box.html et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).

+ +
+

Note : Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.

+
+ +
+

Note : Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

+
+ +

Délégation d'événement

+ +

Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
+
+ Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.

+ +

Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.

+ +

Conclusion

+ +

Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
+
+ En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.

+ +

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.html b/files/fr/learn/javascript/building_blocks/functions/index.html deleted file mode 100644 index eb804d4dcf..0000000000 --- a/files/fr/learn/javascript/building_blocks/functions/index.html +++ /dev/null @@ -1,393 +0,0 @@ ---- -title: Fonctions — des blocs de code réutilisables -slug: Learn/JavaScript/Building_blocks/Functions -translation_of: Learn/JavaScript/Building_blocks/Functions -original_slug: Apprendre/JavaScript/Building_blocks/Fonctions ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
- -

Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.

- - - - - - - - - - - - -
Prerequis:Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif:Comprendre les concepts fondamentaux des fonctions JavaScript.
- -

Où trouve-t'on des fonctions ?

- -

En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.

- -

Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.

- -

Les fonctions intégrées du navigateur

- -

Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
-console.log(newString);
-// La fonction replace () sélectionne une chaîne,
-// remplace une sous-chaîne par une autre, et renvoie
-// la nouvelle chaîne avec les modifications effectuées.
- -

Ou à chaque fois que nous avons manipulé un tableau :

- -
var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-console.log(madeAString);
-// La fonction join() sélectionne un tableau, rassemble
-// tous les éléments du tableau dans une chaîne,
-// et renvoie cette nouvelle chaîne.
- -

Ou à chaque fois que nous avons généré un nombre aléatoire :

- -
var myNumber = Math.random();
-// la fonction random() génère un nombre aléatoire
-// entre 0 et 1, et renvoie
-// ce nombre
- -

... nous avons utilisé une fonction !

- -
-

Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.

-
- -

Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand invoquez (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.

- -

Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.

- -

Fonctions versus méthodes

- -

Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des méthodes. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.

- -

La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle propriétés) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.

- -

Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. 

- -

Fonctions personnalisées

- -

Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :

- -
function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  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();
-  }
-}
- -

Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :

- -
draw();
- -

au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction random() trois fois, comme définie par le code suivant :

- -
function random(number) {
-  return Math.floor(Math.random()*number);
-}
- -

Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.

- -

Invoquer des fonctions

- -

Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.

- -
function myFunction() {
-  alert('hello');
-}
-
-myFunction()
-// appelle la fonction une fois
- -

Fonctions anonymes

- -

Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :

- -
function myFunction() {
-  alert('hello');
-}
- -

Mais vous pouvez également créer une fonction qui n'a pas de nom :

- -
function() {
-  alert('hello');
-}
- -

Ceci est une fonction anonyme — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :

- -
var myButton = document.querySelector('button');
-
-myButton.onclick = function() {
-  alert('hello');
-}
- -

Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.

- -

Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :

- -
var myGreeting = function() {
-  alert('hello');
-}
- -

Cette fonction peut désormais être invoquée en utilisant :

- -
myGreeting();
- -

Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :

- -
var anotherGreeting = function() {
-  alert('hello');
-}
- -

Cette fonction peut désormais être invoquée en utilisant au choix :

- -
myGreeting();
-anotherGreeting();
- -

Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :

- -
function myGreeting() {
-  alert('hello');
-}
- -

Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :

- -
myButton.onclick = function() {
-  alert('hello');
-  // Je peux mettre ici autant
-  // de code que je le souhaite
-}
- -

Paramètres des fonctions

- -

Certaines fonctions nécessitent que l'on définisse des paramètres lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.

- -
-

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

-
- -

Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 

- -
var myNumber = Math.random();
- -

La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
- -
-

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

-
- -

Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :

- -
var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-// renvoie 'I love chocolate frogs'
-var madeAString = myArray.join();
-// renvoie 'I,love,chocolate,frogs'
- -

Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.

- -

La portée des fonctions et les conflits.

- -

Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre portée, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.

- -

Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.

- -

Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.

- -

Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :

- -
<!-- Excerpt from my HTML -->
-<script src="first.js"></script>
-<script src="second.js"></script>
-<script>
-  greeting();
-</script>
- -
// first.js
-var name = 'Chris';
-function greeting() {
-  alert('Hello ' + name + ': welcome to our company.');
-}
- -
// second.js
-var name = 'Zaptec';
-function greeting() {
-  alert('Our company is called ' + name + '.');
-}
- -

Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.

- -
-

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

-
- -

En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.

- -

C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !

- -

- -

Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.

- -

Apprentissage actif : Jouer avec la portée

- -

Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.

- -
    -
  1. Tout d'abord, faisons un copie locale de notre exemple function-scope.html. Celui-ci contient deux fonctions appelées a() et b(), et trois variables — x, y, and z — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée output(), qui prend un seul paramètre et le renvoie dans un paragraphe de la page.
    2. -
  2. Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.
    3. -
  3. Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : - 
    output(x);
    - Vous devriez voir la valeur de la variable x renvoyée à l'écran.
    4. -
  4. Maintenant essayez d'entrer les commandes suivantes : - 
    output(y);
-output(z);
    - -

    Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.

    -
    5. -
  5. -

    Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :

    - - 
    function a() {
-  var y = 2;
-  output(y);
-}
-
-function b() {
-  var z = 3;
-  output(z);
-}
    - Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript : - - 
    a();
-b();
    - Vous devriez voir les valeurs y and z renvoyées sur la page. Cela fonctionne très bien car la fonction output() est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction output() est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.
    6. -
  6. Maintenant essayer de mettre à jour le code comme ceci : - 
    function a() {
-  var y = 2;
-  output(x);
-}
-
-function b() {
-  var z = 3;
-  output(x);
-}
    - Sauvegardez et rechargez à nouveau dans la console JavaScript :
    7. -
  7. - 
    a();
-b();
    - Les deux fonctions a() et b() appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction output() n'est pas dans la même portée que celle dans laquelle  x est définie, x est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
    8. -
  8. Pour finir, essayez de mettre à jour le code comme ceci : - 
    function a() {
-  var y = 2;
-  output(z);
-}
-
-function b() {
-  var z = 3;
-  output(y);
-}
    -
    9. -
  9. Sauvegardez et rechargez à nouveau dans la console JavaScript : - 
    a();
-b();
    - Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
    10. -
- -
-

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

-
- -
-

Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.

-
- -

Des fonctions à l'intérieur de fonctions

- -

Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :

- -
function myBigFunction() {
-  var myValue;
-
-  subFunction1();
-  subFunction2();
-  subFunction3();
-}
-
-function subFunction1() {
-  console.log(myValue);
-}
-
-function subFunction2() {
-  console.log(myValue);
-}
-
-function subFunction3() {
-  console.log(myValue);
-}
-
- -

Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :

- -
function myBigFunction() {
-  var myValue = 1;
-
-  subFunction1(myValue);
-  subFunction2(myValue);
-  subFunction3(myValue);
-}
-
-function subFunction1(value) {
-  console.log(value);
-}
-
-function subFunction2(value) {
-  console.log(value);
-}
-
-function subFunction3(value) {
-  console.log(value);
-}
- -

Conclusion

- -

Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.

- -

Voir aussi

- - - - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md new file mode 100644 index 0000000000..eb804d4dcf --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/functions/index.md @@ -0,0 +1,393 @@ +--- +title: Fonctions — des blocs de code réutilisables +slug: Learn/JavaScript/Building_blocks/Functions +translation_of: Learn/JavaScript/Building_blocks/Functions +original_slug: Apprendre/JavaScript/Building_blocks/Fonctions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+ +

Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.

+ + + + + + + + + + + + +
Prerequis:Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif:Comprendre les concepts fondamentaux des fonctions JavaScript.
+ +

Où trouve-t'on des fonctions ?

+ +

En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.

+ +

Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.

+ +

Les fonctions intégrées du navigateur

+ +

Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// La fonction replace () sélectionne une chaîne,
+// remplace une sous-chaîne par une autre, et renvoie
+// la nouvelle chaîne avec les modifications effectuées.
+ +

Ou à chaque fois que nous avons manipulé un tableau :

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// La fonction join() sélectionne un tableau, rassemble
+// tous les éléments du tableau dans une chaîne,
+// et renvoie cette nouvelle chaîne.
+ +

Ou à chaque fois que nous avons généré un nombre aléatoire :

+ +
var myNumber = Math.random();
+// la fonction random() génère un nombre aléatoire
+// entre 0 et 1, et renvoie
+// ce nombre
+ +

... nous avons utilisé une fonction !

+ +
+

Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.

+
+ +

Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand invoquez (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.

+ +

Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.

+ +

Fonctions versus méthodes

+ +

Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des méthodes. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.

+ +

La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle propriétés) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.

+ +

Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. 

+ +

Fonctions personnalisées

+ +

Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  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();
+  }
+}
+ +

Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :

+ +
draw();
+ +

au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction random() trois fois, comme définie par le code suivant :

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.

+ +

Invoquer des fonctions

+ +

Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.

+ +
function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// appelle la fonction une fois
+ +

Fonctions anonymes

+ +

Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :

+ +
function myFunction() {
+  alert('hello');
+}
+ +

Mais vous pouvez également créer une fonction qui n'a pas de nom :

+ +
function() {
+  alert('hello');
+}
+ +

Ceci est une fonction anonyme — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :

+ +
var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}
+ +

Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.

+ +

Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :

+ +
var myGreeting = function() {
+  alert('hello');
+}
+ +

Cette fonction peut désormais être invoquée en utilisant :

+ +
myGreeting();
+ +

Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :

+ +
var anotherGreeting = function() {
+  alert('hello');
+}
+ +

Cette fonction peut désormais être invoquée en utilisant au choix :

+ +
myGreeting();
+anotherGreeting();
+ +

Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :

+ +
function myGreeting() {
+  alert('hello');
+}
+ +

Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :

+ +
myButton.onclick = function() {
+  alert('hello');
+  // Je peux mettre ici autant
+  // de code que je le souhaite
+}
+ +

Paramètres des fonctions

+ +

Certaines fonctions nécessitent que l'on définisse des paramètres lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.

+ +
+

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

+
+ +

Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 

+ +
var myNumber = Math.random();
+ +

La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+ +
+

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

+
+ +

Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// renvoie 'I love chocolate frogs'
+var madeAString = myArray.join();
+// renvoie 'I,love,chocolate,frogs'
+ +

Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.

+ +

La portée des fonctions et les conflits.

+ +

Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre portée, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.

+ +

Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.

+ +

Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.

+ +

Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :

+ +
<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
+  greeting();
+</script>
+ +
// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}
+ +
// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}
+ +

Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.

+ +
+

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

+
+ +

En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.

+ +

C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !

+ +

+ +

Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.

+ +

Apprentissage actif : Jouer avec la portée

+ +

Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.

+ +
    +
  1. Tout d'abord, faisons un copie locale de notre exemple function-scope.html. Celui-ci contient deux fonctions appelées a() et b(), et trois variables — x, y, and z — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée output(), qui prend un seul paramètre et le renvoie dans un paragraphe de la page.
    2. +
  2. Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.
    3. +
  3. Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : + 
    output(x);
    + Vous devriez voir la valeur de la variable x renvoyée à l'écran.
    4. +
  4. Maintenant essayez d'entrer les commandes suivantes : + 
    output(y);
+output(z);
    + +

    Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.

    +
    5. +
  5. +

    Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :

    + + 
    function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}
    + Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript : + + 
    a();
+b();
    + Vous devriez voir les valeurs y and z renvoyées sur la page. Cela fonctionne très bien car la fonction output() est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction output() est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.
    6. +
  6. Maintenant essayer de mettre à jour le code comme ceci : + 
    function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}
    + Sauvegardez et rechargez à nouveau dans la console JavaScript :
    7. +
  7. + 
    a();
+b();
    + Les deux fonctions a() et b() appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction output() n'est pas dans la même portée que celle dans laquelle  x est définie, x est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
    8. +
  8. Pour finir, essayez de mettre à jour le code comme ceci : + 
    function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}
    +
    9. +
  9. Sauvegardez et rechargez à nouveau dans la console JavaScript : + 
    a();
+b();
    + Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
    10. +
+ +
+

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

+
+ +
+

Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.

+
+ +

Des fonctions à l'intérieur de fonctions

+ +

Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :

+ +
function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+
+ +

Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :

+ +
function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}
+ +

Conclusion

+ +

Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.

+ +

Voir aussi

+ + + + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.html b/files/fr/learn/javascript/building_blocks/image_gallery/index.html deleted file mode 100644 index bc09ea1194..0000000000 --- a/files/fr/learn/javascript/building_blocks/image_gallery/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Galerie d'images -slug: Learn/JavaScript/Building_blocks/Image_gallery -tags: - - Apprendre - - Boucles - - Débutant - - Evaluation - - Gestionnaire d'événement - - JavaScript - - conditions - - l10n:priority - - Écriture de code - - évènements -translation_of: Learn/JavaScript/Building_blocks/Image_gallery -original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.

- - - - - - - - - - - - -
Conditions préalables:Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. 
Objectif:Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.
- -

Point de départ

- -

Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.

- -

Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.

- -
-

Note : Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

-
- -

Résumé du projet

- -

Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:

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

L'exemple ressemble à ceci:

- -

- - -

Les parties les plus intéressantes du fichier CSS de l'exemple:

- - - -

Votre JavaScript doit:

- - - -

Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).

- -

Les différentes étapes

- -

Les sections suivantes décrivent ce que vous avez à faire.

- -

Itération sur les images

- -

Nous vous avons fourni des lignes qui storent une référence à thumb-bar <div> dans une variable nommée thumbBar, créent un nouvel élément <img>, définissent son attribut src à un emplacement de valueur xxx, et ajoutent ce nouvel élément <img> dans thumbBar.

- -

Vous avez besoin de:

- -
    -
  1. Ajouter votre code en-dessous du commentaire Looping through images à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.
    2. -
  2. Remplacez, pour chaque itération,  la valeur xxx de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut src dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est pic1.jpg, pic2.jpg, etc.
    3. -
- -

Ajout d'un gestionnaire onclick à chaque miniature

- -

À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:

- -
    -
  1. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
    2. -
  2. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
    3. -
  3. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
    4. -
- -

Écrire le gestionnaire du bouton d'assombrissement

- -

Il ne reste que notre <button> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <button> dans une variable appelée btn. Vous devez ajouter un gestionnaire onclick qui:

- -
    -
  1. Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
    2. -
  2. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
    3. -
  3. Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
    4. -
- -

Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.

- -
btn.setAttribute('class', xxx);
-btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;
- -

Conseil

- - - -

Évaluation ou aide supplémentaire

- -

Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :

- -
    -
  1. Mettez votre travail dans un éditeur partageable en ligne tel que CodePen, jsFiddle, ou Glitch.
    2. -
  2. Rédiger un sujet pour demander une évaluation et/ou une aide à le forum Discourse du MDN. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : -
      -
    • Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".
      • -
    • Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.
      • -
    • Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.
      • -
    • Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.
      • -
    -
    3. -
- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant sur le fil de discussion de cet exercice, ou sur #mdn du canal IRC de Mozilla IRC. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!

- -

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md new file mode 100644 index 0000000000..bc09ea1194 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md @@ -0,0 +1,162 @@ +--- +title: Galerie d'images +slug: Learn/JavaScript/Building_blocks/Image_gallery +tags: + - Apprendre + - Boucles + - Débutant + - Evaluation + - Gestionnaire d'événement + - JavaScript + - conditions + - l10n:priority + - Écriture de code + - évènements +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.

+ + + + + + + + + + + + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. 
Objectif:Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.
+ +

Point de départ

+ +

Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.

+ +

Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.

+ +
+

Note : Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

+
+ +

Résumé du projet

+ +

Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:

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

L'exemple ressemble à ceci:

+ +

+ + +

Les parties les plus intéressantes du fichier CSS de l'exemple:

+ + + +

Votre JavaScript doit:

+ + + +

Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).

+ +

Les différentes étapes

+ +

Les sections suivantes décrivent ce que vous avez à faire.

+ +

Itération sur les images

+ +

Nous vous avons fourni des lignes qui storent une référence à thumb-bar <div> dans une variable nommée thumbBar, créent un nouvel élément <img>, définissent son attribut src à un emplacement de valueur xxx, et ajoutent ce nouvel élément <img> dans thumbBar.

+ +

Vous avez besoin de:

+ +
    +
  1. Ajouter votre code en-dessous du commentaire Looping through images à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.
    2. +
  2. Remplacez, pour chaque itération,  la valeur xxx de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut src dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est pic1.jpg, pic2.jpg, etc.
    3. +
+ +

Ajout d'un gestionnaire onclick à chaque miniature

+ +

À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:

+ +
    +
  1. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
    2. +
  2. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
    3. +
  3. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
    4. +
+ +

Écrire le gestionnaire du bouton d'assombrissement

+ +

Il ne reste que notre <button> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <button> dans une variable appelée btn. Vous devez ajouter un gestionnaire onclick qui:

+ +
    +
  1. Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
    2. +
  2. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
    3. +
  3. Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
    4. +
+ +

Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

Conseil

+ + + +

Évaluation ou aide supplémentaire

+ +

Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :

+ +
    +
  1. Mettez votre travail dans un éditeur partageable en ligne tel que CodePen, jsFiddle, ou Glitch.
    2. +
  2. Rédiger un sujet pour demander une évaluation et/ou une aide à le forum Discourse du MDN. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : +
      +
    • Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".
      • +
    • Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.
      • +
    • Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.
      • +
    • Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.
      • +
    +
    3. +
+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant sur le fil de discussion de cet exercice, ou sur #mdn du canal IRC de Mozilla IRC. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!

+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/index.html b/files/fr/learn/javascript/building_blocks/index.html deleted file mode 100644 index f93cdfbd85..0000000000 --- a/files/fr/learn/javascript/building_blocks/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Principaux blocs en JS -slug: Learn/JavaScript/Building_blocks -tags: - - Auto-évaluation - - Boucles - - Débutant - - Fonctions - - Guide - - Modules - - conditions - - évènements -translation_of: Learn/JavaScript/Building_blocks -original_slug: Apprendre/JavaScript/Building_blocks ---- -
{{JsSidebar}}
- -
{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
- -

Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.

- -

Prérequis

- -

Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.

- -
-

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .

-
- -

Guides

- -
-
Prendre des décisions dans votre code — les conditions
-
Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
-
Les boucles
-
Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
-
Les fonctions — réutiliser des blocs de code
-
Un autre concept essentiel en programmation est celui de fonctions. Les fonctions permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
-
Créez votre propre fonction
-
L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
-
Les valeurs de retour des fonctions
-
Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
-
Introduction aux événements
-
Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.
-
- -

Auto-évaluation

- -

L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.

- -
-
Galerie de photos
-
Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.
-
- -

{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  

diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md new file mode 100644 index 0000000000..f93cdfbd85 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/index.md @@ -0,0 +1,56 @@ +--- +title: Principaux blocs en JS +slug: Learn/JavaScript/Building_blocks +tags: + - Auto-évaluation + - Boucles + - Débutant + - Fonctions + - Guide + - Modules + - conditions + - évènements +translation_of: Learn/JavaScript/Building_blocks +original_slug: Apprendre/JavaScript/Building_blocks +--- +
{{JsSidebar}}
+ +
{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
+ +

Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.

+ +
+

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .

+
+ +

Guides

+ +
+
Prendre des décisions dans votre code — les conditions
+
Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
+
Les boucles
+
Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
+
Les fonctions — réutiliser des blocs de code
+
Un autre concept essentiel en programmation est celui de fonctions. Les fonctions permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
+
Créez votre propre fonction
+
L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
+
Les valeurs de retour des fonctions
+
Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
+
Introduction aux événements
+
Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.
+
+ +

Auto-évaluation

+ +

L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.

+ +
+
Galerie de photos
+
Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.
+
+ +

{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.html b/files/fr/learn/javascript/building_blocks/looping_code/index.html deleted file mode 100644 index fcd352b560..0000000000 --- a/files/fr/learn/javascript/building_blocks/looping_code/index.html +++ /dev/null @@ -1,856 +0,0 @@ ---- -title: Les boucles dans le code -slug: Learn/JavaScript/Building_blocks/Looping_code -tags: - - Article - - CodingScripting - - DO - - Débutant - - Guide - - JavaScript - - Learn - - Loop - - break - - continue - - for - - l10n:priority - - while -translation_of: Learn/JavaScript/Building_blocks/Looping_code -original_slug: Apprendre/JavaScript/Building_blocks/Looping_code ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
- -

Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.

- - - - - - - - - - - - -
Prérequis :Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif :Comprendre comment utiliser les boucles dans JavaScript.
- -

Laissez-moi dans la boucle

- -

Boucles, boucles, boucles. Alors qu'elles sont associées aux cheveux d'une célèbre héroïne de fiction, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par itérer en langage de programmeur.

- -

Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :

- -


-

- -

Une boucle a normalement un ou plusieurs des composants suivants :

- - - -

En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :

- -
loop(nourriture = 0; besoinNourriture = 10) {
-  if (nourriture = besoinNourriture) {
-    exit loop;
-    // Nous avons assez de nourriture, on rentre
-  } else {
-    nourriture += 2; // On doit rester 1 heure de plus
-    // La boucle se répète ensuite
-  }
-}
- -

La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.

- -

À quoi ça sert ?

- -

Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, les boucles ne font rien d'autre que répéter la même action encore et encore, ce qui peut s'avérer utile pour effectuer rapidement des tâches répétitives.

- -

Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !

- -

Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).

- -

Exemple

- - - -

{{ EmbedLiveSample('Exemple', '100%', 400) }}

- -

Principe de boucle

- -

Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :

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

Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.

- -

Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :

- -
ctx.beginPath();
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-ctx.fill();
- -

Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.

- -

La boucle standard

- -

Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

- -
for (initialisation; condition de sortie; expression finale) {
-  // code à exécuter
-}
- -

Nous avons ici :

- -
    -
  1. Le mot-clé for, suivi par des parenthèses.
    2. -
  2. A l'intérieur des parenthèses, on a trois objets : -
      -
    1. Une initialisation — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer compteur.
      2. -
    2. Une condition de sortie — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.
      3. -
    3. Une expression finale — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.
      4. -
    -
    3. -
  3. Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.
    4. -
- -

Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.

- -
const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-let info = "Mes chat s'appellent ";
-const paragraphe = document.querySelector('p');
-
-for (let i = 0; i < chats.length; i++) {
-  info += chats[i] + ', ';
-}
-
-paragraphe.textContent = info;
- -

Sortie

- -

Cela nous donne la sortie suivante :

- - - -

{{ EmbedLiveSample('Sortie', '100%', 60) }}

- -
-

Note : Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

-
- -

Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :

- -
    -
  1. L'itérateur, i, commence à 0 (let i = 0).
    2. -
  2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que i < chats.length est vrai, la boucle continuera à s'exécuter.
    3. -
  3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (cats[i] est cats[quelque soit la valeur de i lors de l'iteration]) avec une virgule et un espace, à la fin de la variable info. Donc : -
      -
    1. Pendant le premier lancement, i = 0, donc cats[0] + ', ' sera concaténé à ("Bill, ")
      2. -
    2. Au second lancement, i = 1, donc cats[1] + ', ' et sera concaténé à  ("Jeff, ")
      3. -
    3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à i (i++), et alors le processus recommence encore.
      4. -
    -
    4. -
  4. Quand i devient égal à cats.length, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
    5. -
- -
-

Note : Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

-
- -
-

Note : Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.

-
- -

Un petit problème est que nous avons laissé la phrase de sortie mal formée :

- -
-

Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,

-
- -

Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :

- -
for (let i = 0; i < cats.length; i++) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-}
- -
-

Note : Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

-
- -
-

Attention : Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

-
- -

Quitter une boucle avec break

- -

Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.

- -

C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.

- -

Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :

- -
<label for="search">Search by contact name: </label>
-<input id="search" type="text">
-<button>Search</button>
-
-<p></p>
- -

Maintenant sur le JavaScript :

- -
const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-const paragraphe = document.querySelector('p');
-const input = document.querySelector('input');
-const bouton = document.querySelector('button');
-
-bouton.addEventListener('click', function() {
-  let searchName = input.value;
-  input.value = '';
-  input.focus();
-  for (let i = 0; i < contacts.length; i++) {
-    let splitContact = contacts[i].split(':');
-    if (splitContact[0] === searchName) {
-      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
-      break;
-    } else {
-      paragraphe.textContent = 'Contact not found.';
-    }
-  }
-});
- -

Résultat

- - -

{{ EmbedLiveSample('Résultat', '100%', 100) }}

- -
    -
  1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
    2. -
  2. Ensuite, nous attachons un écouteur d'événement au bouton (bouton), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
    3. -
  3. Nous stockons la valeur saisie dans l'input dans une variable appelée searchName, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
    4. -
  4. Maintenant sur la partie intéressante, la boucle for : -
      -
    1. Nous commençons le compteur à 0, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à contacts.length, et incrémentons i par 1 après chaque itération de la boucle.
      2. -
    2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (contacts[i]) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé splitContact.
      3. -
    3. Nous utilisons ensuite une instruction conditionnelle pour tester si splitContact[0] (le nom du contact) est égal au searchName entré. Si c'est le cas, nous introduisons une string / chaîne de caractère dans le paragraphe pour indiquer quel est le numéro du contact et utiliser break pour terminer la boucle.
      4. -
    -
    5. -
  5. Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
    6. -
- -
-

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

-
- -

Passer des itérations avec continue

- -

L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).

- -

Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :

- -
let num = input.value;
-
-for (let i = 1; i <= num; i++) {
-  let sqRoot = Math.sqrt(i);
-  if (Math.floor(sqRoot) !== sqRoot) {
-    continue;
-  }
-
-  paragraphe.textContent += i + ' ';
-}
- -

Ici la sortie :

- - - -

{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}

- -
    -
  1. Dans ce cas, l'entrée doit être un nombre (num). La boucle for est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée num, et un itérateur ajoutera 1 au compteur à chaque fois.
    2. -
  2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
    3. -
  3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
    4. -
  4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.
    5. -
- -
-

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

-
- -

while et do ... while

- -

for n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.

- -

D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:

- -
initializer
-while (exit-condition) {
-  // code to run
-
-  final-expression
-}
- -

Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé while au lieu de for.

- -

Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.

- -

Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:

- -
let i = 0;
-
-while (i < cats.length) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-}
- -
-

Note : Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

-
- -

La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

- -
initializer
-do {
-  // code to run
-
-  final-expression
-} while (exit-condition)
- -

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

- -

Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé while. Dans une boucle do ... while, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).

- -

Réécrivons notre exemple de listing de chat pour utiliser une boucle do ... while :

- -
let i = 0;
-
-do {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-} while (i < cats.length);
- -
-

Note : Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

-
- -
-

Attention : Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

-
- -

Apprentissage actif : Lancer le compte à rebours

- -

Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :

- - - -

Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

- - - - - -

{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}

- -

Apprentissage actif : remplir une liste d'invités.

- -

Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.

- -

Plus précisément, nous attendons de vous :

- - - -

Nous vous avons déjà fourni les éléments suivants :

- - - -

Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

- -

Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

- - - - - - - -

{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}

- -

Quel type de boucle utiliser ?

- -

Pour des usages basiques les boucles for, while, et do...while sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.

- -

Premièrement for:

- -
for (initialisation; condition de sortie; expression finale) {
-  // code à exécuter
-}
- -

while:

- -
initialisation
-while (condition de sortie) {
-  // code à exécuter
-
-  expression finale
-}
- -

et enfin do...while:

- -
initialisation
-do {
-  // code à exécuter
-
-  expression finale
-} while (condition de sortie)
- -

Nous recommandons for, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.

- -
-

Note : Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.

-
- -

Conclusion

- -

Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !

- -

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md new file mode 100644 index 0000000000..fcd352b560 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md @@ -0,0 +1,856 @@ +--- +title: Les boucles dans le code +slug: Learn/JavaScript/Building_blocks/Looping_code +tags: + - Article + - CodingScripting + - DO + - Débutant + - Guide + - JavaScript + - Learn + - Loop + - break + - continue + - for + - l10n:priority + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +original_slug: Apprendre/JavaScript/Building_blocks/Looping_code +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.

+ + + + + + + + + + + + +
Prérequis :Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif :Comprendre comment utiliser les boucles dans JavaScript.
+ +

Laissez-moi dans la boucle

+ +

Boucles, boucles, boucles. Alors qu'elles sont associées aux cheveux d'une célèbre héroïne de fiction, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par itérer en langage de programmeur.

+ +

Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :

+ +


+

+ +

Une boucle a normalement un ou plusieurs des composants suivants :

+ + + +

En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :

+ +
loop(nourriture = 0; besoinNourriture = 10) {
+  if (nourriture = besoinNourriture) {
+    exit loop;
+    // Nous avons assez de nourriture, on rentre
+  } else {
+    nourriture += 2; // On doit rester 1 heure de plus
+    // La boucle se répète ensuite
+  }
+}
+ +

La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.

+ +

À quoi ça sert ?

+ +

Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, les boucles ne font rien d'autre que répéter la même action encore et encore, ce qui peut s'avérer utile pour effectuer rapidement des tâches répétitives.

+ +

Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !

+ +

Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).

+ +

Exemple

+ + + +

{{ EmbedLiveSample('Exemple', '100%', 400) }}

+ +

Principe de boucle

+ +

Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :

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

Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.

+ +

Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.

+ +

La boucle standard

+ +

Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

+ +
for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}
+ +

Nous avons ici :

+ +
    +
  1. Le mot-clé for, suivi par des parenthèses.
    2. +
  2. A l'intérieur des parenthèses, on a trois objets : +
      +
    1. Une initialisation — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer compteur.
      2. +
    2. Une condition de sortie — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.
      3. +
    3. Une expression finale — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.
      4. +
    +
    3. +
  3. Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.
    4. +
+ +

Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.

+ +
const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+let info = "Mes chat s'appellent ";
+const paragraphe = document.querySelector('p');
+
+for (let i = 0; i < chats.length; i++) {
+  info += chats[i] + ', ';
+}
+
+paragraphe.textContent = info;
+ +

Sortie

+ +

Cela nous donne la sortie suivante :

+ + + +

{{ EmbedLiveSample('Sortie', '100%', 60) }}

+ +
+

Note : Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

+
+ +

Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :

+ +
    +
  1. L'itérateur, i, commence à 0 (let i = 0).
    2. +
  2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que i < chats.length est vrai, la boucle continuera à s'exécuter.
    3. +
  3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (cats[i] est cats[quelque soit la valeur de i lors de l'iteration]) avec une virgule et un espace, à la fin de la variable info. Donc : +
      +
    1. Pendant le premier lancement, i = 0, donc cats[0] + ', ' sera concaténé à ("Bill, ")
      2. +
    2. Au second lancement, i = 1, donc cats[1] + ', ' et sera concaténé à  ("Jeff, ")
      3. +
    3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à i (i++), et alors le processus recommence encore.
      4. +
    +
    4. +
  4. Quand i devient égal à cats.length, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
    5. +
+ +
+

Note : Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

+
+ +
+

Note : Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.

+
+ +

Un petit problème est que nous avons laissé la phrase de sortie mal formée :

+ +
+

Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,

+
+ +

Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :

+ +
for (let i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}
+ +
+

Note : Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

+
+ +
+

Attention : Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

+
+ +

Quitter une boucle avec break

+ +

Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.

+ +

C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.

+ +

Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :

+ +
<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
+
+<p></p>
+ +

Maintenant sur le JavaScript :

+ +
const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+const paragraphe = document.querySelector('p');
+const input = document.querySelector('input');
+const bouton = document.querySelector('button');
+
+bouton.addEventListener('click', function() {
+  let searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (let i = 0; i < contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      paragraphe.textContent = 'Contact not found.';
+    }
+  }
+});
+ +

Résultat

+ + +

{{ EmbedLiveSample('Résultat', '100%', 100) }}

+ +
    +
  1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
    2. +
  2. Ensuite, nous attachons un écouteur d'événement au bouton (bouton), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
    3. +
  3. Nous stockons la valeur saisie dans l'input dans une variable appelée searchName, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
    4. +
  4. Maintenant sur la partie intéressante, la boucle for : +
      +
    1. Nous commençons le compteur à 0, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à contacts.length, et incrémentons i par 1 après chaque itération de la boucle.
      2. +
    2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (contacts[i]) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé splitContact.
      3. +
    3. Nous utilisons ensuite une instruction conditionnelle pour tester si splitContact[0] (le nom du contact) est égal au searchName entré. Si c'est le cas, nous introduisons une string / chaîne de caractère dans le paragraphe pour indiquer quel est le numéro du contact et utiliser break pour terminer la boucle.
      4. +
    +
    5. +
  5. Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
    6. +
+ +
+

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

+
+ +

Passer des itérations avec continue

+ +

L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).

+ +

Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :

+ +
let num = input.value;
+
+for (let i = 1; i <= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  paragraphe.textContent += i + ' ';
+}
+ +

Ici la sortie :

+ + + +

{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}

+ +
    +
  1. Dans ce cas, l'entrée doit être un nombre (num). La boucle for est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée num, et un itérateur ajoutera 1 au compteur à chaque fois.
    2. +
  2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
    3. +
  3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
    4. +
  4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.
    5. +
+ +
+

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

+
+ +

while et do ... while

+ +

for n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.

+ +

D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé while au lieu de for.

+ +

Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.

+ +

Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:

+ +
let i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

Note : Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

+
+ +

La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

+ +

Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé while. Dans une boucle do ... while, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).

+ +

Réécrivons notre exemple de listing de chat pour utiliser une boucle do ... while :

+ +
let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

Note : Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

+
+ +
+

Attention : Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

+
+ +

Apprentissage actif : Lancer le compte à rebours

+ +

Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :

+ + + +

Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

+ + + + + +

{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}

+ +

Apprentissage actif : remplir une liste d'invités.

+ +

Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.

+ +

Plus précisément, nous attendons de vous :

+ + + +

Nous vous avons déjà fourni les éléments suivants :

+ + + +

Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

+ +

Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

+ + + + + + + +

{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}

+ +

Quel type de boucle utiliser ?

+ +

Pour des usages basiques les boucles for, while, et do...while sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.

+ +

Premièrement for:

+ +
for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}
+ +

while:

+ +
initialisation
+while (condition de sortie) {
+  // code à exécuter
+
+  expression finale
+}
+ +

et enfin do...while:

+ +
initialisation
+do {
+  // code à exécuter
+
+  expression finale
+} while (condition de sortie)
+ +

Nous recommandons for, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.

+ +
+

Note : Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.

+
+ +

Conclusion

+ +

Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !

+ +

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.html b/files/fr/learn/javascript/building_blocks/return_values/index.html deleted file mode 100644 index 2d2b9f628e..0000000000 --- a/files/fr/learn/javascript/building_blocks/return_values/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Valeurs de retour des fonctions -slug: Learn/JavaScript/Building_blocks/Return_values -tags: - - Apprendre - - Article - - Débutant - - Fonctions - - Guide - - JavaScript - - Return - - Valeurs de retour - - Écriture de code -translation_of: Learn/JavaScript/Building_blocks/Return_values -original_slug: Apprendre/JavaScript/Building_blocks/Return_values ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.

- - - - - - - - - - - - -
Prérequis: -

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

-
Objectif:Comprendre les valeurs de retour, et comment les utiliser.
- -

Qu'est-ce que les valeurs de retour?

- -

Les valeurs de retour sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
-console.log(newString);
-// the replace() string function takes a string,
-// replaces one substring with another, and returns
-// a new string with the replacement made
- -

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.

- -

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.

- -

Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !

- -

Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.

- -

Utiliser des valeurs de retour dans vos fonctions

- -

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:

- -
function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  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();
-  }
-}
- -

À chaque itération de la boucle, on fait trois fois appel à la fonction random() pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction random() prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:

- -
function random(number) {
-  return Math.floor(Math.random()*number);
-}
- -

Cela peut aussi s'écrire ainsi:

- -
function random(number) {
-  var result = Math.floor(Math.random()*number);
-  return result;
-}
- -

Mais la première version est plus rapide à écrire, et plus compacte.

- -

La fonction retourne le résultat de Math.floor(Math.random()*number) chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:

- -
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
- -

et que les trois appels random() retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:

- -
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
- -

Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.

- -

Apprentissage actif: notre propre fonction avec valeur de retour

- -

Allons-y, écrivons nos propres fonctions avec des valeurs de retour.

- -
    -
  1. Pour commencer, faites une copie locale du fichier function-library.html à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
    2. -
  2. Ajoutons quelques fonctions dans <script> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: - 
    function squared(num) {
-  return num * num;
-}
-
-function cubed(num) {
-  return num * num * num;
-}
-
-function factorial(num) {
-  var x = num;
-  while (x > 1) {
-    num *= x-1;
-    x--;
-  }
-  return num;
-}
    - Les fonctions squared() et cubed() sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne la factorielle du nombre donné.
    3. -
  3. Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: - 
    input.onchange = function() {
-  var num = input.value;
-  if (isNaN(num)) {
-    para.textContent = 'You need to enter a number!';
-  } else {
-    para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                       num + ' cubed is ' + cubed(num) + '. ' +
-                       num + ' factorial is ' + factorial(num) + '.';
-  }
-}
    - -

    Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num.

    - -

    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.

    - -

    Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions squared(), cubed() et factorial() pour obtenir les valeurs désirées.

    -
    4. -
  4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
    5. -
- -
-

Note : Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.

-
- -

À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon num?

- -

Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration return. De plus, nous avons:

- - - -

Conclusion

- -

Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.

- -

Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md new file mode 100644 index 0000000000..2d2b9f628e --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/return_values/index.md @@ -0,0 +1,183 @@ +--- +title: Valeurs de retour des fonctions +slug: Learn/JavaScript/Building_blocks/Return_values +tags: + - Apprendre + - Article + - Débutant + - Fonctions + - Guide + - JavaScript + - Return + - Valeurs de retour + - Écriture de code +translation_of: Learn/JavaScript/Building_blocks/Return_values +original_slug: Apprendre/JavaScript/Building_blocks/Return_values +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.

+ + + + + + + + + + + + +
Prérequis: +

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

+
Objectif:Comprendre les valeurs de retour, et comment les utiliser.
+ +

Qu'est-ce que les valeurs de retour?

+ +

Les valeurs de retour sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made
+ +

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.

+ +

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.

+ +

Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !

+ +

Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.

+ +

Utiliser des valeurs de retour dans vos fonctions

+ +

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  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();
+  }
+}
+ +

À chaque itération de la boucle, on fait trois fois appel à la fonction random() pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction random() prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Cela peut aussi s'écrire ainsi:

+ +
function random(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}
+ +

Mais la première version est plus rapide à écrire, et plus compacte.

+ +

La fonction retourne le résultat de Math.floor(Math.random()*number) chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:

+ +
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ +

et que les trois appels random() retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:

+ +
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+ +

Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.

+ +

Apprentissage actif: notre propre fonction avec valeur de retour

+ +

Allons-y, écrivons nos propres fonctions avec des valeurs de retour.

+ +
    +
  1. Pour commencer, faites une copie locale du fichier function-library.html à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
    2. +
  2. Ajoutons quelques fonctions dans <script> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: + 
    function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x > 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}
    + Les fonctions squared() et cubed() sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne la factorielle du nombre donné.
    3. +
  3. Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: + 
    input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}
    + +

    Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num.

    + +

    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.

    + +

    Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions squared(), cubed() et factorial() pour obtenir les valeurs désirées.

    +
    4. +
  4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
    5. +
+ +
+

Note : Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.

+
+ +

À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon num?

+ +

Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration return. De plus, nous avons:

+ + + +

Conclusion

+ +

Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.

+ +

Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html deleted file mode 100644 index 60cc11cd4a..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ /dev/null @@ -1,882 +0,0 @@ ---- -title: Stockage côté client -slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage -tags: - - API - - Apprendre - - Codage - - Débutant - - Guide - - IndexedDB - - JavaScript - - Storage -translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage ---- -

{{LearnSidebar}}

- -
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -
- -

Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.

- - - - - - - - - - - - -
Prérequis:Notions de bases de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de base des APIs côté client
Objectif:Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.
- -

Stockage côté client ?

- -

Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.

- -

Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :

- - - -

Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.

- -
-

Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.

-
- -

À l'ancienne : les cookies

- -

Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des cookies pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.

- -

De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de directive Cookie.

- -

- -

Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les problèmes de sécurité qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.

- -

Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.

- -
-

Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.

-
- -

La nouvelle école : Web Storage et IndexedDB

- -

Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.

- - - -

Vous en apprendrez plus sur ces APIs ci-dessous.

- -

Le futur : l'API Cache

- -

Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'API Service Worker, mais ce n'est pas obligatoire.

- -

L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.

- -

Stocker des données simples — web storage

- -

L'API Web Storage est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.

- -

Syntaxe basique

- -

Nous allons vous guider pas à pas :

- -
    -
  1. -

    Tout d'abord, ouvez notre template vide de web storage sur GitHub dans un nouvel onglet.

    -
    2. -
  2. -

    Ouvrez la console JavaScript de votre navigateur.

    -
    3. -
  3. -

    Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.

    - -

    La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :

    - - 
    localStorage.setItem('name','Chris');
    -
    4. -
  4. -

    La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :

    - - 
    var myName = localStorage.getItem('name');
-myName
    - -

    En tapant la deuxième ligne, vous devriez voir que la variable myName contient la valeur de l'entrée name.

    -
    5. -
  5. -

    La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :

    - - 
    localStorage.removeItem('name');
-var myName = localStorage.getItem('name');
-myName
    - -

    La troisième ligne devrait maintenant retourner null — l'entrée name n'existe plus dans le web storage.

    -
    6. -
- -

Les données persistent !

- -

Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du localStorage). Regardons ça en action :

- -
    -
  1. -

    Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.

    -
    2. -
  2. -

    Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :

    - - 
    localStorage.setItem('name','Chris');
-var myName = localStorage.getItem('name');
-myName
    - -

    Vous devriez voir que l'entrée name est bien là.

    -
    3. -
  3. -

    Maintenant, fermez le navigateur et ouvrez-le de nouveau.

    -
    4. -
  4. -

    Entrez les lignes suivantes :

    - - 
    var myName = localStorage.getItem('name');
-myName
    - -

    Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.

    -
    5. -
- -

Stockage séparé pour chaque domaine

- -

Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.

- -

C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !

- -

Un exemple plus impliqué

- -

Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.

- -

Le HTML de l'exemple est disponible à personal-greeting.html — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.

- -

- -

Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.

- -
    -
  1. -

    D'abord, copiez notre fichier personal-greeting.html dans un nouveau répertoire sur votre ordinateur.

    -
    2. -
  2. -

    Ensuite, créez un fichier index.js dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).

    -
    3. -
  3. -

    Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:

    - - 
    // créer les constantes nécessaires
-const rememberDiv = document.querySelector('.remember');
-const forgetDiv = document.querySelector('.forget');
-const form = document.querySelector('form');
-const nameInput = document.querySelector('#entername');
-const submitBtn = document.querySelector('#submitname');
-const forgetBtn = document.querySelector('#forgetname');
-
-const h1 = document.querySelector('h1');
-const personalGreeting = document.querySelector('.personal-greeting');
    -
    4. -
  4. -

    Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :

    - - 
    // Empêcher le form d'être soumis
-form.addEventListener('submit', function(e) {
-  e.preventDefault();
-});
    -
    5. -
  5. -

    Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec setItem(). Ensuite, on exécute une fonction appelée nameDisplayCheck() qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :

    - - 
    // exécuter la fonction quand le bouton 'Say hello' est cliqué
-submitBtn.addEventListener('click', function() {
-  // stocker le nom entré dans le web storage
-  localStorage.setItem('name', nameInput.value);
-  // exécuter nameDisplayCheck() pour afficher la
-  // page personnalisée et changer le formulaire
-  nameDisplayCheck();
-});
    -
    6. -
  6. -

    On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément name du web storage en utilisant removeItem(), puis on exécute nameDisplayCheck() pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :

    - - 
    // exécuter la fonction quand le bouton 'Forget' est cliqué
-forgetBtn.addEventListener('click', function() {
-  // supprimer l'item name du web storage
-  localStorage.removeItem('name');
- // exécuter nameDisplayCheck() pour afficher la
- // page personnalisée et changer le formulaire
-  nameDisplayCheck();
-});
    -
    7. -
  7. -

    Il est maintenant temps de définir la fonction nameDisplayCheck() elle-même. Ici, on vérifie si l'élément name est stocké dans le web storage en utilisant localStorage.getItem('name') comme condition. S'il existe, la valeur retournée sera évaluée à true; sinon, comme false. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :

    - - 
    // définit la fonction nameDisplayCheck()
-function nameDisplayCheck() {
-  // vérifie si l'élément 'name' est stocké dans le web storage
-  if(localStorage.getItem('name')) {
-    // Si c'est le cas, affiche un accueil personnalisé
-    let name = localStorage.getItem('name');
-    h1.textContent = 'Welcome, ' + name;
-    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
-    // cache la partie 'remember' du formulaire et affiche la partie 'forget'
-    forgetDiv.style.display = 'block';
-    rememberDiv.style.display = 'none';
-  } else {
-    // Sinon, affiche un accueil générique
-    h1.textContent = 'Welcome to our website ';
-    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
-    // cache la partie 'forget' du formulaire et affiche la partie 'remember'
-    forgetDiv.style.display = 'none';
-    rememberDiv.style.display = 'block';
-  }
-}
    -
    8. -
  8. -

    Dernier point, mais non des moindres, on exécute la fonction nameDisplayCheck() à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :

    - - 
    document.body.onload = nameDisplayCheck;
    -
    9. -
- -

Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre version terminée en direct ici (ou le code JavaScript terminé).

- -
-

Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.

-
- -
-

Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.

-
- -

Stocker des données complexes — IndexedDB

- -

L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.

- -

Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.

- -

Un exemple de stockage de notes

- -

Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.

- -

L'application ressemble à ceci :

- -

- -

Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.

- -

Pour commencer

- -
    -
  1. Tout d'abord, copiez les fichiers index.html, style.css, et index-start.js dans un nouveau répertoire sur votre ordinateur.
    2. -
  2. Jetez un coup d'oeil aux fichiers. -
      -
    • Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.
      • -
    • Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.
      • -
    • Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.
      • -
    -
    3. -
  3. Renommez votre fichier JavaScript en index.js. Vous êtes maintenant prêt pour y ajouter du code.
    4. -
- -

Configuration initiale de la base de données

- -

Voyons maintenant la première chose à faire, mettre en place la base de données.

- -
    -
  1. -

    À la suite des déclarations de constantes, ajoutez les lignes suivantes :

    - - 
    // Objet db pour stocker la BDD ouverte
-let db;
    - -

    Ici, on déclare une variable appelée db — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.

    -
    2. -
  2. -

    Ensuite, ajoutez ce qui suit au bas de votre code :

    - - 
    window.onload = function() {
-
-};
    - -

    On écrira tout notre code dans le gestionnaire d'événement window.onload, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).

    -
    3. -
  3. -

    À l'intérieur de window.onload, ajoutez ce qui suit :

    - - 
    // Ouvrir la BDD; elle sera créée si elle n'existe pas déjà
-// (voir onupgradeneeded)
-let request = window.indexedDB.open('notes', 1);
    - -

    Cette ligne crée une requête request pour ouvrir la version 1 de la base de données appelée notes. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.

    - -

    Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.

    - -

    Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle request pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.

    - -
    -

    Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.

    -
    -
    4. -
  4. -

    Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de window.onload :

    - - 
    // la base de données n'a pas pu être ouverte avec succès
-request.onerror = function() {
-  console.log('Database failed to open');
-};
-
-// la base de données a été ouverte avec succès
-request.onsuccess = function() {
-  console.log('Database opened successfully');
-
-  // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite
-  db = request.result;
-
-  // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD
-  displayData();
-};
    - -

    Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.

    - -

    Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable db qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée displayData(), qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.

    -
    5. -
  5. -

    Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est  probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :

    - - 
    // Spécifie les tables de la BDD si ce n'est pas déjà pas fait
-request.onupgradeneeded = function(e) {
-  // Récupère une référence à la BDD ouverte
-  let db = e.target.result;
-
-  // Crée un objectStore pour stocker nos notes (une table)
-  // Avec un champ qui s'auto-incrémente comme clé
-  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
-
-  // Définit les champs que l'objectStore contient
-  objectStore.createIndex('title', 'title', { unique: false });
-  objectStore.createIndex('body', 'body', { unique: false });
-
-  console.log('Database setup complete');
-};
    - -

    C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.

    - -
      -
    1. -

      On récupère une référence à la base de données existante depuis e.target.result (la propriété result de la cible de l'événement, c'est à dire l'objet request). C'est l'équivalent de la ligne db = request.result; du gestionnaire d'événement onsuccess, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement onupgradeneeded est exécuté avant onsuccess — la valeur de db n'est pas encore disponible.

      -
      2. -
    2. -

      Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom notes, et un champs id avec autoIncrement — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ id sans que le développeur n'ait à le définir. Le champ id est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.

      -
      3. -
    3. -

      On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: title (qui contiendra le titre de chaque note), et body (qui contiendra la description de chaque note).

      -
      4. -
    -
    6. -
- -

Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :

- -
{
-  title: "Acheter du lait",
-  body: "Lait de vache et de soja.",
-  id: 8
-}
- -

Ajouter des données à la base de données

- -

Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.

- -
    -
  1. -

    À la suite du gestionnaire d'événement précédent (mais toujours dans window.onload), ajoutez la ligne suivante — elle définit un gestionnaire d'événement onsubmit pour exécuter la fonction addData() quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :

    - - 
    // Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis
-form.onsubmit = addData;
    -
    2. -
  2. -

    Maintenant, définissons la fonction addData(). Ajoutez ce qui suit après la ligne précédente :

    - - 
    // Définit la fonction addData()
-function addData(e) {
-  // empêcher le formulaire d'être soumis vers le serveur
-  e.preventDefault();
-
-  // récupérer les valeurs entrées dans les champs du formulaire
-  // et les stocker dans un objet qui sera inséré en BDD
-  let newItem = { title: titleInput.value, body: bodyInput.value };
-
-  // ouvrir une transaction en lecture/écriture
-  let transaction = db.transaction(['notes'], 'readwrite');
-
-  // récupérer l'object store de la base de données qui a été ouvert avec la transaction
-  let objectStore = transaction.objectStore('notes');
-
-  // demander l'ajout de notre nouvel objet à l'object store
-  var request = objectStore.add(newItem);
-  request.onsuccess = function() {
-    // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout
-    titleInput.value = '';
-    bodyInput.value = '';
-  };
-
-  // attendre la fin de la transaction, quand l'ajout a été effectué
-  transaction.oncomplete = function() {
-    console.log('Transaction completed: database modification finished.');
-
-    // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData()
-    displayData();
-  };
-
-  transaction.onerror = function() {
-    console.log('Transaction not opened due to error');
-  };
-}
    - -

    C'est assez complexe, voyons ça pas à pas :

    - -
      -
    1. -

      On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).

      -
      2. -
    2. -

      On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur id — comme nous l'avons précédemment expliqué, il est auto-rempli.

      -
      3. -
    3. -

      On ouvre une transaction en lecture/écritre (readwrite) sur l'object store notes en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.

      -
      4. -
    4. -

      On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable objectStore.

      -
      5. -
    5. -

      On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.

      -
      6. -
    6. On ajoute des gestionnaires d'événement à request et transaction pour exécuter du code aux points importants de leur cycle de vie : -
        -
      • Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note
        • -
      • Quand la transaction est terminé, on réexécute la fonction displayData() — pour mettre à jour l'affichage de notes sur la page.
        • -
      -
      7. -
    -
    3. -
- -

Afficher les données

- -

Nous avons déjà appelé displayData() deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :

- -
// Définit la fonction displayData()
-function displayData() {
-  // Vide le contenu de la liste à chaque fois qu'on la met à jour
-  // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout
-  while (list.firstChild) {
-    list.removeChild(list.firstChild);
-  }
-
-  // Ouvre l'object store puis récupère un curseur - qui va nous permettre d'itérer
-  // sur les entrées de l'object store
-  let objectStore = db.transaction('notes').objectStore('notes');
-  objectStore.openCursor().onsuccess = function(e) {
-    // Récupère une référence au curseur
-    let cursor = e.target.result;
-
-    // S'il reste des entrées sur lesquelles itérer, on exécute ce code
-    if(cursor) {
-      // Crée un li, h3, et p pour mettre les données de l'entrée puis les ajouter à la liste
-      let listItem = document.createElement('li');
-      let h3 = document.createElement('h3');
-      let para = document.createElement('p');
-
-      listItem.appendChild(h3);
-      listItem.appendChild(para);
-      list.appendChild(listItem);
-
-      // Récupère les données à partir du curseur et les met dans le h3 et p
-      h3.textContent = cursor.value.title;
-      para.textContent = cursor.value.body;
-
-      // Met l'ID de l'entrée dans un attribut du li, pour savoir à quelle entrée il correspond
-      // Ce sera utile plus tard pour pouvoir supprimer des entrées
-      listItem.setAttribute('data-note-id', cursor.value.id);
-
-      // Crée un bouton et le place dans le li
-      let deleteBtn = document.createElement('button');
-      listItem.appendChild(deleteBtn);
-      deleteBtn.textContent = 'Delete';
-
-      // Définit un gestionnaire d'événement pour appeler deleteItem() quand le bouton supprimer est cliqué
-      deleteBtn.onclick = deleteItem;
-
-      // Continue l'itération vers la prochaine entrée du curseur
-      cursor.continue();
-    } else {
-      // Si la liste est vide, affiche un message "Aucune note n'existe"
-      if(!list.firstChild) {
-        let listItem = document.createElement('li');
-        listItem.textContent = 'No notes stored.';
-        list.appendChild(listItem);
-      }
-      // Il n'y a plus d'entrées dans le curseur
-      console.log('Notes all displayed');
-    }
-  };
-}
- -

Encore une fois, pas à pas :

- -
    -
  1. -

    D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.

    -
    2. -
  2. -

    Ensuite, on récupère une référence à l'object store notes en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans addData(), mais en chaînant ces deux instructions en une seule ligne.

    -
    3. -
  3. -

    L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement onsuccess à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.

    -
    4. -
  4. -

    On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec cursor = e.target.result.

    -
    5. -
  5. -

    Ensuite, on vérifie si le curseur contient une entrée de l'object store (if(cursor){ ... }) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <ul>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction deleteItem() — que nous allons voir dans la section suivante.

    -
    6. -
  6. -

    À la fin du bloc if, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, continue() sera exécuté à nouveau, et ainsi de suite.

    -
    7. -
  7. -

    Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne undefined, et le bloc else sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <ul> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.

    -
    8. -
- -

Supprimer une note

- -

Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction deleteItem(), que l'on définit ainsi :

- -
// Définit la fonction deleteItem()
-function deleteItem(e) {
-  // Récupère l'id de l'entrée que l'on veut supprimer
-  // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB
-  // les clés sont sensibles à la casse
-  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
-
-  // Ouvre une transaction et supprime la note ayant l'id récupéré ci-dessus
-  let transaction = db.transaction(['notes'], 'readwrite');
-  let objectStore = transaction.objectStore('notes');
-  let request = objectStore.delete(noteId);
-
-  // Indique à l'utilisateur que l'entrée a été supprimée
-  transaction.oncomplete = function() {
-    // supprime l'élément parent du bouton, le li
-    // pour qu'il ne soit plus affiché
-    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
-    console.log('Note ' + noteId + ' deleted.');
-
-    // Si la liste est vide, affiche un message qui l'indique
-    if(!list.firstChild) {
-      let listItem = document.createElement('li');
-      listItem.textContent = 'No notes stored.';
-      list.appendChild(listItem);
-    }
-  };
-}
- - - -

Et voilà ! L'exemple devrait maintenant fonctionner.

- -
-

Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).

-
- -

Stocker des données complexes avec IndexedDB

- -

Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.

- -

Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé IndexedDB video store (le voir en direct). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.

- -

Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.

- -
    -
  1. -

    Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :

    - - 
    const videos = [
-  { 'name' : 'crystal' },
-  { 'name' : 'elf' },
-  { 'name' : 'frog' },
-  { 'name' : 'monster' },
-  { 'name' : 'pig' },
-  { 'name' : 'rabbit' }
-];
    -
    2. -
  2. -

    Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction init(). Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données videos.

    - -

    On peut facilement vérifier si une entrée a été trouvée en vérifiant si request.result est évalué à true — si l'entrée n'est pas présente, la valeur retournée est undefined.

    - -

    Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction displayVideo() pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction fetchVideoFromNetwork(), qui récupère la vidéo à partir du réseau.

    - - 
    function init() {
-  // Boucle sur les vidéos une par une
-  for(let i = 0; i < videos.length; i++) {
-    // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom
-    let objectStore = db.transaction('videos').objectStore('videos');
-    let request = objectStore.get(videos[i].name);
-    request.onsuccess = function() {
-      // Si l'entrée existe dans la BDD (le résultat n'est pas undefined)
-      if(request.result) {
-        // Affiche la vidéo en utilisant displayVideo()
-        console.log('taking videos from IDB');
-        displayVideo(request.result.mp4, request.result.webm, request.result.name);
-      } else {
-        // Récupère la vidéo à partir du réseau
-        fetchVideoFromNetwork(videos[i]);
-      }
-    };
-  }
-}
    -
    3. -
  3. -

    Le bout de code qui suit est extrait de la fonction fetchVideoFromNetwork() — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.

    - -

    Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode all() est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.

    - -

    À l'intérieur du bloc all(), vous pouvez voir qu'on appelle la fonction displayVideo(), comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction storeVideo() pour stocker ces vidéos dans la base de données.

    - - 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
-  response.blob()
-);
-let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
-  response.blob()
-);
-
-// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues
-Promise.all([mp4Blob, webmBlob]).then(function(values) {
-  // Afficher la vidéo récupérée à partir du réseau avec displayVideo()
-  displayVideo(values[0], values[1], video.name);
-  // La stocker dans IDB avec storeVideo()
-  storeVideo(values[0], values[1], video.name);
-});
    -
    4. -
  4. -

    Regardons storeVideo() en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de videos, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.

    - - 
    function storeVideo(mp4Blob, webmBlob, name) {
-  // Ouvre une transaction, récupère object store
-  let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
-  // Crée une entrée à ajouter à IDB
-  let record = {
-    mp4 : mp4Blob,
-    webm : webmBlob,
-    name : name
-  }
-
-  // Ajoute l'entrée à IDB avec add()
-  let request = objectStore.add(record);
-
-  ...
-
-};
    -
    5. -
  5. -

    Enfin, displayVideo() crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <video>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut src de l'élément {{htmlelement("source")}}, et ça marche.

    - - 
    function displayVideo(mp4Blob, webmBlob, title) {
-  // Crée l'objet URL à partir du blob
-  let mp4URL = URL.createObjectURL(mp4Blob);
-  let webmURL = URL.createObjectURL(webmBlob);
-
-  ...
-
-  let video = document.createElement('video');
-  video.controls = true;
-  let source1 = document.createElement('source');
-  source1.src = mp4URL;
-  source1.type = 'video/mp4';
-  let source2 = document.createElement('source');
-  source2.src = webmURL;
-  source2.type = 'video/webm';
-
-  ...
-}
    -
    6. -
- -

Stockage hors-ligne de ressources

- -

L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau

- -

- -

C'est là qu'interviennet les Service workers et l'API étroitement liée, Cache.

- -

Service Worker / Cache

- -

Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.

- -

Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques idées de cas d'utilisation), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.

- -

L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.

- -
-

Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.

-
- -

Un exemple service worker

- -

Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!

- -

Voir IndexedDB video store avec service worker en direct, ou voir le code source.

- -

Enregistrer le service worker

- -

La première chose à noter est qu'il  a un peu plus de code placé dans le fichier JavaScript principal (voir index.js):

- -
// Enregistre un service worker pour contrôler le site hors-ligne
-if('serviceWorker' in navigator) {
-  navigator.serviceWorker
-           .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
-           .then(function() { console.log('Service Worker Registered'); });
-}
- - - -
-

Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
- Le service worker est sur https://mdn.github.io/learning-area/.../sw.js. L'origine est https://mdn.github.io. Le chemin donné doit donc être /learning-area/.../sw.js.
- Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.

-
- -

Installer le service worker

- -

Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement install est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.

- -

Prenons pour exemple le fichier sw.js (le service worker) :

- -
self.addEventListener('install', function(e) {
- e.waitUntil(
-   caches.open('video-store').then(function(cache) {
-     return cache.addAll([
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
-     ]);
-   })
- );
-});
- -
    -
  1. -

    Le gestionnaire d'événément install est enregistré sur self. Le mot-clé self est un moyen de faire référence au service worker de la portée globale à partir de son fichier.

    -
    2. -
  2. -

    À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.

    -
    3. -
  3. -

    Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du video-store.

    -
    4. -
  4. -

    On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.

    -
    5. -
- -

C'est tout pour l'instant, l'installation est terminée.

- -

Répondre aux futures requêtes

- -

Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.

- -

C'est ce que fait le second bloc de code dans sw.js :

- -
self.addEventListener('fetch', function(e) {
-  console.log(e.request.url);
-  e.respondWith(
-    caches.match(e.request).then(function(response) {
-      return response || fetch(e.request);
-    })
-  );
-});
- -
    -
  1. -

    On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement fetch est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).

    -
    2. -
  2. -

    À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.

    -
    3. -
  3. -

    Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).

    -
    4. -
  4. -

    Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec undefined. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant fetch(), et on retourne le résultat.

    -
    5. -
- -

C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le service worker cookbook. Et merci à Paul Kinlan pour son article Adding a Service Worker and Offline into your Web App, qui a inspiré cet exemple.

- -

Tester l'exemple hors-ligne

- -

Pour tester notre exemple de service worker, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:

- - - -

Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.

- -

Sommaire

- -

C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.

- -

Voir aussi

- - - -

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md new file mode 100644 index 0000000000..60cc11cd4a --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -0,0 +1,882 @@ +--- +title: Stockage côté client +slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +tags: + - API + - Apprendre + - Codage + - Débutant + - Guide + - IndexedDB + - JavaScript + - Storage +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage +--- +

{{LearnSidebar}}

+ +
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +
+ +

Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.

+ + + + + + + + + + + + +
Prérequis:Notions de bases de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de base des APIs côté client
Objectif:Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.
+ +

Stockage côté client ?

+ +

Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.

+ +

Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :

+ + + +

Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.

+ +
+

Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.

+
+ +

À l'ancienne : les cookies

+ +

Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des cookies pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.

+ +

De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de directive Cookie.

+ +

+ +

Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les problèmes de sécurité qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.

+ +

Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.

+ +
+

Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.

+
+ +

La nouvelle école : Web Storage et IndexedDB

+ +

Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.

+ + + +

Vous en apprendrez plus sur ces APIs ci-dessous.

+ +

Le futur : l'API Cache

+ +

Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'API Service Worker, mais ce n'est pas obligatoire.

+ +

L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.

+ +

Stocker des données simples — web storage

+ +

L'API Web Storage est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.

+ +

Syntaxe basique

+ +

Nous allons vous guider pas à pas :

+ +
    +
  1. +

    Tout d'abord, ouvez notre template vide de web storage sur GitHub dans un nouvel onglet.

    +
    2. +
  2. +

    Ouvrez la console JavaScript de votre navigateur.

    +
    3. +
  3. +

    Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.

    + +

    La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :

    + + 
    localStorage.setItem('name','Chris');
    +
    4. +
  4. +

    La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :

    + + 
    var myName = localStorage.getItem('name');
+myName
    + +

    En tapant la deuxième ligne, vous devriez voir que la variable myName contient la valeur de l'entrée name.

    +
    5. +
  5. +

    La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :

    + + 
    localStorage.removeItem('name');
+var myName = localStorage.getItem('name');
+myName
    + +

    La troisième ligne devrait maintenant retourner null — l'entrée name n'existe plus dans le web storage.

    +
    6. +
+ +

Les données persistent !

+ +

Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du localStorage). Regardons ça en action :

+ +
    +
  1. +

    Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.

    +
    2. +
  2. +

    Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :

    + + 
    localStorage.setItem('name','Chris');
+var myName = localStorage.getItem('name');
+myName
    + +

    Vous devriez voir que l'entrée name est bien là.

    +
    3. +
  3. +

    Maintenant, fermez le navigateur et ouvrez-le de nouveau.

    +
    4. +
  4. +

    Entrez les lignes suivantes :

    + + 
    var myName = localStorage.getItem('name');
+myName
    + +

    Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.

    +
    5. +
+ +

Stockage séparé pour chaque domaine

+ +

Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.

+ +

C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !

+ +

Un exemple plus impliqué

+ +

Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.

+ +

Le HTML de l'exemple est disponible à personal-greeting.html — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.

+ +

+ +

Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.

+ +
    +
  1. +

    D'abord, copiez notre fichier personal-greeting.html dans un nouveau répertoire sur votre ordinateur.

    +
    2. +
  2. +

    Ensuite, créez un fichier index.js dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).

    +
    3. +
  3. +

    Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:

    + + 
    // créer les constantes nécessaires
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');
    +
    4. +
  4. +

    Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :

    + + 
    // Empêcher le form d'être soumis
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});
    +
    5. +
  5. +

    Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec setItem(). Ensuite, on exécute une fonction appelée nameDisplayCheck() qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :

    + + 
    // exécuter la fonction quand le bouton 'Say hello' est cliqué
+submitBtn.addEventListener('click', function() {
+  // stocker le nom entré dans le web storage
+  localStorage.setItem('name', nameInput.value);
+  // exécuter nameDisplayCheck() pour afficher la
+  // page personnalisée et changer le formulaire
+  nameDisplayCheck();
+});
    +
    6. +
  6. +

    On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément name du web storage en utilisant removeItem(), puis on exécute nameDisplayCheck() pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :

    + + 
    // exécuter la fonction quand le bouton 'Forget' est cliqué
+forgetBtn.addEventListener('click', function() {
+  // supprimer l'item name du web storage
+  localStorage.removeItem('name');
+ // exécuter nameDisplayCheck() pour afficher la
+ // page personnalisée et changer le formulaire
+  nameDisplayCheck();
+});
    +
    7. +
  7. +

    Il est maintenant temps de définir la fonction nameDisplayCheck() elle-même. Ici, on vérifie si l'élément name est stocké dans le web storage en utilisant localStorage.getItem('name') comme condition. S'il existe, la valeur retournée sera évaluée à true; sinon, comme false. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :

    + + 
    // définit la fonction nameDisplayCheck()
+function nameDisplayCheck() {
+  // vérifie si l'élément 'name' est stocké dans le web storage
+  if(localStorage.getItem('name')) {
+    // Si c'est le cas, affiche un accueil personnalisé
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Welcome, ' + name;
+    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+    // cache la partie 'remember' du formulaire et affiche la partie 'forget'
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // Sinon, affiche un accueil générique
+    h1.textContent = 'Welcome to our website ';
+    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+    // cache la partie 'forget' du formulaire et affiche la partie 'remember'
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}
    +
    8. +
  8. +

    Dernier point, mais non des moindres, on exécute la fonction nameDisplayCheck() à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :

    + + 
    document.body.onload = nameDisplayCheck;
    +
    9. +
+ +

Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre version terminée en direct ici (ou le code JavaScript terminé).

+ +
+

Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.

+
+ +
+

Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.

+
+ +

Stocker des données complexes — IndexedDB

+ +

L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.

+ +

Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.

+ +

Un exemple de stockage de notes

+ +

Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.

+ +

L'application ressemble à ceci :

+ +

+ +

Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.

+ +

Pour commencer

+ +
    +
  1. Tout d'abord, copiez les fichiers index.html, style.css, et index-start.js dans un nouveau répertoire sur votre ordinateur.
    2. +
  2. Jetez un coup d'oeil aux fichiers. +
      +
    • Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.
      • +
    • Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.
      • +
    • Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.
      • +
    +
    3. +
  3. Renommez votre fichier JavaScript en index.js. Vous êtes maintenant prêt pour y ajouter du code.
    4. +
+ +

Configuration initiale de la base de données

+ +

Voyons maintenant la première chose à faire, mettre en place la base de données.

+ +
    +
  1. +

    À la suite des déclarations de constantes, ajoutez les lignes suivantes :

    + + 
    // Objet db pour stocker la BDD ouverte
+let db;
    + +

    Ici, on déclare une variable appelée db — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.

    +
    2. +
  2. +

    Ensuite, ajoutez ce qui suit au bas de votre code :

    + + 
    window.onload = function() {
+
+};
    + +

    On écrira tout notre code dans le gestionnaire d'événement window.onload, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).

    +
    3. +
  3. +

    À l'intérieur de window.onload, ajoutez ce qui suit :

    + + 
    // Ouvrir la BDD; elle sera créée si elle n'existe pas déjà
+// (voir onupgradeneeded)
+let request = window.indexedDB.open('notes', 1);
    + +

    Cette ligne crée une requête request pour ouvrir la version 1 de la base de données appelée notes. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.

    + +

    Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.

    + +

    Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle request pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.

    + +
    +

    Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.

    +
    +
    4. +
  4. +

    Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de window.onload :

    + + 
    // la base de données n'a pas pu être ouverte avec succès
+request.onerror = function() {
+  console.log('Database failed to open');
+};
+
+// la base de données a été ouverte avec succès
+request.onsuccess = function() {
+  console.log('Database opened successfully');
+
+  // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite
+  db = request.result;
+
+  // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD
+  displayData();
+};
    + +

    Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.

    + +

    Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable db qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée displayData(), qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.

    +
    5. +
  5. +

    Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est  probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :

    + + 
    // Spécifie les tables de la BDD si ce n'est pas déjà pas fait
+request.onupgradeneeded = function(e) {
+  // Récupère une référence à la BDD ouverte
+  let db = e.target.result;
+
+  // Crée un objectStore pour stocker nos notes (une table)
+  // Avec un champ qui s'auto-incrémente comme clé
+  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
+
+  // Définit les champs que l'objectStore contient
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Database setup complete');
+};
    + +

    C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.

    + +
      +
    1. +

      On récupère une référence à la base de données existante depuis e.target.result (la propriété result de la cible de l'événement, c'est à dire l'objet request). C'est l'équivalent de la ligne db = request.result; du gestionnaire d'événement onsuccess, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement onupgradeneeded est exécuté avant onsuccess — la valeur de db n'est pas encore disponible.

      +
      2. +
    2. +

      Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom notes, et un champs id avec autoIncrement — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ id sans que le développeur n'ait à le définir. Le champ id est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.

      +
      3. +
    3. +

      On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: title (qui contiendra le titre de chaque note), et body (qui contiendra la description de chaque note).

      +
      4. +
    +
    6. +
+ +

Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :

+ +
{
+  title: "Acheter du lait",
+  body: "Lait de vache et de soja.",
+  id: 8
+}
+ +

Ajouter des données à la base de données

+ +

Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.

+ +
    +
  1. +

    À la suite du gestionnaire d'événement précédent (mais toujours dans window.onload), ajoutez la ligne suivante — elle définit un gestionnaire d'événement onsubmit pour exécuter la fonction addData() quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :

    + + 
    // Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis
+form.onsubmit = addData;
    +
    2. +
  2. +

    Maintenant, définissons la fonction addData(). Ajoutez ce qui suit après la ligne précédente :

    + + 
    // Définit la fonction addData()
+function addData(e) {
+  // empêcher le formulaire d'être soumis vers le serveur
+  e.preventDefault();
+
+  // récupérer les valeurs entrées dans les champs du formulaire
+  // et les stocker dans un objet qui sera inséré en BDD
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // ouvrir une transaction en lecture/écriture
+  let transaction = db.transaction(['notes'], 'readwrite');
+
+  // récupérer l'object store de la base de données qui a été ouvert avec la transaction
+  let objectStore = transaction.objectStore('notes');
+
+  // demander l'ajout de notre nouvel objet à l'object store
+  var request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // attendre la fin de la transaction, quand l'ajout a été effectué
+  transaction.oncomplete = function() {
+    console.log('Transaction completed: database modification finished.');
+
+    // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData()
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transaction not opened due to error');
+  };
+}
    + +

    C'est assez complexe, voyons ça pas à pas :

    + +
      +
    1. +

      On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).

      +
      2. +
    2. +

      On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur id — comme nous l'avons précédemment expliqué, il est auto-rempli.

      +
      3. +
    3. +

      On ouvre une transaction en lecture/écritre (readwrite) sur l'object store notes en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.

      +
      4. +
    4. +

      On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable objectStore.

      +
      5. +
    5. +

      On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.

      +
      6. +
    6. On ajoute des gestionnaires d'événement à request et transaction pour exécuter du code aux points importants de leur cycle de vie : +
        +
      • Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note
        • +
      • Quand la transaction est terminé, on réexécute la fonction displayData() — pour mettre à jour l'affichage de notes sur la page.
        • +
      +
      7. +
    +
    3. +
+ +

Afficher les données

+ +

Nous avons déjà appelé displayData() deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :

+ +
// Définit la fonction displayData()
+function displayData() {
+  // Vide le contenu de la liste à chaque fois qu'on la met à jour
+  // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Ouvre l'object store puis récupère un curseur - qui va nous permettre d'itérer
+  // sur les entrées de l'object store
+  let objectStore = db.transaction('notes').objectStore('notes');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Récupère une référence au curseur
+    let cursor = e.target.result;
+
+    // S'il reste des entrées sur lesquelles itérer, on exécute ce code
+    if(cursor) {
+      // Crée un li, h3, et p pour mettre les données de l'entrée puis les ajouter à la liste
+      let listItem = document.createElement('li');
+      let h3 = document.createElement('h3');
+      let para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Récupère les données à partir du curseur et les met dans le h3 et p
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Met l'ID de l'entrée dans un attribut du li, pour savoir à quelle entrée il correspond
+      // Ce sera utile plus tard pour pouvoir supprimer des entrées
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Crée un bouton et le place dans le li
+      let deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Définit un gestionnaire d'événement pour appeler deleteItem() quand le bouton supprimer est cliqué
+      deleteBtn.onclick = deleteItem;
+
+      // Continue l'itération vers la prochaine entrée du curseur
+      cursor.continue();
+    } else {
+      // Si la liste est vide, affiche un message "Aucune note n'existe"
+      if(!list.firstChild) {
+        let listItem = document.createElement('li');
+        listItem.textContent = 'No notes stored.';
+        list.appendChild(listItem);
+      }
+      // Il n'y a plus d'entrées dans le curseur
+      console.log('Notes all displayed');
+    }
+  };
+}
+ +

Encore une fois, pas à pas :

+ +
    +
  1. +

    D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.

    +
    2. +
  2. +

    Ensuite, on récupère une référence à l'object store notes en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans addData(), mais en chaînant ces deux instructions en une seule ligne.

    +
    3. +
  3. +

    L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement onsuccess à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.

    +
    4. +
  4. +

    On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec cursor = e.target.result.

    +
    5. +
  5. +

    Ensuite, on vérifie si le curseur contient une entrée de l'object store (if(cursor){ ... }) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <ul>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction deleteItem() — que nous allons voir dans la section suivante.

    +
    6. +
  6. +

    À la fin du bloc if, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, continue() sera exécuté à nouveau, et ainsi de suite.

    +
    7. +
  7. +

    Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne undefined, et le bloc else sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <ul> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.

    +
    8. +
+ +

Supprimer une note

+ +

Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction deleteItem(), que l'on définit ainsi :

+ +
// Définit la fonction deleteItem()
+function deleteItem(e) {
+  // Récupère l'id de l'entrée que l'on veut supprimer
+  // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB
+  // les clés sont sensibles à la casse
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // Ouvre une transaction et supprime la note ayant l'id récupéré ci-dessus
+  let transaction = db.transaction(['notes'], 'readwrite');
+  let objectStore = transaction.objectStore('notes');
+  let request = objectStore.delete(noteId);
+
+  // Indique à l'utilisateur que l'entrée a été supprimée
+  transaction.oncomplete = function() {
+    // supprime l'élément parent du bouton, le li
+    // pour qu'il ne soit plus affiché
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Note ' + noteId + ' deleted.');
+
+    // Si la liste est vide, affiche un message qui l'indique
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No notes stored.';
+      list.appendChild(listItem);
+    }
+  };
+}
+ + + +

Et voilà ! L'exemple devrait maintenant fonctionner.

+ +
+

Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).

+
+ +

Stocker des données complexes avec IndexedDB

+ +

Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.

+ +

Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé IndexedDB video store (le voir en direct). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.

+ +

Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.

+ +
    +
  1. +

    Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :

    + + 
    const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];
    +
    2. +
  2. +

    Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction init(). Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données videos.

    + +

    On peut facilement vérifier si une entrée a été trouvée en vérifiant si request.result est évalué à true — si l'entrée n'est pas présente, la valeur retournée est undefined.

    + +

    Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction displayVideo() pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction fetchVideoFromNetwork(), qui récupère la vidéo à partir du réseau.

    + + 
    function init() {
+  // Boucle sur les vidéos une par une
+  for(let i = 0; i < videos.length; i++) {
+    // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom
+    let objectStore = db.transaction('videos').objectStore('videos');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // Si l'entrée existe dans la BDD (le résultat n'est pas undefined)
+      if(request.result) {
+        // Affiche la vidéo en utilisant displayVideo()
+        console.log('taking videos from IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Récupère la vidéo à partir du réseau
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}
    +
    3. +
  3. +

    Le bout de code qui suit est extrait de la fonction fetchVideoFromNetwork() — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.

    + +

    Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode all() est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.

    + +

    À l'intérieur du bloc all(), vous pouvez voir qu'on appelle la fonction displayVideo(), comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction storeVideo() pour stocker ces vidéos dans la base de données.

    + + 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
+  response.blob()
+);
+
+// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // Afficher la vidéo récupérée à partir du réseau avec displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // La stocker dans IDB avec storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});
    +
    4. +
  4. +

    Regardons storeVideo() en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de videos, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.

    + + 
    function storeVideo(mp4Blob, webmBlob, name) {
+  // Ouvre une transaction, récupère object store
+  let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
+  // Crée une entrée à ajouter à IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Ajoute l'entrée à IDB avec add()
+  let request = objectStore.add(record);
+
+  ...
+
+};
    +
    5. +
  5. +

    Enfin, displayVideo() crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <video>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut src de l'élément {{htmlelement("source")}}, et ça marche.

    + + 
    function displayVideo(mp4Blob, webmBlob, title) {
+  // Crée l'objet URL à partir du blob
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  let video = document.createElement('video');
+  video.controls = true;
+  let source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  let source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}
    +
    6. +
+ +

Stockage hors-ligne de ressources

+ +

L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau

+ +

+ +

C'est là qu'interviennet les Service workers et l'API étroitement liée, Cache.

+ +

Service Worker / Cache

+ +

Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.

+ +

Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques idées de cas d'utilisation), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.

+ +

L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.

+ +
+

Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.

+
+ +

Un exemple service worker

+ +

Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!

+ +

Voir IndexedDB video store avec service worker en direct, ou voir le code source.

+ +

Enregistrer le service worker

+ +

La première chose à noter est qu'il  a un peu plus de code placé dans le fichier JavaScript principal (voir index.js):

+ +
// Enregistre un service worker pour contrôler le site hors-ligne
+if('serviceWorker' in navigator) {
+  navigator.serviceWorker
+           .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+           .then(function() { console.log('Service Worker Registered'); });
+}
+ + + +
+

Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
+ Le service worker est sur https://mdn.github.io/learning-area/.../sw.js. L'origine est https://mdn.github.io. Le chemin donné doit donc être /learning-area/.../sw.js.
+ Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.

+
+ +

Installer le service worker

+ +

Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement install est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.

+ +

Prenons pour exemple le fichier sw.js (le service worker) :

+ +
self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});
+ +
    +
  1. +

    Le gestionnaire d'événément install est enregistré sur self. Le mot-clé self est un moyen de faire référence au service worker de la portée globale à partir de son fichier.

    +
    2. +
  2. +

    À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.

    +
    3. +
  3. +

    Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du video-store.

    +
    4. +
  4. +

    On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.

    +
    5. +
+ +

C'est tout pour l'instant, l'installation est terminée.

+ +

Répondre aux futures requêtes

+ +

Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.

+ +

C'est ce que fait le second bloc de code dans sw.js :

+ +
self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});
+ +
    +
  1. +

    On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement fetch est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).

    +
    2. +
  2. +

    À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.

    +
    3. +
  3. +

    Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).

    +
    4. +
  4. +

    Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec undefined. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant fetch(), et on retourne le résultat.

    +
    5. +
+ +

C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le service worker cookbook. Et merci à Paul Kinlan pour son article Adding a Service Worker and Offline into your Web App, qui a inspiré cet exemple.

+ +

Tester l'exemple hors-ligne

+ +

Pour tester notre exemple de service worker, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:

+ + + +

Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.

+ +

Sommaire

+ +

C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.

+ +

Voir aussi

+ + + +

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html deleted file mode 100644 index 95c9f7f8e4..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html +++ /dev/null @@ -1,923 +0,0 @@ ---- -title: Dessiner des éléments graphiques -slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics -tags: - - API - - Apprendre - - Articles - - Canvas - - Codage - - Débutant - - Graphismes - - JavaScript - - WebGL -translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.

- - - - - - - - - - - - -
Prérequis:Bases de JavaScript (voir premiers pas, les briques JavaScript, introduction aux objets), les notions de bases des APIs côté client
Objectif:Apprendre les bases pour dessiner sur des éléments <canvas> en utilisant JavaScript.
- -

Éléments graphiques sur le Web

- -

Comme nous en avons parlé dans notre module HTML Multimédia et Intégration, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et SVG.

- -

Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser CSS et JavaScript pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.

- -

La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' API Canvas associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.

- -

L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module La construction d'objet en pratique:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}

- -

Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu WebGL, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

- -

Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.

- -
-

Note : Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

-
- -

Apprentissage actif: Débuter avec un <canvas>

- -

Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:

- -
<canvas width="320" height="240"></canvas>
- -

Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.

- -

À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.

- -
<canvas width="320" height="240">
-  <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p>
-</canvas>
- -

Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.

- -

Crée et dimensionner notre canvas

- -

Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.

- -
    -
  1. -

    Premièrement, copiez localement notre fichier 0_canvas_start.html, et ouvez-le dans votre éditeur de texte.

    -
    2. -
  2. -

    Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:

    - - 
    <canvas class="myCanvas">
-  <p>Ajouter un contenu alternatif approprié ici.</p>
-</canvas>
    - -

    Nous avons ajouté un attribut class à l'élément <canvas> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs width et height pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.

    -
    3. -
  3. -

    Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:

    - - 
    var canvas = document.querySelector('.myCanvas');
-var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight;
    - -

    Ici, nous avons stocké une référence vers le canvas dans la variable canvas. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable width et la propriété width du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable height et la propriété height du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!

    - -

    Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).

    -
    4. -
  4. -

    Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à hidden. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:

    - - 
    <style>
-  body {
-    margin: 0;
-    overflow: hidden;
-  }
-</style>
    - -

    Les barres de défilement ne devraient plus être là.

    -
    5. -
- -
-

Note : Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

-
- -

Obtenir le contexte du canvas et configuration finale

- -

Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un contexte. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.

- -

En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <script>:

- -
var ctx = canvas.getContext('2d');
- -
-

Note : Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

-
- -

Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.

- -

Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

- -
ctx.fillStyle = 'rgb(0, 0, 0)';
-ctx.fillRect(0, 0, width, height);
- -

Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une valeur de couleur tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables width et height allaient être utiles)!

- -

OK, notre template est prêt et il est temps de passer à autre chose.

- -

Les bases du canvas 2D

- -

Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, ctx).

- -

De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.

- -

- -

Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.

- -

Rectangles simples

- -

Commençons avec quelques rectangles simples.

- -
    -
  1. -

    Tout d'abord, faites une copie de votre template (ou copiez localement le fichier 1_canvas_template.html si vous n'avez pas suivit les étapes précédentes).

    -
    2. -
  2. -

    Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:

    - - 
    ctx.fillStyle = 'rgb(255, 0, 0)';
-ctx.fillRect(50, 50, 100, 150);
    - -

    Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).

    -
    3. -
  3. -

    Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:

    - - 
    ctx.fillStyle = 'rgb(0, 255, 0)';
-ctx.fillRect(75, 75, 100, 100);
    - -

    Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.

    -
    4. -
  4. -

    Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant rgba(). La valeur a définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de a est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:

    - - 
    ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
-ctx.fillRect(25, 100, 175, 50);
    -
    5. -
  5. -

    Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!

    -
    6. -
- -

Traits et épaisseurs de ligne

- -

Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit strokes - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.

- -
    -
  1. -

    Ajoutez ce qui suit au bas de votre JavaScript:

    - - 
    ctx.strokeStyle = 'rgb(255, 255, 255)';
-ctx.strokeRect(25, 25, 175, 200);
    -
    2. -
  2. -

    L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:

    - - 
    ctx.lineWidth = 5;
    - -

    Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!

    -
    3. -
- -

C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}

- -
-

Note : Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

-
- -

Dessiner des chemins

- -

Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un path (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.

- -

Commençons la section en faisant une nouvelle copie de notre template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

- -

Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:

- - - -

Typiquement, une manière de dessiner un trait simple ressemblerait à ça:

- -
ctx.fillStyle = 'rgb(255, 0, 0)';
-ctx.beginPath();
-ctx.moveTo(50, 50);
-// tracer le trait
-ctx.fill();
- -

Dessiner des lignes

- -

Dessinons un triangle équilatéral sur le canvas.

- -
    -
  1. -

    Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.

    - - 
    function degToRad(degrees) {
-  return degrees * Math.PI / 180;
-};
    -
    2. -
  2. -

    Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.

    - - 
    ctx.fillStyle = 'rgb(255, 0, 0)';
-ctx.beginPath();
-ctx.moveTo(50, 50);
    -
    3. -
  3. -

    Maintenant ajoutez le bloc de code suivant:

    - - 
    ctx.lineTo(150, 50);
-var triHeight = 50 * Math.tan(degToRad(60));
-ctx.lineTo(100, 50+triHeight);
-ctx.lineTo(50, 50);
-ctx.fill();
    - -

    Parcourons ceci dans l'ordre:

    - -
      -
    1. -

      D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).

      -
      2. -
    2. -

      Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.

      - -

      Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.

      - -

      Pour ce qui est des côtés:

      - -
        -
      • Le côté le plus long est appelé l'hypoténuse
        • -
      • Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit adjacent à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.
        • -
      • Le côté opposé à l'angle de 60 degrés est dit opposé à cet angle — c'est la hauteur que nous voulons calculer.
        • -
      - -

       

      - -

      - -

      Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.

      -
      3. -
    3. -

      Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers (100, 50+triHeight). La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.

      -
      4. -
    4. -

      L'instruction qui suit ajoute une ligne vers le point de départ du triangle.

      -
      5. -
    5. -

      Pour finir, nous appelons ctx.fill() pour finir le path et remplir la forme.

      -
      6. -
    -
    4. -
- -

Dessiner des cercles

- -

Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.

- -
    -
  1. -

    Ajoutons un arc à notre canvas en ajoutant le code qui suit:

    - - 
    ctx.fillStyle = 'rgb(0, 0, 255)';
-ctx.beginPath();
-ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
-ctx.fill();
    - -

    arc() prend six paramètres.

    - -
      -
    • Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).
      • -
    • Le troisième est le rayon du cercle
      • -
    • Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)
      • -
    • Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (false pour le sens horaire).
      • -
    - -
    -

    Note : 0 degrés est horizontalement vers la droite.

    -
    -
    2. -
  2. -

    Ajoutons un autre arc:

    - - 
    ctx.fillStyle = 'yellow';
-ctx.beginPath();
-ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
-ctx.lineTo(200, 106);
-ctx.fill();
    - -

    Le motif ici est très similaire, a deux différences près:

    - -
      -
    • Nous avons mis le dernier paramètre de arc() à true, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez true à false et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.
      • -
    • Avant d'appeler fill(), nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.
      • -
    -
    3. -
- -

C'est tout pour le moment; votre exemple final devrait ressembler à ceci:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}

- -
-

Note : Le code finit est disponible sur GitHub, 3_canvas_paths.html.

-
- -
-

Note : Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

-
- -

Texte

- -

Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

- -

Le texte peut être avec deux méthodes:

- - - -

Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (text box) — littéralement, la zone entourant le texte que vous écrivez.

- -

Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.

- -

Essayez d'ajouter le bloc suivant au bas de votre javaScript:

- -
ctx.strokeStyle = 'white';
-ctx.lineWidth = 1;
-ctx.font = '36px arial';
-ctx.strokeText('Canvas text', 50, 50);
-
-ctx.fillStyle = 'red';
-ctx.font = '48px georgia';
-ctx.fillText('Canvas text', 50, 150);
- -

Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}

- -
-

Note : Le code final est disponible sur GitHub, 4_canvas_text.html.

-
- -

Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.

- -

Dessiner des images sur le canvas

- -

Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.

- -
    -
  1. -

    Comme précédemment, créez une nouvelle copie du template (1_canvas_template.html), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — firefox.png — dans le même répertoire.

    - -

    Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.

    -
    2. -
  2. -

    Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

    - - 
    var image = new Image();
-image.src = 'firefox.png';
    - -

    Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.

    -
    3. -
  3. -

    Nous pourrions essayer maintenant d'inclure l'image en utilisant drawImage(), mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement onload, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:

    - - 
    image.onload = function() {
-  ctx.drawImage(image, 50, 50);
-}
    - -

    Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.

    -
    4. -
  4. -

    Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de drawImage(). Mettez à jour votre ligne ctx.drawImage() comme suit:

    - - 
    ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
    - -
      -
    • Le premier paramètre est la référence de l'image, comme précédemment.
      • -
    • Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.
      • -
    • Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.
      • -
    • Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.
      • -
    • Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.
      • -
    -
    5. -
- -

L'exemple final devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}

- -
-

Note : Le code final est disponible sur GitHub, 5_canvas_images.html.

-
- -

Boucles et animations

- -

Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.

- -

Créer une boucle

- -

Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle for (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.

- -

Construisons un exemple simple.

- -
    -
  1. -

    Créez une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte.

    -
    2. -
  2. -

    Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:

    - - 
    ctx.translate(width/2, height/2);
    - -

    Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.

    -
    3. -
  3. -

    Maintenant ajoutez le code suivant au bas du Javacript:

    - - 
    function degToRad(degrees) {
-  return degrees * Math.PI / 180;
-};
-
-function rand(min, max) {
-  return Math.floor(Math.random() * (max-min+1)) + (min);
-}
-
-var length = 250;
-var moveOffset = 20;
-
-for(var i = 0; i < length; i++) {
-
-}
    - -

    Ici, nous implémentons

    - -
      -
    • la même fonction degToRad() que nous avons vu dans l'exemple du triangle auparavant,
      • -
    • une fonction rand(), qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,
      • -
    • les variables length et moveOffset (que nous verrons plus loin),
      • -
    • et une boucle for vide.
      • -
    -
    4. -
  4. -

    L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle for, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle for:

    - - 
    ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
-ctx.beginPath();
-ctx.moveTo(moveOffset, moveOffset);
-ctx.lineTo(moveOffset+length, moveOffset);
-var triHeight = length/2 * Math.tan(degToRad(60));
-ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
-ctx.lineTo(moveOffset, moveOffset);
-ctx.fill();
-
-length--;
-moveOffset += 0.7;
-ctx.rotate(degToRad(5));
    - -

    Ainsi à chaque itération, on:

    - -
      -
    1. Définit fillStyle comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de length. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.
      2. -
    2. Ouvre un path.
      3. -
    3. Déplace le stylo aux coordonnées de (moveOffset, moveOffset); Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.
      4. -
    4. Dessine une ligne aux coordonées de (moveOffset+length, moveOffset). Cela dessine une ligne de longueur length parallèle à l'axe X.
      5. -
    5. Calcule la hauteur du triangle, comme vu auparavant.
      6. -
    6. Dessine une ligne vers le coin du bas du triangle.
      7. -
    7. Dessine une ligne vers le début du triangle.
      8. -
    8. Appelle fill() pour remplir le triangle.
      9. -
    9. Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: -
        -
      • Diminue la valeur de length de 1, de sorte que les triangles deviennent de plus en plus petits;
        • -
      • Augmente un peu moveOffset pour que chaque triangle successif soit légèrement plus éloigné;
        • -
      • et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.
        • -
      -
      10. -
    -
    5. -
- -

C'est tout! L'exemple final devrait ressemble à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}

- -

À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:

- - - -
-

Note : Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

-
- -

Animations

- -

L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.

- -

Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau requestAnimationFrame() juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler requestAnimationFrame() ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé requestAnimationFrame() mais avant que votre fonction n'ait été exécutée.

- -
-

Note: C'est une bonne pratique d'appeler cancelAnimationFrame() à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.

-
- -

Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.

- -

Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (le voir en direct, et voir le code source). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:

- -
function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  while(balls.length < 25) {
-    var ball = new Ball();
-    balls.push(ball);
-  }
-
-  for(i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-    balls[i].collisionDetect();
-  }
-
-  requestAnimationFrame(loop);
-}
-
-loop();
- -

Nous lançons la fonction loop() une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction loop() s'occupe ensuite d'appeler requestAnimationFrame(loop) pour afficher la prochaine image de l'animation, et ce continuellement.

- -

Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.

- -

Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!

- -

En général, le processus pour animer un canvas implique les étapes suivantes:

- -
    -
  1. Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).
    2. -
  2. Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.
    3. -
  3. Dessiner les éléments graphiques que vous animez.
    4. -
  4. Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}
    5. -
  5. Appeler requestAnimationFrame() pour planifier le dessin de l'image suivante de l'animation.
    6. -
- -
-

Note : Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

-
- -

Une animation simple de personnage

- -

Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.

- -
    -
  1. -

    Faites une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de walk-right.png dans le même répertoire.

    -
    2. -
  2. -

    Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:

    - - 
    ctx.translate(width/2, height/2);
    -
    3. -
  3. -

    Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement onload pour appeler la fonction draw() quand l'image sera chargée:

    - - 
    var image = new Image();
-image.src = 'walk-right.png';
-image.onload = draw;
    -
    4. -
  4. -

    Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.

    - - 
    var sprite = 0;
-var posX = 0;
    - -

    L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:

    - -

    - -

    Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.

    -
    5. -
  5. -

    Insérons maintenant une fonction draw() vide au bas du code, prête à être remplie de code:

    - - 
    function draw() {
-
-};
    -
    6. -
  6. -

    Le reste du code dans cette section va dans draw(). Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant -(width/2), -(height/2) puisque nous avons définit l'origine du canvas à width/2, height/2 plus tôt.

    - - 
    ctx.fillRect(-(width/2), -(height/2), width, height);
    -
    7. -
  7. -

    Ensuite, nous allons dessinons notre image en utilisant drawImage() — la version à 9 paramètres. Ajoutez ce qui suit:

    - - 
    ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
    - -

    Comme vous pouvez le voir:

    - -
      -
    • Nous spécifions image comme étant l'image à inclure.
      • -
    • Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut sprite multiplié par 102 (où sprite est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.
      • -
    • Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.
      • -
    • Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est 0+posX, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de posX.
      • -
    • Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.
      • -
    -
    8. -
  8. -

    Maintenant, nous allons changer la valeur de sprite après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction draw():

    - - 
      if (posX % 13 === 0) {
-    if (sprite === 5) {
-      sprite = 0;
-    } else {
-      sprite++;
-    }
-  }
    - -

    Nous enveloppons le bloc entier de if (posX % 13 === 0) { ... }. On utilise l'opérateur modulo (%) (aussi connu sous le nom d'opérateur reste) pour vérifier si la valeur de posX peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant sprite (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (requestAnimationFrame() appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!

    - -

    À l'intérieur du bloc, on utilise une instruction if ... else pour vérifier si la valeur de sprite vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse sprite à 0; sinon on l'incrémente de 1.

    -
    9. -
  9. -

    Ensuite, nous devons déterminer comment modifier la valeur de posX sur chaque image — ajoutez le bloc de code à la suite:

    - - 
      if(posX > width/2) {
-    newStartPos = -((width/2) + 102);
-    posX = Math.ceil(newStartPos / 13) * 13;
-    console.log(posX);
-  } else {
-    posX += 2;
-  }
    - -

    Nous utilisons une autre instruction if ... else pour voir si la valeur de posX est plus grande que width/2, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit posX au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!

    - -

    Si notre personnage n'a pas atteint le bord de l'écran, on incrémente posX de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.

    -
    10. -
  10. -

    Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction draw():

    - - 
    window.requestAnimationFrame(draw);
    -
    11. -
- -

Et voilà! L'exemple final devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

- -
-

Note : Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

-
- -

Une application simple de dessin

- -

Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.

- -

L'exemple peut être trouvé sur GitHub, 8_canvas_drawing_app.html, et vous pouvez jouer avec en direct ci-dessous:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}

- -

Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: curX, curY, et pressed. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement onmousemove, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement onmousedown et onmouseup pour changer la valeur de pressed à true quand le bouton de la souris est pressé, et de nouveau à false quand il est relaché.

- -
var curX;
-var curY;
-var pressed = false;
-
-document.onmousemove = function(e) {
-  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
-  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
-}
-
-canvas.onmousedown = function() {
-  pressed = true;
-};
-
-canvas.onmouseup = function() {
-  pressed = false;
-}
- -

Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:

- -
clearBtn.onclick = function() {
-  ctx.fillStyle = 'rgb(0, 0, 0)';
-  ctx.fillRect(0, 0, width, height);
-}
- -

La boucle du dessin est relativement simple cette fois-ci — si pressed est à true, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.

- -
function draw() {
-  if(pressed) {
-    ctx.fillStyle = colorPicker.value;
-    ctx.beginPath();
-    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-
-  requestAnimationFrame(draw);
-}
-
-draw();
- -
-

Note : Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

-
- -

WebGL

- -

Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'API WebGL, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.

- -

WebGL est basé sur le langage de programmation graphique OpenGL, et permet de communiquer directement avec le GPU de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.

- -

Utiliser une bibliothèque

- -

De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que Three.js, PlayCanvas ou Babylon.js. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.

- -

Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.

- -

Recréer notre cube

- -

Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir Three.js, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.

- -
    -
  1. -

    Pour commencer, créez une copie locale de index.html dans un nouveau répertoire, et sauvegardez metal003.png dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.

    -
    2. -
  2. -

    Ensuite, créez un nouveau fichier main.js, toujours dans le même répertoire.

    -
    3. -
  3. -

    Si vous ouvrez index.html dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute three.min.js à la page, et le second ajoute notre fichier main.js à la page. Vous devez télécharger la bibliothèque three.min.js et la sauvegarder dans le même répertoire que précédemment.

    -
    4. -
  4. -

    Maintenant que nous avons inclus three.js dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans main.js. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier main.js:

    - - 
    var scene = new THREE.Scene();
    - -

    Le constructeur Scene() crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.

    -
    5. -
  5. -

    Ensuite, nous avons besoin d'une caméra pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:

    - - 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-camera.position.z = 5;
-
    - -

    Le constructeur PerspectiveCamera() prend quatre arguments:

    - -
      -
    • Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.
      • -
    • Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).
      • -
    • Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.
      • -
    • Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.
      • -
    - -

    Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.

    -
    6. -
  6. -

    Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur WebGLRenderer() — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:

    - - 
    var renderer = new THREE.WebGLRenderer();
-renderer.setSize(window.innerWidth, window.innerHeight);
-document.body.appendChild(renderer.domElement);
    - -

    La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.

    -
    7. -
  7. -

    Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:

    - - 
    var cube;
-
-var loader = new THREE.TextureLoader();
-
-loader.load( 'metal003.png', function (texture) {
-  texture.wrapS = THREE.RepeatWrapping;
-  texture.wrapT = THREE.RepeatWrapping;
-  texture.repeat.set(2, 2);
-
-  var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
-  var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );
-  cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  draw();
-});
    - -

    Il y a un peu plus à encaisser ici, alors allons-ici par étapes:

    - -
      -
    • Nous créons d'abord une variable globale cube pour pouvoir accéder à notre cube de n'importe où dans notre code.
      • -
    • Ensuite, nous créons un nouvel objet TextureLoader, et appellons load() dessus. La fonction load() prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.
      • -
    • À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet texture pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.
      • -
    • Ensuite, nous créons un nouvel objet BoxGeometry et MeshLambertMaterial, que nous passons à un Mesh pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).
      • -
    • Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction draw() pour commencer l'animation.
      • -
    -
    8. -
  8. -

    Avant de définir la fonction draw(), nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:

    - - 
    var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light
-scene.add(light);
-
-var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
-spotLight.position.set( 100, 1000, 1000 );
-spotLight.castShadow = true;
-scene.add(spotLight);
    - -

    Un objet AmbientLight est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet SpotLight, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).

    -
    9. -
  9. -

    Pour finir, ajoutons notre fonction draw() au bas du code:

    - - 
    function draw() {
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
-  renderer.render(scene, camera);
-
-  requestAnimationFrame(draw);
-}
    - -

    C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons requestAnimationFrame() pour planifier le dessin de notre prochaine image.

    -
    10. -
- -

Jetons un coup d'oeil rapide au produit fini:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

- -

Vous pouvez trouver le code terminé sur GitHub.

- -
-

Note : Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

-
- -

Sommaire

- -

À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!

- -

Voir aussi

- -

Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.

- - - -

Exemples

- - - -

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md new file mode 100644 index 0000000000..95c9f7f8e4 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -0,0 +1,923 @@ +--- +title: Dessiner des éléments graphiques +slug: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +tags: + - API + - Apprendre + - Articles + - Canvas + - Codage + - Débutant + - Graphismes + - JavaScript + - WebGL +translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.

+ + + + + + + + + + + + +
Prérequis:Bases de JavaScript (voir premiers pas, les briques JavaScript, introduction aux objets), les notions de bases des APIs côté client
Objectif:Apprendre les bases pour dessiner sur des éléments <canvas> en utilisant JavaScript.
+ +

Éléments graphiques sur le Web

+ +

Comme nous en avons parlé dans notre module HTML Multimédia et Intégration, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et SVG.

+ +

Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser CSS et JavaScript pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.

+ +

La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' API Canvas associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.

+ +

L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module La construction d'objet en pratique:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}

+ +

Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu WebGL, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

+ +

Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.

+ +
+

Note : Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

+
+ +

Apprentissage actif: Débuter avec un <canvas>

+ +

Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:

+ +
<canvas width="320" height="240"></canvas>
+ +

Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.

+ +

À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.

+ +
<canvas width="320" height="240">
+  <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p>
+</canvas>
+ +

Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.

+ +

Crée et dimensionner notre canvas

+ +

Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.

+ +
    +
  1. +

    Premièrement, copiez localement notre fichier 0_canvas_start.html, et ouvez-le dans votre éditeur de texte.

    +
    2. +
  2. +

    Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:

    + + 
    <canvas class="myCanvas">
+  <p>Ajouter un contenu alternatif approprié ici.</p>
+</canvas>
    + +

    Nous avons ajouté un attribut class à l'élément <canvas> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs width et height pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.

    +
    3. +
  3. +

    Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:

    + + 
    var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;
    + +

    Ici, nous avons stocké une référence vers le canvas dans la variable canvas. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable width et la propriété width du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable height et la propriété height du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!

    + +

    Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).

    +
    4. +
  4. +

    Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à hidden. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:

    + + 
    <style>
+  body {
+    margin: 0;
+    overflow: hidden;
+  }
+</style>
    + +

    Les barres de défilement ne devraient plus être là.

    +
    5. +
+ +
+

Note : Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

+
+ +

Obtenir le contexte du canvas et configuration finale

+ +

Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un contexte. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.

+ +

En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <script>:

+ +
var ctx = canvas.getContext('2d');
+ +
+

Note : Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

+
+ +

Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.

+ +

Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

+ +
ctx.fillStyle = 'rgb(0, 0, 0)';
+ctx.fillRect(0, 0, width, height);
+ +

Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une valeur de couleur tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables width et height allaient être utiles)!

+ +

OK, notre template est prêt et il est temps de passer à autre chose.

+ +

Les bases du canvas 2D

+ +

Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, ctx).

+ +

De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.

+ +

+ +

Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.

+ +

Rectangles simples

+ +

Commençons avec quelques rectangles simples.

+ +
    +
  1. +

    Tout d'abord, faites une copie de votre template (ou copiez localement le fichier 1_canvas_template.html si vous n'avez pas suivit les étapes précédentes).

    +
    2. +
  2. +

    Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:

    + + 
    ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.fillRect(50, 50, 100, 150);
    + +

    Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).

    +
    3. +
  3. +

    Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:

    + + 
    ctx.fillStyle = 'rgb(0, 255, 0)';
+ctx.fillRect(75, 75, 100, 100);
    + +

    Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.

    +
    4. +
  4. +

    Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant rgba(). La valeur a définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de a est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:

    + + 
    ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
+ctx.fillRect(25, 100, 175, 50);
    +
    5. +
  5. +

    Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!

    +
    6. +
+ +

Traits et épaisseurs de ligne

+ +

Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit strokes - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.

+ +
    +
  1. +

    Ajoutez ce qui suit au bas de votre JavaScript:

    + + 
    ctx.strokeStyle = 'rgb(255, 255, 255)';
+ctx.strokeRect(25, 25, 175, 200);
    +
    2. +
  2. +

    L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:

    + + 
    ctx.lineWidth = 5;
    + +

    Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!

    +
    3. +
+ +

C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}

+ +
+

Note : Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

+
+ +

Dessiner des chemins

+ +

Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un path (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.

+ +

Commençons la section en faisant une nouvelle copie de notre template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

+ +

Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:

+ + + +

Typiquement, une manière de dessiner un trait simple ressemblerait à ça:

+ +
ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(50, 50);
+// tracer le trait
+ctx.fill();
+ +

Dessiner des lignes

+ +

Dessinons un triangle équilatéral sur le canvas.

+ +
    +
  1. +

    Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.

    + + 
    function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
    +
    2. +
  2. +

    Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.

    + + 
    ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(50, 50);
    +
    3. +
  3. +

    Maintenant ajoutez le bloc de code suivant:

    + + 
    ctx.lineTo(150, 50);
+var triHeight = 50 * Math.tan(degToRad(60));
+ctx.lineTo(100, 50+triHeight);
+ctx.lineTo(50, 50);
+ctx.fill();
    + +

    Parcourons ceci dans l'ordre:

    + +
      +
    1. +

      D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).

      +
      2. +
    2. +

      Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.

      + +

      Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.

      + +

      Pour ce qui est des côtés:

      + +
        +
      • Le côté le plus long est appelé l'hypoténuse
        • +
      • Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit adjacent à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.
        • +
      • Le côté opposé à l'angle de 60 degrés est dit opposé à cet angle — c'est la hauteur que nous voulons calculer.
        • +
      + +

       

      + +

      + +

      Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.

      +
      3. +
    3. +

      Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers (100, 50+triHeight). La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.

      +
      4. +
    4. +

      L'instruction qui suit ajoute une ligne vers le point de départ du triangle.

      +
      5. +
    5. +

      Pour finir, nous appelons ctx.fill() pour finir le path et remplir la forme.

      +
      6. +
    +
    4. +
+ +

Dessiner des cercles

+ +

Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.

+ +
    +
  1. +

    Ajoutons un arc à notre canvas en ajoutant le code qui suit:

    + + 
    ctx.fillStyle = 'rgb(0, 0, 255)';
+ctx.beginPath();
+ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
+ctx.fill();
    + +

    arc() prend six paramètres.

    + +
      +
    • Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).
      • +
    • Le troisième est le rayon du cercle
      • +
    • Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)
      • +
    • Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (false pour le sens horaire).
      • +
    + +
    +

    Note : 0 degrés est horizontalement vers la droite.

    +
    +
    2. +
  2. +

    Ajoutons un autre arc:

    + + 
    ctx.fillStyle = 'yellow';
+ctx.beginPath();
+ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
+ctx.lineTo(200, 106);
+ctx.fill();
    + +

    Le motif ici est très similaire, a deux différences près:

    + +
      +
    • Nous avons mis le dernier paramètre de arc() à true, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez true à false et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.
      • +
    • Avant d'appeler fill(), nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.
      • +
    +
    3. +
+ +

C'est tout pour le moment; votre exemple final devrait ressembler à ceci:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}

+ +
+

Note : Le code finit est disponible sur GitHub, 3_canvas_paths.html.

+
+ +
+

Note : Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

+
+ +

Texte

+ +

Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

+ +

Le texte peut être avec deux méthodes:

+ + + +

Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (text box) — littéralement, la zone entourant le texte que vous écrivez.

+ +

Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.

+ +

Essayez d'ajouter le bloc suivant au bas de votre javaScript:

+ +
ctx.strokeStyle = 'white';
+ctx.lineWidth = 1;
+ctx.font = '36px arial';
+ctx.strokeText('Canvas text', 50, 50);
+
+ctx.fillStyle = 'red';
+ctx.font = '48px georgia';
+ctx.fillText('Canvas text', 50, 150);
+ +

Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}

+ +
+

Note : Le code final est disponible sur GitHub, 4_canvas_text.html.

+
+ +

Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.

+ +

Dessiner des images sur le canvas

+ +

Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.

+ +
    +
  1. +

    Comme précédemment, créez une nouvelle copie du template (1_canvas_template.html), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — firefox.png — dans le même répertoire.

    + +

    Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.

    +
    2. +
  2. +

    Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

    + + 
    var image = new Image();
+image.src = 'firefox.png';
    + +

    Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.

    +
    3. +
  3. +

    Nous pourrions essayer maintenant d'inclure l'image en utilisant drawImage(), mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement onload, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:

    + + 
    image.onload = function() {
+  ctx.drawImage(image, 50, 50);
+}
    + +

    Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.

    +
    4. +
  4. +

    Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de drawImage(). Mettez à jour votre ligne ctx.drawImage() comme suit:

    + + 
    ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
    + +
      +
    • Le premier paramètre est la référence de l'image, comme précédemment.
      • +
    • Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.
      • +
    • Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.
      • +
    • Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.
      • +
    • Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.
      • +
    +
    5. +
+ +

L'exemple final devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}

+ +
+

Note : Le code final est disponible sur GitHub, 5_canvas_images.html.

+
+ +

Boucles et animations

+ +

Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.

+ +

Créer une boucle

+ +

Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle for (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.

+ +

Construisons un exemple simple.

+ +
    +
  1. +

    Créez une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte.

    +
    2. +
  2. +

    Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:

    + + 
    ctx.translate(width/2, height/2);
    + +

    Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.

    +
    3. +
  3. +

    Maintenant ajoutez le code suivant au bas du Javacript:

    + + 
    function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+function rand(min, max) {
+  return Math.floor(Math.random() * (max-min+1)) + (min);
+}
+
+var length = 250;
+var moveOffset = 20;
+
+for(var i = 0; i < length; i++) {
+
+}
    + +

    Ici, nous implémentons

    + +
      +
    • la même fonction degToRad() que nous avons vu dans l'exemple du triangle auparavant,
      • +
    • une fonction rand(), qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,
      • +
    • les variables length et moveOffset (que nous verrons plus loin),
      • +
    • et une boucle for vide.
      • +
    +
    4. +
  4. +

    L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle for, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle for:

    + + 
    ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
+ctx.beginPath();
+ctx.moveTo(moveOffset, moveOffset);
+ctx.lineTo(moveOffset+length, moveOffset);
+var triHeight = length/2 * Math.tan(degToRad(60));
+ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
+ctx.lineTo(moveOffset, moveOffset);
+ctx.fill();
+
+length--;
+moveOffset += 0.7;
+ctx.rotate(degToRad(5));
    + +

    Ainsi à chaque itération, on:

    + +
      +
    1. Définit fillStyle comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de length. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.
      2. +
    2. Ouvre un path.
      3. +
    3. Déplace le stylo aux coordonnées de (moveOffset, moveOffset); Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.
      4. +
    4. Dessine une ligne aux coordonées de (moveOffset+length, moveOffset). Cela dessine une ligne de longueur length parallèle à l'axe X.
      5. +
    5. Calcule la hauteur du triangle, comme vu auparavant.
      6. +
    6. Dessine une ligne vers le coin du bas du triangle.
      7. +
    7. Dessine une ligne vers le début du triangle.
      8. +
    8. Appelle fill() pour remplir le triangle.
      9. +
    9. Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: +
        +
      • Diminue la valeur de length de 1, de sorte que les triangles deviennent de plus en plus petits;
        • +
      • Augmente un peu moveOffset pour que chaque triangle successif soit légèrement plus éloigné;
        • +
      • et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.
        • +
      +
      10. +
    +
    5. +
+ +

C'est tout! L'exemple final devrait ressemble à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}

+ +

À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:

+ + + +
+

Note : Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

+
+ +

Animations

+ +

L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.

+ +

Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau requestAnimationFrame() juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler requestAnimationFrame() ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé requestAnimationFrame() mais avant que votre fonction n'ait été exécutée.

+ +
+

Note: C'est une bonne pratique d'appeler cancelAnimationFrame() à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.

+
+ +

Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.

+ +

Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (le voir en direct, et voir le code source). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:

+ +
function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while(balls.length < 25) {
+    var ball = new Ball();
+    balls.push(ball);
+  }
+
+  for(i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+    balls[i].collisionDetect();
+  }
+
+  requestAnimationFrame(loop);
+}
+
+loop();
+ +

Nous lançons la fonction loop() une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction loop() s'occupe ensuite d'appeler requestAnimationFrame(loop) pour afficher la prochaine image de l'animation, et ce continuellement.

+ +

Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.

+ +

Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!

+ +

En général, le processus pour animer un canvas implique les étapes suivantes:

+ +
    +
  1. Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).
    2. +
  2. Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.
    3. +
  3. Dessiner les éléments graphiques que vous animez.
    4. +
  4. Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}
    5. +
  5. Appeler requestAnimationFrame() pour planifier le dessin de l'image suivante de l'animation.
    6. +
+ +
+

Note : Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

+
+ +

Une animation simple de personnage

+ +

Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.

+ +
    +
  1. +

    Faites une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de walk-right.png dans le même répertoire.

    +
    2. +
  2. +

    Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:

    + + 
    ctx.translate(width/2, height/2);
    +
    3. +
  3. +

    Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement onload pour appeler la fonction draw() quand l'image sera chargée:

    + + 
    var image = new Image();
+image.src = 'walk-right.png';
+image.onload = draw;
    +
    4. +
  4. +

    Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.

    + + 
    var sprite = 0;
+var posX = 0;
    + +

    L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:

    + +

    + +

    Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.

    +
    5. +
  5. +

    Insérons maintenant une fonction draw() vide au bas du code, prête à être remplie de code:

    + + 
    function draw() {
+
+};
    +
    6. +
  6. +

    Le reste du code dans cette section va dans draw(). Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant -(width/2), -(height/2) puisque nous avons définit l'origine du canvas à width/2, height/2 plus tôt.

    + + 
    ctx.fillRect(-(width/2), -(height/2), width, height);
    +
    7. +
  7. +

    Ensuite, nous allons dessinons notre image en utilisant drawImage() — la version à 9 paramètres. Ajoutez ce qui suit:

    + + 
    ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
    + +

    Comme vous pouvez le voir:

    + +
      +
    • Nous spécifions image comme étant l'image à inclure.
      • +
    • Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut sprite multiplié par 102 (où sprite est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.
      • +
    • Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.
      • +
    • Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est 0+posX, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de posX.
      • +
    • Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.
      • +
    +
    8. +
  8. +

    Maintenant, nous allons changer la valeur de sprite après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction draw():

    + + 
      if (posX % 13 === 0) {
+    if (sprite === 5) {
+      sprite = 0;
+    } else {
+      sprite++;
+    }
+  }
    + +

    Nous enveloppons le bloc entier de if (posX % 13 === 0) { ... }. On utilise l'opérateur modulo (%) (aussi connu sous le nom d'opérateur reste) pour vérifier si la valeur de posX peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant sprite (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (requestAnimationFrame() appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!

    + +

    À l'intérieur du bloc, on utilise une instruction if ... else pour vérifier si la valeur de sprite vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse sprite à 0; sinon on l'incrémente de 1.

    +
    9. +
  9. +

    Ensuite, nous devons déterminer comment modifier la valeur de posX sur chaque image — ajoutez le bloc de code à la suite:

    + + 
      if(posX > width/2) {
+    newStartPos = -((width/2) + 102);
+    posX = Math.ceil(newStartPos / 13) * 13;
+    console.log(posX);
+  } else {
+    posX += 2;
+  }
    + +

    Nous utilisons une autre instruction if ... else pour voir si la valeur de posX est plus grande que width/2, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit posX au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!

    + +

    Si notre personnage n'a pas atteint le bord de l'écran, on incrémente posX de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.

    +
    10. +
  10. +

    Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction draw():

    + + 
    window.requestAnimationFrame(draw);
    +
    11. +
+ +

Et voilà! L'exemple final devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

+ +
+

Note : Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

+
+ +

Une application simple de dessin

+ +

Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.

+ +

L'exemple peut être trouvé sur GitHub, 8_canvas_drawing_app.html, et vous pouvez jouer avec en direct ci-dessous:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}

+ +

Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: curX, curY, et pressed. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement onmousemove, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement onmousedown et onmouseup pour changer la valeur de pressed à true quand le bouton de la souris est pressé, et de nouveau à false quand il est relaché.

+ +
var curX;
+var curY;
+var pressed = false;
+
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+ +

Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:

+ +
clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+}
+ +

La boucle du dessin est relativement simple cette fois-ci — si pressed est à true, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.

+ +
function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();
+ +
+

Note : Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

+
+ +

WebGL

+ +

Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'API WebGL, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.

+ +

WebGL est basé sur le langage de programmation graphique OpenGL, et permet de communiquer directement avec le GPU de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.

+ +

Utiliser une bibliothèque

+ +

De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que Three.js, PlayCanvas ou Babylon.js. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.

+ +

Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.

+ +

Recréer notre cube

+ +

Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir Three.js, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.

+ +
    +
  1. +

    Pour commencer, créez une copie locale de index.html dans un nouveau répertoire, et sauvegardez metal003.png dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.

    +
    2. +
  2. +

    Ensuite, créez un nouveau fichier main.js, toujours dans le même répertoire.

    +
    3. +
  3. +

    Si vous ouvrez index.html dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute three.min.js à la page, et le second ajoute notre fichier main.js à la page. Vous devez télécharger la bibliothèque three.min.js et la sauvegarder dans le même répertoire que précédemment.

    +
    4. +
  4. +

    Maintenant que nous avons inclus three.js dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans main.js. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier main.js:

    + + 
    var scene = new THREE.Scene();
    + +

    Le constructeur Scene() crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.

    +
    5. +
  5. +

    Ensuite, nous avons besoin d'une caméra pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:

    + + 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 5;
+
    + +

    Le constructeur PerspectiveCamera() prend quatre arguments:

    + +
      +
    • Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.
      • +
    • Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).
      • +
    • Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.
      • +
    • Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.
      • +
    + +

    Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.

    +
    6. +
  6. +

    Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur WebGLRenderer() — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:

    + + 
    var renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
    + +

    La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.

    +
    7. +
  7. +

    Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:

    + + 
    var cube;
+
+var loader = new THREE.TextureLoader();
+
+loader.load( 'metal003.png', function (texture) {
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(2, 2);
+
+  var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
+  var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );
+  cube = new THREE.Mesh(geometry, material);
+  scene.add(cube);
+
+  draw();
+});
    + +

    Il y a un peu plus à encaisser ici, alors allons-ici par étapes:

    + +
      +
    • Nous créons d'abord une variable globale cube pour pouvoir accéder à notre cube de n'importe où dans notre code.
      • +
    • Ensuite, nous créons un nouvel objet TextureLoader, et appellons load() dessus. La fonction load() prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.
      • +
    • À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet texture pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.
      • +
    • Ensuite, nous créons un nouvel objet BoxGeometry et MeshLambertMaterial, que nous passons à un Mesh pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).
      • +
    • Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction draw() pour commencer l'animation.
      • +
    +
    8. +
  8. +

    Avant de définir la fonction draw(), nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:

    + + 
    var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light
+scene.add(light);
+
+var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
+spotLight.position.set( 100, 1000, 1000 );
+spotLight.castShadow = true;
+scene.add(spotLight);
    + +

    Un objet AmbientLight est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet SpotLight, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).

    +
    9. +
  9. +

    Pour finir, ajoutons notre fonction draw() au bas du code:

    + + 
    function draw() {
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(draw);
+}
    + +

    C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons requestAnimationFrame() pour planifier le dessin de notre prochaine image.

    +
    10. +
+ +

Jetons un coup d'oeil rapide au produit fini:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

+ +

Vous pouvez trouver le code terminé sur GitHub.

+ +
+

Note : Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

+
+ +

Sommaire

+ +

À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!

+ +

Voir aussi

+ +

Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.

+ + + +

Exemples

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html deleted file mode 100644 index 9fe8ea07d5..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html +++ /dev/null @@ -1,398 +0,0 @@ ---- -title: Récupérer des données du serveur -slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data -tags: - - API - - Apprendre - - Article - - Codage - - Débutant - - Fetch - - JavaScript - - XHR - - data -translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.

- - - - - - - - - - - - -
Prérequis :Notions de base de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de bases des APIs côté client
Objectif :Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.
- -

Quel est le problème?

- -

À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.

- -

A basic representation of a web site architecture

- -

Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.

- -

L'arrivée d'Ajax

- -

Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du HTML, {{glossary("XML")}}, JSON, ou texte brut) et de les afficher dans la page web.

- -

Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'API Fetch. Elles permettent de réaliser des requêtes HTTP pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.

- -
-

Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.

-
- -

A simple modern architecture for web sites

- -

Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :

- -
    -
  1. Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...
    2. -
  2. Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.
    3. -
- -

C'est une bonne chose puisque :

- - - -

Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.

- -

A basic web app data flow architecture

- -

Une requête Ajax basique

- -

Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit Fetch. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.

- -

Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.

- -

XMLHttpRequest

- -

XMLHttpRequest (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.

- -
    -
  1. -

    Pour commencer cet exemple, faites une copie locale de ajax-start.html et des quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, et verse4.txt — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.

    -
    2. -
  2. -

    À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  updateDisplay().

    - - 
    var verseChoose = document.querySelector('select');
-var poemDisplay = document.querySelector('pre');
-
-verseChoose.onchange = function() {
-  var verse = verseChoose.value;
-  updateDisplay(verse);
-};
    -
    3. -
  3. -

    Définissons maintenant la fonction updateDisplay(). Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :

    - - 
    function updateDisplay(verse) {
-
-};
    -
    4. -
  4. -

    Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut value s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.

    - -

    Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple concaténation de chaînes. Ajoutez les lignes suivantes à l'intérieur de la fonction updateDisplay() :

    - - 
    verse = verse.replace(" ", "");
-verse = verse.toLowerCase();
-var url = verse + '.txt';
    -
    5. -
  5. -

    Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons request pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :

    - - 
    var request = new XMLHttpRequest();
    -
    6. -
  6. -

    Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la méthode HTTP et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode GET et passer notre variable url pour URL. Ajoutez ceci à la suite de la ligne précédente :

    - - 
    request.open('GET', url);
    -
    7. -
  7. -

    Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme text. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :

    - - 
    request.responseType = 'text';
    -
    8. -
  8. -

    Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété response de l'objet XHR utilisé.

    - -

    Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.

    - - 
    request.onload = function() {
-  poemDisplay.textContent = request.response;
-};
    -
    9. -
  9. -

    Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :

    - - 
    request.send();
    - -

    Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.

    -
    10. -
  10. -

    Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante </script>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :

    - - 
    updateDisplay('Verse 1');
-verseChoose.value = 'Verse 1';
    -
    11. -
- -

Servir votre exemple depuis un serveur

- -

Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article La sécurité d'un site web).

- -

Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez Comment configurer un serveur de test local?

- -

Fetch

- -

L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.

- -

Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.

- -
    -
  1. -

    Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier xhr-basic.html et les quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — à l'intérieur).

    -
    2. -
  2. -

    À l'intérieur de la fonction updateDisplay(), vous avez le code XHR suivant :

    - - 
    var request = new XMLHttpRequest();
-request.open('GET', url);
-request.responseType = 'text';
-
-request.onload = function() {
-  poemDisplay.textContent = request.response;
-};
-
-request.send();
    -
    3. -
  3. -

    Remplacez-le avec ce qui suit :

    - - 
    fetch(url).then(function(response) {
-  response.text().then(function(text) {
-    poemDisplay.textContent = text;
-  });
-});
    -
    4. -
  4. -

    Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.

    -
    5. -
- -

Que se passe-t-il dans le code Fetch?

- -

Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler .send() — la requête est exécutée directemment.

- -

Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de fetch() — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. fetch() retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons .then() pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément onload dans la version XHR.

- -

La fonction définie dans le .then() reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par fetch() est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de request.responseType = 'text' dans la version XHR.

- -

Vous verrez que text() retourne également une promesse, nous y chaînons donc un nouveau .then(), à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.

- -

Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.

- -

À propos des promesses

- -

Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.

- -

Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.

- -

Promesse 1

- -
fetch(url).then(function(response) {
-  //...
-});
- -

Si l'on traduit en bon français les instructions JavaScript, on pourrait dire

- - - -

On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.

- -

La fonction passée à then() n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).

- -

Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :

- -
var myFetch = fetch(url);
-
-myFetch.then(function(response) {
-  //...
-});
- -

Parce que la méthode fetch() retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du .then() reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :

- -
fetch(url).then(function(dogBiscuits) {
-  //...
-});
- -

Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !

- -

Promesse 2

- -

Voyons maintenant la fonction appelé dans .then():

- -
function(response) {
-  response.text().then(function(text) {
-    poemDisplay.textContent = text;
-  });
-}
- -

L'objet response a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.

- -

À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.

- -

Chaîner les then()

- -

Notez que le résultat de la fonction appelée par le .then() est également retourné par ce dernier, nous pouvons donc mettre les .then() bout à bout, en passant le résultat du bloc précédent au prochain.

- -

Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :

- -
fetch(url).then(function(response) {
-  return response.text()
-}).then(function(text) {
-  poemDisplay.textContent = text;
-});
- -

Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction return pour retourner response.text(), et ce résultat est passé au prochain .then().

- -

Quel mécanisme devriez-vous utiliser?

- -

Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.

- -

Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.

- -

Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.

- -

Un exemple plus complexe

- -

Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet exemple en direct sur GitHub, et voir le code source.

- -

A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.

- -

Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.

- -

Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir can-script.js). Nous allons expliquer le code Fetch.

- -

Premier Fetch

- -

Le premier bloc qui utilise Fetch se trouve au début du JavaScript :

- -
fetch('products.json').then(function(response) {
-  if(response.ok) {
-    response.json().then(function(json) {
-      products = json;
-      initialize();
-    });
-  } else {
-    console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
-  }
-});
- -

Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut true si le statut de la réponse était OK (statut HTTP 200, "OK"), ou false sinon.

- -

Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.

- -

Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.

- -

Vous pouvez tester le cas d'échec vous-même :

- -
    -
  1. Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le fichier ZIP can-store)
    2. -
  2. Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})
    3. -
  3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.
    4. -
  4. Maintenant, chargez le fichier index dans votre navigateur (via localhost:8000) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).
    5. -
- -

Deuxième Fetch

- -

Le deuxième bloc Fetch se trouve dans la fonction fetchBlob():

- -
fetch(url).then(function(response) {
-  if(response.ok) {
-    response.blob().then(function(blob) {
-      objectURL = URL.createObjectURL(blob);
-      showProduct(objectURL, product);
-    });
-  } else {
-    console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText);
-  }
-});
- -

Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est Blob — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.

- -

Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :

- -
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
- -

Challenge : une version XHR de Can Store

- -

Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une copie du fichier ZIP et essayiez de modifier le JavaScript en conséquence.

- -

Quelques conseils qui pourraient s'avérer utiles :

- - - -
-

Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).

-
- -

Sommaire

- -

Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.

- -

Voir aussi

- -

Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:

- - - -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md new file mode 100644 index 0000000000..9fe8ea07d5 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md @@ -0,0 +1,398 @@ +--- +title: Récupérer des données du serveur +slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data +tags: + - API + - Apprendre + - Article + - Codage + - Débutant + - Fetch + - JavaScript + - XHR + - data +translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.

+ + + + + + + + + + + + +
Prérequis :Notions de base de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de bases des APIs côté client
Objectif :Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.
+ +

Quel est le problème?

+ +

À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.

+ +

A basic representation of a web site architecture

+ +

Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.

+ +

L'arrivée d'Ajax

+ +

Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du HTML, {{glossary("XML")}}, JSON, ou texte brut) et de les afficher dans la page web.

+ +

Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'API Fetch. Elles permettent de réaliser des requêtes HTTP pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.

+ +
+

Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.

+
+ +

A simple modern architecture for web sites

+ +

Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :

+ +
    +
  1. Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...
    2. +
  2. Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.
    3. +
+ +

C'est une bonne chose puisque :

+ + + +

Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.

+ +

A basic web app data flow architecture

+ +

Une requête Ajax basique

+ +

Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit Fetch. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.

+ +

Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.

+ +

XMLHttpRequest

+ +

XMLHttpRequest (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.

+ +
    +
  1. +

    Pour commencer cet exemple, faites une copie locale de ajax-start.html et des quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, et verse4.txt — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.

    +
    2. +
  2. +

    À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  updateDisplay().

    + + 
    var verseChoose = document.querySelector('select');
+var poemDisplay = document.querySelector('pre');
+
+verseChoose.onchange = function() {
+  var verse = verseChoose.value;
+  updateDisplay(verse);
+};
    +
    3. +
  3. +

    Définissons maintenant la fonction updateDisplay(). Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :

    + + 
    function updateDisplay(verse) {
+
+};
    +
    4. +
  4. +

    Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut value s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.

    + +

    Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple concaténation de chaînes. Ajoutez les lignes suivantes à l'intérieur de la fonction updateDisplay() :

    + + 
    verse = verse.replace(" ", "");
+verse = verse.toLowerCase();
+var url = verse + '.txt';
    +
    5. +
  5. +

    Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons request pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :

    + + 
    var request = new XMLHttpRequest();
    +
    6. +
  6. +

    Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la méthode HTTP et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode GET et passer notre variable url pour URL. Ajoutez ceci à la suite de la ligne précédente :

    + + 
    request.open('GET', url);
    +
    7. +
  7. +

    Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme text. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :

    + + 
    request.responseType = 'text';
    +
    8. +
  8. +

    Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété response de l'objet XHR utilisé.

    + +

    Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.

    + + 
    request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
    +
    9. +
  9. +

    Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :

    + + 
    request.send();
    + +

    Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.

    +
    10. +
  10. +

    Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante </script>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :

    + + 
    updateDisplay('Verse 1');
+verseChoose.value = 'Verse 1';
    +
    11. +
+ +

Servir votre exemple depuis un serveur

+ +

Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article La sécurité d'un site web).

+ +

Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez Comment configurer un serveur de test local?

+ +

Fetch

+ +

L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.

+ +

Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.

+ +
    +
  1. +

    Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier xhr-basic.html et les quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — à l'intérieur).

    +
    2. +
  2. +

    À l'intérieur de la fonction updateDisplay(), vous avez le code XHR suivant :

    + + 
    var request = new XMLHttpRequest();
+request.open('GET', url);
+request.responseType = 'text';
+
+request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
+
+request.send();
    +
    3. +
  3. +

    Remplacez-le avec ce qui suit :

    + + 
    fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});
    +
    4. +
  4. +

    Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.

    +
    5. +
+ +

Que se passe-t-il dans le code Fetch?

+ +

Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler .send() — la requête est exécutée directemment.

+ +

Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de fetch() — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. fetch() retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons .then() pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément onload dans la version XHR.

+ +

La fonction définie dans le .then() reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par fetch() est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de request.responseType = 'text' dans la version XHR.

+ +

Vous verrez que text() retourne également une promesse, nous y chaînons donc un nouveau .then(), à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.

+ +

Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.

+ +

À propos des promesses

+ +

Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.

+ +

Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.

+ +

Promesse 1

+ +
fetch(url).then(function(response) {
+  //...
+});
+ +

Si l'on traduit en bon français les instructions JavaScript, on pourrait dire

+ + + +

On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.

+ +

La fonction passée à then() n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).

+ +

Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :

+ +
var myFetch = fetch(url);
+
+myFetch.then(function(response) {
+  //...
+});
+ +

Parce que la méthode fetch() retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du .then() reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :

+ +
fetch(url).then(function(dogBiscuits) {
+  //...
+});
+ +

Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !

+ +

Promesse 2

+ +

Voyons maintenant la fonction appelé dans .then():

+ +
function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+}
+ +

L'objet response a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.

+ +

À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.

+ +

Chaîner les then()

+ +

Notez que le résultat de la fonction appelée par le .then() est également retourné par ce dernier, nous pouvons donc mettre les .then() bout à bout, en passant le résultat du bloc précédent au prochain.

+ +

Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :

+ +
fetch(url).then(function(response) {
+  return response.text()
+}).then(function(text) {
+  poemDisplay.textContent = text;
+});
+ +

Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction return pour retourner response.text(), et ce résultat est passé au prochain .then().

+ +

Quel mécanisme devriez-vous utiliser?

+ +

Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.

+ +

Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.

+ +

Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.

+ +

Un exemple plus complexe

+ +

Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet exemple en direct sur GitHub, et voir le code source.

+ +

A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.

+ +

Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.

+ +

Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir can-script.js). Nous allons expliquer le code Fetch.

+ +

Premier Fetch

+ +

Le premier bloc qui utilise Fetch se trouve au début du JavaScript :

+ +
fetch('products.json').then(function(response) {
+  if(response.ok) {
+    response.json().then(function(json) {
+      products = json;
+      initialize();
+    });
+  } else {
+    console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
+  }
+});
+ +

Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut true si le statut de la réponse était OK (statut HTTP 200, "OK"), ou false sinon.

+ +

Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.

+ +

Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.

+ +

Vous pouvez tester le cas d'échec vous-même :

+ +
    +
  1. Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le fichier ZIP can-store)
    2. +
  2. Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})
    3. +
  3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.
    4. +
  4. Maintenant, chargez le fichier index dans votre navigateur (via localhost:8000) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).
    5. +
+ +

Deuxième Fetch

+ +

Le deuxième bloc Fetch se trouve dans la fonction fetchBlob():

+ +
fetch(url).then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(blob) {
+      objectURL = URL.createObjectURL(blob);
+      showProduct(objectURL, product);
+    });
+  } else {
+    console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText);
+  }
+});
+ +

Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est Blob — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.

+ +

Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :

+ +
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
+ +

Challenge : une version XHR de Can Store

+ +

Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une copie du fichier ZIP et essayiez de modifier le JavaScript en conséquence.

+ +

Quelques conseils qui pourraient s'avérer utiles :

+ + + +
+

Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).

+
+ +

Sommaire

+ +

Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.

+ +

Voir aussi

+ +

Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:

+ + + +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html deleted file mode 100644 index b7ce9e7171..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: API web utilisées côté client -slug: Learn/JavaScript/Client-side_web_APIs -tags: - - API - - API Web - - Apprendre - - Articles - - Codage - - DOM - - Débutant - - Graphismes - - JavaScript - - Localisation - - Media - - Module - - données -translation_of: Learn/JavaScript/Client-side_web_APIs -original_slug: Apprendre/JavaScript/Client-side_web_APIs ---- -
{{LearnSidebar}}
- -

Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.

- -

Prérequis

- -

Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.

- -

Une connaissance basique de HTML et CSS serait aussi utile.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

-
- -

Guides

- -
-
Introduction aux API du Web
-
Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.
-
Manipuler des documents
-
Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
-
Récupérer des données du serveur
-
Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
-
APIs tierces
-
Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.
-
Dessiner des éléments graphiques
-
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
-
APIs vidéo et audio
-
HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
-
Stockage côté client
-
Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.
-
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/index.md new file mode 100644 index 0000000000..b7ce9e7171 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/index.md @@ -0,0 +1,52 @@ +--- +title: API web utilisées côté client +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - API Web + - Apprendre + - Articles + - Codage + - DOM + - Débutant + - Graphismes + - JavaScript + - Localisation + - Media + - Module + - données +translation_of: Learn/JavaScript/Client-side_web_APIs +original_slug: Apprendre/JavaScript/Client-side_web_APIs +--- +
{{LearnSidebar}}
+ +

Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.

+ +

Prérequis

+ +

Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.

+ +

Une connaissance basique de HTML et CSS serait aussi utile.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

+
+ +

Guides

+ +
+
Introduction aux API du Web
+
Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.
+
Manipuler des documents
+
Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
+
Récupérer des données du serveur
+
Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
+
APIs tierces
+
Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.
+
Dessiner des éléments graphiques
+
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
+
APIs vidéo et audio
+
HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
+
Stockage côté client
+
Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.
+
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html deleted file mode 100644 index ed8648ce6f..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Introduction aux API Web -slug: Learn/JavaScript/Client-side_web_APIs/Introduction -tags: - - 3rd party - - API - - Article - - Beginner - - Browser - - CodingScripting - - Learn - - Object - - WebAPI - - client-side -translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.

- - - - - - - - - - - - -
Prérequis :Des connaissances de base en informatique, une compréhension de base du HTML et CSS, des notions de JavaScript (voir premiers pas, briques JavaScript, objets JavaScript).
Objectif :Vous familiariser avec les API, ce qu'elles permettent de faire, et comment les utiliser dans votre code.
- -

Qu'est-ce qu'une API ?

- -

Les API (Application Programming Interfaces soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.

- -

En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.

- -

- -

Source de l'image : Overloaded plug socket par The Clear Communication People, sur Flickr.

- -

De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.

- -
-

Note : Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.

-
- -

API JavaScript côté client

- -

Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories :

- - - -

- -

Relations entre JavaScript, les API et autres outils JavaScript

- -

Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres outils JavaScript qui existent:

- - - -

Que peuvent faire les API ?

- -

Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la page de l'index des API MDN.

- -

API de navigateur courantes

- -

En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :

- - - -

API tierces courantes

- -

Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard :

- - - -
-

Note : Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.

-
- -

Comment les API fonctionnent-elles ?

- -

Chaque API JavaScript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.

- -

Elles sont fondées sur des objets

- -

Les API interagissent avec le code en utilisant un ou plusieurs objets JavaScript, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).

- -
-

Note : Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets JavaScript avant de continuer.

-
- -

Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :

- - - - -

Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple d'élément audio (regardez‑le aussi en direct), vous verrez le code suivant :

- -
<audio src="outfoxing.mp3"></audio>
-
-<button class="paused">Play</button>
-<br>
-<input type="range" min="0" max="1" step="0.01" value="1" class="volume">
- -

Nous incluons, tout d'abord, un élément <audio> avec lequel nous intégrons un MP3 dans la page. Nous n'incluons pas de contrôles par défaut du navigateur. Ensuite, nous incluons un <button> que nous utiliserons pour lire et arrêter la musique, et un élément <input> de type range, que nous utiliserons pour ajuster le volume de la piste en cours de lecture.

- -

Ensuite, examinons le JavaScript de cet exemple.

- -

Nous commençons par créer une instance AudioContext à l'intérieur de laquelle nous allons manipuler notre piste :

- -
const AudioContext = window.AudioContext || window.webkitAudioContext;
-const audioCtx = new AudioContext();
- -

Ensuite, nous créons des constantes qui stockent les références à nos éléments <audio>, <button> et <input>, et nous utilisons la méthode AudioContext.createMediaElementSource() pour créer un MediaElementAudioSourceNode représentant la source de notre audio — l'élément <audio> sera joué à partir de :

- -
const audioElement = document.querySelector('audio');
-const playBtn = document.querySelector('button');
-const volumeSlider = document.querySelector('.volume');
-
-const audioSource = audioCtx.createMediaElementSource(audioElement);
- -

Ensuite, nous incluons deux gestionnaires d'événements qui servent à basculer entre la lecture et la pause lorsque le bouton est pressé et à réinitialiser l'affichage au début lorsque la chanson est terminée :

- -
// lecture/pause de l'audio
-playBtn.addEventListener('click', function() {
-    // vérifier si le contexte est en état de suspension (politique de lecture automatique)
-    if (audioCtx.state === 'suspended') {
-        audioCtx.resume();
-    }
-
-  // si la piste est arrêtée, la lire
-    if (this.getAttribute('class') === 'paused') {
-        audioElement.play();
-        this.setAttribute('class', 'playing');
-        this.textContent = 'Pause'
-    // si une piste est en cours de lecture, l'arrêter
-} else if (this.getAttribute('class') === 'playing') {
-        audioElement.pause();
-        this.setAttribute('class', 'paused');
-        this.textContent = 'Lire';
-    }
-});
-
-// si la piste se termine
-audioElement.addEventListener('ended', function() {
-    playBtn.setAttribute('class', 'paused');
-    playBtn.textContent = 'Lire';
-});
- -
-

Note : Certains d'entre vous ont peut-être remarqué que les méthodes play() et pause() utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API HTMLMediaElement. qui est différente mais étroitement liée.

-
- -

Ensuite, nous créons un objet GainNode à l'aide de la méthode AudioContext.createGain(), qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :

- -
const gainNode = audioCtx.createGain();
-
-volumeSlider.addEventListener('input', function() {
-    gainNode.gain.value = this.value;
-});
- -

La dernière chose à faire pour que cela fonctionne est de connecter les différents nœuds du graphe audio, ce qui est fait en utilisant la méthode AudioNode.connect() disponible sur chaque type de nœud :

- -
audioSource.connect(gainNode).connect(audioCtx.destination);
- -

L'audio commence dans la source, qui est ensuite connectée au nœud de gain afin que le volume de l'audio puisse être ajusté. Le nœud de gain est ensuite connecté au nœud de destination afin que le son puisse être lu sur votre ordinateur (la propriété AudioContext.destination représente ce qui est le AudioDestinationNode par défaut disponible sur le matériel de votre ordinateur, par exemple vos haut-parleurs).

- -

Elles ont des points d'entrée reconnaissables

- -

Lorsque vous utilisez une API, vous devez vous assurer que vous savez où se trouve le point d'entrée de l'API. Dans l'API Web Audio, c'est assez simple — il s'agit de l'objet AudioContext, qui doit être utilisé pour effectuer toute manipulation audio quelle qu'elle soit.

- -

L'API DOM (Document Object Model) a également un point d'entrée simple — ses fonctionnalités ont tendance à être trouvées accrochées à l'objet Document, ou à une instance d'un élément HTML que vous voulez affecter d'une manière ou d'une autre, par exemple :

- -
const em = document.createElement('em'); // crée un nouvel élément em
-const para = document.querySelector('p'); // référence à un élément p existant
-em.textContent = 'Hello there!'; // donne à em du contenu textuel
-para.appendChild(em); // intégre em dans le paragraphe
- -

L'API Canvas repose également sur l'obtention d'un objet de contexte à utiliser pour manipuler les choses, bien que dans ce cas, il s'agisse d'un contexte graphique plutôt que d'un contexte audio. Son objet de contexte est créé en obtenant une référence à l'élément <canvas> sur lequel vous voulez dessiner, puis en appelant sa méthode HTMLCanvasElement.getContext() :

- -
const canvas = document.querySelector('canvas');
-const ctx = canvas.getContext('2d');
- -

Tout ce que nous voulons faire au canevas est ensuite réalisé en appelant les propriétés et les méthodes de l'objet contexte (qui est une instance de CanvasRenderingContext2D), par exemple :

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-};
- -
-

Note : Vous pouvez voir ce code en action dans notre démo de balles rebondissantes (voyez-le fonctionner en direct également).

-
- -

Elles utilisent des événements pour gérer les changements d'état

- -

Nous avons déjà abordé les événements plus tôt dans le cours dans notre article Introduction aux événements, qui examine en détail ce que sont les événements web côté client et comment ils sont utilisés dans votre code. Si vous n'êtes pas déjà familiarisé avec le fonctionnement des événements de l'API Web côté client, nous vous conseillons de lire cet article avant de poursuivre.

- -

Certaines API Web ne contiennent aucun événement, mais la plupart en contiennent au moins quelques-uns. Les propriétés des gestionnaires qui nous permettent d'exécuter des fonctions lorsque des événements se produisent sont généralement répertoriées dans notre matériel de référence dans des sections distinctes intitulées « Gestionnaires d'événements ».

- -

Nous avons déjà vu un certain nombre de gestionnaires d'événements utilisés dans notre exemple d'API audio Web ci-dessus.

- -

Pour fournir un autre exemple, les instances de l'objet XMLHttpRequest (chacune représente une requête HTTP au serveur pour récupérer une nouvelle ressource d'un certain type) a un certain nombre d'événements disponibles sur eux, par exemple, l'événement load est déclenché lorsqu'une réponse a été renvoyée avec succès contenant la ressource demandée, et qu'elle est désormais disponible.

- -

Le code suivant fournit un exemple simple de la façon dont cela peut être utilisé :

- -
let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
-let request = new XMLHttpRequest();
-request.open('GET', requestURL);
-request.responseType = 'json';
-request.send();
-
-request.onload = function() {
-  const superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -
-

Note : Vous pouvez voir ce code en action dans notre exemple ajax.html (voyez-le en direct également).

-
- -

Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur XMLHttpRequest(), ouvrent une requête HTTP GET pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.

- -

La fonction du gestionnaire onload précise ensuite ce que nous faisons de la réponse. Nous savons que la réponse sera renvoyée avec succès et disponible après le déclenchement de l'événement load (sauf si une erreur s'est produite), nous sauvegardons donc la réponse contenant le JSON renvoyé dans la variable superHeroes, puis nous la passons à deux fonctions différentes pour un traitement ultérieur.

- -

Elles disposent de mécanismes de sécurité supplémentaires adéquats

- -

Les fonctionnalités des API Web sont soumises aux mêmes considérations de sécurité que JavaScript et les autres technologies web (par exemple same-origin policy), mais elles disposent parfois de mécanismes de sécurité supplémentaires. Par exemple, certaines des API Web les plus modernes ne fonctionneront que sur des pages servies par HTTPS, car elles transmettent des données potentiellement sensibles (par exemple Service Workers et Push).

- -

En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API Notifications API demande la permission à l'aide d'une boîte de dialogue contextuelle :

- -

- -

Les API Web Audio et HTMLMediaElement sont soumises à un mécanisme de sécurité appelé autoplay policy - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.

- -
-

Note : Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.

-
- -

Résumé

- -

À ce stade, vous devriez avoir une bonne idée de ce que sont les API, de leur fonctionnement et de ce que vous pouvez faire avec dans votre code JavaScript. Vous avec probablement hâte de commencer à faire des choses amusantes avec des API spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le Document Object Model (DOM).

- -

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md new file mode 100644 index 0000000000..ed8648ce6f --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md @@ -0,0 +1,297 @@ +--- +title: Introduction aux API Web +slug: Learn/JavaScript/Client-side_web_APIs/Introduction +tags: + - 3rd party + - API + - Article + - Beginner + - Browser + - CodingScripting + - Learn + - Object + - WebAPI + - client-side +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fonctionnement, comment les utiliser dans votre code, leur structure. Nous verrons également quelles sont les principales API et leur utilisation.

+ + + + + + + + + + + + +
Prérequis :Des connaissances de base en informatique, une compréhension de base du HTML et CSS, des notions de JavaScript (voir premiers pas, briques JavaScript, objets JavaScript).
Objectif :Vous familiariser avec les API, ce qu'elles permettent de faire, et comment les utiliser dans votre code.
+ +

Qu'est-ce qu'une API ?

+ +

Les API (Application Programming Interfaces soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.

+ +

En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.

+ +

+ +

Source de l'image : Overloaded plug socket par The Clear Communication People, sur Flickr.

+ +

De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.

+ +
+

Note : Voir aussi l'entrée du glossaire du terme API pour plus de descriptions.

+
+ +

API JavaScript côté client

+ +

Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories :

+ + + +

+ +

Relations entre JavaScript, les API et autres outils JavaScript

+ +

Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur d'autres outils JavaScript qui existent:

+ + + +

Que peuvent faire les API ?

+ +

Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la page de l'index des API MDN.

+ +

API de navigateur courantes

+ +

En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :

+ + + +

API tierces courantes

+ +

Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard :

+ + + +
+

Note : Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.

+
+ +

Comment les API fonctionnent-elles ?

+ +

Chaque API JavaScript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.

+ +

Elles sont fondées sur des objets

+ +

Les API interagissent avec le code en utilisant un ou plusieurs objets JavaScript, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).

+ +
+

Note : Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets JavaScript avant de continuer.

+
+ +

Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec plusieurs objets. Voici les objets principaux :

+ + + + +

Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple d'élément audio (regardez‑le aussi en direct), vous verrez le code suivant :

+ +
<audio src="outfoxing.mp3"></audio>
+
+<button class="paused">Play</button>
+<br>
+<input type="range" min="0" max="1" step="0.01" value="1" class="volume">
+ +

Nous incluons, tout d'abord, un élément <audio> avec lequel nous intégrons un MP3 dans la page. Nous n'incluons pas de contrôles par défaut du navigateur. Ensuite, nous incluons un <button> que nous utiliserons pour lire et arrêter la musique, et un élément <input> de type range, que nous utiliserons pour ajuster le volume de la piste en cours de lecture.

+ +

Ensuite, examinons le JavaScript de cet exemple.

+ +

Nous commençons par créer une instance AudioContext à l'intérieur de laquelle nous allons manipuler notre piste :

+ +
const AudioContext = window.AudioContext || window.webkitAudioContext;
+const audioCtx = new AudioContext();
+ +

Ensuite, nous créons des constantes qui stockent les références à nos éléments <audio>, <button> et <input>, et nous utilisons la méthode AudioContext.createMediaElementSource() pour créer un MediaElementAudioSourceNode représentant la source de notre audio — l'élément <audio> sera joué à partir de :

+ +
const audioElement = document.querySelector('audio');
+const playBtn = document.querySelector('button');
+const volumeSlider = document.querySelector('.volume');
+
+const audioSource = audioCtx.createMediaElementSource(audioElement);
+ +

Ensuite, nous incluons deux gestionnaires d'événements qui servent à basculer entre la lecture et la pause lorsque le bouton est pressé et à réinitialiser l'affichage au début lorsque la chanson est terminée :

+ +
// lecture/pause de l'audio
+playBtn.addEventListener('click', function() {
+    // vérifier si le contexte est en état de suspension (politique de lecture automatique)
+    if (audioCtx.state === 'suspended') {
+        audioCtx.resume();
+    }
+
+  // si la piste est arrêtée, la lire
+    if (this.getAttribute('class') === 'paused') {
+        audioElement.play();
+        this.setAttribute('class', 'playing');
+        this.textContent = 'Pause'
+    // si une piste est en cours de lecture, l'arrêter
+} else if (this.getAttribute('class') === 'playing') {
+        audioElement.pause();
+        this.setAttribute('class', 'paused');
+        this.textContent = 'Lire';
+    }
+});
+
+// si la piste se termine
+audioElement.addEventListener('ended', function() {
+    playBtn.setAttribute('class', 'paused');
+    playBtn.textContent = 'Lire';
+});
+ +
+

Note : Certains d'entre vous ont peut-être remarqué que les méthodes play() et pause() utilisées pour lire et mettre en pause la piste ne font pas partie de l'API audio Web ; elles font partie de l'API HTMLMediaElement. qui est différente mais étroitement liée.

+
+ +

Ensuite, nous créons un objet GainNode à l'aide de la méthode AudioContext.createGain(), qui peut être utilisé pour ajuster le volume de l'audio qui le traverse, et nous créons un autre gestionnaire d'événements qui modifie la valeur du gain (volume) du graphique audio lorsque la valeur du curseur est modifiée :

+ +
const gainNode = audioCtx.createGain();
+
+volumeSlider.addEventListener('input', function() {
+    gainNode.gain.value = this.value;
+});
+ +

La dernière chose à faire pour que cela fonctionne est de connecter les différents nœuds du graphe audio, ce qui est fait en utilisant la méthode AudioNode.connect() disponible sur chaque type de nœud :

+ +
audioSource.connect(gainNode).connect(audioCtx.destination);
+ +

L'audio commence dans la source, qui est ensuite connectée au nœud de gain afin que le volume de l'audio puisse être ajusté. Le nœud de gain est ensuite connecté au nœud de destination afin que le son puisse être lu sur votre ordinateur (la propriété AudioContext.destination représente ce qui est le AudioDestinationNode par défaut disponible sur le matériel de votre ordinateur, par exemple vos haut-parleurs).

+ +

Elles ont des points d'entrée reconnaissables

+ +

Lorsque vous utilisez une API, vous devez vous assurer que vous savez où se trouve le point d'entrée de l'API. Dans l'API Web Audio, c'est assez simple — il s'agit de l'objet AudioContext, qui doit être utilisé pour effectuer toute manipulation audio quelle qu'elle soit.

+ +

L'API DOM (Document Object Model) a également un point d'entrée simple — ses fonctionnalités ont tendance à être trouvées accrochées à l'objet Document, ou à une instance d'un élément HTML que vous voulez affecter d'une manière ou d'une autre, par exemple :

+ +
const em = document.createElement('em'); // crée un nouvel élément em
+const para = document.querySelector('p'); // référence à un élément p existant
+em.textContent = 'Hello there!'; // donne à em du contenu textuel
+para.appendChild(em); // intégre em dans le paragraphe
+ +

L'API Canvas repose également sur l'obtention d'un objet de contexte à utiliser pour manipuler les choses, bien que dans ce cas, il s'agisse d'un contexte graphique plutôt que d'un contexte audio. Son objet de contexte est créé en obtenant une référence à l'élément <canvas> sur lequel vous voulez dessiner, puis en appelant sa méthode HTMLCanvasElement.getContext() :

+ +
const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+ +

Tout ce que nous voulons faire au canevas est ensuite réalisé en appelant les propriétés et les méthodes de l'objet contexte (qui est une instance de CanvasRenderingContext2D), par exemple :

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+ +
+

Note : Vous pouvez voir ce code en action dans notre démo de balles rebondissantes (voyez-le fonctionner en direct également).

+
+ +

Elles utilisent des événements pour gérer les changements d'état

+ +

Nous avons déjà abordé les événements plus tôt dans le cours dans notre article Introduction aux événements, qui examine en détail ce que sont les événements web côté client et comment ils sont utilisés dans votre code. Si vous n'êtes pas déjà familiarisé avec le fonctionnement des événements de l'API Web côté client, nous vous conseillons de lire cet article avant de poursuivre.

+ +

Certaines API Web ne contiennent aucun événement, mais la plupart en contiennent au moins quelques-uns. Les propriétés des gestionnaires qui nous permettent d'exécuter des fonctions lorsque des événements se produisent sont généralement répertoriées dans notre matériel de référence dans des sections distinctes intitulées « Gestionnaires d'événements ».

+ +

Nous avons déjà vu un certain nombre de gestionnaires d'événements utilisés dans notre exemple d'API audio Web ci-dessus.

+ +

Pour fournir un autre exemple, les instances de l'objet XMLHttpRequest (chacune représente une requête HTTP au serveur pour récupérer une nouvelle ressource d'un certain type) a un certain nombre d'événements disponibles sur eux, par exemple, l'événement load est déclenché lorsqu'une réponse a été renvoyée avec succès contenant la ressource demandée, et qu'elle est désormais disponible.

+ +

Le code suivant fournit un exemple simple de la façon dont cela peut être utilisé :

+ +
let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+let request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +
+

Note : Vous pouvez voir ce code en action dans notre exemple ajax.html (voyez-le en direct également).

+
+ +

Les cinq premières lignes spécifient l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur XMLHttpRequest(), ouvrent une requête HTTP GET pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la requête.

+ +

La fonction du gestionnaire onload précise ensuite ce que nous faisons de la réponse. Nous savons que la réponse sera renvoyée avec succès et disponible après le déclenchement de l'événement load (sauf si une erreur s'est produite), nous sauvegardons donc la réponse contenant le JSON renvoyé dans la variable superHeroes, puis nous la passons à deux fonctions différentes pour un traitement ultérieur.

+ +

Elles disposent de mécanismes de sécurité supplémentaires adéquats

+ +

Les fonctionnalités des API Web sont soumises aux mêmes considérations de sécurité que JavaScript et les autres technologies web (par exemple same-origin policy), mais elles disposent parfois de mécanismes de sécurité supplémentaires. Par exemple, certaines des API Web les plus modernes ne fonctionneront que sur des pages servies par HTTPS, car elles transmettent des données potentiellement sensibles (par exemple Service Workers et Push).

+ +

En outre, certaines API Web demandent la permission d'être activées à l'utilisateur une fois que les appels à ces interfaces sont effectués dans votre code. À titre d'exemple, l'API Notifications API demande la permission à l'aide d'une boîte de dialogue contextuelle :

+ +

+ +

Les API Web Audio et HTMLMediaElement sont soumises à un mécanisme de sécurité appelé autoplay policy - cela signifie essentiellement que vous ne pouvez pas lire automatiquement l'audio lorsqu'une page se charge — vous devez permettre à vos utilisateurs de déclencher la lecture audio par le biais d'un contrôle comme un bouton. Cette mesure est prise parce que la lecture automatique de l'audio est généralement très ennuyeuse et que nous ne devrions pas y soumettre nos utilisateurs.

+ +
+

Note : Selon la rigueur du navigateur, ces mécanismes de sécurité peuvent même empêcher l'exemple de fonctionner localement, c'est-à-dire si vous chargez le fichier d'exemple local dans votre navigateur au lieu de l'exécuter à partir d'un serveur web. Au moment de la rédaction de ce document, notre exemple d'API Web Audio ne fonctionnait pas localement sur Google Chrome — nous avons dû le télécharger sur GitHub avant qu'il ne fonctionne.

+
+ +

Résumé

+ +

À ce stade, vous devriez avoir une bonne idée de ce que sont les API, de leur fonctionnement et de ce que vous pouvez faire avec dans votre code JavaScript. Vous avec probablement hâte de commencer à faire des choses amusantes avec des API spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le Document Object Model (DOM).

+ +

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html deleted file mode 100644 index 8025213ac4..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Manipuler des documents -slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -tags: - - API - - Apprendre - - Article - - Codage - - DOM - - Document Object Model - - Débutant - - JavaScript - - Navigator - - WebAPI - - Window -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.

- - - - - - - - - - - - -
Prérequis :Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.
Objectif :Se familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document
- -

Les principaux composants du navigateur

- -

Les navigateurs web sont des logiciels très complexes avec beaucoup de composants, dont beaucoup ne peuvent pas être contrôlés ou manipulés en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou à d'autres informations sensibles, ou se connecter à des sites web comme si c'était vous?

- -

Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:

- -

- - - -

Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.

- -

Le modèle objet du document (Document Object Model)

- -

Le document chargé dans chaque onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer différents styles aux éléments correspondants sur la page, tandis qu'un développeur comme vous et moi peut l'utiliser pour manipuler le DOM avec du JavaScript après que la page ait été chargée.

- -

Nous avons créé une simple page d'exemple, dom-example.html (voir en direct). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément <section>, à l'intérieur duquel se trouve une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Simple DOM example</title>
-  </head>
-  <body>
-      <section>
-        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
-      </section>
-  </body>
-</html>
- -

Le DOM, quant à lui, ressemble à ça :

- -

- -
-

Note : Ce diagramme du DOM a été créé en utilisant le Live DOM viewer de Ian Hickson.

-
- -

Vous pouvez voir ici que chaque élément et morceau de texte dans le document possède sa propre entrée dans l'arbre — chacune étant appelée nœud (node). Vous rencontrerez également plusieurs termes pour décrire les différents type de nœuds ou leur position dans l'arbre les uns par rapport aux autres :

- - - -

Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié le CSS (ex. sélecteur descendant, sélecteur enfant).

- -

Apprentissage actif : Manipulations basiques du DOM

- -

Pour commencer l'apprentissage de la manipulation du DOM, commençons par un exemple concret.

- -
    -
  1. Faites une copie locale de la page dom-example.html et de l'image qui l'accompagne.
    2. -
  2. Ajoutez un élément <script></script> juste avant la balise fermante </body>.
    3. -
  3. Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence à cet élément dans une variable. À l'intérieur de votre élément <script>, ajoutez la ligne suivante: - 
    const link = document.querySelector('a');
    -
    4. -
  4. Maintenant que nous avons la référence à l'élément enregistrée dans une variable, nous pouvons commencer à le manipuler en utilisant les propriétés et les méthodes qui lui sont associées (celles-ci sont définies sur les interfaces telles que HTMLAnchorElement dans le cas d'un élément <a>, et sur les interfaces plus génériques HTMLElement, et Node — qui représente tous les nœuds d'un DOM). Tout d'abord, changeons le texte du lien en mettant à jour la valeur de la propriété Node.textContent. Ajoutez la ligne suivante à la suite de la précédente : - 
    link.textContent = 'Mozilla Developer Network';
    -
    5. -
  5. Nous devons également modifier l'URL ciblée par le lien, pour qu'il ne renvoie pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante, en bas de votre JavaScript : - 
    link.href = 'https://developer.mozilla.org';
    -
    6. -
- -
-

Notez que, comme souvent en JavaScript, il y a plusieurs façons de sélectionner et d'enregistrer une référence à un élément dans une variable. Document.querySelector() est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à querySelector() que nous avons utilisé plus tôt récupère le premier élément <a> qui apparaît dans le document. Si vous souhaitez au contraire récupérer plusieurs éléments, vous pouvez utiliser Document.querySelectorAll(), qui récupère tous les éléments du document correspondant au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un tableau appelé un NodeList.

- -

Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que :

- - - -

Ces deux dernières méthodes fonctionnent mieux dans les navigateurs plus anciens que des méthodes plus modernes comme querySelector(), mais elles sont beaucoup moins pratiques. Regardez autour de vous et essayez d'en trouver d'autres!

-
- -

Créer et placer de nouveaux nœuds

- -

Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.

- -
    -
  1. Pour revenir à notre exemple, commençons par récupérer une référence à notre élément <section> — ajoutez le code suivant au bas de votre script existant (idem avec les lignes qui suivront) : - 
    var sect = document.querySelector('section');
    -
    2. -
  2. Nous allons maintenant créer un nouveau paragraphe grâce à Document.createElement(), et lui donner du contenu texte de la même manière que précédemment : - 
    var para = document.createElement('p');
-para.textContent = 'We hope you enjoyed the ride.';
    -
    3. -
  3. Nous pouvons à présent ajouter ce paragraphe au bas de la section en utilisant Node.appendChild(): - 
    sect.appendChild(para);
    -
    4. -
  4. Enfin, ajoutons un nœud texte au premier paragraphe, pour finir la phrase joliment. Créons d'abord un nœud texte avec Document.createTextNode() : - 
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    -
    5. -
  5. Puis, après avoir récupéré une référence au premier paragraphe, ajoutons-y le nœud texte: - 
    var linkPara = document.querySelector('p');
-linkPara.appendChild(text);
    -
    6. -
- -

C'est l'essentiel de ce dont vous aurez besoin pour ajouter des nœuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous en verrons quelques exemples plus tard).

- -

Déplacer et supprimer des éléments

- -

Il peut arriver qu'on veuille déplacer des nœuds, ou même les supprimer du DOM. C'est tout à fait possible, et voyons comment.

- - -

Par exemple, si l'on veut déplacer le premier paragraphe de notre exemple au bas de la section, on pourrait utiliser :

- -
sect.appendChild(linkPara);
- -

Cette commande va déplacer le paragraphe tout au bas de la section. On pourrait penser qu'elle va en fait ajouter une copie, mais ce n'est pas le cas : linkPara ne fait référence qu'à un seul et unique élément. Pour copier le paragraphe, il faudrait utiliser Node.cloneNode() à la place.

- -

Supprimer des éléments est également plutôt simple, dès lors qu'on a une référence de l'élément à supprimer et de son parent. Dans notre cas, on peut simplement utiliser Node.removeChild(), comme ceci :

- -
sect.removeChild(linkPara);
- -

Si vous souhaitez un élément uniquement à partir d'une référence à cet élément, comme c'est souvent le cas, vous pouvez utiliser ChildNode.remove() :

- -
linkPara.remove();
- -

Cette méthode ne fonctionne cependant pas dans les navigateurs plus anciens. Ils ne possèdent en effet pas de méthodes pour dire à un nœud de se supprimer, et il faut donc procéder comme suit :

- -
linkPara.parentNode.removeChild(linkPara);
- -

À votre tour : essayez les lignes ci-dessus en les ajoutant à votre code.

- -

Manipuler le style

- -

Il est possible de manipuler des styles CSS grâce à du JavaScript de plusieurs manières.

- -

Pour commencer, vous pouvez obtenir une liste de toutes les feuilles de style associées à un document en utilisant Document.stylesheets, qui retourne un objet, ressemblant à un tableau composé d'objets CSSStyleSheet. Vous pouvez alors ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités, car elles sont archaïques et il est difficile de manipuler le style avec. Il y a des techniques beaucoup plus simples.

- -

La première d'entre elles consiste à ajouter des styles en ligne (inline styles), directement sur les éléments que vous voulez styliser de façon dynamique. Pour ce faire, on utilise la propriété HTMLElement.style, qui contient les informations de style en ligne de chaque élément du document. Vous pouvez définir des propriétés de cet objet de façon à pouvoir mettre à jour directement le style des éléments.

- -
    -
  1. À titre d'exemple, essayez d'ajouter les lignes suivantes à notre exemple : - 
    para.style.color = 'white';
-para.style.backgroundColor = 'black';
-para.style.padding = '10px';
-para.style.width = '250px';
-para.style.textAlign = 'center';
    -
    2. -
  2. Rafraichissez la page, et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez ce paragraphe dans l'Inspecteur du navigateur, vous verrez que ces lignes sont en effet ajoutées comme du style en ligne au document: - 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    -
    3. -
- -
-

Note : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que les versions CSS sont reliées par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.

-
- -

Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.

- -
    -
  1. Supprimez les cinq lignes précédentes que nous avons ajoutées à notre code JavaScript.
    2. -
  2. Ajoutez ce qui suit au sein de la balise <head> de votre HTML: - 
    <style>
-.highlight {
-  color: white;
-  background-color: black;
-  padding: 10px;
-  width: 250px;
-  text-align: center;
-}
-</style>
    -
    3. -
  3. Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale : Element.setAttribute(). Cette fonction prend deux paramètres : le nom de l'attribut que vous voulez définir sur l'élément, et la valeur que vous voulez lui attribuer. Ici nous allons ajouter une classe highlight à notre élément : - 
    para.setAttribute('class', 'highlight');
    -
    4. -
  4. Rafraîchissez votre page, et vous constaterez qu'il n'y a aucun changement par rapport au dernier exemple. Le CSS est toujours appliqué au paragraphe, mais la seule différence c'est qu'on a utilisé une classe pour le faire et non des styles en ligne.
    5. -
- -

A vous de choisir la méthode que vous souhaitez utiliser : chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus pure (on ne mélange pas le CSS et le JavaScript, on évite donc les styles en ligne, car c'est considéré comme une mauvaise pratique). Au fur et à mesure que vous construirez des applications plus volumineuses et complexes, vous allez probablement utiliser la deuxième méthode plus souvent, mais c'est à vous de décider.

- -

À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec du JavaScript — autant l'écrire directement en HTML sans passer par du JavaScript. Le JavaScript est plus complexe que du HTML, et comporte son propre lot de problèmes (comme le fait qu'il ne puisse pas être lu par les moteurs de recherche).

- -

Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.

- -
-

Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

-
- -

Apprentissage actif : Récupérer des informations utiles depuis l'objet Window

- -

Jusqu'à présent nous avons seulement utilisé les fonctionnalités de Node et Document (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources pour les intégrer à votre interface utilisateur (UI). Il faut simplement s'assurer que les données sont au bon format ; c'est plus simple avec JavaScript qu'avec d'autres langages, puisqu'on utilise un typage faible — les nombres par exemple sont automatiquement convertis en texte lorsqu'on les affiche à l'écran.

- -

Dans cet exemple, nous allons résoudre un problème très courant — s'assurer que votre application est de la même taille que la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utile pour des jeux par exemple, où l'on veut utiliser autant d'espace d'écran que possible pour jouer.

- -

Pour commencer, faites une copie en local des fichiers de démonstration window-resize-example.html et bgtile.png. Ouvrez-les : vous y trouverez un élément <div> qui couvre une petite partie de l'écran avec un motif en mosaïque. Nous utiliserons cet élément pour représenter la surface de notre interface utilisateur.

- -
    -
  1. Tout d'abord, nous allons récupérer : une référence au <div>, la largeur de la fenêtre d'affichage ("viewport", celle où notre document est affiché) et sa hauteur, avant de les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés Window.innerWidth et Window.innerHeight. Ajoutez les lignes qui suivent à l'intérieur de l'élément <script> : - 
    const div = document.querySelector('div');
-      let winWidth = window.innerWidth;
-      let winHeight = window.innerHeight;
    -
    2. -
  2. Ensuite, nous allons modifier dynamiquement la largeur et la hauteur de notre <div> pour qu'elles soient égales à celles de la fenêtre d'affichage. Ajoutez les lignes suivantes à la suite des précédentes : - 
    div.style.width = winWidth + 'px';
-    div.style.height = winHeight + 'px';
    -
    3. -
  3. Sauvegardez vos modifications et rafraîchissez votre page : vous devriez désormais constater que la <div> est aussi grande que la fenêtre, quelle que soit la taille de la fenêtre. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater que la div ne change pas de taille — nous ne définissons la taille qu'une seule fois.
    4. -
  4. Nous pouvons utiliser un gestionnaire d'événement pour que la <div> soit redimensionnée à chaque fois que la fenêtre l'est. L'objet Window dispose d'un événement dédié appelé resize, qui est déclenché à chaque fois que la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("GlobalEventHandlers/onresize", "Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: - 
    window.onresize = function() {
-    winWidth = window.innerWidth;
-    winHeight = window.innerHeight;
-    div.style.width = winWidth + 'px';
-    div.style.height = winHeight + 'px';
-  }
    -
    5. -
- -
-

Note : En cas de blocage, jetez un œil à notre exemple de redimensionnement de la fenêtre terminé sur GitHub (voir en direct aussi).

-
- -

Apprentissage actif : Une liste de courses dynamique

- -

Pour clore cet article, nous aimerions vous proposer un petit challenge : nous voulons créer une liste de courses simple qui nous permette d'ajouter des articles à la liste de façon dynamique, le tout grâce à un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton :

- - - -

La démo terminée doit ressembler à ça:

- -

- -

Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.

- -
    -
  1. Tout d'abord, téléchargez une copie du fichier shopping-list.html. Vous verrez qu'il contient : un peu de CSS, une liste avec un titre, un champ, un bouton, une liste vide et un élément <script>. Vous apporterez toutes vos modifications à l'intérieur du script.
    2. -
  2. Créez trois variables, contenant des références aux éléments de liste <ul>, de champ <input> et de bouton <button>.
    3. -
  3. Créez une fonction qui sera déclenchée lorsqu'on clique sur le bouton.
    4. -
  4. À l'intérieur du corps de la fonction, commencez par stocker la valeur actuelle (propriété value) du champ dans une variable.
    5. -
  5. Ensuite, videz le champ en définissant sa valeur comme une chaîne vide — ''.
    6. -
  6. Créez trois nouveaux éléments : un élément de liste <li>, un <span> et un bouton <button>, et stockez-les chacun dans des variables.
    7. -
  7. Attachez le <span> et le <button> comme enfants de <li>.
    8. -
  8. Définissez le contenu texte du <span> comme égal à la valeur du champ que vous avez récupéré précédemment, et le contenu du bouton à "Supprimer".
    9. -
  9. Attachez l'article <li> comme enfant de la liste.
    10. -
  10. Ajoutez un gestionnaire d'événement au bouton "Supprimer", de façon à ce que lorsqu'on le clique le <li> dans lequel il se situe soit supprimé.
    11. -
  11. Enfin, utilisez la méthode HTMLElement.focus pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain article de la liste de courses.
    12. -
- -
-

Note : Si vous bloquez vraiment, jetez un œil à notre liste de courses terminée (voir en direct.)

-
- -

Résumé

- -

Nous avons fini notre étude de la manipulation de document et du DOM. À ce stade, vous devriez comprendre quels sont les composants importants d'un navigateur web en matière de contrôle de documents et certains aspects de l'expérience utilisateur sur le Web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.

- -

Voir aussi

- -

Il y a bien d'autres fonctionnalités que vous pouvez utiliser pour manipuler vos documents. Jetez un coup d'œil à quelques-unes de nos notices pour en découvrir davantage :

- - - -

(Voir notre Référence Web API pour une liste complète des APIs web documentées sur MDN!)

- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
- - -

Dans ce module

- - \ No newline at end of file diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md new file mode 100644 index 0000000000..8025213ac4 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.md @@ -0,0 +1,332 @@ +--- +title: Manipuler des documents +slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +tags: + - API + - Apprendre + - Article + - Codage + - DOM + - Document Object Model + - Débutant + - JavaScript + - Navigator + - WebAPI + - Window +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.

+ + + + + + + + + + + + +
Prérequis :Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.
Objectif :Se familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document
+ +

Les principaux composants du navigateur

+ +

Les navigateurs web sont des logiciels très complexes avec beaucoup de composants, dont beaucoup ne peuvent pas être contrôlés ou manipulés en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou à d'autres informations sensibles, ou se connecter à des sites web comme si c'était vous?

+ +

Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire plein de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'œil au diagramme suivant, il représente les principaux composants du navigateur directement impliqués dans l'affichage des pages web:

+ +

+ + + +

Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.

+ +

Le modèle objet du document (Document Object Model)

+ +

Le document chargé dans chaque onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer différents styles aux éléments correspondants sur la page, tandis qu'un développeur comme vous et moi peut l'utiliser pour manipuler le DOM avec du JavaScript après que la page ait été chargée.

+ +

Nous avons créé une simple page d'exemple, dom-example.html (voir en direct). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément <section>, à l'intérieur duquel se trouve une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple DOM example</title>
+  </head>
+  <body>
+      <section>
+        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
+      </section>
+  </body>
+</html>
+ +

Le DOM, quant à lui, ressemble à ça :

+ +

+ +
+

Note : Ce diagramme du DOM a été créé en utilisant le Live DOM viewer de Ian Hickson.

+
+ +

Vous pouvez voir ici que chaque élément et morceau de texte dans le document possède sa propre entrée dans l'arbre — chacune étant appelée nœud (node). Vous rencontrerez également plusieurs termes pour décrire les différents type de nœuds ou leur position dans l'arbre les uns par rapport aux autres :

+ + + +

Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié le CSS (ex. sélecteur descendant, sélecteur enfant).

+ +

Apprentissage actif : Manipulations basiques du DOM

+ +

Pour commencer l'apprentissage de la manipulation du DOM, commençons par un exemple concret.

+ +
    +
  1. Faites une copie locale de la page dom-example.html et de l'image qui l'accompagne.
    2. +
  2. Ajoutez un élément <script></script> juste avant la balise fermante </body>.
    3. +
  3. Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence à cet élément dans une variable. À l'intérieur de votre élément <script>, ajoutez la ligne suivante: + 
    const link = document.querySelector('a');
    +
    4. +
  4. Maintenant que nous avons la référence à l'élément enregistrée dans une variable, nous pouvons commencer à le manipuler en utilisant les propriétés et les méthodes qui lui sont associées (celles-ci sont définies sur les interfaces telles que HTMLAnchorElement dans le cas d'un élément <a>, et sur les interfaces plus génériques HTMLElement, et Node — qui représente tous les nœuds d'un DOM). Tout d'abord, changeons le texte du lien en mettant à jour la valeur de la propriété Node.textContent. Ajoutez la ligne suivante à la suite de la précédente : + 
    link.textContent = 'Mozilla Developer Network';
    +
    5. +
  5. Nous devons également modifier l'URL ciblée par le lien, pour qu'il ne renvoie pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante, en bas de votre JavaScript : + 
    link.href = 'https://developer.mozilla.org';
    +
    6. +
+ +
+

Notez que, comme souvent en JavaScript, il y a plusieurs façons de sélectionner et d'enregistrer une référence à un élément dans une variable. Document.querySelector() est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à querySelector() que nous avons utilisé plus tôt récupère le premier élément <a> qui apparaît dans le document. Si vous souhaitez au contraire récupérer plusieurs éléments, vous pouvez utiliser Document.querySelectorAll(), qui récupère tous les éléments du document correspondant au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un tableau appelé un NodeList.

+ +

Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que :

+ + + +

Ces deux dernières méthodes fonctionnent mieux dans les navigateurs plus anciens que des méthodes plus modernes comme querySelector(), mais elles sont beaucoup moins pratiques. Regardez autour de vous et essayez d'en trouver d'autres!

+
+ +

Créer et placer de nouveaux nœuds

+ +

Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.

+ +
    +
  1. Pour revenir à notre exemple, commençons par récupérer une référence à notre élément <section> — ajoutez le code suivant au bas de votre script existant (idem avec les lignes qui suivront) : + 
    var sect = document.querySelector('section');
    +
    2. +
  2. Nous allons maintenant créer un nouveau paragraphe grâce à Document.createElement(), et lui donner du contenu texte de la même manière que précédemment : + 
    var para = document.createElement('p');
+para.textContent = 'We hope you enjoyed the ride.';
    +
    3. +
  3. Nous pouvons à présent ajouter ce paragraphe au bas de la section en utilisant Node.appendChild(): + 
    sect.appendChild(para);
    +
    4. +
  4. Enfin, ajoutons un nœud texte au premier paragraphe, pour finir la phrase joliment. Créons d'abord un nœud texte avec Document.createTextNode() : + 
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    +
    5. +
  5. Puis, après avoir récupéré une référence au premier paragraphe, ajoutons-y le nœud texte: + 
    var linkPara = document.querySelector('p');
+linkPara.appendChild(text);
    +
    6. +
+ +

C'est l'essentiel de ce dont vous aurez besoin pour ajouter des nœuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous en verrons quelques exemples plus tard).

+ +

Déplacer et supprimer des éléments

+ +

Il peut arriver qu'on veuille déplacer des nœuds, ou même les supprimer du DOM. C'est tout à fait possible, et voyons comment.

+ + +

Par exemple, si l'on veut déplacer le premier paragraphe de notre exemple au bas de la section, on pourrait utiliser :

+ +
sect.appendChild(linkPara);
+ +

Cette commande va déplacer le paragraphe tout au bas de la section. On pourrait penser qu'elle va en fait ajouter une copie, mais ce n'est pas le cas : linkPara ne fait référence qu'à un seul et unique élément. Pour copier le paragraphe, il faudrait utiliser Node.cloneNode() à la place.

+ +

Supprimer des éléments est également plutôt simple, dès lors qu'on a une référence de l'élément à supprimer et de son parent. Dans notre cas, on peut simplement utiliser Node.removeChild(), comme ceci :

+ +
sect.removeChild(linkPara);
+ +

Si vous souhaitez un élément uniquement à partir d'une référence à cet élément, comme c'est souvent le cas, vous pouvez utiliser ChildNode.remove() :

+ +
linkPara.remove();
+ +

Cette méthode ne fonctionne cependant pas dans les navigateurs plus anciens. Ils ne possèdent en effet pas de méthodes pour dire à un nœud de se supprimer, et il faut donc procéder comme suit :

+ +
linkPara.parentNode.removeChild(linkPara);
+ +

À votre tour : essayez les lignes ci-dessus en les ajoutant à votre code.

+ +

Manipuler le style

+ +

Il est possible de manipuler des styles CSS grâce à du JavaScript de plusieurs manières.

+ +

Pour commencer, vous pouvez obtenir une liste de toutes les feuilles de style associées à un document en utilisant Document.stylesheets, qui retourne un objet, ressemblant à un tableau composé d'objets CSSStyleSheet. Vous pouvez alors ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités, car elles sont archaïques et il est difficile de manipuler le style avec. Il y a des techniques beaucoup plus simples.

+ +

La première d'entre elles consiste à ajouter des styles en ligne (inline styles), directement sur les éléments que vous voulez styliser de façon dynamique. Pour ce faire, on utilise la propriété HTMLElement.style, qui contient les informations de style en ligne de chaque élément du document. Vous pouvez définir des propriétés de cet objet de façon à pouvoir mettre à jour directement le style des éléments.

+ +
    +
  1. À titre d'exemple, essayez d'ajouter les lignes suivantes à notre exemple : + 
    para.style.color = 'white';
+para.style.backgroundColor = 'black';
+para.style.padding = '10px';
+para.style.width = '250px';
+para.style.textAlign = 'center';
    +
    2. +
  2. Rafraichissez la page, et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez ce paragraphe dans l'Inspecteur du navigateur, vous verrez que ces lignes sont en effet ajoutées comme du style en ligne au document: + 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    +
    3. +
+ +
+

Note : Vous remarquerez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que les versions CSS sont reliées par des tirets (par exemple backgroundColor au lieu de background-color). Prenez garde à ne pas les mélanger, sans quoi ça ne fonctionnera pas.

+
+ +

Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons étudier maintenant.

+ +
    +
  1. Supprimez les cinq lignes précédentes que nous avons ajoutées à notre code JavaScript.
    2. +
  2. Ajoutez ce qui suit au sein de la balise <head> de votre HTML: + 
    <style>
+.highlight {
+  color: white;
+  background-color: black;
+  padding: 10px;
+  width: 250px;
+  text-align: center;
+}
+</style>
    +
    3. +
  3. Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale : Element.setAttribute(). Cette fonction prend deux paramètres : le nom de l'attribut que vous voulez définir sur l'élément, et la valeur que vous voulez lui attribuer. Ici nous allons ajouter une classe highlight à notre élément : + 
    para.setAttribute('class', 'highlight');
    +
    4. +
  4. Rafraîchissez votre page, et vous constaterez qu'il n'y a aucun changement par rapport au dernier exemple. Le CSS est toujours appliqué au paragraphe, mais la seule différence c'est qu'on a utilisé une classe pour le faire et non des styles en ligne.
    5. +
+ +

A vous de choisir la méthode que vous souhaitez utiliser : chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus pure (on ne mélange pas le CSS et le JavaScript, on évite donc les styles en ligne, car c'est considéré comme une mauvaise pratique). Au fur et à mesure que vous construirez des applications plus volumineuses et complexes, vous allez probablement utiliser la deuxième méthode plus souvent, mais c'est à vous de décider.

+ +

À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec du JavaScript — autant l'écrire directement en HTML sans passer par du JavaScript. Le JavaScript est plus complexe que du HTML, et comporte son propre lot de problèmes (comme le fait qu'il ne puisse pas être lu par les moteurs de recherche).

+ +

Dans les deux prochaines sections, nous verrons des exemples d'utilisation plus pratiques des APIs du DOM.

+ +
+

Note : Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

+
+ +

Apprentissage actif : Récupérer des informations utiles depuis l'objet Window

+ +

Jusqu'à présent nous avons seulement utilisé les fonctionnalités de Node et Document (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources pour les intégrer à votre interface utilisateur (UI). Il faut simplement s'assurer que les données sont au bon format ; c'est plus simple avec JavaScript qu'avec d'autres langages, puisqu'on utilise un typage faible — les nombres par exemple sont automatiquement convertis en texte lorsqu'on les affiche à l'écran.

+ +

Dans cet exemple, nous allons résoudre un problème très courant — s'assurer que votre application est de la même taille que la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utile pour des jeux par exemple, où l'on veut utiliser autant d'espace d'écran que possible pour jouer.

+ +

Pour commencer, faites une copie en local des fichiers de démonstration window-resize-example.html et bgtile.png. Ouvrez-les : vous y trouverez un élément <div> qui couvre une petite partie de l'écran avec un motif en mosaïque. Nous utiliserons cet élément pour représenter la surface de notre interface utilisateur.

+ +
    +
  1. Tout d'abord, nous allons récupérer : une référence au <div>, la largeur de la fenêtre d'affichage ("viewport", celle où notre document est affiché) et sa hauteur, avant de les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés Window.innerWidth et Window.innerHeight. Ajoutez les lignes qui suivent à l'intérieur de l'élément <script> : + 
    const div = document.querySelector('div');
+      let winWidth = window.innerWidth;
+      let winHeight = window.innerHeight;
    +
    2. +
  2. Ensuite, nous allons modifier dynamiquement la largeur et la hauteur de notre <div> pour qu'elles soient égales à celles de la fenêtre d'affichage. Ajoutez les lignes suivantes à la suite des précédentes : + 
    div.style.width = winWidth + 'px';
+    div.style.height = winHeight + 'px';
    +
    3. +
  3. Sauvegardez vos modifications et rafraîchissez votre page : vous devriez désormais constater que la <div> est aussi grande que la fenêtre, quelle que soit la taille de la fenêtre. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater que la div ne change pas de taille — nous ne définissons la taille qu'une seule fois.
    4. +
  4. Nous pouvons utiliser un gestionnaire d'événement pour que la <div> soit redimensionnée à chaque fois que la fenêtre l'est. L'objet Window dispose d'un événement dédié appelé resize, qui est déclenché à chaque fois que la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("GlobalEventHandlers/onresize", "Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: + 
    window.onresize = function() {
+    winWidth = window.innerWidth;
+    winHeight = window.innerHeight;
+    div.style.width = winWidth + 'px';
+    div.style.height = winHeight + 'px';
+  }
    +
    5. +
+ +
+

Note : En cas de blocage, jetez un œil à notre exemple de redimensionnement de la fenêtre terminé sur GitHub (voir en direct aussi).

+
+ +

Apprentissage actif : Une liste de courses dynamique

+ +

Pour clore cet article, nous aimerions vous proposer un petit challenge : nous voulons créer une liste de courses simple qui nous permette d'ajouter des articles à la liste de façon dynamique, le tout grâce à un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton :

+ + + +

La démo terminée doit ressembler à ça:

+ +

+ +

Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.

+ +
    +
  1. Tout d'abord, téléchargez une copie du fichier shopping-list.html. Vous verrez qu'il contient : un peu de CSS, une liste avec un titre, un champ, un bouton, une liste vide et un élément <script>. Vous apporterez toutes vos modifications à l'intérieur du script.
    2. +
  2. Créez trois variables, contenant des références aux éléments de liste <ul>, de champ <input> et de bouton <button>.
    3. +
  3. Créez une fonction qui sera déclenchée lorsqu'on clique sur le bouton.
    4. +
  4. À l'intérieur du corps de la fonction, commencez par stocker la valeur actuelle (propriété value) du champ dans une variable.
    5. +
  5. Ensuite, videz le champ en définissant sa valeur comme une chaîne vide — ''.
    6. +
  6. Créez trois nouveaux éléments : un élément de liste <li>, un <span> et un bouton <button>, et stockez-les chacun dans des variables.
    7. +
  7. Attachez le <span> et le <button> comme enfants de <li>.
    8. +
  8. Définissez le contenu texte du <span> comme égal à la valeur du champ que vous avez récupéré précédemment, et le contenu du bouton à "Supprimer".
    9. +
  9. Attachez l'article <li> comme enfant de la liste.
    10. +
  10. Ajoutez un gestionnaire d'événement au bouton "Supprimer", de façon à ce que lorsqu'on le clique le <li> dans lequel il se situe soit supprimé.
    11. +
  11. Enfin, utilisez la méthode HTMLElement.focus pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain article de la liste de courses.
    12. +
+ +
+

Note : Si vous bloquez vraiment, jetez un œil à notre liste de courses terminée (voir en direct.)

+
+ +

Résumé

+ +

Nous avons fini notre étude de la manipulation de document et du DOM. À ce stade, vous devriez comprendre quels sont les composants importants d'un navigateur web en matière de contrôle de documents et certains aspects de l'expérience utilisateur sur le Web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.

+ +

Voir aussi

+ +

Il y a bien d'autres fonctionnalités que vous pouvez utiliser pour manipuler vos documents. Jetez un coup d'œil à quelques-unes de nos notices pour en découvrir davantage :

+ + + +

(Voir notre Référence Web API pour une liste complète des APIs web documentées sur MDN!)

+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
+ + +

Dans ce module

+ + \ No newline at end of file diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html deleted file mode 100644 index 15dfb1c063..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html +++ /dev/null @@ -1,441 +0,0 @@ ---- -title: API tierces -slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs -tags: - - API - - Apprendre - - Débutant -translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.

- - - - - - - - - - - - -
Prérequis :Les bases de JavaScript (voir premiers pas, blocs de construction, les objets JavaScript), les bases des API côté client.
Objectifs :Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.
- -

Qu'est-ce qu'une API tierce ?

- -

Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.

- -

Regardons cet exemple qui utilise l'API MapQuest et voyons avec lui les différences entre les API tierces et celles du navigateur.

- -
-

Note : Vous pouvez récupérer l'ensemble des exemples de code en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.

-
- -

Elles sont situées sur des serveurs tiers

- -

Les API fournies par le navigateur sont construites dans le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio que nous avons vu dans cet article introductif s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :

- -
const audioCtx = new AudioContext();
-  ...
-const audioElement = document.querySelector('audio');
-  ...
-const audioSource = audioCtx.createMediaElementSource(audioElement);
-// etc.
- -

En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :

- -
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
-<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
- -

On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :

- -
var L;
-
-var map = L.mapquest.map('map', {
-  center: [53.480759, -2.242631],
-  layers: L.mapquest.tileLayer('map'),
-  zoom: 12
-});
- -

Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode mapquest.map() qui prend comme argument :

- - - -

C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).

- -
-

Note : Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées API REST (ou RESTful APIs en anglais) et nous les abordons plus bas dans l'article.

-
- -

Des clés d'API sont nécessaires pour les utiliser

- -

Dans les navigateurs, comme nous l'avons vu dans le premier article, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.

- -

Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.

- -

Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :

- -
L.mapquest.key = 'VOTRE-CLE-D-API-ICI';
- -

Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.

- -
-

Note : Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.

-
- -

Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.

- -

L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.

- -

Étendre l'exemple « MapQuest »

- -

Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.

- -
    -
  1. -

    Pour commencer cette section, copiez le fichier initial dans un nouveau répertoire. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'une copie située sous le répertoire javascript/apis/third-party-apis/mapquest.

    -
    2. -
  2. -

    Ensuite, rendez-vous sur le site MapQuest pour les développeurs, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).

    -
    3. -
  3. Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.
    4. -
- -

Modifier le type de la carte

- -

L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :

- -
layers: L.mapquest.tileLayer('map')
- -

Ici, vous pouvez changer 'map' en 'hybrid' afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur la page de référence de la méthode tileLayer().

- -

Ajouter différents contrôles

- -

Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthodemap.addControl(). Ajoutez la ligne suivante à l'intérieur du gestionnaire window.onload :

- -
map.addControl(L.mapquest.control());
- -

La méthode mapquest.control() crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété position dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :

- -
  map.addControl(L.mapquest.control({ position: 'bottomright' }));
- -

D'autres types de contrôle sont disponibles comme mapquest.searchControl() et mapquest.satelliteControl(). Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.

- -

Ajouter un marqueur personnalisé

- -

Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode L.marker()  (documentée dans la documentation de Leaflet.js). Dans window.onload, vous pouvez ajouter le fragment de code suivante window.onload :

- -
L.marker([53.480759, -2.242631], {
-  icon: L.mapquest.icons.marker({
-    primaryColor: '#22407F',
-    secondaryColor: '#3B5998',
-    shadow: true,
-    size: 'md',
-    symbol: 'A'
-  })
-})
-.bindPopup('Ici se trouve Manchester !')
-.addTo(map);
- -

Comme on peut le voir ici, la méthode peut prendre deux paramètres :

- - - -

L'icône est définie via un appel à la méthode mapquest.icons.marker() à laquelle on fournit des informations telles que la couleur et la taille du marqueur.

- -

Après l'appel à la première méthode, on enchaîne avec un appel avec .bindPopup('Ici se trouve Manchester !'), qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.

- -

Enfin, on chaîne un appel .addTo(map) pour ajouter le marqueur sur la carte.

- -

Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).

- -
-

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : expanded-example.html.

-
- -

Quid de Google Maps ?

- -

Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :

- - - -

Une approche pour utiliser les API tierces

- -

Une API REST du NYTimes

- -

Prenons un autre exemple d'API, l'API du New York Times. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.

- -

Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.

- -

Trouver la documentation

- -

Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : https://developer.nytimes.com/.

- -

Obtenir une clé de développement

- -

La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de https://developer.nytimes.com/get-started.

- -
    -
  1. -

    Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").

    -
    2. -
  2. -

    Vous pouvez alors récupérer la clé d'API à partir de la page suivante.

    -
    3. -
  3. -

    Pour construire le socle de notre exemple, copiez nytimes_start.html et nytimes.css dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire javascript/apis/third-party-apis/nytimes. L'élément <script> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.

    -
    4. -
- -

Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.

- -

- -

Connecter l'API à son application

- -

Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre GET à chaque requête.

- -
    -
  1. -

    Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :

    - - 
    var key = ' ... ';
    -
    2. -
  2. -

    Ajoutez la ligne suivante sous le commentaire // Event listeners to control the functionality. Cette ligne permet d'exécuter la fonction submitSearch() lorsque le formulaire est envoyé (quand on presse le bouton).

    - - 
    searchForm.addEventListener('submit', submitSearch);
    -
    3. -
  3. -

    Sous cette nouvelle ligne, ajoutons les fonctions submitSearch() et fetchResults() :

    - - 
    function submitSearch(e) {
-  pageNumber = 0;
-  fetchResults(e);
-}
-
-function fetchResults(e) {
-  // On utilise preventDefault() afin d'éviter
-  // l'envoie vers notre serveur et le rafraîchissement
-  // de la page
-  e.preventDefault();
-
-  // On compose l'URL
-  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
-
-  if(startDate.value !== '') {
-    url += '&begin_date=' + startDate.value;
-  };
-
-  if(endDate.value !== '') {
-    url += '&end_date=' + endDate.value;
-  };
-
-}
    -
    4. -
- -

submitSearch() commence par réinitialiser le nombre de page à 0 puis appelle fetchResults(). Cette fonction commence par appeler preventDefault() sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :

- - - -

Après, on utilise un ensemble d'instructions if() pour vérifier si des valeurs ont été fournies pour les champs startDate et endDate dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL begin_date et/ou end_date.

- -

Si on prend un exemple d'URL complète ainsi construite :

- -
https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats
-&fq=document_type:("article")&begin_date=20170301&end_date=20170312
- -
-

Note : Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter la documentation du NYTimes.

-
- -
-

Note : Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut required. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut pattern="[0-9]{8}"). Voir la page sur la validation des données d'un formulaire pour en savoir plus sur ce fonctionnement.

-
- -

Récupérer des données depuis l'API

- -

Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'API Fetch.

- -

Dans la fonction fetchResults(), juste avant l'accolade de fin, ajoutez le fragment de code suivant :

- -
// On utilise fetch() pour envoyer la requête à l'API
-fetch(url).then(function(result) {
-  return result.json();
-}).then(function(json) {
-  displayResults(json);
-});
- -

On envoie la requête en passant la variable url comme paramètre à la fonction fetch() puis on convertit le corps de la réponse avec la fonction json() puis on passe le JSON ainsi obtenu à la fonction displayResults() afin que les données puissent être affichées dans l'interface utilisateur.

- -

Afficher les données

- -

Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction fetchResults().

- -
function displayResults(json) {
-  while (section.firstChild) {
-      section.removeChild(section.firstChild);
-  }
-
-  var articles = json.response.docs;
-
-  if(articles.length === 10) {
-    nav.style.display = 'block';
-  } else {
-    nav.style.display = 'none';
-  }
-
-  if(articles.length === 0) {
-    var para = document.createElement('p');
-    para.textContent = 'Aucun résultat reçu.'
-    section.appendChild(para);
-  } else {
-    for(var i = 0; i < articles.length; i++) {
-      var article = document.createElement('article');
-      var heading = document.createElement('h2');
-      var link = document.createElement('a');
-      var img = document.createElement('img');
-      var para1 = document.createElement('p');
-      var para2 = document.createElement('p');
-      var clearfix = document.createElement('div');
-
-      var current = articles[i];
-      console.log(current);
-
-      link.href = current.web_url;
-      link.textContent = current.headline.main;
-      para1.textContent = current.snippet;
-      para2.textContent = 'Mots-clés : ';
-      for(var j = 0; j < current.keywords.length; j++) {
-        var span = document.createElement('span');
-        span.textContent += current.keywords[j].value + ' ';
-        para2.appendChild(span);
-      }
-
-      if(current.multimedia.length > 0) {
-        img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
-        img.alt = current.headline.main;
-      }
-
-      clearfix.setAttribute('class','clearfix');
-
-      article.appendChild(heading);
-      heading.appendChild(link);
-      article.appendChild(img);
-      article.appendChild(para1);
-      article.appendChild(para2);
-      article.appendChild(clearfix);
-      section.appendChild(article);
-    }
-  }
-}
- -

Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :

- - - -

Câbler les boutons pour la pagination

- -

Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable pageNumber puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL page. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre page vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre page vaut 1 et ainsi de suite.

- -

En connaissant cela, on peut écrire une fonction pour gérer la pagination.

- -
    -
  1. -

    Après l'appel existant à addEventListener(), on ajoute les deux prochaines lignes qui appelleront les fonctions nextPage() et previousPage() lorsqu'on cliquera sur le bouton correspondant :

    - - 
    nextBtn.addEventListener('click', nextPage);
-previousBtn.addEventListener('click', previousPage);
    -
    2. -
  2. -

    À la suite, on définit le corps de ces fonctions :

    - - 
    function nextPage(e) {
-  pageNumber++;
-  fetchResults(e);
-};
-
-function previousPage(e) {
-  if(pageNumber > 0) {
-    pageNumber--;
-  } else {
-    return;
-  }
-  fetchResults(e);
-};
    - -

    La première fonction est assez simple : on incrémente la variable pageNumber puis on exécute à nouveau la fonction fetchResults() afin d'afficher les prochains résultats.

    - -

    La seconde fonction est similaire, mais on prend la précaution de vérifier que pageNumber ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque pageNumber vaut déjà 0, on sort de la fonction avec return afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).

    -
    3. -
- -
-

Note : Vous pouvez trouver l'exemple complet sur l'API du NYTimes sur GitHub.

-
- -

Exemple d'utilisation de l'API YouTube

- -

Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : exemple de recherche de vidéo YouTube. Dans cet exemple, on utilise deux API :

- - - -

Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.

- -

- -

Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez consulter le code source qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.

- -

Résumé

- -

Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.

- -

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md new file mode 100644 index 0000000000..15dfb1c063 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md @@ -0,0 +1,441 @@ +--- +title: API tierces +slug: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +tags: + - API + - Apprendre + - Débutant +translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.

+ + + + + + + + + + + + +
Prérequis :Les bases de JavaScript (voir premiers pas, blocs de construction, les objets JavaScript), les bases des API côté client.
Objectifs :Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.
+ +

Qu'est-ce qu'une API tierce ?

+ +

Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.

+ +

Regardons cet exemple qui utilise l'API MapQuest et voyons avec lui les différences entre les API tierces et celles du navigateur.

+ +
+

Note : Vous pouvez récupérer l'ensemble des exemples de code en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.

+
+ +

Elles sont situées sur des serveurs tiers

+ +

Les API fournies par le navigateur sont construites dans le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio que nous avons vu dans cet article introductif s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :

+ +
const audioCtx = new AudioContext();
+  ...
+const audioElement = document.querySelector('audio');
+  ...
+const audioSource = audioCtx.createMediaElementSource(audioElement);
+// etc.
+ +

En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :

+ +
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
+<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
+ +

On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :

+ +
var L;
+
+var map = L.mapquest.map('map', {
+  center: [53.480759, -2.242631],
+  layers: L.mapquest.tileLayer('map'),
+  zoom: 12
+});
+ +

Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode mapquest.map() qui prend comme argument :

+ + + +

C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).

+ +
+

Note : Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées API REST (ou RESTful APIs en anglais) et nous les abordons plus bas dans l'article.

+
+ +

Des clés d'API sont nécessaires pour les utiliser

+ +

Dans les navigateurs, comme nous l'avons vu dans le premier article, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.

+ +

Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.

+ +

Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :

+ +
L.mapquest.key = 'VOTRE-CLE-D-API-ICI';
+ +

Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.

+ +
+

Note : Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.

+
+ +

Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.

+ +

L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.

+ +

Étendre l'exemple « MapQuest »

+ +

Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.

+ +
    +
  1. +

    Pour commencer cette section, copiez le fichier initial dans un nouveau répertoire. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'une copie située sous le répertoire javascript/apis/third-party-apis/mapquest.

    +
    2. +
  2. +

    Ensuite, rendez-vous sur le site MapQuest pour les développeurs, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).

    +
    3. +
  3. Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.
    4. +
+ +

Modifier le type de la carte

+ +

L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :

+ +
layers: L.mapquest.tileLayer('map')
+ +

Ici, vous pouvez changer 'map' en 'hybrid' afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur la page de référence de la méthode tileLayer().

+ +

Ajouter différents contrôles

+ +

Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthodemap.addControl(). Ajoutez la ligne suivante à l'intérieur du gestionnaire window.onload :

+ +
map.addControl(L.mapquest.control());
+ +

La méthode mapquest.control() crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété position dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :

+ +
  map.addControl(L.mapquest.control({ position: 'bottomright' }));
+ +

D'autres types de contrôle sont disponibles comme mapquest.searchControl() et mapquest.satelliteControl(). Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.

+ +

Ajouter un marqueur personnalisé

+ +

Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode L.marker()  (documentée dans la documentation de Leaflet.js). Dans window.onload, vous pouvez ajouter le fragment de code suivante window.onload :

+ +
L.marker([53.480759, -2.242631], {
+  icon: L.mapquest.icons.marker({
+    primaryColor: '#22407F',
+    secondaryColor: '#3B5998',
+    shadow: true,
+    size: 'md',
+    symbol: 'A'
+  })
+})
+.bindPopup('Ici se trouve Manchester !')
+.addTo(map);
+ +

Comme on peut le voir ici, la méthode peut prendre deux paramètres :

+ + + +

L'icône est définie via un appel à la méthode mapquest.icons.marker() à laquelle on fournit des informations telles que la couleur et la taille du marqueur.

+ +

Après l'appel à la première méthode, on enchaîne avec un appel avec .bindPopup('Ici se trouve Manchester !'), qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.

+ +

Enfin, on chaîne un appel .addTo(map) pour ajouter le marqueur sur la carte.

+ +

Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).

+ +
+

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : expanded-example.html.

+
+ +

Quid de Google Maps ?

+ +

Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :

+ + + +

Une approche pour utiliser les API tierces

+ +

Une API REST du NYTimes

+ +

Prenons un autre exemple d'API, l'API du New York Times. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.

+ +

Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.

+ +

Trouver la documentation

+ +

Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : https://developer.nytimes.com/.

+ +

Obtenir une clé de développement

+ +

La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de https://developer.nytimes.com/get-started.

+ +
    +
  1. +

    Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").

    +
    2. +
  2. +

    Vous pouvez alors récupérer la clé d'API à partir de la page suivante.

    +
    3. +
  3. +

    Pour construire le socle de notre exemple, copiez nytimes_start.html et nytimes.css dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire javascript/apis/third-party-apis/nytimes. L'élément <script> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.

    +
    4. +
+ +

Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.

+ +

+ +

Connecter l'API à son application

+ +

Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre GET à chaque requête.

+ +
    +
  1. +

    Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :

    + + 
    var key = ' ... ';
    +
    2. +
  2. +

    Ajoutez la ligne suivante sous le commentaire // Event listeners to control the functionality. Cette ligne permet d'exécuter la fonction submitSearch() lorsque le formulaire est envoyé (quand on presse le bouton).

    + + 
    searchForm.addEventListener('submit', submitSearch);
    +
    3. +
  3. +

    Sous cette nouvelle ligne, ajoutons les fonctions submitSearch() et fetchResults() :

    + + 
    function submitSearch(e) {
+  pageNumber = 0;
+  fetchResults(e);
+}
+
+function fetchResults(e) {
+  // On utilise preventDefault() afin d'éviter
+  // l'envoie vers notre serveur et le rafraîchissement
+  // de la page
+  e.preventDefault();
+
+  // On compose l'URL
+  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
+
+  if(startDate.value !== '') {
+    url += '&begin_date=' + startDate.value;
+  };
+
+  if(endDate.value !== '') {
+    url += '&end_date=' + endDate.value;
+  };
+
+}
    +
    4. +
+ +

submitSearch() commence par réinitialiser le nombre de page à 0 puis appelle fetchResults(). Cette fonction commence par appeler preventDefault() sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :

+ + + +

Après, on utilise un ensemble d'instructions if() pour vérifier si des valeurs ont été fournies pour les champs startDate et endDate dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL begin_date et/ou end_date.

+ +

Si on prend un exemple d'URL complète ainsi construite :

+ +
https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats
+&fq=document_type:("article")&begin_date=20170301&end_date=20170312
+ +
+

Note : Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter la documentation du NYTimes.

+
+ +
+

Note : Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut required. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut pattern="[0-9]{8}"). Voir la page sur la validation des données d'un formulaire pour en savoir plus sur ce fonctionnement.

+
+ +

Récupérer des données depuis l'API

+ +

Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'API Fetch.

+ +

Dans la fonction fetchResults(), juste avant l'accolade de fin, ajoutez le fragment de code suivant :

+ +
// On utilise fetch() pour envoyer la requête à l'API
+fetch(url).then(function(result) {
+  return result.json();
+}).then(function(json) {
+  displayResults(json);
+});
+ +

On envoie la requête en passant la variable url comme paramètre à la fonction fetch() puis on convertit le corps de la réponse avec la fonction json() puis on passe le JSON ainsi obtenu à la fonction displayResults() afin que les données puissent être affichées dans l'interface utilisateur.

+ +

Afficher les données

+ +

Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction fetchResults().

+ +
function displayResults(json) {
+  while (section.firstChild) {
+      section.removeChild(section.firstChild);
+  }
+
+  var articles = json.response.docs;
+
+  if(articles.length === 10) {
+    nav.style.display = 'block';
+  } else {
+    nav.style.display = 'none';
+  }
+
+  if(articles.length === 0) {
+    var para = document.createElement('p');
+    para.textContent = 'Aucun résultat reçu.'
+    section.appendChild(para);
+  } else {
+    for(var i = 0; i < articles.length; i++) {
+      var article = document.createElement('article');
+      var heading = document.createElement('h2');
+      var link = document.createElement('a');
+      var img = document.createElement('img');
+      var para1 = document.createElement('p');
+      var para2 = document.createElement('p');
+      var clearfix = document.createElement('div');
+
+      var current = articles[i];
+      console.log(current);
+
+      link.href = current.web_url;
+      link.textContent = current.headline.main;
+      para1.textContent = current.snippet;
+      para2.textContent = 'Mots-clés : ';
+      for(var j = 0; j < current.keywords.length; j++) {
+        var span = document.createElement('span');
+        span.textContent += current.keywords[j].value + ' ';
+        para2.appendChild(span);
+      }
+
+      if(current.multimedia.length > 0) {
+        img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
+        img.alt = current.headline.main;
+      }
+
+      clearfix.setAttribute('class','clearfix');
+
+      article.appendChild(heading);
+      heading.appendChild(link);
+      article.appendChild(img);
+      article.appendChild(para1);
+      article.appendChild(para2);
+      article.appendChild(clearfix);
+      section.appendChild(article);
+    }
+  }
+}
+ +

Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :

+ + + +

Câbler les boutons pour la pagination

+ +

Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable pageNumber puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL page. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre page vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre page vaut 1 et ainsi de suite.

+ +

En connaissant cela, on peut écrire une fonction pour gérer la pagination.

+ +
    +
  1. +

    Après l'appel existant à addEventListener(), on ajoute les deux prochaines lignes qui appelleront les fonctions nextPage() et previousPage() lorsqu'on cliquera sur le bouton correspondant :

    + + 
    nextBtn.addEventListener('click', nextPage);
+previousBtn.addEventListener('click', previousPage);
    +
    2. +
  2. +

    À la suite, on définit le corps de ces fonctions :

    + + 
    function nextPage(e) {
+  pageNumber++;
+  fetchResults(e);
+};
+
+function previousPage(e) {
+  if(pageNumber > 0) {
+    pageNumber--;
+  } else {
+    return;
+  }
+  fetchResults(e);
+};
    + +

    La première fonction est assez simple : on incrémente la variable pageNumber puis on exécute à nouveau la fonction fetchResults() afin d'afficher les prochains résultats.

    + +

    La seconde fonction est similaire, mais on prend la précaution de vérifier que pageNumber ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque pageNumber vaut déjà 0, on sort de la fonction avec return afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).

    +
    3. +
+ +
+

Note : Vous pouvez trouver l'exemple complet sur l'API du NYTimes sur GitHub.

+
+ +

Exemple d'utilisation de l'API YouTube

+ +

Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : exemple de recherche de vidéo YouTube. Dans cet exemple, on utilise deux API :

+ + + +

Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.

+ +

+ +

Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez consulter le code source qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.

+ +

Résumé

+ +

Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.

+ +

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html deleted file mode 100644 index a091835f18..0000000000 --- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html +++ /dev/null @@ -1,519 +0,0 @@ ---- -title: APIs vidéo et audio -slug: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs -tags: - - API - - Apprendre - - Article - - Audio - - Codage - - Débutant - - Guide - - JavaScript - - Video -translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs -original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
- -

HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.

- - - - - - - - - - - - -
Prérequis:Les bases du JavaScript (voir premiers pas en JavaScript, les briques Javascript, Introduction aux objets), Introduction aux APIs web
Objectif:Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.
- -

Les balises HTML5 video et audio

- -

Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans Contenu audio et vidéo, une implémentation habituelle ressemble à ça :

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p>
-</video>
- -

Cela crée un lecteur vidéo à l'intérieur du navigateur:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}

- -

Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}

- -

Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.

- -

Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut controls) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.

- -

L'API HTMLMediaElement

- -

L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.

- -

Notre exemple final ressemblera (et fonctionnera) comme ceci:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}

- -

Débuter

- -

Pour commencer avec cet exemple, télechargez notre media-player-start.zip et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans javascript/apis/video-audio/start/.

- -

Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.

- -

Exploration du HTML

- -

Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:

- -
<div class="player">
-  <video controls>
-    <source src="video/sintel-short.mp4" type="video/mp4">
-    <source src="video/sintel-short.mp4" type="video/webm">
-    <!-- fallback contenu ici -->
-  </video>
-  <div class="controls">
-    <button class="play" data-icon="P" aria-label="bascule lecture pause"></button>
-    <button class="stop" data-icon="S" aria-label="stop"></button>
-    <div class="timer">
-      <div></div>
-      <span aria-label="timer">00:00</span>
-    </div>
-    <button class="rwd" data-icon="B" aria-label="retour arrière"></button>
-    <button class="fwd" data-icon="F" aria-label="avance rapide"></button>
-  </div>
-</div>
-
- - - -

Exploration du CSS

- -

Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de .controls:

- -
.controls {
-  visibility: hidden;
-  opacity: 0.5;
-  width: 400px;
-  border-radius: 10px;
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  margin-left: -200px;
-  background-color: black;
-  box-shadow: 3px 3px 5px black;
-  transition: 1s all;
-  display: flex;
-}
-
-.player:hover .controls, player:focus .controls {
-  opacity: 1;
-}
-
- - - -

Ensuite, voyons les icônes des boutons:

- -
@font-face {
-   font-family: 'HeydingsControlsRegular';
-   src: url('fonts/heydings_controls-webfont.eot');
-   src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
-        url('fonts/heydings_controls-webfont.woff') format('woff'),
-        url('fonts/heydings_controls-webfont.ttf') format('truetype');
-   font-weight: normal;
-   font-style: normal;
-}
-
-button:before {
-  font-family: HeydingsControlsRegular;
-  font-size: 20px;
-  position: relative;
-  content: attr(data-icon);
-  color: #aaa;
-  text-shadow: 1px 1px 0px black;
-}
- -

Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.

- -

Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:

- - - -

Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.

- -

Dernier point mais non des moindres, le CSS du décompte:

- -
.timer {
-  line-height: 38px;
-  font-size: 10px;
-  font-family: monospace;
-  text-shadow: 1px 1px 0px black;
-  color: white;
-  flex: 5;
-  position: relative;
-}
-
-.timer div {
-  position: absolute;
-  background-color: rgba(255,255,255,0.2);
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 38px;
-  z-index: 2;
-}
-
-.timer span {
-  position: absolute;
-  z-index: 3;
-  left: 19px;
-}
- - - -

Implémenter le JavaScript

- -

Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.

- -
    -
  1. -

    Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons custom-player.js.

    -
    2. -
  2. -

    En haut de ce fichier, insérez le code suivant:

    - - 
    var media = document.querySelector('video');
-var controls = document.querySelector('.controls');
-
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-var rwd = document.querySelector('.rwd');
-var fwd = document.querySelector('.fwd');
-
-var timerWrapper = document.querySelector('.timer');
-var timer = document.querySelector('.timer span');
-var timerBar = document.querySelector('.timer div');
-
    - -

    Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:

    - -
      -
    • L'élément <video>, et la barre de contrôle.
      • -
    • Les boutons play/pause, stop, retour arrière, et avance rapide.
      • -
    • Le <div> externe, le <span> qui décompte le temps écoulé, et le <div> interne qui affiche le progrès de la vidéo.
      • -
    -
    3. -
  3. -

    Ensuite, insérez ce qui suit en bas de votre code:

    - - 
    media.removeAttribute('controls');
-controls.style.visibility = 'visible';
    - -

    Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.

    -
    4. -
- -

Lecture et pause de la vidéo

- -

Imlémentons le contrôle le plus important — le bouton play/pause.

- -
    -
  1. -

    Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction playPauseMedia() soit invoquée quand le bouton play est cliqué:

    - - 
    play.addEventListener('click', playPauseMedia);
-
    -
    2. -
  2. -

    Maintenant, définissons playPauseMedia() — ajoutez ce qui suit, toujours au bas de votre code:

    - - 
    function playPauseMedia() {
-  if(media.paused) {
-    play.setAttribute('data-icon','u');
-    media.play();
-  } else {
-    play.setAttribute('data-icon','P');
-    media.pause();
-  }
-}
    - -

    Ici, nous utilisons une instruction if pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut data-icon à "u", qui est une icône "en pause", et invoquons la  méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.

    - -

    Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.

    -
    3. -
- -

Stopper la vidéo

- -
    -
  1. -

    Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes addEventListener() suivantes au-dessous de vos ajouts précédents:

    - - 
    stop.addEventListener('click', stopMedia);
-media.addEventListener('ended', stopMedia);
-
    - -

    L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction stopMedia() quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.

    -
    2. -
  2. -

    Ensuite, définissons stopMedia() — ajoutez ce qui suit après la fonction playPauseMedia():

    - - 
    function stopMedia() {
-  media.pause();
-  media.currentTime = 0;
-  play.setAttribute('data-icon','P');
-}
-
    - -

    Il n'y a pas de méthode stop() dans l'API  HTMLMediaElement — l'équivalent du stop est de mettre pause() sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à currentTime (en secondes) change immédiatement la position du temps du média.

    - -

    Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.

    -
    3. -
- -

Retour arrière et avance rapide

- -

Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.

- -
    -
  1. -

    Tout d'abord, ajoutez les lignes addEventListener() suivantes à la suite des précédentes:

    - - 
    rwd.addEventListener('click', mediaBackward);
-fwd.addEventListener('click', mediaForward);
-
    -
    2. -
  2. -

    Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir mediaBackward() et mediaForward():

    - - 
    var intervalFwd;
-var intervalRwd;
-
-function mediaBackward() {
-  clearInterval(intervalFwd);
-  fwd.classList.remove('active');
-
-  if(rwd.classList.contains('active')) {
-    rwd.classList.remove('active');
-    clearInterval(intervalRwd);
-    media.play();
-  } else {
-    rwd.classList.add('active');
-    media.pause();
-    intervalRwd = setInterval(windBackward, 200);
-  }
-}
-
-function mediaForward() {
-  clearInterval(intervalRwd);
-  rwd.classList.remove('active');
-
-  if(fwd.classList.contains('active')) {
-    fwd.classList.remove('active');
-    clearInterval(intervalFwd);
-    media.play();
-  } else {
-    fwd.classList.add('active');
-    media.pause();
-    intervalFwd = setInterval(windForward, 200);
-  }
-}
-
    - -

    Vous remarquerez que nous commençons par initialiser deux variables — intervalFwd et intervalRwd — vous verrez à quoi elles servent plus tard.

    - -

    Voyons pas à pas mediaBackward() (mediaForward() fait la même chose, mais dans l'autre sens):

    - -
      -
    1. Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton rwd après avoir pressé le bouton fwd, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.
      2. -
    2. Nous utilisons une instruction if pour vérifier si la classe active a été définie sur le bouton rwd, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode classList.contains() pour vérifier si la liste contient la classe active. Cela retourne un booléen true/false en résultat.
      3. -
    3. Si la classe active a été définie sur le bouton rwd, nous la supprimons avec classList.remove(), effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.
      4. -
    4. -

      Sinon, nous ajoutons la classe active sur le bouton rwd avec classList.add(), mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable intervalRwd en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction setInterval() créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction windBackward() toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable intervalRwd (voir l'appel à clearInterval() effectué plus tôt dans la fonction).

      -
      5. -
    -
    3. -
  3. -

    Pour en finir avec cette section, nous devons définir les fonctions windBackward() et windForward() invoquées dans les appels setInterval(). Ajoutez ce qui suit après les deux fonctions précédentes:

    - - 
    function windBackward() {
-  if(media.currentTime <= 3) {
-    rwd.classList.remove('active');
-    clearInterval(intervalRwd);
-    stopMedia();
-  } else {
-    media.currentTime -= 3;
-  }
-}
-
-function windForward() {
-  if(media.currentTime >= media.duration - 3) {
-    fwd.classList.remove('active');
-    clearInterval(intervalFwd);
-    stopMedia();
-  } else {
-    media.currentTime += 3;
-  }
-}
    - Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans windBackward(), nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. - -
      -
    1. Nous commençons avec une instruction if qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant stopMedia(), supprimons la classe active du bouton, et stoppons l'intervale intervalRwd pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.
      2. -
    2. Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant media.currentTime -= 3. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.
      3. -
    -
    4. -
- -

Mettre à jour le temps écoulé

- -

La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <video>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (voir post stackoverflow).

- -

Ajoutez la ligne addEventListener() suivante à la suite des autres:

- -
media.addEventListener('timeupdate', setTime);
- -

Maintenant, ajoutez la fonction setTime():

- -
function setTime() {
-  var minutes = Math.floor(media.currentTime / 60);
-  var seconds = Math.floor(media.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes < 10) {
-    minuteValue = '0' + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds < 10) {
-    secondValue = '0' + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  var mediaTime = minuteValue + ':' + secondValue;
-  timer.textContent = mediaTime;
-
-  var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration);
-  timerBar.style.width = barLength + 'px';
-}
-
- -

C'est une fonction assez longue, alors allons-y étape par étape:

- -
    -
  1. Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.
    2. -
  2. Ensuite, on initialise deux variables supplémentaires — minuteValue et secondValue.
    3. -
  3. Les deux instructions if qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.
    4. -
  4. Le temps est au final la concaténation de minuteValue, un caractère deux-points, et secondValue.
    5. -
  5. Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.
    6. -
  6. La largeur que nous devons donner <div> intérieur est calculée en récupérant la largeur du <div> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.
    7. -
  7. Nous assignons la largeur du <div> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.
    8. -
- -

Corriger play et pause

- -

Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action rwd/fwd et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.

- -

Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction stopMedia() — n'importe où:

- -
rwd.classList.remove('active');
-fwd.classList.remove('active');
-clearInterval(intervalRwd);
-clearInterval(intervalFwd);
-
- -

Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction playPauseMedia() (juste avant le début de l'instruction if).

- -

À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions windBackward() et windForward(), puisqu'elles ont été ajoutées à la fonction stopMedia() à la place.

- -
-

Note : Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.

-
- -
-

Note : Le code terminé est disponible sur Github (le voir en direct).

-
- -

Sommaire

- -

Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.

- -

Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:

- -
    -
  1. -

    Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.

    -
    2. -
  2. -

    Parce que les éléments <audio> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <audio>. Essayez  de le faire.

    -
    3. -
  3. -

    Trouvez un moyen de transformer le <div> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode getBoundingClientRect(), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet event du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:

    - - 
    document.onclick = function(e) {
-  console.log(e.x) + ',' + console.log(e.y)
-}
    -
    4. -
- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md new file mode 100644 index 0000000000..a091835f18 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -0,0 +1,519 @@ +--- +title: APIs vidéo et audio +slug: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +tags: + - API + - Apprendre + - Article + - Audio + - Codage + - Débutant + - Guide + - JavaScript + - Video +translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.

+ + + + + + + + + + + + +
Prérequis:Les bases du JavaScript (voir premiers pas en JavaScript, les briques Javascript, Introduction aux objets), Introduction aux APIs web
Objectif:Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.
+ +

Les balises HTML5 video et audio

+ +

Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans Contenu audio et vidéo, une implémentation habituelle ressemble à ça :

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p>
+</video>
+ +

Cela crée un lecteur vidéo à l'intérieur du navigateur:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}

+ +

Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}

+ +

Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.

+ +

Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut controls) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.

+ +

L'API HTMLMediaElement

+ +

L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.

+ +

Notre exemple final ressemblera (et fonctionnera) comme ceci:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}

+ +

Débuter

+ +

Pour commencer avec cet exemple, télechargez notre media-player-start.zip et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans javascript/apis/video-audio/start/.

+ +

Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.

+ +

Exploration du HTML

+ +

Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:

+ +
<div class="player">
+  <video controls>
+    <source src="video/sintel-short.mp4" type="video/mp4">
+    <source src="video/sintel-short.mp4" type="video/webm">
+    <!-- fallback contenu ici -->
+  </video>
+  <div class="controls">
+    <button class="play" data-icon="P" aria-label="bascule lecture pause"></button>
+    <button class="stop" data-icon="S" aria-label="stop"></button>
+    <div class="timer">
+      <div></div>
+      <span aria-label="timer">00:00</span>
+    </div>
+    <button class="rwd" data-icon="B" aria-label="retour arrière"></button>
+    <button class="fwd" data-icon="F" aria-label="avance rapide"></button>
+  </div>
+</div>
+
+ + + +

Exploration du CSS

+ +

Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de .controls:

+ +
.controls {
+  visibility: hidden;
+  opacity: 0.5;
+  width: 400px;
+  border-radius: 10px;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  margin-left: -200px;
+  background-color: black;
+  box-shadow: 3px 3px 5px black;
+  transition: 1s all;
+  display: flex;
+}
+
+.player:hover .controls, player:focus .controls {
+  opacity: 1;
+}
+
+ + + +

Ensuite, voyons les icônes des boutons:

+ +
@font-face {
+   font-family: 'HeydingsControlsRegular';
+   src: url('fonts/heydings_controls-webfont.eot');
+   src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
+        url('fonts/heydings_controls-webfont.woff') format('woff'),
+        url('fonts/heydings_controls-webfont.ttf') format('truetype');
+   font-weight: normal;
+   font-style: normal;
+}
+
+button:before {
+  font-family: HeydingsControlsRegular;
+  font-size: 20px;
+  position: relative;
+  content: attr(data-icon);
+  color: #aaa;
+  text-shadow: 1px 1px 0px black;
+}
+ +

Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.

+ +

Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:

+ + + +

Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.

+ +

Dernier point mais non des moindres, le CSS du décompte:

+ +
.timer {
+  line-height: 38px;
+  font-size: 10px;
+  font-family: monospace;
+  text-shadow: 1px 1px 0px black;
+  color: white;
+  flex: 5;
+  position: relative;
+}
+
+.timer div {
+  position: absolute;
+  background-color: rgba(255,255,255,0.2);
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 38px;
+  z-index: 2;
+}
+
+.timer span {
+  position: absolute;
+  z-index: 3;
+  left: 19px;
+}
+ + + +

Implémenter le JavaScript

+ +

Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.

+ +
    +
  1. +

    Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons custom-player.js.

    +
    2. +
  2. +

    En haut de ce fichier, insérez le code suivant:

    + + 
    var media = document.querySelector('video');
+var controls = document.querySelector('.controls');
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+var rwd = document.querySelector('.rwd');
+var fwd = document.querySelector('.fwd');
+
+var timerWrapper = document.querySelector('.timer');
+var timer = document.querySelector('.timer span');
+var timerBar = document.querySelector('.timer div');
+
    + +

    Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:

    + +
      +
    • L'élément <video>, et la barre de contrôle.
      • +
    • Les boutons play/pause, stop, retour arrière, et avance rapide.
      • +
    • Le <div> externe, le <span> qui décompte le temps écoulé, et le <div> interne qui affiche le progrès de la vidéo.
      • +
    +
    3. +
  3. +

    Ensuite, insérez ce qui suit en bas de votre code:

    + + 
    media.removeAttribute('controls');
+controls.style.visibility = 'visible';
    + +

    Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.

    +
    4. +
+ +

Lecture et pause de la vidéo

+ +

Imlémentons le contrôle le plus important — le bouton play/pause.

+ +
    +
  1. +

    Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction playPauseMedia() soit invoquée quand le bouton play est cliqué:

    + + 
    play.addEventListener('click', playPauseMedia);
+
    +
    2. +
  2. +

    Maintenant, définissons playPauseMedia() — ajoutez ce qui suit, toujours au bas de votre code:

    + + 
    function playPauseMedia() {
+  if(media.paused) {
+    play.setAttribute('data-icon','u');
+    media.play();
+  } else {
+    play.setAttribute('data-icon','P');
+    media.pause();
+  }
+}
    + +

    Ici, nous utilisons une instruction if pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut data-icon à "u", qui est une icône "en pause", et invoquons la  méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.

    + +

    Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.

    +
    3. +
+ +

Stopper la vidéo

+ +
    +
  1. +

    Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes addEventListener() suivantes au-dessous de vos ajouts précédents:

    + + 
    stop.addEventListener('click', stopMedia);
+media.addEventListener('ended', stopMedia);
+
    + +

    L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction stopMedia() quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.

    +
    2. +
  2. +

    Ensuite, définissons stopMedia() — ajoutez ce qui suit après la fonction playPauseMedia():

    + + 
    function stopMedia() {
+  media.pause();
+  media.currentTime = 0;
+  play.setAttribute('data-icon','P');
+}
+
    + +

    Il n'y a pas de méthode stop() dans l'API  HTMLMediaElement — l'équivalent du stop est de mettre pause() sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à currentTime (en secondes) change immédiatement la position du temps du média.

    + +

    Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.

    +
    3. +
+ +

Retour arrière et avance rapide

+ +

Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.

+ +
    +
  1. +

    Tout d'abord, ajoutez les lignes addEventListener() suivantes à la suite des précédentes:

    + + 
    rwd.addEventListener('click', mediaBackward);
+fwd.addEventListener('click', mediaForward);
+
    +
    2. +
  2. +

    Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir mediaBackward() et mediaForward():

    + + 
    var intervalFwd;
+var intervalRwd;
+
+function mediaBackward() {
+  clearInterval(intervalFwd);
+  fwd.classList.remove('active');
+
+  if(rwd.classList.contains('active')) {
+    rwd.classList.remove('active');
+    clearInterval(intervalRwd);
+    media.play();
+  } else {
+    rwd.classList.add('active');
+    media.pause();
+    intervalRwd = setInterval(windBackward, 200);
+  }
+}
+
+function mediaForward() {
+  clearInterval(intervalRwd);
+  rwd.classList.remove('active');
+
+  if(fwd.classList.contains('active')) {
+    fwd.classList.remove('active');
+    clearInterval(intervalFwd);
+    media.play();
+  } else {
+    fwd.classList.add('active');
+    media.pause();
+    intervalFwd = setInterval(windForward, 200);
+  }
+}
+
    + +

    Vous remarquerez que nous commençons par initialiser deux variables — intervalFwd et intervalRwd — vous verrez à quoi elles servent plus tard.

    + +

    Voyons pas à pas mediaBackward() (mediaForward() fait la même chose, mais dans l'autre sens):

    + +
      +
    1. Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton rwd après avoir pressé le bouton fwd, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.
      2. +
    2. Nous utilisons une instruction if pour vérifier si la classe active a été définie sur le bouton rwd, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode classList.contains() pour vérifier si la liste contient la classe active. Cela retourne un booléen true/false en résultat.
      3. +
    3. Si la classe active a été définie sur le bouton rwd, nous la supprimons avec classList.remove(), effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.
      4. +
    4. +

      Sinon, nous ajoutons la classe active sur le bouton rwd avec classList.add(), mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable intervalRwd en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction setInterval() créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction windBackward() toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable intervalRwd (voir l'appel à clearInterval() effectué plus tôt dans la fonction).

      +
      5. +
    +
    3. +
  3. +

    Pour en finir avec cette section, nous devons définir les fonctions windBackward() et windForward() invoquées dans les appels setInterval(). Ajoutez ce qui suit après les deux fonctions précédentes:

    + + 
    function windBackward() {
+  if(media.currentTime <= 3) {
+    rwd.classList.remove('active');
+    clearInterval(intervalRwd);
+    stopMedia();
+  } else {
+    media.currentTime -= 3;
+  }
+}
+
+function windForward() {
+  if(media.currentTime >= media.duration - 3) {
+    fwd.classList.remove('active');
+    clearInterval(intervalFwd);
+    stopMedia();
+  } else {
+    media.currentTime += 3;
+  }
+}
    + Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans windBackward(), nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. + +
      +
    1. Nous commençons avec une instruction if qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant stopMedia(), supprimons la classe active du bouton, et stoppons l'intervale intervalRwd pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.
      2. +
    2. Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant media.currentTime -= 3. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.
      3. +
    +
    4. +
+ +

Mettre à jour le temps écoulé

+ +

La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <video>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (voir post stackoverflow).

+ +

Ajoutez la ligne addEventListener() suivante à la suite des autres:

+ +
media.addEventListener('timeupdate', setTime);
+ +

Maintenant, ajoutez la fonction setTime():

+ +
function setTime() {
+  var minutes = Math.floor(media.currentTime / 60);
+  var seconds = Math.floor(media.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes < 10) {
+    minuteValue = '0' + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds < 10) {
+    secondValue = '0' + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  var mediaTime = minuteValue + ':' + secondValue;
+  timer.textContent = mediaTime;
+
+  var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration);
+  timerBar.style.width = barLength + 'px';
+}
+
+ +

C'est une fonction assez longue, alors allons-y étape par étape:

+ +
    +
  1. Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.
    2. +
  2. Ensuite, on initialise deux variables supplémentaires — minuteValue et secondValue.
    3. +
  3. Les deux instructions if qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.
    4. +
  4. Le temps est au final la concaténation de minuteValue, un caractère deux-points, et secondValue.
    5. +
  5. Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.
    6. +
  6. La largeur que nous devons donner <div> intérieur est calculée en récupérant la largeur du <div> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.
    7. +
  7. Nous assignons la largeur du <div> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.
    8. +
+ +

Corriger play et pause

+ +

Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action rwd/fwd et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.

+ +

Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction stopMedia() — n'importe où:

+ +
rwd.classList.remove('active');
+fwd.classList.remove('active');
+clearInterval(intervalRwd);
+clearInterval(intervalFwd);
+
+ +

Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction playPauseMedia() (juste avant le début de l'instruction if).

+ +

À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions windBackward() et windForward(), puisqu'elles ont été ajoutées à la fonction stopMedia() à la place.

+ +
+

Note : Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.

+
+ +
+

Note : Le code terminé est disponible sur Github (le voir en direct).

+
+ +

Sommaire

+ +

Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.

+ +

Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:

+ +
    +
  1. +

    Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.

    +
    2. +
  2. +

    Parce que les éléments <audio> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <audio>. Essayez  de le faire.

    +
    3. +
  3. +

    Trouvez un moyen de transformer le <div> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode getBoundingClientRect(), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet event du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:

    + + 
    document.onclick = function(e) {
+  console.log(e.x) + ',' + console.log(e.y)
+}
    +
    4. +
+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.html b/files/fr/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 40c91d2fa4..0000000000 --- a/files/fr/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,699 +0,0 @@ ---- -title: Notre premier code JavaScript -slug: Learn/JavaScript/First_steps/A_first_splash -tags: - - Apprendre - - Article - - CodingScripting - - Débutant - - Fonctions - - JavaScript - - Objets - - Opérateurs - - Variables - - structures conditionnelles -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
- -

Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».

- - - - - - - - - - - - -
Prérequis :Une culture informatique basique, et des notions de HTML et CSS.
Objectif :Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.
- -

Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !

- -
-

Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.

-
- -

Penser comme un programmeur

- -

Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.

- -

Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.

- -

Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.

- -

Exemple — Jeu : Guess the number

- -

Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :

- - - - -

{{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

- -

Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.

- -

Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :

- -
-

Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.

-
- -

La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :

- -
    -
  1. Générer un nombre aléatoire entre 1 et 100.
    2. -
  2. Stocker le nombre de tours déjà joués. Commencer par 1.
    3. -
  3. Fournir au joueur le moyen de saisir un nombre.
    4. -
  4. Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.
    5. -
  5. Vérifier si le nombre saisi par le joueur est correct.
    6. -
  6. S'il est correct : -
      -
    1. Afficher un message de félicitations.
      2. -
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. -
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. -
    -
    7. -
  7. S'il est faux et que le joueur a encore des tours à jouer : -
      -
    1. Informer le joueur que sa proposition de nombre est fausse.
      2. -
    2. Lui permettre d'entrer une nouvelle proposition de nombre.
      3. -
    3. Incrémenter le nombre de tours de 1.
      4. -
    -
    8. -
  8. S'il est faux et que le joueur n'a plus de tours à jouer : -
      -
    1. Informer le joueur qu'il a perdu et que la partie est finie.
      2. -
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. -
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. -
    -
    9. -
  9. Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.
    10. -
- -

Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.

- -

Configuration initiale

- -

Pour commencer ce didacticiel, faites une copie locale du fichier number-guessing-game-start.html  (à voir directement ici). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.

- -

L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :

- -
<script>
-
-  // Votre code JavaScript se place ici
-
-</script>
-
- -

Ajouter des variables pour stocker les données

- -

Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :

- -
let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-let guesses = document.querySelector('.guesses');
-let lastResult = document.querySelector('.lastResult');
-let lowOrHi = document.querySelector('.lowOrHi');
-
-let guessSubmit = document.querySelector('.guessSubmit');
-let guessField = document.querySelector('.guessField');
-
-let guessCount = 1;
-let resetButton;
- -

Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé let suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (=) suivi de la valeur que vous voulez lui donner.

- -

Dans notre exemple :

- - - -
-

Note : Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.

-
- -

Fonctions

- -

Ajoutez maintenant ce qui suit dans votre code JavaScript :

- -
function checkGuess() {
-  alert('Je suis un espace réservé');
-}
- -

Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé function accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades ({ }). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.

- -

Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.

- -

Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les outils de développement et la console JavaScript et entrez la ligne suivante :

- -
checkGuess();
- -

Après avoir pressé Entrée ou Retour, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.

- -
-

Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.

-
- -

Opérateurs

- -

Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.

- -

Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les outils de développement et la console Javascript. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche Entrée du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :

- - - -

{{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}

- -

Regardons d'abord les opérateurs arithmétiques, par exemple :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
+Addition6 + 9
-Soustraction20 - 15
*Multiplication3 * 7
/Division10 / 5
- -

L'opérateur + peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit concaténer). Entrez les lignes suivantes, une par une :

- -
let name = 'Bingo';
-name;
-let hello = ' dit bonjour !';
-hello;
-let greeting = name + hello;
-greeting;
- -

Des raccourcis d'opérateurs sont également disponibles, appelés opérateurs d'assignation augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :

- -
name += ' dit bonjour !';
- -

Cela équivaut à :

- -
name = name + ' dit bonjour !';
- -

Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des opérateurs de comparaison, par exemple :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
===Égalité stricte (est-ce exactement identique ?)5 === 2 + 4
!==Non égalité (est-ce différent ?)'Chris' !== 'Ch' + 'ris'
<Inférieur à10 < 6
>Supérieur à10 > 20
- -

Structures conditionnelles

- -

Revenons à la fonction checkGuess(). Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.

- -

Donc, remplacez l'actuelle fonction checkGuess() par celle-ci :

- -
function checkGuess(){
-  let userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Propositions précédentes : ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Bravo, vous avez trouvé le nombre !';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-     lastResult.textContent = '!!! PERDU !!!';
-     setGameOver();
-  } else {
-     lastResult.textContent = 'Faux !';
-     lastResult.style.backgroundColor = 'red';
-     if (userGuess < randomNumber) {
-      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
-     } else if (userGuess > randomNumber) {
-      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
-     }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
-
- -

Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.

- - - - - -

Evénements

- -

À ce stade, nous avons bien implémentée la fonction checkGuess(), mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.
- Idéalement, nous voulons l'appeler lorsque le bouton Soumettre est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des écouteurs d'événements, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des gestionnaires d'évenements.
-
- Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction checkGuess() :

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Ici, nous ajoutons un écouteur d'événement au bouton guessSubmit . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, click) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction checkGuess()  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

- -

Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction setGameOver() dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.

- -

Finir les fonctionnalités du jeu

- -

Pour définir la fonction setGameOver() à la fin de notre programme, ajoutez le code ci-dessous tout en bas :

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- - - -

Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :

- -
function resetGame() {
-  guessCount = 1;
-
-  let resetParas = document.querySelectorAll('.resultParas p');
-  for (let i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de  :

- - - -

À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!

- -

Pour finir, c'est le moment de faire une synthèse sur  quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.

- -

Boucles

- -

Dans le code précédent, une partie à examiner de plus près est la boucle for. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.

- -

Pour commencer, allez sur votre console developpeur Javascript et entrez ce qui suit :

- -
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
- -

Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : for  prend trois valeurs d'entrée (arguments)

- -
    -
  1. Une valeur de départ : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer i par n'importe quel nom (ou presque...) , mais i est utilisé par convention car il est court et facile à retenir.
    2. -
  2. Une condition de fin : Ici, nous avons spécifié  i < 21 la boucle continuera jusqu'à ce que  i  ne soit plus inférieur à 21. Quand i atteindra ou dépassera 21, la boucle s'arrêtera.
    3. -
  3. Un incrémenteur :  Nous avons spécifié i++, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de i, jusqu'a ce que i atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de i  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Maintenant, regardons la boucle dans notre jeu de devinettes de nombres — ce qui suit peut être trouvé dans la fonction resetGame() :

- -
let resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <div class="resultParas">  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.

- -

Une petite discussion sur les objets

- -

Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de let resetButton; ligne près du haut de votre JavaScript, puis enregistrez votre fichier :

- -
guessField.focus();
- -

Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité  en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.

- -

Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.

- -

Dans ce cas particulier, nous avons d'abord créé une variable guessField qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML — la ligne suivante se trouve parmi nos déclarations de variables en haut du code :

- -
let guessField = document.querySelector('.guessField');
- -

Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. querySelector() prend une information - un sélecteur CSS qui sélectionne l'élément auquel vous voulez faire référence.

- -

Parce que guessField contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est focus(), donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :

- -
guessField.focus();
- -

Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de focus() à leur disposition. Par exemple, la variable guesses contient une référence à un élément {{htmlelement ("p")}} et guessCount contient un nombre.

- -

Jouer avec les objets du navigateur

- -

Jouons un peu avec certains objets du navigateur.

- -
    -
  1.  Tout d'abord, ouvrez votre programme dans un navigateur.
    2. -
  2.  Ensuite, ouvrez les outils de développement de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.
    3. -
  3.  Tapez guessField et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!
    4. -
  4. -

     Maintenant, tapez ce qui suit :

    - - 
    guessField.value = 'Hello';
-
    - -

    La propriété value représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.

    -
    5. -
  5. Tapez maintenant guesses and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}.
    6. -
  6. -

    Maintenant, essayez d'entrer la ligne suivante :

    - - 
    guesses.value
-
    - -

    Le navigateur va retourner undefined, parce que value n'existe pas dans le paragraphe.

    -
    7. -
  7. -

    Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété {{domxref("Node.textContent", "textContent")}} à la place.
    - Essayez ceci :

    - - 
    guesses.textContent = 'Where is my paragraph?';
-
    -
    8. -
  8. Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :
    9. -
- -
guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
- -

Chaque élément d'une page possède une propriété de style , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.

- -

C'est fini pour le moment...

- -

Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou jouez avec notre version finale ici. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport au code source.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md new file mode 100644 index 0000000000..40c91d2fa4 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md @@ -0,0 +1,699 @@ +--- +title: Notre premier code JavaScript +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - Apprendre + - Article + - CodingScripting + - Débutant + - Fonctions + - JavaScript + - Objets + - Opérateurs + - Variables + - structures conditionnelles +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
+ +

Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».

+ + + + + + + + + + + + +
Prérequis :Une culture informatique basique, et des notions de HTML et CSS.
Objectif :Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.
+ +

Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !

+ +
+

Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.

+
+ +

Penser comme un programmeur

+ +

Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.

+ +

Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.

+ +

Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.

+ +

Exemple — Jeu : Guess the number

+ +

Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :

+ + + + +

{{ EmbedLiveSample('Exemple_—_Jeu_Guess_the_number', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

+ +

Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.

+ +

Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :

+ +
+

Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.

+
+ +

La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :

+ +
    +
  1. Générer un nombre aléatoire entre 1 et 100.
    2. +
  2. Stocker le nombre de tours déjà joués. Commencer par 1.
    3. +
  3. Fournir au joueur le moyen de saisir un nombre.
    4. +
  4. Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.
    5. +
  5. Vérifier si le nombre saisi par le joueur est correct.
    6. +
  6. S'il est correct : +
      +
    1. Afficher un message de félicitations.
      2. +
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. +
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. +
    +
    7. +
  7. S'il est faux et que le joueur a encore des tours à jouer : +
      +
    1. Informer le joueur que sa proposition de nombre est fausse.
      2. +
    2. Lui permettre d'entrer une nouvelle proposition de nombre.
      3. +
    3. Incrémenter le nombre de tours de 1.
      4. +
    +
    8. +
  8. S'il est faux et que le joueur n'a plus de tours à jouer : +
      +
    1. Informer le joueur qu'il a perdu et que la partie est finie.
      2. +
    2. Empêcher que le joueur saisisse de nouveau un nombre.
      3. +
    3. Afficher un contrôle pour que le joueur puisse rejouer.
      4. +
    +
    9. +
  9. Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.
    10. +
+ +

Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.

+ +

Configuration initiale

+ +

Pour commencer ce didacticiel, faites une copie locale du fichier number-guessing-game-start.html  (à voir directement ici). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.

+ +

L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :

+ +
<script>
+
+  // Votre code JavaScript se place ici
+
+</script>
+
+ +

Ajouter des variables pour stocker les données

+ +

Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :

+ +
let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+let guesses = document.querySelector('.guesses');
+let lastResult = document.querySelector('.lastResult');
+let lowOrHi = document.querySelector('.lowOrHi');
+
+let guessSubmit = document.querySelector('.guessSubmit');
+let guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;
+ +

Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé let suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (=) suivi de la valeur que vous voulez lui donner.

+ +

Dans notre exemple :

+ + + +
+

Note : Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.

+
+ +

Fonctions

+ +

Ajoutez maintenant ce qui suit dans votre code JavaScript :

+ +
function checkGuess() {
+  alert('Je suis un espace réservé');
+}
+ +

Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé function accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades ({ }). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.

+ +

Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.

+ +

Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les outils de développement et la console JavaScript et entrez la ligne suivante :

+ +
checkGuess();
+ +

Après avoir pressé Entrée ou Retour, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.

+ +
+

Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.

+
+ +

Opérateurs

+ +

Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.

+ +

Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les outils de développement et la console Javascript. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche Entrée du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :

+ + + +

{{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }}

+ +

Regardons d'abord les opérateurs arithmétiques, par exemple :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
+Addition6 + 9
-Soustraction20 - 15
*Multiplication3 * 7
/Division10 / 5
+ +

L'opérateur + peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit concaténer). Entrez les lignes suivantes, une par une :

+ +
let name = 'Bingo';
+name;
+let hello = ' dit bonjour !';
+hello;
+let greeting = name + hello;
+greeting;
+ +

Des raccourcis d'opérateurs sont également disponibles, appelés opérateurs d'assignation augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :

+ +
name += ' dit bonjour !';
+ +

Cela équivaut à :

+ +
name = name + ' dit bonjour !';
+ +

Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des opérateurs de comparaison, par exemple :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
===Égalité stricte (est-ce exactement identique ?)5 === 2 + 4
!==Non égalité (est-ce différent ?)'Chris' !== 'Ch' + 'ris'
<Inférieur à10 < 6
>Supérieur à10 > 20
+ +

Structures conditionnelles

+ +

Revenons à la fonction checkGuess(). Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.

+ +

Donc, remplacez l'actuelle fonction checkGuess() par celle-ci :

+ +
function checkGuess(){
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Propositions précédentes : ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Bravo, vous avez trouvé le nombre !';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+     lastResult.textContent = '!!! PERDU !!!';
+     setGameOver();
+  } else {
+     lastResult.textContent = 'Faux !';
+     lastResult.style.backgroundColor = 'red';
+     if (userGuess < randomNumber) {
+      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
+     } else if (userGuess > randomNumber) {
+      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
+     }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+
+ +

Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.

+ + + + + +

Evénements

+ +

À ce stade, nous avons bien implémentée la fonction checkGuess(), mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.
+ Idéalement, nous voulons l'appeler lorsque le bouton Soumettre est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des écouteurs d'événements, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des gestionnaires d'évenements.
+
+ Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction checkGuess() :

+ +
guessSubmit.addEventListener('click', checkGuess);
+ +

Ici, nous ajoutons un écouteur d'événement au bouton guessSubmit . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, click) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction checkGuess()  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).

+ +

Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction setGameOver() dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.

+ +

Finir les fonctionnalités du jeu

+ +

Pour définir la fonction setGameOver() à la fin de notre programme, ajoutez le code ci-dessous tout en bas :

+ +
function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}
+ + + +

Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :

+ +
function resetGame() {
+  guessCount = 1;
+
+  let resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i < resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}
+ +

Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de  :

+ + + +

À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!

+ +

Pour finir, c'est le moment de faire une synthèse sur  quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.

+ +

Boucles

+ +

Dans le code précédent, une partie à examiner de plus près est la boucle for. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.

+ +

Pour commencer, allez sur votre console developpeur Javascript et entrez ce qui suit :

+ +
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
+ +

Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : for  prend trois valeurs d'entrée (arguments)

+ +
    +
  1. Une valeur de départ : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer i par n'importe quel nom (ou presque...) , mais i est utilisé par convention car il est court et facile à retenir.
    2. +
  2. Une condition de fin : Ici, nous avons spécifié  i < 21 la boucle continuera jusqu'à ce que  i  ne soit plus inférieur à 21. Quand i atteindra ou dépassera 21, la boucle s'arrêtera.
    3. +
  3. Un incrémenteur :  Nous avons spécifié i++, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de i, jusqu'a ce que i atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de i  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.
    4. +
+ +

Maintenant, regardons la boucle dans notre jeu de devinettes de nombres — ce qui suit peut être trouvé dans la fonction resetGame() :

+ +
let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i < resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}
+ +

Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <div class="resultParas">  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.

+ +

Une petite discussion sur les objets

+ +

Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de let resetButton; ligne près du haut de votre JavaScript, puis enregistrez votre fichier :

+ +
guessField.focus();
+ +

Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité  en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.

+ +

Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.

+ +

Dans ce cas particulier, nous avons d'abord créé une variable guessField qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML — la ligne suivante se trouve parmi nos déclarations de variables en haut du code :

+ +
let guessField = document.querySelector('.guessField');
+ +

Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. querySelector() prend une information - un sélecteur CSS qui sélectionne l'élément auquel vous voulez faire référence.

+ +

Parce que guessField contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est focus(), donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :

+ +
guessField.focus();
+ +

Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de focus() à leur disposition. Par exemple, la variable guesses contient une référence à un élément {{htmlelement ("p")}} et guessCount contient un nombre.

+ +

Jouer avec les objets du navigateur

+ +

Jouons un peu avec certains objets du navigateur.

+ +
    +
  1.  Tout d'abord, ouvrez votre programme dans un navigateur.
    2. +
  2.  Ensuite, ouvrez les outils de développement de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.
    3. +
  3.  Tapez guessField et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!
    4. +
  4. +

     Maintenant, tapez ce qui suit :

    + + 
    guessField.value = 'Hello';
+
    + +

    La propriété value représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.

    +
    5. +
  5. Tapez maintenant guesses and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}.
    6. +
  6. +

    Maintenant, essayez d'entrer la ligne suivante :

    + + 
    guesses.value
+
    + +

    Le navigateur va retourner undefined, parce que value n'existe pas dans le paragraphe.

    +
    7. +
  7. +

    Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété {{domxref("Node.textContent", "textContent")}} à la place.
    + Essayez ceci :

    + + 
    guesses.textContent = 'Where is my paragraph?';
+
    +
    8. +
  8. Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :
    9. +
+ +
guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';
+ +

Chaque élément d'une page possède une propriété de style , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.

+ +

C'est fini pour le moment...

+ +

Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou jouez avec notre version finale ici. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport au code source.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html deleted file mode 100644 index b201776dd1..0000000000 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ /dev/null @@ -1,517 +0,0 @@ ---- -title: Les tableaux -slug: Learn/JavaScript/First_steps/Arrays -tags: - - Arrays - - Article - - Beginner - - CodingScripting - - JavaScript - - Join - - Learn - - Pop - - Push - - l10n:priority - - shift - - split - - unshift -translation_of: Learn/JavaScript/First_steps/Arrays -original_slug: Learn/JavaScript/First_steps/tableaux ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
- -

Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.
- -

Qu'est‑ce qu'un tableau ?

- -

Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.

- -

Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

- -

Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

- - - -

{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}

- -

Créer un tableau

- -

On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.

- -
    -
  1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : - 
    let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
-shopping;
    -
    2. -
  2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
    3. -
  3. - 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
-let random = ['arbre', 795, [0, 1, 2]];
    -
    4. -
  4. Créez donc quelques tableaux de votre cru avant de continuer.
    5. -
- -

Accès aux éléments de tableau et modification de ceux‑ci

- -

Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu accès aux lettres dans une chaîne.

- -
    -
  1. Entrez ceci dans la console : - 
    shopping[0];
-// renvoie "pain"
    -
    2. -
  2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : - 
    shopping[0] = 'crème de sésame';
-shopping;
-// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
    - -
    -

    Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !

    -
    3. -
  3. Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau random (voir la section précédente), vous pouvez écrire quelque chose comme :
    4. -
  4. - 
    random[2][2];
    -
    5. -
  5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.
    6. -
- -

Trouver la taille d'un tableau

- -

Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :

- -
sequence.length;
-// renvoie 7
- -

Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :

- -
let sequence = [1, 1, 2, 3, 5, 8, 13];
-for (var i = 0; i < sequence.length; i++) {
-  console.log(sequence[i]);
-}
- -

Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :

- -
    -
  1. Commencer la boucle à l'élément 0 du tableau.
    2. -
  2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
    3. -
  3. Afficher chaque élément sur la console de l'explorateur avec console.log().
    4. -
- -

Quelques méthodes utiles pour les tableaux

- -

Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.

- -

Conversions entre chaînes et tableaux

- -

Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.

- -
-

Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.

-
- -
    -
  1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : - 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    -
    2. -
  2. Scindons‑la à chaque virgule : - 
    let myArray = myData.split(',');
-myArray;
    -
    3. -
  3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : - 
    myArray.length;
-myArray[0]; // le premier élément du tableau
-myArray[1]; // le deuxième élément du tableau
-myArray[myArray.length-1]; // le dernier élément du tableau
    -
    4. -
  4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : - 
    let myNewString = myArray.join(',');
-myNewString;
    -
    5. -
  5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. toString() est plus simple au plan des arguments que join(), car elle ne prend pas de paramètre, mais elle est plus limitée. Avec join() vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). - 
    let dogNames = ["Rocket","Flash","Bella","Slugger"];
-dogNames.toString(); //Rocket,Flash,Bella,Slugger
    -
    6. -
- -

Ajout et suppression d'éléments de tableau

- -

Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau myArray dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :

- -
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
- -

Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.

- -
    -
  1. Voyons push() d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : - - 
    myArray.push('Cardiff');
-myArray;
-myArray.push('Bradford', 'Brighton');
-myArray;
-
    -
    2. -
  2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : - 
    let newLength = myArray.push('Bristol');
-myArray;
-newLength;
    -
    3. -
  3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer pop() sur celle‑ci. Essayez : - 
    myArray.pop();
    -
    4. -
  4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : - 
    let removedItem = myArray.pop();
-myArray;
-removedItem;
    -
    5. -
- -

{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.

- -
    -
  1. D'abord unshift() — essayez : - - 
    myArray.unshift('Edinburgh');
-myArray;
    -
    2. -
  2. Maintenant shift() — essayez ! - 
    let removedItem = myArray.shift();
-myArray;
-removedItem;
    -
    3. -
- -

Activité : affichons les produits

- -

Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :

- -
    -
  1. Sous le commentaire // number 1 il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom products.
    2. -
  2. Sur la même ligne que le commentaire // number 2 se trouve le début d'une boucle. Dans cette ligne nous avons actuellement i <= 0, test conditionnel qui fait que la  boucle stoppe immédiatement, car ce test dit « stopper dès que i est inférieur ou égal à 0 » et i part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que i sera inférieur à la taille du tableau products.
    3. -
  3. Au dessous du commentaire // number 3 nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (nom:prix) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux Méthodes utiles pour les chaînes de caractères pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
    4. -
  4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le premier article à propos des chaînes.
    5. -
  5. Il y a une variable nommée total créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous // number 4) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un opérateur d'assignation pour faire cela ;-).
    6. -
  6. Nous souhaitons que vous modifiez la ligne au‑dessous de  // number 5 de sorte que la variable itemText soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.
    7. -
- - - - - -

{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}

- -

Activité : Top 5 des recherches

- -

Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.

- -

Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.

- -
-

Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.

-
- -

Pour terminer l'application, il vous faut :

- -
    -
  1. Ajouter une ligne sous le commentaire // number 1 pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec searchInput.value.
    2. -
  2. Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
    3. -
- - - - - -

{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}

- -

Testez vos compétences !

- -

Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir Test de compétences : les tableaux.

- -

Conclusion

- -

Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !

- -

La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md new file mode 100644 index 0000000000..b201776dd1 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/arrays/index.md @@ -0,0 +1,517 @@ +--- +title: Les tableaux +slug: Learn/JavaScript/First_steps/Arrays +tags: + - Arrays + - Article + - Beginner + - CodingScripting + - JavaScript + - Join + - Learn + - Pop + - Push + - l10n:priority + - shift + - split + - unshift +translation_of: Learn/JavaScript/First_steps/Arrays +original_slug: Learn/JavaScript/First_steps/tableaux +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
+ +

Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.
+ +

Qu'est‑ce qu'un tableau ?

+ +

Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.

+ +

Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

+ +

Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

+ + + +

{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}

+ +

Créer un tableau

+ +

On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.

+ +
    +
  1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : + 
    let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
+shopping;
    +
    2. +
  2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
    3. +
  3. + 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['arbre', 795, [0, 1, 2]];
    +
    4. +
  4. Créez donc quelques tableaux de votre cru avant de continuer.
    5. +
+ +

Accès aux éléments de tableau et modification de ceux‑ci

+ +

Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu accès aux lettres dans une chaîne.

+ +
    +
  1. Entrez ceci dans la console : + 
    shopping[0];
+// renvoie "pain"
    +
    2. +
  2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : + 
    shopping[0] = 'crème de sésame';
+shopping;
+// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
    + +
    +

    Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !

    +
    3. +
  3. Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau random (voir la section précédente), vous pouvez écrire quelque chose comme :
    4. +
  4. + 
    random[2][2];
    +
    5. +
  5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.
    6. +
+ +

Trouver la taille d'un tableau

+ +

Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :

+ +
sequence.length;
+// renvoie 7
+ +

Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :

+ +
let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
+  console.log(sequence[i]);
+}
+ +

Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :

+ +
    +
  1. Commencer la boucle à l'élément 0 du tableau.
    2. +
  2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
    3. +
  3. Afficher chaque élément sur la console de l'explorateur avec console.log().
    4. +
+ +

Quelques méthodes utiles pour les tableaux

+ +

Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.

+ +

Conversions entre chaînes et tableaux

+ +

Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.

+ +
+

Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.

+
+ +
    +
  1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : + 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    +
    2. +
  2. Scindons‑la à chaque virgule : + 
    let myArray = myData.split(',');
+myArray;
    +
    3. +
  3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : + 
    myArray.length;
+myArray[0]; // le premier élément du tableau
+myArray[1]; // le deuxième élément du tableau
+myArray[myArray.length-1]; // le dernier élément du tableau
    +
    4. +
  4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : + 
    let myNewString = myArray.join(',');
+myNewString;
    +
    5. +
  5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. toString() est plus simple au plan des arguments que join(), car elle ne prend pas de paramètre, mais elle est plus limitée. Avec join() vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). + 
    let dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger
    +
    6. +
+ +

Ajout et suppression d'éléments de tableau

+ +

Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau myArray dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :

+ +
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+ +

Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.

+ +
    +
  1. Voyons push() d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : + + 
    myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+
    +
    2. +
  2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : + 
    let newLength = myArray.push('Bristol');
+myArray;
+newLength;
    +
    3. +
  3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer pop() sur celle‑ci. Essayez : + 
    myArray.pop();
    +
    4. +
  4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : + 
    let removedItem = myArray.pop();
+myArray;
+removedItem;
    +
    5. +
+ +

{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.

+ +
    +
  1. D'abord unshift() — essayez : + + 
    myArray.unshift('Edinburgh');
+myArray;
    +
    2. +
  2. Maintenant shift() — essayez ! + 
    let removedItem = myArray.shift();
+myArray;
+removedItem;
    +
    3. +
+ +

Activité : affichons les produits

+ +

Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :

+ +
    +
  1. Sous le commentaire // number 1 il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom products.
    2. +
  2. Sur la même ligne que le commentaire // number 2 se trouve le début d'une boucle. Dans cette ligne nous avons actuellement i <= 0, test conditionnel qui fait que la  boucle stoppe immédiatement, car ce test dit « stopper dès que i est inférieur ou égal à 0 » et i part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que i sera inférieur à la taille du tableau products.
    3. +
  3. Au dessous du commentaire // number 3 nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (nom:prix) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux Méthodes utiles pour les chaînes de caractères pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
    4. +
  4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le premier article à propos des chaînes.
    5. +
  5. Il y a une variable nommée total créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous // number 4) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un opérateur d'assignation pour faire cela ;-).
    6. +
  6. Nous souhaitons que vous modifiez la ligne au‑dessous de  // number 5 de sorte que la variable itemText soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.
    7. +
+ + + + + +

{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}

+ +

Activité : Top 5 des recherches

+ +

Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.

+ +

Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.

+ +
+

Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.

+
+ +

Pour terminer l'application, il vous faut :

+ +
    +
  1. Ajouter une ligne sous le commentaire // number 1 pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec searchInput.value.
    2. +
  2. Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
    3. +
+ + + + + +

{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}

+ +

Testez vos compétences !

+ +

Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir Test de compétences : les tableaux.

+ +

Conclusion

+ +

Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !

+ +

La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/index.html b/files/fr/learn/javascript/first_steps/index.html deleted file mode 100644 index 8e093bebfb..0000000000 --- a/files/fr/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Premiers pas en JavaScript -slug: Learn/JavaScript/First_steps -tags: - - Article - - Auto-évaluation - - Chaînes de caractères - - Débutant - - Guide - - JavaScript - - Module - - Nombres - - Opérateurs - - Tableaux - - Variables -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.

- -

Prérequis

- -

Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :

- - - -
-

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme JSBin ou Thimble.

-
- -

Guides

- -
-
Qu'est-ce que JavaScript ?
-
Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.
-
Notre premier code JavaScript
-
-

Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.

-
-
Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript
-
-

Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.

-
-
Stocker les informations dont vous avez besoin — les variables
-
-

Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.

-
-
Mathématiques de base en JavaScript — nombres et opérateurs
-
À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.
-
Gérer du texte — les chaînes de caractères en JavaScript
-
Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.
-
Méthodes utiles pour les chaînes de caractères
-
Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.
-
Les tableaux
-
Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.
-
- -

Auto-évaluation

- -

L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.

- -
-
Génerateur d'histoires absurdes
-
Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !
-
diff --git a/files/fr/learn/javascript/first_steps/index.md b/files/fr/learn/javascript/first_steps/index.md new file mode 100644 index 0000000000..8e093bebfb --- /dev/null +++ b/files/fr/learn/javascript/first_steps/index.md @@ -0,0 +1,70 @@ +--- +title: Premiers pas en JavaScript +slug: Learn/JavaScript/First_steps +tags: + - Article + - Auto-évaluation + - Chaînes de caractères + - Débutant + - Guide + - JavaScript + - Module + - Nombres + - Opérateurs + - Tableaux + - Variables +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.

+ +

Prérequis

+ +

Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :

+ + + +
+

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme JSBin ou Thimble.

+
+ +

Guides

+ +
+
Qu'est-ce que JavaScript ?
+
Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.
+
Notre premier code JavaScript
+
+

Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.

+
+
Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript
+
+

Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.

+
+
Stocker les informations dont vous avez besoin — les variables
+
+

Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.

+
+
Mathématiques de base en JavaScript — nombres et opérateurs
+
À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.
+
Gérer du texte — les chaînes de caractères en JavaScript
+
Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.
+
Méthodes utiles pour les chaînes de caractères
+
Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.
+
Les tableaux
+
Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.
+
+ +

Auto-évaluation

+ +

L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.

+ +
+
Génerateur d'histoires absurdes
+
Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !
+
diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html deleted file mode 100644 index bdfdda9e64..0000000000 --- a/files/fr/learn/javascript/first_steps/math/index.html +++ /dev/null @@ -1,450 +0,0 @@ ---- -title: Mathématiques de base en JavaScript — nombres et opérateurs -slug: Learn/JavaScript/First_steps/Math -tags: - - Article - - Beginner - - CodingScripting - - Guide - - JavaScript - - Learn - - Math - - Operators - - augmented - - increment - - l10n:priority - - maths - - modulo -translation_of: Learn/JavaScript/First_steps/Math ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
- -

À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec les bases des maths en JavaScript.
- -

Tout le monde aime les maths

- -

Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.

- -

Cet article ne traite que des éléments de base nécessaires pour débuter.

- -

Types de nombres

- -

En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :

- - - -

Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :

- - - -

Avant que votre cervelle ne se mette à bouillir, stop ! Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.

- -

L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.

- -

Ce ne sont que des nombres pour moi

- -

Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la console JavaScript des outils de développement, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

- -

Ouvrir la console dans une nouvelle fenêtre

- -
    -
  1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : - 
    var myInt = 5;
-var myFloat = 6.667;
-myInt;
-myFloat;
    -
    2. -
  2. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
    3. -
  3. Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :
    4. -
  4. - 
    typeof myInt;
-typeof myFloat;
    -
    5. -
  5. "number" est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !
    6. -
- -

Méthodes de nombres utiles

- -

L'objet Number , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.

- -

Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode toFixed(). Tapez les lignes suivantes dans la console de votre navigateur:

- -
let lotsOfDecimal = 1.766584958675746364;
-lotsOfDecimal;
-let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
-twoDecimalPlaces;
- -

Convertir en type de données numérique

- -

Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de formulaire, et le type de donnée entré est du texte. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur Number() pour retourner une version numérique de la même valeur.

- -

Par exemple, essayez de taper ces lignes dans votre console:

- -
let myNumber = '74';
-myNumber + 3;
- -

Vous obtenez le résultat 743, et non pas 77, car myNumber est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:

- -
typeof myNumber;
- -

Pour réparer le calcul, vous pouvez faire ceci:

- -
Number(myNumber) + 3;
- -

Opérateurs arithmétiques

- -

Ce sont les opérateurs de base pour effectuer diverses opérations :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperateurNomButExemple
+AdditionAjoute deux nombres.6 + 9
-SoustractionSoustrait le nombre de droite de celui de gauche.20 - 15
*MultiplicationMultiplie les deux nombrer.3 * 7
/DivisionDivise le nombre de gauche par celui de droite.10 / 5
% -

Reste (quelquefois nommé modulo)

- 		-

Renvoie le reste de la division du nombre de gauche par celui de droite.

- 		8 % 3 (renvoie 2, car 3 est contenu 2 fois dans 8, et il reste 2.)
- -
-

Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.

-
- -

Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la console des outils de développement JavaScript ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.

- -
    -
  1. Essayez de saisir quelques exemples simples de votre cru, comme : - 
    10 + 7
-9 * 8
-60 % 3
    -
    2. -
  2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : - 
    var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;
    -
    3. -
  3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : - 
    5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;
    -
    4. -
- -

Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.

- -

Priorité des opérateurs

- -

Revenons sur le dernier exemple ci‑dessus, en supposant que num2 contient la valeur 50 et num1 contient 10 (comme défini plus haut) :

- -
num2 + num1 / 8 + 2;
- -

En tant qu'humain, vous pouvez lire « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».

- -

Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».

- -

Cela est dû aux priorités entre opérateurs — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).

- -

Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :

- -
(num2 + num1) / (8 + 2);
- -

Essayez-le et voyez.

- -
-

Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.

-
- -

Opérateurs d'incrémentation et de décrémentation

- -

Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrementation (--). Nous nous sommes servis de ++ dans le jeu « Devinez le nombre » dans notre article Première plongée dans le JavaScript pour ajouter 1 à la variable guessCount pour décompter le nombre de suppositions restantes après chaque tour.

- -
guessCount++;
- -
-

Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.

-
- -

Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :

- -
3++;
- -

Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :

- -
var num1 = 4;
-num1++;
- -

Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, puis incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :

- -
num1;
- -

C'est pareil avec -- : essayez ce qui suit

- -
var num2 = 6;
-num2--;
-num2;
- -
-

Note : En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable puis renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec ++num1 et --num2.

-
- -

Opérateurs d'assignation

- -

Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, = — il donne à la variable de gauche la valeur indiquée à droite :

- -
var x = 3; // x contient la valeur 3
-var y = 4; // y contient la valeur 4
-x = y; // x contient maintenant la même valeur que y, 4
- -

Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpérateurNomButExempleRaccourci pour
+=Addition et assignationAjoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 3;
- x += 4;		x = 3;
- x = x + 4;
-=Soustraction et assignationSoustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 6;
- x -= 3;		x = 6;
- x = x - 3;
*=Multiplication et assignationMultiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 2;
- x *= 3;		x = 2;
- x = x * 3;
/=Division et assignationDivise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variablex = 10;
- x /= 5;		x = 10;
- x = x / 5;
- -

Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.

- -

Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :

- -
var x = 3; // x contient la valeur 3
-var y = 4; // y contient la valeur 4
-x *= y; // x contient maintenant la valeur 12
- -
-

Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.

-
- -

Apprentissage actif : dimensionner une boîte à canevas

- -

Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables x et y, qui sont toutes deux initialisées avec la valeur 50.

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

- -

Ouvrir dans une nouvelle fenêtre

- -

Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape :

- - - -

Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis.

- -

Opérateurs de comparaison

- -

Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des opérateurs de comparaison.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperateurNomButExemple
===Égalité stricteTeste si les valeurs de droite et de gauche sont identiques5 === 2 + 4
!==Non-égalité stricteTeste si les valeurs de doite et de gauche ne sont pas identiques5 !== 2 + 3
<Inférieur àTeste si la valeur de gauche est plus petite que celle de droite.10 < 6
>Supérieur àTeste si la valeur de gauche est plus grande que celle de droite.10 > 20
<=Inférieur ou égal àTeste si la valeur de gauche est plus petite ou égale à celle de droite.3 <= 2
>=Supérieur ou égal àTeste si la valeur de gauche est supérieure ou égale à celle de droite.5 >= 4
- -
-

Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.

-
- -

Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur true/false — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :

- - - -

Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :

- -
<button>Démarrer la machine</button>
-<p>La machine est arrêtée.</p>
-
- -
var btn = document.querySelector('button');
-var txt = document.querySelector('p');
-
-btn.addEventListener('click', updateBtn);
-
-function updateBtn() {
-  if (btn.textContent === 'Démarrer la machine') {
-    btn.textContent = 'Arrêter la machine';
-    txt.textContent = 'La machine est en marche !';
-  } else {
-    btn.textContent = 'Démarrer la machine';
-    txt.textContent = 'La machine est arrêtée.';
-  }
-}
- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

- -

Ouvrir dans une nouvelle fenêtre

- -

Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction updateBtn(). Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.

- -
-

Note : Un contrôle qui alterne entre deux états porte généralement le nom de toggle (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.

-
- -

Résumé

- -

Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court.

- -

Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.

- -
-

Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.

-
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md new file mode 100644 index 0000000000..bdfdda9e64 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/math/index.md @@ -0,0 +1,450 @@ +--- +title: Mathématiques de base en JavaScript — nombres et opérateurs +slug: Learn/JavaScript/First_steps/Math +tags: + - Article + - Beginner + - CodingScripting + - Guide + - JavaScript + - Learn + - Math + - Operators + - augmented + - increment + - l10n:priority + - maths + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+ +

À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec les bases des maths en JavaScript.
+ +

Tout le monde aime les maths

+ +

Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.

+ +

Cet article ne traite que des éléments de base nécessaires pour débuter.

+ +

Types de nombres

+ +

En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :

+ + + +

Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :

+ + + +

Avant que votre cervelle ne se mette à bouillir, stop ! Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.

+ +

L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.

+ +

Ce ne sont que des nombres pour moi

+ +

Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la console JavaScript des outils de développement, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}

+ +

Ouvrir la console dans une nouvelle fenêtre

+ +
    +
  1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : + 
    var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.
    3. +
  3. Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :
    4. +
  4. + 
    typeof myInt;
+typeof myFloat;
    +
    5. +
  5. "number" est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !
    6. +
+ +

Méthodes de nombres utiles

+ +

L'objet Number , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.

+ +

Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode toFixed(). Tapez les lignes suivantes dans la console de votre navigateur:

+ +
let lotsOfDecimal = 1.766584958675746364;
+lotsOfDecimal;
+let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
+twoDecimalPlaces;
+ +

Convertir en type de données numérique

+ +

Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de formulaire, et le type de donnée entré est du texte. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur Number() pour retourner une version numérique de la même valeur.

+ +

Par exemple, essayez de taper ces lignes dans votre console:

+ +
let myNumber = '74';
+myNumber + 3;
+ +

Vous obtenez le résultat 743, et non pas 77, car myNumber est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:

+ +
typeof myNumber;
+ +

Pour réparer le calcul, vous pouvez faire ceci:

+ +
Number(myNumber) + 3;
+ +

Opérateurs arithmétiques

+ +

Ce sont les opérateurs de base pour effectuer diverses opérations :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperateurNomButExemple
+AdditionAjoute deux nombres.6 + 9
-SoustractionSoustrait le nombre de droite de celui de gauche.20 - 15
*MultiplicationMultiplie les deux nombrer.3 * 7
/DivisionDivise le nombre de gauche par celui de droite.10 / 5
% +

Reste (quelquefois nommé modulo)

+ 		+

Renvoie le reste de la division du nombre de gauche par celui de droite.

+ 		8 % 3 (renvoie 2, car 3 est contenu 2 fois dans 8, et il reste 2.)
+ +
+

Note : Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.

+
+ +

Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la console des outils de développement JavaScript ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.

+ +
    +
  1. Essayez de saisir quelques exemples simples de votre cru, comme : + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.

+ +

Priorité des opérateurs

+ +

Revenons sur le dernier exemple ci‑dessus, en supposant que num2 contient la valeur 50 et num1 contient 10 (comme défini plus haut) :

+ +
num2 + num1 / 8 + 2;
+ +

En tant qu'humain, vous pouvez lire « 50 plus 10 égale 60 », puis « 8 plus 2 égale 10 » et finalement « 60 divisé par 10 égale 6 ».

+ +

Mais le navigateur calcule « 10 sur 8 égale 1.25 », puis « 50 plus 1.25 plus 2 égale 53.25 ».

+ +

Cela est dû aux priorités entre opérateurs — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).

+ +

Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :

+ +
(num2 + num1) / (8 + 2);
+ +

Essayez-le et voyez.

+ +
+

Note : La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans Expressions and operators.

+
+ +

Opérateurs d'incrémentation et de décrémentation

+ +

Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (++) ou de décrementation (--). Nous nous sommes servis de ++ dans le jeu « Devinez le nombre » dans notre article Première plongée dans le JavaScript pour ajouter 1 à la variable guessCount pour décompter le nombre de suppositions restantes après chaque tour.

+ +
guessCount++;
+ +
+

Note : Ces opérateurs sont couramment utilisés dans des boucles ; nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.

+
+ +

Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :

+ +
3++;
+ +

Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :

+ +
var num1 = 4;
+num1++;
+ +

Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, puis incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :

+ +
num1;
+ +

C'est pareil avec -- : essayez ce qui suit

+ +
var num2 = 6;
+num2--;
+num2;
+ +
+

Note : En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable puis renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec ++num1 et --num2.

+
+ +

Opérateurs d'assignation

+ +

Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, = — il donne à la variable de gauche la valeur indiquée à droite :

+ +
var x = 3; // x contient la valeur 3
+var y = 4; // y contient la valeur 4
+x = y; // x contient maintenant la même valeur que y, 4
+ +

Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurNomButExempleRaccourci pour
+=Addition et assignationAjoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Soustraction et assignationSoustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*=Multiplication et assignationMultiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variablex = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=Division et assignationDivise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variablex = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.

+ +

Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :

+ +
var x = 3; // x contient la valeur 3
+var y = 4; // y contient la valeur 4
+x *= y; // x contient maintenant la valeur 12
+ +
+

Note : Il y a des tas d'autres opérateurs d'assignation disponibles, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.

+
+ +

Apprentissage actif : dimensionner une boîte à canevas

+ +

Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables x et y, qui sont toutes deux initialisées avec la valeur 50.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

+ +

Ouvrir dans une nouvelle fenêtre

+ +

Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape :

+ + + +

Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis.

+ +

Opérateurs de comparaison

+ +

Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des opérateurs de comparaison.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperateurNomButExemple
===Égalité stricteTeste si les valeurs de droite et de gauche sont identiques5 === 2 + 4
!==Non-égalité stricteTeste si les valeurs de doite et de gauche ne sont pas identiques5 !== 2 + 3
<Inférieur àTeste si la valeur de gauche est plus petite que celle de droite.10 < 6
>Supérieur àTeste si la valeur de gauche est plus grande que celle de droite.10 > 20
<=Inférieur ou égal àTeste si la valeur de gauche est plus petite ou égale à celle de droite.3 <= 2
>=Supérieur ou égal àTeste si la valeur de gauche est supérieure ou égale à celle de droite.5 >= 4
+ +
+

Note : Vous verrez peut‑être certaines personnes utiliser == et != pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de ===/!==. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs et des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.

+
+ +

Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur true/false — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :

+ + + +

Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :

+ +
<button>Démarrer la machine</button>
+<p>La machine est arrêtée.</p>
+
+ +
var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Démarrer la machine') {
+    btn.textContent = 'Arrêter la machine';
+    txt.textContent = 'La machine est en marche !';
+  } else {
+    btn.textContent = 'Démarrer la machine';
+    txt.textContent = 'La machine est arrêtée.';
+  }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Ouvrir dans une nouvelle fenêtre

+ +

Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction updateBtn(). Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.

+ +
+

Note : Un contrôle qui alterne entre deux états porte généralement le nom de toggle (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.

+
+ +

Résumé

+ +

Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court.

+ +

Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.

+ +
+

Note : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux Nombres et dates et aux Expressions et opérateurs.

+
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html deleted file mode 100644 index 298aef0296..0000000000 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Générateur d'histoires absurdes -slug: Learn/JavaScript/First_steps/Silly_story_generator -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !

- - - - - - - - - - - - -
Prérequis : -

Avant de vous lancer dans cette évaluation, vous devez avoir déjà travaillé sur tous les articles de ce module.

-
Objectif : -

Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux.

-
- -

Point de départ

- -

Pour commencer cette évaluation :

- - - -
-

Note : Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.

-
- -

Résumé du projet

- -

On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes :

- - - -

Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :

- -

- -

Pour vous faire une idée un peu plus précise, jetez un œil à l'exemple terminé (mais sans regarder le code source !)

- -

Les étapes

- -

Les sections suivantes décrivent ce que vous devez faire :

- -

Installation basique :

- -
    -
  1. Créez un nouveau fichier nommé main.js, dans le même dossier que index.html file.
    2. -
  2. Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant main.js. Mettez-la juste avant de refermer la balise </body>.
    3. -
- -

Variables initiales et fonctions :

- -
    -
  1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier main. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (randomize), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (story). Par ailleurs, vous avez une fonction appelée randomValueFromArray() qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
    2. -
  2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (input) dans notre program. L'idée est que vous intégriez ces variables internes dans main.js: -
      -
    1. Stockez la première longue chaîne de caractères (string) dans la variable storyText.
      2. -
    2. Stockez le premier groupe de trois strings dans le tableau insertX.
      3. -
    3. Stockez le deuxième groupe de trois strings dans le tableau insertY.
      4. -
    4. Stockez le troisième groupe de trois strings dans une tableau insertZ.
      5. -
    -
    3. -
- -

Mettre en place le gestionnaire d'événements (event handler) et le squelette de la fonction :

- -
    -
  1. Retournez au fichier de texte brut.
    2. -
  2. Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier main.js principal. Cela : -
      -
    • Ajoute un gestionnaire d'événements pour les clics à la variable randomize de telle sorte que quand on clique sur le bouton associé, la fonction result() se lance.
      • -
    • Ajoute une définition partiellement complète de la fonction result() à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.
      • -
    -
    3. -
- -

Compléter la fonction result() :

- -
    -
  1. Créer une nouvelle variable nommée newStory, et fixer sa valeur pour qu'elle soit égale à storyText. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à storyText, on ne pourrait générer une nouvelle histoire qu'une seule fois.
    2. -
  2. Créer trois nouvelles variables nommées xItem, yItem, et zItem, et faites en sorte qu'elles soient égales au résultat de l'appel de randomValueFromArray() sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis insertX en écrivant randomValueFromArray(insertX).
    3. -
  3. Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne newStory — :insertx:, :inserty:, et :insertz: — par les chaînes stockées dans xItem, yItem, and zItem. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à newStory, de sorte qu'à chaque appel, newStory est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.
    4. -
  4. Dans le premier block if, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne newStory en tant que variable name. Dans ce block, on établit que "Si une valeur a été entrée dans le champ customName text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".
    5. -
  5. Dans le deuxième block if, on vérifie que le bouton radio uk a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : -
      -
    1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
      2. -
    2. Dans la ligne qui définit la variable weight (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'stone'.
      3. -
    3. Dans la ligne qui définit la variable temperature, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'centigrade'.
      4. -
    4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable temperature, et '300 pounds' par les contenus de la variable weight.
      5. -
    -
    6. -
  6. Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété textContent de la variable story (qui référence le paragraphe) soit égale à newStory.
    7. -
- -

Trucs et astuces

- - - -

Évaluation

- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list dev-mdc ou au canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md new file mode 100644 index 0000000000..298aef0296 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md @@ -0,0 +1,143 @@ +--- +title: Générateur d'histoires absurdes +slug: Learn/JavaScript/First_steps/Silly_story_generator +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !

+ + + + + + + + + + + + +
Prérequis : +

Avant de vous lancer dans cette évaluation, vous devez avoir déjà travaillé sur tous les articles de ce module.

+
Objectif : +

Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux.

+
+ +

Point de départ

+ +

Pour commencer cette évaluation :

+ + + +
+

Note : Vous pouvez aussi utiliser un site tel que que JSBin ou Thimble pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <script> au sein de la page HTML.

+
+ +

Résumé du projet

+ +

On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes :

+ + + +

Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :

+ +

+ +

Pour vous faire une idée un peu plus précise, jetez un œil à l'exemple terminé (mais sans regarder le code source !)

+ +

Les étapes

+ +

Les sections suivantes décrivent ce que vous devez faire :

+ +

Installation basique :

+ +
    +
  1. Créez un nouveau fichier nommé main.js, dans le même dossier que index.html file.
    2. +
  2. Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant main.js. Mettez-la juste avant de refermer la balise </body>.
    3. +
+ +

Variables initiales et fonctions :

+ +
    +
  1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier main. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (randomize), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (story). Par ailleurs, vous avez une fonction appelée randomValueFromArray() qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
    2. +
  2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (input) dans notre program. L'idée est que vous intégriez ces variables internes dans main.js: +
      +
    1. Stockez la première longue chaîne de caractères (string) dans la variable storyText.
      2. +
    2. Stockez le premier groupe de trois strings dans le tableau insertX.
      3. +
    3. Stockez le deuxième groupe de trois strings dans le tableau insertY.
      4. +
    4. Stockez le troisième groupe de trois strings dans une tableau insertZ.
      5. +
    +
    3. +
+ +

Mettre en place le gestionnaire d'événements (event handler) et le squelette de la fonction :

+ +
    +
  1. Retournez au fichier de texte brut.
    2. +
  2. Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier main.js principal. Cela : +
      +
    • Ajoute un gestionnaire d'événements pour les clics à la variable randomize de telle sorte que quand on clique sur le bouton associé, la fonction result() se lance.
      • +
    • Ajoute une définition partiellement complète de la fonction result() à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.
      • +
    +
    3. +
+ +

Compléter la fonction result() :

+ +
    +
  1. Créer une nouvelle variable nommée newStory, et fixer sa valeur pour qu'elle soit égale à storyText. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à storyText, on ne pourrait générer une nouvelle histoire qu'une seule fois.
    2. +
  2. Créer trois nouvelles variables nommées xItem, yItem, et zItem, et faites en sorte qu'elles soient égales au résultat de l'appel de randomValueFromArray() sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis insertX en écrivant randomValueFromArray(insertX).
    3. +
  3. Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne newStory — :insertx:, :inserty:, et :insertz: — par les chaînes stockées dans xItem, yItem, and zItem. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à newStory, de sorte qu'à chaque appel, newStory est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.
    4. +
  4. Dans le premier block if, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne newStory en tant que variable name. Dans ce block, on établit que "Si une valeur a été entrée dans le champ customName text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".
    5. +
  5. Dans le deuxième block if, on vérifie que le bouton radio uk a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : +
      +
    1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
      2. +
    2. Dans la ligne qui définit la variable weight (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'stone'.
      3. +
    3. Dans la ligne qui définit la variable temperature, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un Math.round() à la fin duquel vous concatenez 'centigrade'.
      4. +
    4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable temperature, et '300 pounds' par les contenus de la variable weight.
      5. +
    +
    6. +
  6. Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété textContent de la variable story (qui référence le paragraphe) soit égale à newStory.
    7. +
+ +

Trucs et astuces

+ + + +

Évaluation

+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list dev-mdc ou au canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !

+ +

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/strings/index.html b/files/fr/learn/javascript/first_steps/strings/index.html deleted file mode 100644 index 457cf98379..0000000000 --- a/files/fr/learn/javascript/first_steps/strings/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Gérer du texte — les chaînes de caractères en JavaScript -slug: Learn/JavaScript/First_steps/Strings -translation_of: Learn/JavaScript/First_steps/Strings ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
- -

Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.

- - - - - - - - - - - - -
Prérequis :Connaissance de base en informatique, une compréhension basique de HTML et CSS et savoir ce qu'est JavaScript.
Objectif :Devenir familier avec les fondamentaux pour manipuler les chaînes de caractères en JavaScript.
- -

Le pouvoir des mots

- -

Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.

- -

À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.

- -

Chaînes de caractères — les bases

- -

À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  l'ouvrir dans un onglet ou une fenêtre séparée, ou bien utiliser celle de l'explorateur, comme vous préférez).

- - - -

{{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }}

- -

Créer une chaîne de texte

- -
    -
  1. Pour débuter, entrez les lignes suivantes : - 
    let string = 'La révolution ne sera pas télévisée.';
-string;
    - Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
    2. -
  2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : - 
    let badString = Voici un test;
-let badString = 'Voici un test;
-let badString = Voici un test';
    - Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne  mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « unterminated string literal »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
    3. -
  3. L'assertion suivante fonctionne si la variable string a été préalablement définie — essayez maintenant : - 
    let badString = string;
-badString;
    - badString est maintenant défini avec la même valeur que string.
    4. -
- -

Guillemets simples vs guillemets doubles

- -
    -
  1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : - 
    let sgl = 'Guillemet simple.';
-let dbl = "Guillemets doubles.";
-sgl;
-dbl;
    -
    2. -
  2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : - 
    let badQuotes = 'Quoi sur Terre ?";
    -
    3. -
  3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : - 
    let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
-let dblSgl = "J'ai le blues.";
-sglDbl;
-dblSgl;
    -
    4. -
  4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : - 
    let bigmouth = 'Je n'ai pas eu droit à prendre place...';
    - Voilà qui nous amène naturellement au prochain sujet.
    5. -
- -

Échappement de caractères dans une chaîne

- -

Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :

- -
let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
-bigmouth;
- -

Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. \",  et il y a certains codes spéciaux à côté. Voyez  Notations d'échappement pour plus de détails.

- -

Concaténation de chaînes

- -
    -
  1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. - 
    let one = 'Hello, ';
-let two = 'comment allez‑vous ?';
-let joined = one + two;
-joined;
    - Il en résulte que la variable nommée joined contient la valeur "Hello, comment allez‑vous ?".
    2. -
  2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  +  entre chacune. Essayez ceci : - 
    let multiple = one + one + one + one + two;
-multiple;
    -
    3. -
  3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : - 
    let response = one + 'Je vais bien — et vous ' + two;
-response;
    -
    4. -
- -
-

Note : Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle chaîne littérale.

-
- -

Concaténation dans un contexte

- -

Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :

- -
<button>Pressez‑moi</button>
- -
let button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('Quel est votre nom ?');
-  alert('Hello ' + name + ', sympa de vous voir !');
-}
- -

{{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }}

- -

Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas name. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable name, par concaténation.

- -

Nombres vs chaînes

- -
    -
  1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : - 
    'Front ' + 242;
-
    - Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.
    2. -
  2. Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur typeof pour vérifier si la variable est un nombre ou une chaîne): - 
    let myDate = '19' + '67';
-typeof myDate;
    -
    3. -
  3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : -
      -
    • L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : - 
      let myString = '123';
-let myNum = Number(myString);
-typeof myNum;
      -
      • -
    • D'autre part, tout nombre possède une méthode nommée toString() qui le convertit en chaîne équivalente. Essayez : - 
      let myNum = 123;
-let myString = myNum.toString();
-typeof myString;
      -
      • -
    - Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type number, donc vous pouvez le faire passer par la méthode Number() pour gérer cela. C'est exactement ce que nous avons fait dans le jeu Devinez un nombre, à la ligne 63.
    4. -
- -

Conclusion

- -

Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md new file mode 100644 index 0000000000..457cf98379 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/strings/index.md @@ -0,0 +1,264 @@ +--- +title: Gérer du texte — les chaînes de caractères en JavaScript +slug: Learn/JavaScript/First_steps/Strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
+ +

Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.

+ + + + + + + + + + + + +
Prérequis :Connaissance de base en informatique, une compréhension basique de HTML et CSS et savoir ce qu'est JavaScript.
Objectif :Devenir familier avec les fondamentaux pour manipuler les chaînes de caractères en JavaScript.
+ +

Le pouvoir des mots

+ +

Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.

+ +

À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.

+ +

Chaînes de caractères — les bases

+ +

À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  l'ouvrir dans un onglet ou une fenêtre séparée, ou bien utiliser celle de l'explorateur, comme vous préférez).

+ + + +

{{ EmbedLiveSample('Chaînes_de_caractères_—_les_bases', '100%', 300) }}

+ +

Créer une chaîne de texte

+ +
    +
  1. Pour débuter, entrez les lignes suivantes : + 
    let string = 'La révolution ne sera pas télévisée.';
+string;
    + Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.
    2. +
  2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : + 
    let badString = Voici un test;
+let badString = 'Voici un test;
+let badString = Voici un test';
    + Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne  mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « unterminated string literal »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.
    3. +
  3. L'assertion suivante fonctionne si la variable string a été préalablement définie — essayez maintenant : + 
    let badString = string;
+badString;
    + badString est maintenant défini avec la même valeur que string.
    4. +
+ +

Guillemets simples vs guillemets doubles

+ +
    +
  1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : + 
    let sgl = 'Guillemet simple.';
+let dbl = "Guillemets doubles.";
+sgl;
+dbl;
    +
    2. +
  2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : + 
    let badQuotes = 'Quoi sur Terre ?";
    +
    3. +
  3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : + 
    let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
+let dblSgl = "J'ai le blues.";
+sglDbl;
+dblSgl;
    +
    4. +
  4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : + 
    let bigmouth = 'Je n'ai pas eu droit à prendre place...';
    + Voilà qui nous amène naturellement au prochain sujet.
    5. +
+ +

Échappement de caractères dans une chaîne

+ +

Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :

+ +
let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
+bigmouth;
+ +

Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. \",  et il y a certains codes spéciaux à côté. Voyez  Notations d'échappement pour plus de détails.

+ +

Concaténation de chaînes

+ +
    +
  1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. + 
    let one = 'Hello, ';
+let two = 'comment allez‑vous ?';
+let joined = one + two;
+joined;
    + Il en résulte que la variable nommée joined contient la valeur "Hello, comment allez‑vous ?".
    2. +
  2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  +  entre chacune. Essayez ceci : + 
    let multiple = one + one + one + one + two;
+multiple;
    +
    3. +
  3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : + 
    let response = one + 'Je vais bien — et vous ' + two;
+response;
    +
    4. +
+ +
+

Note : Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle chaîne littérale.

+
+ +

Concaténation dans un contexte

+ +

Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :

+ +
<button>Pressez‑moi</button>
+ +
let button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Quel est votre nom ?');
+  alert('Hello ' + name + ', sympa de vous voir !');
+}
+ +

{{ EmbedLiveSample('Concaténation_dans_un_contexte', '100%', 50) }}

+ +

Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas name. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable name, par concaténation.

+ +

Nombres vs chaînes

+ +
    +
  1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : + 
    'Front ' + 242;
+
    + Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.
    2. +
  2. Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur typeof pour vérifier si la variable est un nombre ou une chaîne): + 
    let myDate = '19' + '67';
+typeof myDate;
    +
    3. +
  3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : +
      +
    • L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : + 
      let myString = '123';
+let myNum = Number(myString);
+typeof myNum;
      +
      • +
    • D'autre part, tout nombre possède une méthode nommée toString() qui le convertit en chaîne équivalente. Essayez : + 
      let myNum = 123;
+let myString = myNum.toString();
+typeof myString;
      +
      • +
    + Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type number, donc vous pouvez le faire passer par la méthode Number() pour gérer cela. C'est exactement ce que nous avons fait dans le jeu Devinez un nombre, à la ligne 63.
    4. +
+ +

Conclusion

+ +

Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html deleted file mode 100644 index a281723a68..0000000000 --- a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 'Testez vos compétences : les tableaux' -slug: Learn/JavaScript/First_steps/Test_your_skills:_Arrays -tags: - - Arrays - - Beginner - - JavaScript - - Learn - - test your skills -translation_of: Learn/JavaScript/First_steps/Test_your_skills:_Arrays -original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux ---- -
{{learnsidebar}}
- -

L'objectif de ce test est d'évaluer votre compréhension de l'article sur les tableaux en JavaScript (arrays).

- -
-

Note : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle, ou Glitch afin de travailler sur ces tâches.

-

Si vous vous retrouvez bloqué·e, vous pouvez demander de l'aide (voir la section à ce sujet en fin de page).

-
- -
-

Note : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).

-
- -

Tableaux - Exercice 1

- -

Commençons par quelques manipulations de base. Dans cet exercice, vous devrez créer un tableau avec trois éléments. Ce tableau devra être stocké dans une variable intitulée myArray. Les éléments du tableau peuvent être n'importe quoi (si vous avez besoin d'inspiration : pourquoi ne pas utiliser vos plats ou vos groupes de musique préférés ?).

- -

Ensuite, modifiez les deux premiers éléments du tableau en utilisant la notation avec les guillemets/quotes et des opérations d'affectation. Puis ajoutez un nouvel élément au début du tableau.

- -

Vous pouvez mettre à jour le code suivant pour parvenir à la solution :

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}

- -
-

Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

-
- -

Tableaux - Exercice 2

- -

Voyons maintenant un autre exercice. Ici, vous avez une chaîne de caractères sur laquelle travailler. Vous devrez :

- -
    -
  1. Convertir la chaîne de caractères en un tableau tout en retirant les caractères + lors de la conversion. Stockez ensuite le résultat dans une variable intitulée myArray.
    2. -
  2. Stocker la longueur du tableau dans une variable intitulée arrayLength.
    3. -
  3. Stocker le dernier élément du tableau dans une variable intitulée lastItem.
    4. -
- -

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}

- -
-

Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

-
- -

Tableaux - Exercice 3

- -

Dans ce dernier exercice, vous disposez d'un tableau de départ et vous devrez effectuer les opérations inverses de l'exercice précédent. Voici ce qu'il faudra réaliser :

- -
    -
  1. Retirer le dernier élément du tableau.
    2. -
  2. Ajouter deux nouveaux noms à la fin du tableau.
    3. -
  3. Parcourir chaque élément du tableau et ajouter son indice, entre parenthèses, après le nom (par exemple Ryu (0)). Note : ceci n'est pas indiqué dans l'article sur les tableaux, il vous faudra rechercher comment faire.
    4. -
  4. Enfin, fusionner les éléments du tableau dans une chaîne de caractères intitulée myString en utilisant " - " comme séparateur.
    5. -
- -

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}

- -
-

Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

-
- -

Recevoir une évaluation ou de l'aide

- -

Vous pouvez vous exercer sur ces exemples grâce aux éditeurs interactifs de la page.

- -

Si vous souhaitez faire évaluer votre travail ou si vous êtes bloqué·e et que vous voulez demander de l'aide :

- -
    -
  1. Enregistrez votre travail dans un éditeur en ligne tel que CodePen, jsFiddle, ou Glitch pour le partager. Vous pouvez écrire le code vous-même ou utiliser les fichiers téléchargeables indiqués comme point de départ.
    2. -
  2. Rédigez un message pour la demande d'aide ou d'évaluation sur la catégorie Learning du forum Discourse de MDN. Votre billet devrait inclure : -
      -
    • Un titre descriptif comme « Évaluation demandée pour le test Tableaux JavaScript ».
      • -
    • Des détails sur ce que vous avez déjà tenté et sur quels aspects vous avez besoin d'aide si vous bloquez.
      • -
    • Un lien vers l'exemple que vous voulez évaluer ou sur lequel vous avez besoin d'aide. Ce lien doit pointer vers un éditeur en ligne (voir l'étape 1). Il s'agit ici d'une bonne pratique pour commencer : il est souvent difficile d'aider quelqu'un si on ne peut pas voir le code.
      • -
    • Un lien vers la page MDN pour la tâche ou l'évaluation afin que nous puissions trouver la question sur laquelle vous avez besoin d'aide.
      • -
    -
    3. -
diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md new file mode 100644 index 0000000000..a281723a68 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md @@ -0,0 +1,93 @@ +--- +title: 'Testez vos compétences : les tableaux' +slug: Learn/JavaScript/First_steps/Test_your_skills:_Arrays +tags: + - Arrays + - Beginner + - JavaScript + - Learn + - test your skills +translation_of: Learn/JavaScript/First_steps/Test_your_skills:_Arrays +original_slug: Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux +--- +
{{learnsidebar}}
+ +

L'objectif de ce test est d'évaluer votre compréhension de l'article sur les tableaux en JavaScript (arrays).

+ +
+

Note : Vous pouvez essayer vos solutions dans les éditeurs interactifs qui suivent. Toutefois, il peut aussi être utile de télécharger le code et d'utiliser un outil en ligne comme CodePen, jsFiddle, ou Glitch afin de travailler sur ces tâches.

+

Si vous vous retrouvez bloqué·e, vous pouvez demander de l'aide (voir la section à ce sujet en fin de page).

+
+ +
+

Note : Dans les exemples qui suivent, s'il y a une erreur dans votre code, celle-ci s'affichera dans le panneau des résultats, sur la page, afin de vous aider à trouver la solution (ou bien dans la console JavaScript du navigateur si vous utilisez la version téléchargeable).

+
+ +

Tableaux - Exercice 1

+ +

Commençons par quelques manipulations de base. Dans cet exercice, vous devrez créer un tableau avec trois éléments. Ce tableau devra être stocké dans une variable intitulée myArray. Les éléments du tableau peuvent être n'importe quoi (si vous avez besoin d'inspiration : pourquoi ne pas utiliser vos plats ou vos groupes de musique préférés ?).

+ +

Ensuite, modifiez les deux premiers éléments du tableau en utilisant la notation avec les guillemets/quotes et des opérations d'affectation. Puis ajoutez un nouvel élément au début du tableau.

+ +

Vous pouvez mettre à jour le code suivant pour parvenir à la solution :

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}

+ +
+

Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

+
+ +

Tableaux - Exercice 2

+ +

Voyons maintenant un autre exercice. Ici, vous avez une chaîne de caractères sur laquelle travailler. Vous devrez :

+ +
    +
  1. Convertir la chaîne de caractères en un tableau tout en retirant les caractères + lors de la conversion. Stockez ensuite le résultat dans une variable intitulée myArray.
    2. +
  2. Stocker la longueur du tableau dans une variable intitulée arrayLength.
    3. +
  3. Stocker le dernier élément du tableau dans une variable intitulée lastItem.
    4. +
+ +

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}

+ +
+

Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

+
+ +

Tableaux - Exercice 3

+ +

Dans ce dernier exercice, vous disposez d'un tableau de départ et vous devrez effectuer les opérations inverses de l'exercice précédent. Voici ce qu'il faudra réaliser :

+ +
    +
  1. Retirer le dernier élément du tableau.
    2. +
  2. Ajouter deux nouveaux noms à la fin du tableau.
    3. +
  3. Parcourir chaque élément du tableau et ajouter son indice, entre parenthèses, après le nom (par exemple Ryu (0)). Note : ceci n'est pas indiqué dans l'article sur les tableaux, il vous faudra rechercher comment faire.
    4. +
  4. Enfin, fusionner les éléments du tableau dans une chaîne de caractères intitulée myString en utilisant " - " comme séparateur.
    5. +
+ +

Essayez de mettre à jour le code qui suit pour parvenir à la solution :

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}

+ +
+

Note : Téléchargez le code initial pour cet exercice afin de travailler dans votre éditeur sur votre ordinateur ou sur un éditeur en ligne.

+
+ +

Recevoir une évaluation ou de l'aide

+ +

Vous pouvez vous exercer sur ces exemples grâce aux éditeurs interactifs de la page.

+ +

Si vous souhaitez faire évaluer votre travail ou si vous êtes bloqué·e et que vous voulez demander de l'aide :

+ +
    +
  1. Enregistrez votre travail dans un éditeur en ligne tel que CodePen, jsFiddle, ou Glitch pour le partager. Vous pouvez écrire le code vous-même ou utiliser les fichiers téléchargeables indiqués comme point de départ.
    2. +
  2. Rédigez un message pour la demande d'aide ou d'évaluation sur la catégorie Learning du forum Discourse de MDN. Votre billet devrait inclure : +
      +
    • Un titre descriptif comme « Évaluation demandée pour le test Tableaux JavaScript ».
      • +
    • Des détails sur ce que vous avez déjà tenté et sur quels aspects vous avez besoin d'aide si vous bloquez.
      • +
    • Un lien vers l'exemple que vous voulez évaluer ou sur lequel vous avez besoin d'aide. Ce lien doit pointer vers un éditeur en ligne (voir l'étape 1). Il s'agit ici d'une bonne pratique pour commencer : il est souvent difficile d'aider quelqu'un si on ne peut pas voir le code.
      • +
    • Un lien vers la page MDN pour la tâche ou l'évaluation afin que nous puissions trouver la question sur laquelle vous avez besoin d'aide.
      • +
    +
    3. +
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html deleted file mode 100644 index f2e52aa169..0000000000 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html +++ /dev/null @@ -1,461 +0,0 @@ ---- -title: Méthodes utiles pour les chaînes de caractères -slug: Learn/JavaScript/First_steps/Useful_string_methods -tags: - - Apprentissage - - Article - - Codage - - Débutant - - JavaScript - - Longueur - - cas - - couper - - indexof - - majuscule - - minuscule - - remplacer -translation_of: Learn/JavaScript/First_steps/Useful_string_methods -original_slug: Learn/JavaScript/First_steps/methode_chaine_utile ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.
- -

Les chaînes de caractères sont des objets

- -

Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :

- -
let string = 'Ceci est une chaîne';
- -

votre variable devient une instance de l'objet String, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !

- -

Avant que votre cervelle ne commence à bouillir, pas de panique ! Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.

- -

Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).

- - - -

{{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }}

- -

Trouver la longueur d'une chaîne

- -

C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :

- -
let browserType = 'mozilla';
-browserType.length;
- -

Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.

- -

Retrouver un caractère donné dans une chaîne

- -

Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec la notation crochets — c'est-à-dire en ajoutant des crochets ([]) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :

- -
browserType[0];
- -

Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de n'importe quelle chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété length  que nous avons vue plus haut :

- -
browserType[browserType.length-1];
- -

La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.

- -

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

- -
    -
  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une chaîne). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : - - 
    browserType.indexOf('zilla');
    - La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
    2. -
  2. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : - 
    browserType.indexOf('vanilla');
    - Cela doit vous donner -1 comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
    -
    - Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes ne contenant pas la sous-chaîne « mozilla », ou bien la contenant, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : - - 
    if(browserType.indexOf('mozilla') !== -1) {
-  // faire des tas de choses avec la chaîne
-}
    -
    3. -
  3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : - 
    browserType.slice(0,3);
    - Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
    4. -
  4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : - 
    browserType.slice(2);
    - Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
    5. -
- -
-

Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.

-
- -

Changer la casse

- -

Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

- -

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

- -
let radData = 'My NaMe Is MuD';
-radData.toLowerCase();
-radData.toUpperCase();
- -

Actualiser des parties de chaîne

- -

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

- -

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :

- -
browserType.replace('moz','van');
- -

À noter : pour que, dans un programme réel, la variable browserType reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : browserType = browserType.replace('moz','van');

- -

Apprendre en pratiquant

- -

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.

- -

Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.

- -

Filtrer des messages de vœux

- -

Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure if( ... ), pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.

- -
    -
  1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?
    2. -
  2. Il vous faudra alors écrire un test conditionnel sous la forme opérande1 opérateur opérande2. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?
    3. -
  3. Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode n'est pas égal à un certain résultat.
    4. -
- - - - - -

{{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }}

- -

Remettre les majuscules

- -

Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :

- -
    -
  1. Convertissez la totalité de la chaîne contenue dans la variable input en minuscules et stockez-la dans une nouvelle variable.
    2. -
  2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.
    3. -
  3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.
    4. -
  4. Changez la valeur de la variable result afin qu'elle soit égale au résultat final plutôt qu'à input.
    5. -
- -
-

Note : Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.

-
- - - - - -

{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}

- -

Créer de nouvelles chaînes à partir de morceaux

- -

Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :

- -
MAN675847583748sjt567654;Manchester Piccadilly
- -

Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :

- -
MAN: Manchester Piccadilly
- -

Nous vous recommandons de procéder de la manière suivante :

- -
    -
  1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.
    2. -
  2. Trouver la position du caractère point-virgule.
    3. -
  3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.
    4. -
  4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.
    5. -
  5. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
    6. -
- - - - - -

{{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }}

- -

Conclusion

- -

Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md new file mode 100644 index 0000000000..f2e52aa169 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md @@ -0,0 +1,461 @@ +--- +title: Méthodes utiles pour les chaînes de caractères +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Apprentissage + - Article + - Codage + - Débutant + - JavaScript + - Longueur + - cas + - couper + - indexof + - majuscule + - minuscule + - remplacer +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +original_slug: Learn/JavaScript/First_steps/methode_chaine_utile +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.
+ +

Les chaînes de caractères sont des objets

+ +

Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :

+ +
let string = 'Ceci est une chaîne';
+ +

votre variable devient une instance de l'objet String, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !

+ +

Avant que votre cervelle ne commence à bouillir, pas de panique ! Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.

+ +

Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).

+ + + +

{{ EmbedLiveSample('Les_chaînes_de_caractères_sont_des_objets', '100%', 300) }}

+ +

Trouver la longueur d'une chaîne

+ +

C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :

+ +
let browserType = 'mozilla';
+browserType.length;
+ +

Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.

+ +

Retrouver un caractère donné dans une chaîne

+ +

Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec la notation crochets — c'est-à-dire en ajoutant des crochets ([]) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :

+ +
browserType[0];
+ +

Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de n'importe quelle chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété length  que nous avons vue plus haut :

+ +
browserType[browserType.length-1];
+ +

La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.

+ +

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

+ +
    +
  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une chaîne). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : + + 
    browserType.indexOf('zilla');
    + La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
    2. +
  2. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : + 
    browserType.indexOf('vanilla');
    + Cela doit vous donner -1 comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
    +
    + Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes ne contenant pas la sous-chaîne « mozilla », ou bien la contenant, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : + + 
    if(browserType.indexOf('mozilla') !== -1) {
+  // faire des tas de choses avec la chaîne
+}
    +
    3. +
  3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : + 
    browserType.slice(0,3);
    + Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
    4. +
  4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : + 
    browserType.slice(2);
    + Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
    5. +
+ +
+

Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.

+
+ +

Changer la casse

+ +

Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

+ +

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

+ +
let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+ +

Actualiser des parties de chaîne

+ +

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

+ +

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :

+ +
browserType.replace('moz','van');
+ +

À noter : pour que, dans un programme réel, la variable browserType reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : browserType = browserType.replace('moz','van');

+ +

Apprendre en pratiquant

+ +

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.

+ +

Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.

+ +

Filtrer des messages de vœux

+ +

Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure if( ... ), pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.

+ +
    +
  1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?
    2. +
  2. Il vous faudra alors écrire un test conditionnel sous la forme opérande1 opérateur opérande2. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?
    3. +
  3. Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode n'est pas égal à un certain résultat.
    4. +
+ + + + + +

{{ EmbedLiveSample('Filtrer_des_messages_de_vœux', '100%', 490) }}

+ +

Remettre les majuscules

+ +

Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :

+ +
    +
  1. Convertissez la totalité de la chaîne contenue dans la variable input en minuscules et stockez-la dans une nouvelle variable.
    2. +
  2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.
    3. +
  3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.
    4. +
  4. Changez la valeur de la variable result afin qu'elle soit égale au résultat final plutôt qu'à input.
    5. +
+ +
+

Note : Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.

+
+ + + + + +

{{ EmbedLiveSample('Remettre_les_majuscules', '100%', 450) }}

+ +

Créer de nouvelles chaînes à partir de morceaux

+ +

Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :

+ +
MAN675847583748sjt567654;Manchester Piccadilly
+ +

Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :

+ +
MAN: Manchester Piccadilly
+ +

Nous vous recommandons de procéder de la manière suivante :

+ +
    +
  1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.
    2. +
  2. Trouver la position du caractère point-virgule.
    3. +
  3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.
    4. +
  4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.
    5. +
  5. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
    6. +
+ + + + + +

{{ EmbedLiveSample('Créer_de_nouvelles_chaînes_à_partir_de_morceaux', '100%', 485) }}

+ +

Conclusion

+ +

Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/variables/index.html b/files/fr/learn/javascript/first_steps/variables/index.html deleted file mode 100644 index dacd075396..0000000000 --- a/files/fr/learn/javascript/first_steps/variables/index.html +++ /dev/null @@ -1,418 +0,0 @@ ---- -title: Stocker les informations nécessaires — les variables -slug: Learn/JavaScript/First_steps/Variables -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
- -

Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec l'usage élémentaire des variables en JavaScript.
- -

Outils nécessaires

- -

Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez Les outils de développement du navigateur pour plus d'informations sur la manière d'accéder à ces outils).

- -

Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.

- -

Qu'est ce qu'une variable ?

- -

Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :

- -
<button>Pressez moi</button>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('Quel est votre nom ?');
-  alert('Salut ' + name + ', sympa de vous voir !');
-}
- -

{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}

- -

Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.

- -

Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?

- -
let name = prompt('Quel est votre nom ?');
-
-if (name === 'Adam') {
-  alert('Salut Adam, sympa de vous voir !');
-} else if (name === 'Alan') {
-  alert('Salut Alan, sympa de vous voir !');
-} else if (name === 'Bella') {
-  alert('Salut Bella, sympa de vous voir !');
-} else if (name === 'Bianca') {
-  alert('Salut Bianca, sympa de vous voir !');
-} else if (name === 'Chris') {
-  alert('Salut Chris, sympa de vous voir !');
-}
-
-// ... etc.
- -

Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.

- -

Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.

- -

Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.

- -
-

Note : Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.

-
- -

- -

Déclarer une variable

- -

Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons déclarer la variable. Pour ce faire, nous saisissons le mot‑clé var ou let suivi du nom que vous voulez donner à la variable :

- -
let myName;
-let myAge;
- -

Dans ces lignes, nous venons de créer deux variables nommées respectivement myName et myAge. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous ouvrez cette console soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.

- - - -

{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}

- -
-

Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.

-
- -

Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple

- -
myName;
-myAge;
- -

Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur undefined en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant

- -
scoobyDoo;
- -
-

Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, ne pas exister correspond à l'absence de boîte ; valeur indéfinie correspond à une boîte vide.

-
- -

Initialisation d'une variable

- -

Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (=), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :

- -
myName = 'Chris';
-myAge = 37;
- -

Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :

- -
myName;
-myAge;
- -

Il est possible de déclarer et initialiser une variable en même temps, comme ceci :

- -
let myDog = 'Rover';
- -

C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.

- -

La différence entre var et let

- -

A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi var et let ?

- -

Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que var. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du var peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, let a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du var, réglant ainsi les difficultés évoquées ci-dessus.

- -

Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du let). 

- -

Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé var après l'avoir initialisée. Cela fonctionnera. Par exemple :

- -
myName = 'Chris';
-
-function logName(){
-    console.log(myName);
-}
-
-logName();
-
-var myName;
-
- -
-

Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.

-
- -

Ce processus se nomme « hoisting » (en français, "hissage") — lisez var hoisting pour plus de précisions sur ce sujet.

- -

Le hissage ne fonctionne plus avec let. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.

- -

Deuxièmement, quand vous utilisez var, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec let c'est impossible. Le code suivant s'exécute sans erreur :

- -
var myName = 'Chris';
-var myName = 'Bob';
-
- -

 Celui là produit une erreur sur la seconde ligne :

- -
let myName = 'Chris';
-let myName = 'Bob';
-
- -

Le code correct serait :

- -
let myName = 'Chris' ;
-
-myName = 'Bob' ;
- -

Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.

- -

Pour ces raisons, et d'autres, nous recommandons d'utiliser let plutôt que var. Il n'y a pas de bonne raison d'utiliser var, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du let avant la version 11 ; le support de let par le navigateur Edge ne pose pas de problème).

- -

Mise à jour d'une variable

- -

Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :

- -
myName = 'Bob';
-myAge = 40;
- -

Aparté concernant les règles de nommage des variables

- -

Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( _ ).

- - - -
-

Note : Une liste exhaustive des mots réservés est proposée dans la page Lexical grammar — keywords.

-
- -

Exemples de noms corrects :

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
- -

Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :

- -
1
-a
-_12
-myage
-MYAGE
-var
-document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

Parmi ces noms, les suivants déclenchent une SyntaxError  :

- -
1 //la variable commence par un chiffre
-var //mot réservé
-document //mot réservé
-
- -

Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.

- -

Types de variables

- -

Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.

- -

Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.

- -

Nombres

- -

Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.

- -
var myAge = 17;
- -

Chaînes

- -

Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.

- -
var dolphinGoodbye = 'So long and thanks for all the fish';
- -

Booléens

- -

Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :

- -
var iAmAlive = true;
- -

Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :

- -
var test = 6 < 3;
- -

Cette expression utilise l'opérateur  « inférieur à » (<) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra false, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.

- -

Tableaux

- -

Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :

- -
var myNameArray = ['Chris', 'Bob', 'Jim'];
-var myNumberArray = [10,15,40];
- -

Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :

- -
myNameArray[0]; // renverra 'Chris'
-myNumberArray[2]; // renverra 40
- -

La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.

- -

Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.

- -

Objets

- -

En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.

- -

Entrez la ligne suivant dans la console de votre explorateur :

- -
var dog = { name : 'Spot', breed : 'Dalmatian' };
- -

Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :

- -
dog.name
- -

Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.

- -

Typage faible

- -

JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).

- -

Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :

- -
var myString = 'Hello';
- -

Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :

- -
var myNumber = '500'; // oops, c'est toujours une chaîne
-typeof(myNumber);
-myNumber = 500; // mieux — maintenant c'est un nombre
-typeof(myNumber);
- -

Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale typeof() — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra string, car à ce stade la variable myNumber contient la chaîne '500'. Observez bien et voyez ce que la fonction renvoie au second appel.

- -

Résumé

- -

Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/variables/index.md b/files/fr/learn/javascript/first_steps/variables/index.md new file mode 100644 index 0000000000..dacd075396 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/variables/index.md @@ -0,0 +1,418 @@ +--- +title: Stocker les informations nécessaires — les variables +slug: Learn/JavaScript/First_steps/Variables +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Se familiariser avec l'usage élémentaire des variables en JavaScript.
+ +

Outils nécessaires

+ +

Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez Les outils de développement du navigateur pour plus d'informations sur la manière d'accéder à ces outils).

+ +

Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.

+ +

Qu'est ce qu'une variable ?

+ +

Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :

+ +
<button>Pressez moi</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Quel est votre nom ?');
+  alert('Salut ' + name + ', sympa de vous voir !');
+}
+ +

{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}

+ +

Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.

+ +

Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?

+ +
let name = prompt('Quel est votre nom ?');
+
+if (name === 'Adam') {
+  alert('Salut Adam, sympa de vous voir !');
+} else if (name === 'Alan') {
+  alert('Salut Alan, sympa de vous voir !');
+} else if (name === 'Bella') {
+  alert('Salut Bella, sympa de vous voir !');
+} else if (name === 'Bianca') {
+  alert('Salut Bianca, sympa de vous voir !');
+} else if (name === 'Chris') {
+  alert('Salut Chris, sympa de vous voir !');
+}
+
+// ... etc.
+ +

Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.

+ +

Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.

+ +

Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.

+ +
+

Note : Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.

+
+ +

+ +

Déclarer une variable

+ +

Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons déclarer la variable. Pour ce faire, nous saisissons le mot‑clé var ou let suivi du nom que vous voulez donner à la variable :

+ +
let myName;
+let myAge;
+ +

Dans ces lignes, nous venons de créer deux variables nommées respectivement myName et myAge. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous ouvrez cette console soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.

+ + + +

{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}

+ +
+

Note : En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (;) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.

+
+ +

Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple

+ +
myName;
+myAge;
+ +

Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur undefined en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant

+ +
scoobyDoo;
+ +
+

Note : Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, ne pas exister correspond à l'absence de boîte ; valeur indéfinie correspond à une boîte vide.

+
+ +

Initialisation d'une variable

+ +

Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (=), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :

+ +
myName = 'Chris';
+myAge = 37;
+ +

Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :

+ +
myName;
+myAge;
+ +

Il est possible de déclarer et initialiser une variable en même temps, comme ceci :

+ +
let myDog = 'Rover';
+ +

C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.

+ +

La différence entre var et let

+ +

A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi var et let ?

+ +

Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que var. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du var peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, let a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du var, réglant ainsi les difficultés évoquées ci-dessus.

+ +

Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du let). 

+ +

Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé var après l'avoir initialisée. Cela fonctionnera. Par exemple :

+ +
myName = 'Chris';
+
+function logName(){
+    console.log(myName);
+}
+
+logName();
+
+var myName;
+
+ +
+

Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.

+
+ +

Ce processus se nomme « hoisting » (en français, "hissage") — lisez var hoisting pour plus de précisions sur ce sujet.

+ +

Le hissage ne fonctionne plus avec let. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.

+ +

Deuxièmement, quand vous utilisez var, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec let c'est impossible. Le code suivant s'exécute sans erreur :

+ +
var myName = 'Chris';
+var myName = 'Bob';
+
+ +

 Celui là produit une erreur sur la seconde ligne :

+ +
let myName = 'Chris';
+let myName = 'Bob';
+
+ +

Le code correct serait :

+ +
let myName = 'Chris' ;
+
+myName = 'Bob' ;
+ +

Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.

+ +

Pour ces raisons, et d'autres, nous recommandons d'utiliser let plutôt que var. Il n'y a pas de bonne raison d'utiliser var, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du let avant la version 11 ; le support de let par le navigateur Edge ne pose pas de problème).

+ +

Mise à jour d'une variable

+ +

Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :

+ +
myName = 'Bob';
+myAge = 40;
+ +

Aparté concernant les règles de nommage des variables

+ +

Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( _ ).

+ + + +
+

Note : Une liste exhaustive des mots réservés est proposée dans la page Lexical grammar — keywords.

+
+ +

Exemples de noms corrects :

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :

+ +
1
+a
+_12
+myage
+MYAGE
+var
+document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Parmi ces noms, les suivants déclenchent une SyntaxError  :

+ +
1 //la variable commence par un chiffre
+var //mot réservé
+document //mot réservé
+
+ +

Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.

+ +

Types de variables

+ +

Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.

+ +

Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.

+ +

Nombres

+ +

Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.

+ +
var myAge = 17;
+ +

Chaînes

+ +

Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.

+ +
var dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booléens

+ +

Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: true ou false. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :

+ +
var iAmAlive = true;
+ +

Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :

+ +
var test = 6 < 3;
+ +

Cette expression utilise l'opérateur  « inférieur à » (<) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra false, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.

+ +

Tableaux

+ +

Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :

+ +
var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];
+ +

Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :

+ +
myNameArray[0]; // renverra 'Chris'
+myNumberArray[2]; // renverra 40
+ +

La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.

+ +

Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.

+ +

Objets

+ +

En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.

+ +

Entrez la ligne suivant dans la console de votre explorateur :

+ +
var dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :

+ +
dog.name
+ +

Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.

+ +

Typage faible

+ +

JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).

+ +

Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :

+ +
var myString = 'Hello';
+ +

Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :

+ +
var myNumber = '500'; // oops, c'est toujours une chaîne
+typeof(myNumber);
+myNumber = 500; // mieux — maintenant c'est un nombre
+typeof(myNumber);
+ +

Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale typeof() — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra string, car à ce stade la variable myNumber contient la chaîne '500'. Observez bien et voyez ce que la fonction renvoie au second appel.

+ +

Résumé

+ +

Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html deleted file mode 100644 index 5e37499c73..0000000000 --- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html +++ /dev/null @@ -1,406 +0,0 @@ ---- -title: Qu'est-ce que le JavaScript ? -slug: Learn/JavaScript/First_steps/What_is_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.

- - - - - - - - - - - - -
Prérequis : -

Une culture informatique basique et une compréhension élémentaire de HTML et CSS.

-
Objectif :Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web.
- -

Une définition générale

- -

JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières (HTML et CSS) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN.

- -

- - - -

Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :

- -
<p>Player 1: Chris</p>
- -

- -

Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :

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

- -

Et enfin utiliser JavaScript pour ajouter un comportement dynamique :

- -
let para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}

- -

Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le code source, ou l'exécuter.

- -

JavaScript peut faire bien plus. Voyons cela plus en détail.

- -

Que peut-il vraiment faire ?

- -

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :

- - - -

Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.

- -

Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.

- -

Elles se divisent généralement en deux catégories :

- -

- -

Les API de navigateur font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple :

- - - -
-

Note : Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.

-
- -

Les APIs tierces ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :

- - - -
-

Note : ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.

-
- -

Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y !

- -

Que fait JavaScript sur votre page ?

- -

Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.

- -

Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir Comment fonctionnent vraiment les CSS). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).

- -

- -

Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.

- -

C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.

- -

Sécurité du navigateur

- -

Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.

- -
-

Note : il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.

-
- -

Ordre d'exécution du JavaScript

- -

Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :

- -
let para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  let name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement »  (event listener)  ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code updateName() (lignes 5-8) s'exécute. Le bloc de code updateName() (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.

- -

Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : TypeError: para is undefined. Cela signifie que l'objet para n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.

- -
-

Note : c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.

-
- -

Code interprété contre code compilé

- -

En informatique, on parle de code interprété ou compilé. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute.

- -

Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur.

- -

Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant.

- -

Code côté client contre côté serveur

- -

Vous pouvez aussi rencontrer les termes de code côté serveur et côté client, notamment dans le contexte du développement web. Le code côté client est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de JavaScript côté client.

- -

Le code côté serveur quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage côté serveur, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article Programmation de Sites Web côté serveur.

- -

Code dynamique contre code statique

- -

Le mot dynamique est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme dynamique prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.

- -

Une page web sans contenu mis à jour dynamiquement est appelé statique : elle montre simplement toujours le même contenu.

- -

Comment ajouter du JavaScript à votre page ?

- -

Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.

- -

JavaScript interne

- -
    -
  1. Faites d'abord une copie locale de notre fichier d'exemple apply-javascript.html. Enregistrez-le dans un répertoire approprié.
    2. -
  2. Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.
    3. -
  3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante </head> : - 
    <script>
-
-  // JavaScript goes here
-
-</script>
    -
    4. -
  4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : - 
      document.addEventListener("DOMContentLoaded", function() {
-  function createParagraph() {
-    let para = document.createElement('p');
-    para.textContent = 'Vous avez cliqué sur le bouton!';
-    document.body.appendChild(para);
-  }
-
-  const buttons = document.querySelectorAll('button');
-
-  for(let i = 0; i < buttons.length ; i++) {
-    buttons[i].addEventListener('click', createParagraph);
-  }
-});
    -
    5. -
  5. Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.
    6. -
- -
-

Note : si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier .html ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise </head> ? Avez-vous collé le bon code JavaScript au bon endroit ? JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.

-
- -
-

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-internal.html (et aussi en live).

-
- -

JavaScript externe

- -

Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.

- -
    -
  1. Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le script.js (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).
    2. -
  2. Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.
    3. -
  3. À présent remplacez l'élément {{htmlelement("script")}} par : - 
    <script src="script.js" defer></script>
    -
    4. -
  4. Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript.
    5. -
- -

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-external.html et script.js (ainsi qu'en live).

- -

Handlers JavaScript en ligne

- -

Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :

- -
function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'Vous avez cliqué !';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Cliquez-moi!</button>
- -

Vous pouvez essayer cette version dans la démonstration ci-dessous.

- -

{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}

- -

Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l'élément {{htmlelement("button")}} a un handler onclick en ligne pour déclencher l'exécution de la fonction à la pression du bouton.

- -

Évitez cependant de faire cela. C'est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d'être inefficace. Dans cette méthode, on doit inclure l'attribut onclick="createParagraph()" sur chaque bouton où le JavaScript doit s'appliquer.

- -

En JavaScript pur

- -

Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :

- -
let buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Cela peut sembler un peu plus long que l'attribut onclick, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.

- -
-

Note : essayez de modifier votre version de apply-javascript.html et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?

-
- -

Stratégies de chargement de script

- -

Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le DOM), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.

- -

Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.

- -

Dans l'exemple interne, vous pouvez voir cette structure autour du code :

- -
-document.addEventListener("DOMContentLoaded", function() {
-  ...
-});
- -

Il s'agit d'un gestionnaire d'évènement associé à l'événement DOMContentLoaded du navigateur, cet événement est déclenché quand le body HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de DOMContentLoaded. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les événements plus tard dans le cours).

- -

Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut async, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.

- -
<script src="script.js" defer></script>
- -

Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.

- -
-

Note : Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement DOMContentLoaded, car l'attribut async a résolu le problème pour nous. Nous n'avons pas utilisé la solution async pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.

-
- -

Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution DOMContentLoaded vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi async a été ajouté aux navigateurs !

- -

async et defer

- -

En fait, il existe deux façons de contourner le problème du script de blocage : async et defer. Regardons la différence entre les deux.

- -

Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser async lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.

- -async vs defer - -

Image de la spécification HTML, copiée et rognée selon les termes de la licence CC BY 4.0. -

- -

Par exemple, si vous avez les éléments de script suivants :

- -
<script async src="js/vendor/jquery.js"></script>
-
-<script async src="js/script2.js"></script>
-
-<script async src="js/script3.js"></script>
- -

Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. Jquery.js peut être chargé avant ou après script2.js et script3.js. Si tel est le cas, toute fonction de ces scripts dépendant de jquery générera une erreur, car jquery ne sera pas défini au moment de l'exécution du script.

- -

defer exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :

- -
<script defer src="js/vendor/jquery.js"></script>
-
-<script defer src="js/script2.js"></script>
-
-<script defer src="js/script3.js"></script>
- -

Tous les scripts dotés de l'attribut de defer seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que jquery.js se chargera avant script2.js et script3.js et que script2.js se chargera avant script3.js.

- -

Pour résumer :

- - - -

Commentaires

- -

Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :

- - - -

Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :

- -
// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML
-
-function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Regrouper les coordonnées de tous les boutons de la page et les organiser en tableau
-  2. Faire une boucle dans ce tableau et ajouter un "click event listener" à chaque bouton
-
-  Quand le bouton est cliqué, la fonction "createParagraph()" sera exécutée
-*/
-
-let buttons = document.querySelectorAll('button');
-
-for(let i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Résumé

- -

Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses.

- -

Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article Notre premier code JavaScript, nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.

- -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

- - -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md new file mode 100644 index 0000000000..5e37499c73 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md @@ -0,0 +1,406 @@ +--- +title: Qu'est-ce que le JavaScript ? +slug: Learn/JavaScript/First_steps/What_is_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.

+ + + + + + + + + + + + +
Prérequis : +

Une culture informatique basique et une compréhension élémentaire de HTML et CSS.

+
Objectif :Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web.
+ +

Une définition générale

+ +

JavaScript est un langage de programmation qui permet d'implémenter des mécanismes complexes sur une page web. À chaque fois qu'une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, ou autre, JavaScript a de bonnes chances d'être impliqué. C'est la troisième couche des technologies standards du web, les deux premières (HTML et CSS) étant couvertes bien plus en détail dans d'autres tutoriels sur MDN.

+ +

+ + + +

Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :

+ +
<p>Player 1: Chris</p>
+ +

+ +

Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :

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

+ +

Et enfin utiliser JavaScript pour ajouter un comportement dynamique :

+ +
let para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}

+ +

Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur GitHub — voir le code source, ou l'exécuter.

+ +

JavaScript peut faire bien plus. Voyons cela plus en détail.

+ +

Que peut-il vraiment faire ?

+ +

Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :

+ + + +

Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript.

+ +

Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.

+ +

Elles se divisent généralement en deux catégories :

+ +

+ +

Les API de navigateur font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple :

+ + + +
+

Note : Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.

+
+ +

Les APIs tierces ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :

+ + + +
+

Note : ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.

+
+ +

Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y !

+ +

Que fait JavaScript sur votre page ?

+ +

Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.

+ +

Commençons par un bref récapitulatif de ce qui se passe lorsqu'une page web se charge dans le navigateur (voir Comment fonctionnent vraiment les CSS). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l'onglet du navigateur). C'est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).

+ +

+ +

Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.

+ +

C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l'interface utilisateur, via l'API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l'exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.

+ +

Sécurité du navigateur

+ +

Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web.

+ +
+

Note : il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.

+
+ +

Ordre d'exécution du JavaScript

+ +

Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :

+ +
let para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement »  (event listener)  ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code updateName() (lignes 5-8) s'exécute. Le bloc de code updateName() (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage.

+ +

Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : TypeError: para is undefined. Cela signifie que l'objet para n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement.

+ +
+

Note : c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.

+
+ +

Code interprété contre code compilé

+ +

En informatique, on parle de code interprété ou compilé. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n'avez pas à transformer le code en une autre forme avant que le navigateur ne l'exécute.

+ +

Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d'être exécutés par l'ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l'ordinateur.

+ +

Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instant.

+ +

Code côté client contre côté serveur

+ +

Vous pouvez aussi rencontrer les termes de code côté serveur et côté client, notamment dans le contexte du développement web. Le code côté client est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de JavaScript côté client.

+ +

Le code côté serveur quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage côté serveur, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article Programmation de Sites Web côté serveur.

+ +

Code dynamique contre code statique

+ +

Le mot dynamique est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l'affichage d'une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme dynamique prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.

+ +

Une page web sans contenu mis à jour dynamiquement est appelé statique : elle montre simplement toujours le même contenu.

+ +

Comment ajouter du JavaScript à votre page ?

+ +

Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple.

+ +

JavaScript interne

+ +
    +
  1. Faites d'abord une copie locale de notre fichier d'exemple apply-javascript.html. Enregistrez-le dans un répertoire approprié.
    2. +
  2. Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.
    3. +
  3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante </head> : + 
    <script>
+
+  // JavaScript goes here
+
+</script>
    +
    4. +
  4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : + 
      document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'Vous avez cliqué sur le bouton!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous.
    6. +
+ +
+

Note : si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier .html ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise </head> ? Avez-vous collé le bon code JavaScript au bon endroit ? JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.

+
+ +
+

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-internal.html (et aussi en live).

+
+ +

JavaScript externe

+ +

Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.

+ +
    +
  1. Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le script.js (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript).
    2. +
  2. Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.
    3. +
  3. À présent remplacez l'élément {{htmlelement("script")}} par : + 
    <script src="script.js" defer></script>
    +
    4. +
  4. Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu'avant. C'est la même chose, mais nous avons maintenant le JavaScript dans un fichier externe. C'est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d'y inclure de gros blocs de JavaScript.
    5. +
+ +

Note : vous pouvez voir cette version sur GitHub avec apply-javascript-external.html et script.js (ainsi qu'en live).

+ +

Handlers JavaScript en ligne

+ +

Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :

+ +
function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'Vous avez cliqué !';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Cliquez-moi!</button>
+ +

Vous pouvez essayer cette version dans la démonstration ci-dessous.

+ +

{{ EmbedLiveSample('Handlers_JavaScript_en_ligne', '100%', 150) }}

+ +

Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l'élément {{htmlelement("button")}} a un handler onclick en ligne pour déclencher l'exécution de la fonction à la pression du bouton.

+ +

Évitez cependant de faire cela. C'est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d'être inefficace. Dans cette méthode, on doit inclure l'attribut onclick="createParagraph()" sur chaque bouton où le JavaScript doit s'appliquer.

+ +

En JavaScript pur

+ +

Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :

+ +
let buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Cela peut sembler un peu plus long que l'attribut onclick, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié.

+ +
+

Note : essayez de modifier votre version de apply-javascript.html et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?

+
+ +

Stratégies de chargement de script

+ +

Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d'une page se charge en suivant l'ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le DOM), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.

+ +

Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.

+ +

Dans l'exemple interne, vous pouvez voir cette structure autour du code :

+ +
+document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

Il s'agit d'un gestionnaire d'évènement associé à l'événement DOMContentLoaded du navigateur, cet événement est déclenché quand le body HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de DOMContentLoaded. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les événements plus tard dans le cours).

+ +

Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut async, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.

+ +
<script src="script.js" defer></script>
+ +

Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.

+ +
+

Note : Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement DOMContentLoaded, car l'attribut async a résolu le problème pour nous. Nous n'avons pas utilisé la solution async pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.

+
+ +

Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution DOMContentLoaded vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi async a été ajouté aux navigateurs !

+ +

async et defer

+ +

En fait, il existe deux façons de contourner le problème du script de blocage : async et defer. Regardons la différence entre les deux.

+ +

Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser async lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.

+ +async vs defer + +

Image de la spécification HTML, copiée et rognée selon les termes de la licence CC BY 4.0. +

+ +

Par exemple, si vous avez les éléments de script suivants :

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. Jquery.js peut être chargé avant ou après script2.js et script3.js. Si tel est le cas, toute fonction de ces scripts dépendant de jquery générera une erreur, car jquery ne sera pas défini au moment de l'exécution du script.

+ +

defer exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

Tous les scripts dotés de l'attribut de defer seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que jquery.js se chargera avant script2.js et script3.js et que script2.js se chargera avant script3.js.

+ +

Pour résumer :

+ + + +

Commentaires

+ +

Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :

+ + + +

Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :

+ +
// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Regrouper les coordonnées de tous les boutons de la page et les organiser en tableau
+  2. Faire une boucle dans ce tableau et ajouter un "click event listener" à chaque bouton
+
+  Quand le bouton est cliqué, la fonction "createParagraph()" sera exécutée
+*/
+
+let buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Résumé

+ +

Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d'utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s'intègre avec le reste du code sur votre site web, entre autres choses.

+ +

Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inquiétude, ce cours progressera pas à pas. Dans le prochain article Notre premier code JavaScript, nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.

+ +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ + +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html deleted file mode 100644 index f8ec006003..0000000000 --- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript -slug: Learn/JavaScript/First_steps/What_went_wrong -tags: - - Apprentissage - - Article - - Codage - - Débutant - - Erreur - - JavaScript - - Tutoriel - - console.log - - débogage - - outils de développement -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
- -

Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.

- - - - - - - - - - - - -
Prérequis : -

Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.

-
Objectif :Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code.
- -

Types d' erreurs

- -

En règle générale, les erreurs dans un code sont à ranger dans deux catégories :

- - - -

Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.

- -

Un exemple erroné

- -

Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de number-game-errors.html (voyez-la ici en direct).

- -
    -
  1. Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.
    2. -
  2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton Submit guess, cela ne fonctionne pas!
    3. -
- -
-

Note : Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.

-
- -

À ce stade, consultons la console du développeur pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.

- -

Réparer les erreurs de syntaxe

- -

Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la console JavaScript des outils de développement (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !

- -
    -
  1. Allez à l'onglet dans lequel est affiché number-game-errors.html, et ouvrez la console  JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :
    2. -
  2. C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons : -
      -
    • Une croix rouge indiquant que c'est une erreur.
      • -
    • Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")
      • -
    • Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.
      • -
    • Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.
      • -
    • Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.
      • -
    -
    3. -
  3. En examinant la ligne 86 dans l'éditeur de code, nous voyons : - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn nom-de-fonctionnalité" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : addEventListener().
    5. -
  5. Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer addeventListener par addEventListener corrigera cela. Faisons‑le maintenant.
    6. -
- -
-

Note : Voyez la page relative à TypeError: "x" is not a function pour plus de précisions à propos de cette erreur.

-
- -

Erreurs de syntaxe : deuxième tour

- -
    -
  1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
    2. -
  2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !
    3. -
  3. Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. -
    -

    Note : Null est une valeur spéciale signifiant "rien" ou "aucune valeur". Or lowOrHi a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.

    - -
    -

    Note : Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans checkGuess() { ... }). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction checkGuess() soit lancée à la ligne 86.

    -
    4. -
  4. Regardez à la ligne 78, vous verrez ce code : - 
    lowOrHi.textContent = 'Last guess was too high!';
    -
    5. -
  5. La commande dans cette ligne essaie de définir la propriété textContent de la variable lowOrHi à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car lowOrHi ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de lowOrHi dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : - 
    let lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est null après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : - 
    console.log(lowOrHi);
    - -
    -

    Note : console.log() est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de lowOrHi que nous avons essayé de définir à la ligne 48.

    -
    -
    7. -
  7. Enregistrez et actualisez la page, et vous verrez le résultat de console.log() sur la console. C'est sûr, la valeur de lowOrHi est null à ce niveau ; il y a bien un problème à la ligne 48.
    8. -
  8. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode document.querySelector() pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : - 
    <p class="lowOrHi"></p>
    -
    9. -
  9. Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode querySelector() en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons lowOrHi en .lowOrHi à la ligne 48.
    10. -
  10. Enregistrons et actualisons à nouveau, et la directive console.log() renvoie bien l'élément  <p> attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne console.log() maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.
    11. -
- -
-

Note : Voyez la page relative à TypeError: "x" is (not) "y" pour plus de précisions à propos de cette erreur.

-
- -

Erreurs de syntaxe : troisième tour

- -
    -
  1. Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.
    2. -
  2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne  94.
    3. -
  3. En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer addeventListener en addEventListener. Faites‑le.
    4. -
- -

Une erreur de logique

- -

À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !

- -

Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.

- -
    -
  1. Recherchons les lignes où la variable randomNumber est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : - - 
    let randomNumber = Math.floor(Math.random()) + 1;
    - Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : - - 
    randomNumber = Math.floor(Math.random()) + 1;
    -
    2. -
  2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami console.log() — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : - 
    console.log(randomNumber);
    -
    3. -
  3. Enregistrons, actualisons et jouons quelques parties — on constate que randomNumber est égal à 1 quel que soit le point où il est raccordé à la console.
    4. -
- -

Travaillons la logique

- -

Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons Math.random(), qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.

- -
Math.random()
- -

Puis, nous passons le résultat de l'appel de Math.random() à Math.floor(), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :

- -
Math.floor(Math.random()) + 1
- -

Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours  1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et  99 :

- -
Math.floor(Math.random()*100);
- -

Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :

- -
Math.floor(Math.random()*100) + 1;
- -

Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !

- -

Autres erreurs courantes

- -

D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles.

- -

SyntaxError: missing ; before statement

- -

Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  checkGuess(),nous modifions cette ligne :

- -
let userGuess = Number(guessField.value);
- -

en

- -
let userGuess === Number(guessField.value);
- -

cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation  (=) — qui fixe une valeur donnée à une variable — avec l'opérateur (===) qui teste la stricte égalité de deux valeurs, et renvoie un résultat  true/false (vrai/faux).

- -
-

Note : Voyez la page relative à SyntaxError: missing ; before statement pour plus de précisions à propos de cette erreur.

-
- -

Le programme dit que vous avez gagné quelle que soit votre suggestion.

- -

Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans checkGuess(), si vous modifiez cette ligne :

- -
if (userGuess === randomNumber) {
- -

en

- -
if (userGuess = randomNumber) {
- -

le test renverra toujours true (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !

- -

SyntaxError: missing ) after argument list

- -

Cette erreur est triviale — elle indique en général que vous avez oublié une parenthèse fermante à la fin de l'appel d'une fonction ou d'une méthode.

- -
-

Note : Voyez la page relative à SyntaxError: missing ) after argument list pour plus de précisions à ce propos.

-
- -

SyntaxError: missing : after property id

- -

Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant

- -
function checkGuess() {
- -

en

- -
function checkGuess( {
- -

Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !

- -

SyntaxError: missing } after function body

- -

Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction checkGuess().

- -

SyntaxError: expected expression, got 'string' ou SyntaxError: unterminated string literal

- -

Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, string doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.

- -

Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !

- -
-

Note : Voyez les pages relatives à  SyntaxError: Unexpected token et SyntaxError: unterminated string literal pour plus de précisions à ce propos.

-
- -

Résumé

- -

Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.

- -

Voir aussi

- -
- -
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md new file mode 100644 index 0000000000..f8ec006003 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md @@ -0,0 +1,256 @@ +--- +title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Apprentissage + - Article + - Codage + - Débutant + - Erreur + - JavaScript + - Tutoriel + - console.log + - débogage + - outils de développement +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+ +

Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.

+ + + + + + + + + + + + +
Prérequis : +

Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.

+
Objectif :Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code.
+ +

Types d' erreurs

+ +

En règle générale, les erreurs dans un code sont à ranger dans deux catégories :

+ + + +

Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.

+ +

Un exemple erroné

+ +

Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de number-game-errors.html (voyez-la ici en direct).

+ +
    +
  1. Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.
    2. +
  2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton Submit guess, cela ne fonctionne pas!
    3. +
+ +
+

Note : Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.

+
+ +

À ce stade, consultons la console du développeur pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.

+ +

Réparer les erreurs de syntaxe

+ +

Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la console JavaScript des outils de développement (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !

+ +
    +
  1. Allez à l'onglet dans lequel est affiché number-game-errors.html, et ouvrez la console  JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :
    2. +
  2. C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons : +
      +
    • Une croix rouge indiquant que c'est une erreur.
      • +
    • Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")
      • +
    • Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.
      • +
    • Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.
      • +
    • Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.
      • +
    +
    3. +
  3. En examinant la ligne 86 dans l'éditeur de code, nous voyons : + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn nom-de-fonctionnalité" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : addEventListener().
    5. +
  5. Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer addeventListener par addEventListener corrigera cela. Faisons‑le maintenant.
    6. +
+ +
+

Note : Voyez la page relative à TypeError: "x" is not a function pour plus de précisions à propos de cette erreur.

+
+ +

Erreurs de syntaxe : deuxième tour

+ +
    +
  1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.
    2. +
  2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !
    3. +
  3. Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. +
    +

    Note : Null est une valeur spéciale signifiant "rien" ou "aucune valeur". Or lowOrHi a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.

    + +
    +

    Note : Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans checkGuess() { ... }). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction checkGuess() soit lancée à la ligne 86.

    +
    4. +
  4. Regardez à la ligne 78, vous verrez ce code : + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. La commande dans cette ligne essaie de définir la propriété textContent de la variable lowOrHi à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car lowOrHi ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de lowOrHi dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : + 
    let lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est null après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : + 
    console.log(lowOrHi);
    + +
    +

    Note : console.log() est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de lowOrHi que nous avons essayé de définir à la ligne 48.

    +
    +
    7. +
  7. Enregistrez et actualisez la page, et vous verrez le résultat de console.log() sur la console. C'est sûr, la valeur de lowOrHi est null à ce niveau ; il y a bien un problème à la ligne 48.
    8. +
  8. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode document.querySelector() pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode querySelector() en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons lowOrHi en .lowOrHi à la ligne 48.
    10. +
  10. Enregistrons et actualisons à nouveau, et la directive console.log() renvoie bien l'élément  <p> attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne console.log() maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.
    11. +
+ +
+

Note : Voyez la page relative à TypeError: "x" is (not) "y" pour plus de précisions à propos de cette erreur.

+
+ +

Erreurs de syntaxe : troisième tour

+ +
    +
  1. Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.
    2. +
  2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne  94.
    3. +
  3. En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer addeventListener en addEventListener. Faites‑le.
    4. +
+ +

Une erreur de logique

+ +

À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !

+ +

Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.

+ +
    +
  1. Recherchons les lignes où la variable randomNumber est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : + + 
    let randomNumber = Math.floor(Math.random()) + 1;
    + Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : + + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    2. +
  2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami console.log() — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : + 
    console.log(randomNumber);
    +
    3. +
  3. Enregistrons, actualisons et jouons quelques parties — on constate que randomNumber est égal à 1 quel que soit le point où il est raccordé à la console.
    4. +
+ +

Travaillons la logique

+ +

Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons Math.random(), qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.

+ +
Math.random()
+ +

Puis, nous passons le résultat de l'appel de Math.random() à Math.floor(), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :

+ +
Math.floor(Math.random()) + 1
+ +

Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours  1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et  99 :

+ +
Math.floor(Math.random()*100);
+ +

Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :

+ +
Math.floor(Math.random()*100) + 1;
+ +

Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !

+ +

Autres erreurs courantes

+ +

D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles.

+ +

SyntaxError: missing ; before statement

+ +

Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  checkGuess(),nous modifions cette ligne :

+ +
let userGuess = Number(guessField.value);
+ +

en

+ +
let userGuess === Number(guessField.value);
+ +

cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation  (=) — qui fixe une valeur donnée à une variable — avec l'opérateur (===) qui teste la stricte égalité de deux valeurs, et renvoie un résultat  true/false (vrai/faux).

+ +
+

Note : Voyez la page relative à SyntaxError: missing ; before statement pour plus de précisions à propos de cette erreur.

+
+ +

Le programme dit que vous avez gagné quelle que soit votre suggestion.

+ +

Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans checkGuess(), si vous modifiez cette ligne :

+ +
if (userGuess === randomNumber) {
+ +

en

+ +
if (userGuess = randomNumber) {
+ +

le test renverra toujours true (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !

+ +

SyntaxError: missing ) after argument list

+ +

Cette erreur est triviale — elle indique en général que vous avez oublié une parenthèse fermante à la fin de l'appel d'une fonction ou d'une méthode.

+ +
+

Note : Voyez la page relative à SyntaxError: missing ) after argument list pour plus de précisions à ce propos.

+
+ +

SyntaxError: missing : after property id

+ +

Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant

+ +
function checkGuess() {
+ +

en

+ +
function checkGuess( {
+ +

Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !

+ +

SyntaxError: missing } after function body

+ +

Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction checkGuess().

+ +

SyntaxError: expected expression, got 'string' ou SyntaxError: unterminated string literal

+ +

Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, string doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.

+ +

Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !

+ +
+

Note : Voyez les pages relatives à  SyntaxError: Unexpected token et SyntaxError: unterminated string literal pour plus de précisions à ce propos.

+
+ +

Résumé

+ +

Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.

+ +

Voir aussi

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/index.html b/files/fr/learn/javascript/index.html deleted file mode 100644 index 77f8f6f168..0000000000 --- a/files/fr/learn/javascript/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -tags: - - Débutant - - Développement - - JavaScript - - Modules - - scripts -translation_of: Learn/JavaScript -original_slug: Apprendre/JavaScript ---- -

{{LearnSidebar}}

- -

{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.

- -

Parcours d'apprentissage

- -

JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :

- - - -

Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.

- -

Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :

- - - -

Modules

- -

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :

- -
-
Premiers pas en JavaScript
-
Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
-
JavaScript les blocs
-
Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.
-
Introduction aux objets JavaScript
-
En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.
-
API Web côté client
-
Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
-
- -

Résoudre les problèmes JavaScript courants

- -

Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.

- -

Voir aussi

- -
-
JavaScript sur MDN
-
Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.
-
Codage des mathématiques
-
Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par Keith Peters.
-
diff --git a/files/fr/learn/javascript/index.md b/files/fr/learn/javascript/index.md new file mode 100644 index 0000000000..77f8f6f168 --- /dev/null +++ b/files/fr/learn/javascript/index.md @@ -0,0 +1,62 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Débutant + - Développement + - JavaScript + - Modules + - scripts +translation_of: Learn/JavaScript +original_slug: Apprendre/JavaScript +--- +

{{LearnSidebar}}

+ +

{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.

+ +

Parcours d'apprentissage

+ +

JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :

+ + + +

Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.

+ +

Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :

+ + + +

Modules

+ +

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :

+ +
+
Premiers pas en JavaScript
+
Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
+
JavaScript les blocs
+
Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.
+
Introduction aux objets JavaScript
+
En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.
+
API Web côté client
+
Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
+
+ +

Résoudre les problèmes JavaScript courants

+ +

Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.

+ +

Voir aussi

+ +
+
JavaScript sur MDN
+
Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.
+
Codage des mathématiques
+
Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par Keith Peters.
+
diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html deleted file mode 100644 index 70f35b3642..0000000000 --- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes -slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features -tags: - - Apprentissage - - CodingScripting - - Débutant - - Evaluation - - JavaScript - - OOJS - - Objet - - Orienté objet -translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features -original_slug: >- - Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
- -

Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.

- - - - - - - - - - - - -
Prérequis:Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.
Objectifs:Tester votre connaissance du Javascript orienté objet en conception et en pratique.
- -

Pour commencer

- -

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

- -
-

Note : Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

-
- -

Le projet en bref

- -

Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object Shape() dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.

- -

Ce screenshot vous donne une idée du résultat final:

- -

- - - -

Si vous voulez en savoir plus regardez l'exemple finit finished example (N'en profitez pas pour récupérer le code source !)

- -

Vos objectifs

- -

Cette section décrit ce que vous aurez à faire.

- -

Créons nos nouveaux objets

- -

Pour commencer, modifions le constructeur de l'objet Ball() pour qu'il devienne le constructeur de Shape() puis créons en un nouveau pour Ball() :

- -
    -
  1. Le constructeur Shape() devra définir les propriétés x, y, velX, et velY de la même manière que le constructeur Ball() auparavent, mais sans les propriétés color et size.
    2. -
  2. Shape() doit aussi définir une nouvelle propriété exists, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (true/false).
    3. -
  3. Le constructeur Ball() doit hériter des propriétés x, y, velX, velY, et exists du constructeur Shape().
    4. -
  4. Ball() doit aussi définir les propriétés color et size, comme à l'origine.
    5. -
  5. N'oubliez pas de définir le prototype de Ball() et son constructeur de manière approprié.
    6. -
- -

Les méthodes draw(), update(), et collisionDetect() doivent fonctionnées comme avant, sans être modifiées.

- -

Vous devrez ajouter un nouveau paramètre au constructeur new Ball() ( ... ) — le paramètre exists doit être le 5ème et être égal à  true.

- -

Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.

- -

Définition du EvilCircle() (viseur)

- -

Il est temps de vous équipez ! — le EvilCircle()! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet Shape() pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !

- -

Le constructeur du EvilCircle() doit hériter des propriétés x, y, velX, velY, et exists de Shape(), mais velX et velY doivent toujours être égales à 20.

- -

Vous devriez utiliser quelque chose comme Shape.call(this, x, y, 20, 20, exists);

- -

Le constructeur doit aussi définir ses propres propriétés:

- - - -

Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.

- -

Définir les méthodes du EvilCircle() (viseur)

- -

EvilCircle() doit avoir quatre méthodes, comme définie en dessous.

- -

draw()

- -

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

- - - -

checkBounds()

- -

Cette méthode à la même fonction que la première partie de Ball() update() — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode Ball.prototype.update, mais en effectuant quelques changements:

- - - -

setControls()

- -

Cette méthode ajoute un écouteur d'évènement onkeydown à l'objet window ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:

- -
var _this = this;
-window.onkeydown = function(e) {
-    if (e.keyCode === 65) {
-      _this.x -= _this.velX;
-    } else if (e.keyCode === 68) {
-      _this.x += _this.velX;
-    } else if (e.keyCode === 87) {
-      _this.y -= _this.velY;
-    } else if (e.keyCode === 83) {
-      _this.y += _this.velY;
-    }
-  }
- -

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

- - - -

collisionDetect()

- -

Cette méthode fonctionne d'une manière similaire à Ball() collisionDetect(), copier celle-ci pour vous en servir comme base. Il y a deux différences:

- - - -

Insérer le viseur dans notre programme

- -

Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction loop().

- - - -

Implémenter le compteur de score

- -

Pour implémenter le compteur de score, suivez les étapes suivantes:

- -
    -
  1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
    2. -
  2. Dans votre fichier CSS, ajouter les règlesz suivantes: - 
    p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}
    -
    3. -
  3. Dans votre JavaScript, effectuez les modifications suivante: -
      -
    • Créez une variable qui contiendra la référence vers le paragraphe.
      • -
    • Stocker et afficher le nombre de balle présentent à l'écran.
      • -
    • Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.
      • -
    • Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.
      • -
    -
    4. -
- -

Conseils et astuces

- - - -

Evaluation

- -

Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur discussion thread for this exercise, ou sur #mdn IRC channel sur Mozilla IRC. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

- -

Dans ce Module

- - diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md new file mode 100644 index 0000000000..70f35b3642 --- /dev/null +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md @@ -0,0 +1,209 @@ +--- +title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes +slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features +tags: + - Apprentissage + - CodingScripting + - Débutant + - Evaluation + - JavaScript + - OOJS + - Objet + - Orienté objet +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +original_slug: >- + Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.

+ + + + + + + + + + + + +
Prérequis:Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.
Objectifs:Tester votre connaissance du Javascript orienté objet en conception et en pratique.
+ +

Pour commencer

+ +

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

+ +
+

Note : Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

+
+ +

Le projet en bref

+ +

Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object Shape() dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.

+ +

Ce screenshot vous donne une idée du résultat final:

+ +

+ + + +

Si vous voulez en savoir plus regardez l'exemple finit finished example (N'en profitez pas pour récupérer le code source !)

+ +

Vos objectifs

+ +

Cette section décrit ce que vous aurez à faire.

+ +

Créons nos nouveaux objets

+ +

Pour commencer, modifions le constructeur de l'objet Ball() pour qu'il devienne le constructeur de Shape() puis créons en un nouveau pour Ball() :

+ +
    +
  1. Le constructeur Shape() devra définir les propriétés x, y, velX, et velY de la même manière que le constructeur Ball() auparavent, mais sans les propriétés color et size.
    2. +
  2. Shape() doit aussi définir une nouvelle propriété exists, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (true/false).
    3. +
  3. Le constructeur Ball() doit hériter des propriétés x, y, velX, velY, et exists du constructeur Shape().
    4. +
  4. Ball() doit aussi définir les propriétés color et size, comme à l'origine.
    5. +
  5. N'oubliez pas de définir le prototype de Ball() et son constructeur de manière approprié.
    6. +
+ +

Les méthodes draw(), update(), et collisionDetect() doivent fonctionnées comme avant, sans être modifiées.

+ +

Vous devrez ajouter un nouveau paramètre au constructeur new Ball() ( ... ) — le paramètre exists doit être le 5ème et être égal à  true.

+ +

Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.

+ +

Définition du EvilCircle() (viseur)

+ +

Il est temps de vous équipez ! — le EvilCircle()! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet Shape() pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !

+ +

Le constructeur du EvilCircle() doit hériter des propriétés x, y, velX, velY, et exists de Shape(), mais velX et velY doivent toujours être égales à 20.

+ +

Vous devriez utiliser quelque chose comme Shape.call(this, x, y, 20, 20, exists);

+ +

Le constructeur doit aussi définir ses propres propriétés:

+ + + +

Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.

+ +

Définir les méthodes du EvilCircle() (viseur)

+ +

EvilCircle() doit avoir quatre méthodes, comme définie en dessous.

+ +

draw()

+ +

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

+ + + +

checkBounds()

+ +

Cette méthode à la même fonction que la première partie de Ball() update() — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode Ball.prototype.update, mais en effectuant quelques changements:

+ + + +

setControls()

+ +

Cette méthode ajoute un écouteur d'évènement onkeydown à l'objet window ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:

+ +
var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }
+ +

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

+ + + +

collisionDetect()

+ +

Cette méthode fonctionne d'une manière similaire à Ball() collisionDetect(), copier celle-ci pour vous en servir comme base. Il y a deux différences:

+ + + +

Insérer le viseur dans notre programme

+ +

Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction loop().

+ + + +

Implémenter le compteur de score

+ +

Pour implémenter le compteur de score, suivez les étapes suivantes:

+ +
    +
  1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
    2. +
  2. Dans votre fichier CSS, ajouter les règlesz suivantes: + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. Dans votre JavaScript, effectuez les modifications suivante: +
      +
    • Créez une variable qui contiendra la référence vers le paragraphe.
      • +
    • Stocker et afficher le nombre de balle présentent à l'écran.
      • +
    • Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.
      • +
    • Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.
      • +
    +
    4. +
+ +

Conseils et astuces

+ + + +

Evaluation

+ +

Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur discussion thread for this exercise, ou sur #mdn IRC channel sur Mozilla IRC. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ +

Dans ce Module

+ + diff --git a/files/fr/learn/javascript/objects/basics/index.html b/files/fr/learn/javascript/objects/basics/index.html deleted file mode 100644 index 483ebba0fc..0000000000 --- a/files/fr/learn/javascript/objects/basics/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: 'Les bases de JavaScript, orienté objet' -slug: Learn/JavaScript/Objects/Basics -tags: - - API - - Apprendre - - Débutant - - JavaScript - - Objet - - Syntaxe - - this -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, connaissances basiques concernant HTML et CSS, bonnes connaissances des bases de JavaScript (cf. les premiers pas et les briques de construction).
Objectifs :Comprendre les théories de base derrière la programmation orientée objet, comment l'appliquer à JavaScript, et comment travailler avec des objets JavaScript.
- -

Les bases de l'objet

- -

Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.

- -

Pour commencer, faites une copie locale de notre fichier oojs.html. Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir la console JavaScript des outils de développement ouverte et prête, pour y saisir des commandes.

- -

Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :

- -
var personne = {};
- -

Désormais ouvrez la console JavaScript de votre navigateur, saisissez personne à l'intérieur, et appuyez sur Entrée. Vous devriez obtenir le résultat suivant :

- -
[object Object]
- -

Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :

- -
var personne = {
-  nom: ['Jean', 'Martin'],
-  age: 32,
-  sexe: 'masculin',
-  interets: ['musique', 'skier'],
-  bio: function() {
-    alert(this.nom[0] + ' ' + this.nom[1] + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
-  },
-  salutation: function() {
-    alert('Bonjour ! Je suis ' + this.nom[0] + '.');
-  }
-};
-
- -

Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie input :

- -
personne.nom
-personne.nom[0]
-personne.age
-personne.interets[1]
-personne.bio()
-personne.salutation()
- -

Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire !

- -
-

Note : Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir oojs-finished.html (ou voir en action). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur.

-
- -

Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple nom et age ci-dessus) et une valeur (par exemple. ['Jean', 'Martin'] et 32).

- -

Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :

- -
var monObjet = {
-  nomDuMembre1: valeurDuMembre1,
-  nomDuMembre2: valeurDuMembre2,
-  nomDuMembre3: valeurDuMembre3
-}
- -

La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet personne, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées propriétés de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des méthodes de l'objet.

- -

Dans cet exemple, l'objet est créé grâce à un objet littéral : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.

- -

C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.

- -

Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.

- -

Notation avec un point

- -

Ci-dessus, on accède aux membres de l'objet en utilisant la notation avec un point.

- -

Le nom de l'objet (personne) agit comme un espace de noms (ou namespace en anglais) — il doit être entré en premier pour accéder aux membres encapsulés dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :

- -
personne.age
-personne.interets[1]
-personne.bio()
- -

Sous-espaces de noms

- -

Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété nom du membre et la faire passer de

- -
nom: ['Jean', 'Martin'],
- -

à

- -
nom : {
-  prenom: 'Jean',
-  nomFamille: 'Martin'
-},
- -

Ici, nous avons bien créé un sous-espace de noms. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :

- -
personne.nom.prenom
-personne.nom.nomFamille
- -

Important : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :

- -
nom[0]
-nom[1]
- -

en

- -
nom.prenom
-nom.nomFamille
- -

sinon vos méthodes ne fonctionneront plus.

- -

Notation avec les crochets

- -

Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :

- -
personne.age
-personne.nom.prenom
- -

Vous pouvez utiliser :

- -
personne['age']
-personne['nom']['prenom']
- -

Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.

- -

Définir les membres d'un objet

- -

Jusqu'ici, nous avons vu comment accéder aux membres d'un objet. Vous pouvez aussi modifier la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :

- -
personne.age = 45
-personne['nom']['nomFamille'] = 'Rabuchon'
- -

Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :

- -
personne.age
-personne['nom']['nomFamille']
- -

Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; vous pouvez aussi créer de nouveaux membres. Essayez ceci :

- -
personne['yeux'] = 'noisette'
-personne.auRevoir = function() { alert("Bye bye tout le monde !"); }
- -

Vous pouvez maintenant tester vos nouveaux membres :

- -
personne['yeux']
-personne.auRevoir()
- -

Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs input. On pourrait avoir ses valeurs comme ceci :

- -
var monNomDeDonnee = nomInput.value
-var maValeurDeDonnee = valeurNom.value
- -

On peut alors ajouter le nom et la valeur du nouveau membre de l'objet personne comme ceci :

- -
personne[monNomDeDonnee] = maValeurDeDonnee
- -

Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet personne :

- -
var monNomDeDonnee = 'hauteur'
-var maValeurDeDonnee = '1.75m'
-personne[monNomDeDonnee] = maValeurDeDonnee
- -

Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément input) :

- -
personne.hauteur
- -

Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.

- -

Qu'est-ce que « this » ?

- -

Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :

- -
salutation: function() {
-  alert('Bonjour! Je suis ' + this.nom.prenom + '.');
-}
- -

Vous vous demandez probablement ce que signifie « this ». Le mot-clé this se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, this est l'équivalent de personne.  Alors, pourquoi ne pas écrire personne à la place ? Comme vous le verrez dans l'article la programmation JavaScript orientée objet pour les débutants, this est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).

- -

Essayons d'illustrer nos propos par une paire d'objet personne simplifiée :

- -
var personne1 = {
-  nom: 'Christophe',
-  salutation: function() {
-    alert('Bonjour ! Je suis ' + this.nom + '.');
-  }
-}
-
-var personne2 = {
-  nom: 'Bruno',
-  salutation: function() {
-    alert('Bonjour ! Je suis ' + this.nom + '.');
-  }
-}
- -

Dans ce cas,  personne1.salutation() affichera "Bonjour ! Je suis Christophe.", tandis que personne2.salutation() affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, this est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).

- -

Vous utilisiez des objets depuis le début !

- -

Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples.

- -

Ainsi, quand vous utilisez une méthode comme :

- -
maChaineDeCaracteres.split(',');
- -

Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de String et possède donc plusieurs méthodes/propriétés communes.

- -

Quand vous accédez au DOM (Document Object Model ou « modèle objet du document ») avec document et des lignes telles que :

- -
var monDiv = document.createElement('div');
-var maVideo = document.querySelector('video');
- -

Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de Document est créée, appelée document et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.

- -

C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.

- -

On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, l'API Notifications — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :

- -
var maNotification = new Notification('Bonjour !');
- -

Nous verrons les constructeurs dans un prochain article.

- -
-

Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.

-
- -

Résumé

- -

Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet personne, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.

- -

Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.

- -

Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md new file mode 100644 index 0000000000..483ebba0fc --- /dev/null +++ b/files/fr/learn/javascript/objects/basics/index.md @@ -0,0 +1,258 @@ +--- +title: 'Les bases de JavaScript, orienté objet' +slug: Learn/JavaScript/Objects/Basics +tags: + - API + - Apprendre + - Débutant + - JavaScript + - Objet + - Syntaxe + - this +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, connaissances basiques concernant HTML et CSS, bonnes connaissances des bases de JavaScript (cf. les premiers pas et les briques de construction).
Objectifs :Comprendre les théories de base derrière la programmation orientée objet, comment l'appliquer à JavaScript, et comment travailler avec des objets JavaScript.
+ +

Les bases de l'objet

+ +

Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.

+ +

Pour commencer, faites une copie locale de notre fichier oojs.html. Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir la console JavaScript des outils de développement ouverte et prête, pour y saisir des commandes.

+ +

Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :

+ +
var personne = {};
+ +

Désormais ouvrez la console JavaScript de votre navigateur, saisissez personne à l'intérieur, et appuyez sur Entrée. Vous devriez obtenir le résultat suivant :

+ +
[object Object]
+ +

Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :

+ +
var personne = {
+  nom: ['Jean', 'Martin'],
+  age: 32,
+  sexe: 'masculin',
+  interets: ['musique', 'skier'],
+  bio: function() {
+    alert(this.nom[0] + ' ' + this.nom[1] + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  },
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom[0] + '.');
+  }
+};
+
+ +

Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie input :

+ +
personne.nom
+personne.nom[0]
+personne.age
+personne.interets[1]
+personne.bio()
+personne.salutation()
+ +

Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire !

+ +
+

Note : Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir oojs-finished.html (ou voir en action). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur.

+
+ +

Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple nom et age ci-dessus) et une valeur (par exemple. ['Jean', 'Martin'] et 32).

+ +

Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :

+ +
var monObjet = {
+  nomDuMembre1: valeurDuMembre1,
+  nomDuMembre2: valeurDuMembre2,
+  nomDuMembre3: valeurDuMembre3
+}
+ +

La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet personne, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées propriétés de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des méthodes de l'objet.

+ +

Dans cet exemple, l'objet est créé grâce à un objet littéral : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.

+ +

C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.

+ +

Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.

+ +

Notation avec un point

+ +

Ci-dessus, on accède aux membres de l'objet en utilisant la notation avec un point.

+ +

Le nom de l'objet (personne) agit comme un espace de noms (ou namespace en anglais) — il doit être entré en premier pour accéder aux membres encapsulés dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :

+ +
personne.age
+personne.interets[1]
+personne.bio()
+ +

Sous-espaces de noms

+ +

Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété nom du membre et la faire passer de

+ +
nom: ['Jean', 'Martin'],
+ +

à

+ +
nom : {
+  prenom: 'Jean',
+  nomFamille: 'Martin'
+},
+ +

Ici, nous avons bien créé un sous-espace de noms. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :

+ +
personne.nom.prenom
+personne.nom.nomFamille
+ +

Important : à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :

+ +
nom[0]
+nom[1]
+ +

en

+ +
nom.prenom
+nom.nomFamille
+ +

sinon vos méthodes ne fonctionneront plus.

+ +

Notation avec les crochets

+ +

Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :

+ +
personne.age
+personne.nom.prenom
+ +

Vous pouvez utiliser :

+ +
personne['age']
+personne['nom']['prenom']
+ +

Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.

+ +

Définir les membres d'un objet

+ +

Jusqu'ici, nous avons vu comment accéder aux membres d'un objet. Vous pouvez aussi modifier la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :

+ +
personne.age = 45
+personne['nom']['nomFamille'] = 'Rabuchon'
+ +

Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :

+ +
personne.age
+personne['nom']['nomFamille']
+ +

Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; vous pouvez aussi créer de nouveaux membres. Essayez ceci :

+ +
personne['yeux'] = 'noisette'
+personne.auRevoir = function() { alert("Bye bye tout le monde !"); }
+ +

Vous pouvez maintenant tester vos nouveaux membres :

+ +
personne['yeux']
+personne.auRevoir()
+ +

Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs input. On pourrait avoir ses valeurs comme ceci :

+ +
var monNomDeDonnee = nomInput.value
+var maValeurDeDonnee = valeurNom.value
+ +

On peut alors ajouter le nom et la valeur du nouveau membre de l'objet personne comme ceci :

+ +
personne[monNomDeDonnee] = maValeurDeDonnee
+ +

Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet personne :

+ +
var monNomDeDonnee = 'hauteur'
+var maValeurDeDonnee = '1.75m'
+personne[monNomDeDonnee] = maValeurDeDonnee
+ +

Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément input) :

+ +
personne.hauteur
+ +

Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.

+ +

Qu'est-ce que « this » ?

+ +

Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :

+ +
salutation: function() {
+  alert('Bonjour! Je suis ' + this.nom.prenom + '.');
+}
+ +

Vous vous demandez probablement ce que signifie « this ». Le mot-clé this se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, this est l'équivalent de personne.  Alors, pourquoi ne pas écrire personne à la place ? Comme vous le verrez dans l'article la programmation JavaScript orientée objet pour les débutants, this est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).

+ +

Essayons d'illustrer nos propos par une paire d'objet personne simplifiée :

+ +
var personne1 = {
+  nom: 'Christophe',
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom + '.');
+  }
+}
+
+var personne2 = {
+  nom: 'Bruno',
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom + '.');
+  }
+}
+ +

Dans ce cas,  personne1.salutation() affichera "Bonjour ! Je suis Christophe.", tandis que personne2.salutation() affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, this est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).

+ +

Vous utilisiez des objets depuis le début !

+ +

Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples.

+ +

Ainsi, quand vous utilisez une méthode comme :

+ +
maChaineDeCaracteres.split(',');
+ +

Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de String et possède donc plusieurs méthodes/propriétés communes.

+ +

Quand vous accédez au DOM (Document Object Model ou « modèle objet du document ») avec document et des lignes telles que :

+ +
var monDiv = document.createElement('div');
+var maVideo = document.querySelector('video');
+ +

Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de Document est créée, appelée document et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.

+ +

C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.

+ +

On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, l'API Notifications — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :

+ +
var maNotification = new Notification('Bonjour !');
+ +

Nous verrons les constructeurs dans un prochain article.

+ +
+

Note : On peut voir le mode de communication des objets comme un envoi de message. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.

+
+ +

Résumé

+ +

Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet personne, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.

+ +

Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.

+ +

Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/index.html b/files/fr/learn/javascript/objects/index.html deleted file mode 100644 index 5c7aed54cd..0000000000 --- a/files/fr/learn/javascript/objects/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Introduction aux objets JS -slug: Learn/JavaScript/Objects -tags: - - Apprendre - - Article - - Auto-évaluation - - Débutant - - Guide - - JavaScript - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects ---- -
-
{{JsSidebar}}
- -
{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
-
- -

En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     

- -

Prérequis

- -

Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.

- -

Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.

- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.

-
- -

Guides

- -
-
Les bases de JavaScript orienté objet
-
Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
-
- -
-
JavaScript orienté objet pour les débutants
-
-

Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.

-
-
Objets prototypes
-
-

Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.

-
-
L’héritage au sein de JavaScript
-
-

Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.

-
-
Manipuler des données JSON
-
-

JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.

-
-
Pratiques sur la construction d’objet
-
-

Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.

-
-
- -

Auto-évaluation

- -
-
Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
-
Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
-
- -

{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} 

diff --git a/files/fr/learn/javascript/objects/index.md b/files/fr/learn/javascript/objects/index.md new file mode 100644 index 0000000000..5c7aed54cd --- /dev/null +++ b/files/fr/learn/javascript/objects/index.md @@ -0,0 +1,70 @@ +--- +title: Introduction aux objets JS +slug: Learn/JavaScript/Objects +tags: + - Apprendre + - Article + - Auto-évaluation + - Débutant + - Guide + - JavaScript + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects +--- +
+
{{JsSidebar}}
+ +
{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}
+
+ +

En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules Introduction au HTML et Introduction au CSS avant de commencer avec le JavaScript.

+ +

Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur Premiers pas avec JavaScript et Les blocs de construction en JavaScript.

+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +
+
Les bases de JavaScript orienté objet
+
Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.
+
+ +
+
JavaScript orienté objet pour les débutants
+
+

Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.

+
+
Objets prototypes
+
+

Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.

+
+
L’héritage au sein de JavaScript
+
+

Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.

+
+
Manipuler des données JSON
+
+

JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.

+
+
Pratiques sur la construction d’objet
+
+

Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.

+
+
+ +

Auto-évaluation

+ +
+
Ajoutez des fonctionnalités  à notre  démo des ballons bondissants
+
Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.
+
+ +

{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} 

diff --git a/files/fr/learn/javascript/objects/inheritance/index.html b/files/fr/learn/javascript/objects/inheritance/index.html deleted file mode 100644 index ededf06c2e..0000000000 --- a/files/fr/learn/javascript/objects/inheritance/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: L'héritage au sein de JavaScript -slug: Learn/JavaScript/Objects/Inheritance -tags: - - Apprendre - - Article - - Débutant - - Héritage - - JS Orienté Objet - - JavaScript - - Objet - - Programmation orientée objet - - Prototype -translation_of: Learn/JavaScript/Objects/Inheritance -original_slug: Learn/JavaScript/Objects/Heritage ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.

- - - - - - - - - - - - -
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectif :Comprendre comment implémenter l'héritage en JavaScript.
- -

Héritage prototypique

- -

Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?

- -

Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir C++ inheritance en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un héritage prototypique).

- -

Voyons comment cela se passe avec un exemple concret.

- -

Pour commencer

- -

Tout d'abord, faites une copie du fichier oojs-class-inheritance-start.html (voir la démo). Vous y trouverez le constructeur Personne() que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.

- -
function Personne(prenom, nom, age, genre, interets) {
-  this.nom = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-};
- -

L'ensemble des méthodes est défini dans le prototype :

- -
Personne.prototype.saluer = function() {
-  alert('Salut! Je suis ' + this.nom.prenom + '.');
-};
- -

Essayons de créer une classe Professeur similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de Personne mais possède aussi :

- -
    -
  1. Un nouvel attribut matière — qui contiendra la matière que le professeur enseigne.
    2. -
  2. Une méthode saluer un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.
    3. -
- -

Définissons le constructeur Professeur()

- -

La première chose à faire est de créer le constructeur Professeur() via l'ajout du code suivant :

- -
function Professeur(prenom, nom, age, genre, interets, matiere) {
-  Personne.call(this, prenom, nom, age, genre, interets);
-
-  this.matiere = matiere;
-}
- -

Cela ressemble beaucoup au constructeur Personne mais il y a quelque chose que nous n'avons pas encore vu : la fonction call(). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de this que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.

- -

Nous voulons que le constructeur Professeur() aie les mêmes attributs que Personne(), nous les spécifions donc dans l'appel fait via la fonction call().

- -

La dernière ligne au sein du constructeur sert simplement à définir l'attribut matière que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.

- -

Notez que nous aurions très bien pu écrire tout simplement ceci :

- -
function Professeur(prenom, nom, age, genre, interets, matiere) {
-  this.nom_complet = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-  this.matiere = matiere;
-}
- -

Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de Personne(), ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.

- -

 

- -

Hériter d'un constructeur sans paramètres

- -

Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :

- -
function Brick() {
-  this.width = 10;
-  this.height = 20;
-}
- -

Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :

- -
function BlueGlassBrick() {
-  Brick.call(this);
-
-  this.opacity = 0.5;
-  this.color = 'blue';
-}
- -

Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  

- -

Définir le prototype de Professeur() et son constructeur référent.

- -

Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété prototype, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété prototype du constructeur Personne(). Pour le constater, vous pouvez par exemple entrer Professeur.prototype.constructor dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de Personne.prototype.saluer et de Professeur.prototype.saluer

- -

Notre classe Professeur() doit hériter des méthodes définies dans le prototype de Personne(). Aussi comment procéder pour obtenir ce résultat ?

- -

Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :

- -
Professeur.prototype = Object.create(Personne.prototype);
- -
    -
  1. Ici, notre ami create() vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à Professeur.prototype. Le nouvel objet possède Personne.prototype désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur Personne.prototype. 
    2. -
  2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de Professeur() est désormais équivalent à celui de Personne(), parce que nous avons défini Professeur.prototype pour référencer un objet qui hérite ses propriétés de  Personne.prototype ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer Professeur.prototype.constructor dans la console pour vérifier.
    3. -
  3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : - 
    Professeur.prototype.constructor = Professeur;
    -
    4. -
  4. -

    A présent, si vous sauvegardez et rafraichissez après avoir écrit Professeur.prototype.constructor, cela devrait retourner Professeur(), et en plus nous héritons maintenant de Personne() !

    -
    5. -
- -

Donner au prototype de Professeur() une nouvelle fonction saluer()

- -

Pour terminer notre code, nous devons définir une nouvelle fonction saluer() sur le constructeur de Professeur().

- -

La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :

- -
Professeur.prototype.saluer = function() {
-  var prefix;
-
-  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
-    prefix = 'M.';
-  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
-    prefix = 'Mme';
-  } else {
-    prefix = '';
-  }
-
-  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
-};
- -

Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.

- -

 

- -

Exécuter l'exemple

- -

Une fois tout le code saisi, essayez de créer une instance d'objet Professeur() en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :

- -
var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
- -

Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet professeur1, par exemple :

- -
professeur1.nom_complet.nom;
-professeur1.interets[0];
-professeur1.bio();
-professeur1.matiere;
-professeur1.saluer();Ffa
- -

Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique Personne() via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée Professeur().

- -

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

- -

La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.

- -

Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.

- -

Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.

- -

CoffeeScript par exemple fournit les fonctionnalités class, extends, etc.

- -

Un exercice plus complexe.

- -

Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.

- -

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

- -

Résumé sur les membres de l'Objet

- -

Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :

- -
    -
  1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
    2. -
  2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
    3. -
  3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
    4. -
- -

Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.

- -

Quand devez-vous utiliser  l'héritage en JavaScript?

- -

Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. 

- -

D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. 

- -

En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. 

- -

Note: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée délégation — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.

- -

Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. 

- -

En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.

- -

Résumé

- -

Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. 

- -

Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

 

- -

Dans ce module

- - - -

 

-
- -

 

diff --git a/files/fr/learn/javascript/objects/inheritance/index.md b/files/fr/learn/javascript/objects/inheritance/index.md new file mode 100644 index 0000000000..ededf06c2e --- /dev/null +++ b/files/fr/learn/javascript/objects/inheritance/index.md @@ -0,0 +1,261 @@ +--- +title: L'héritage au sein de JavaScript +slug: Learn/JavaScript/Objects/Inheritance +tags: + - Apprendre + - Article + - Débutant + - Héritage + - JS Orienté Objet + - JavaScript + - Objet + - Programmation orientée objet + - Prototype +translation_of: Learn/JavaScript/Objects/Inheritance +original_slug: Learn/JavaScript/Objects/Heritage +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.

+ + + + + + + + + + + + +
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectif :Comprendre comment implémenter l'héritage en JavaScript.
+ +

Héritage prototypique

+ +

Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?

+ +

Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir C++ inheritance en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un héritage prototypique).

+ +

Voyons comment cela se passe avec un exemple concret.

+ +

Pour commencer

+ +

Tout d'abord, faites une copie du fichier oojs-class-inheritance-start.html (voir la démo). Vous y trouverez le constructeur Personne() que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.

+ +
function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+};
+ +

L'ensemble des méthodes est défini dans le prototype :

+ +
Personne.prototype.saluer = function() {
+  alert('Salut! Je suis ' + this.nom.prenom + '.');
+};
+ +

Essayons de créer une classe Professeur similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de Personne mais possède aussi :

+ +
    +
  1. Un nouvel attribut matière — qui contiendra la matière que le professeur enseigne.
    2. +
  2. Une méthode saluer un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.
    3. +
+ +

Définissons le constructeur Professeur()

+ +

La première chose à faire est de créer le constructeur Professeur() via l'ajout du code suivant :

+ +
function Professeur(prenom, nom, age, genre, interets, matiere) {
+  Personne.call(this, prenom, nom, age, genre, interets);
+
+  this.matiere = matiere;
+}
+ +

Cela ressemble beaucoup au constructeur Personne mais il y a quelque chose que nous n'avons pas encore vu : la fonction call(). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de this que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.

+ +

Nous voulons que le constructeur Professeur() aie les mêmes attributs que Personne(), nous les spécifions donc dans l'appel fait via la fonction call().

+ +

La dernière ligne au sein du constructeur sert simplement à définir l'attribut matière que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.

+ +

Notez que nous aurions très bien pu écrire tout simplement ceci :

+ +
function Professeur(prenom, nom, age, genre, interets, matiere) {
+  this.nom_complet = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.matiere = matiere;
+}
+ +

Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de Personne(), ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.

+ +

 

+ +

Hériter d'un constructeur sans paramètres

+ +

Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  

+ +

Définir le prototype de Professeur() et son constructeur référent.

+ +

Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété prototype, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété prototype du constructeur Personne(). Pour le constater, vous pouvez par exemple entrer Professeur.prototype.constructor dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de Personne.prototype.saluer et de Professeur.prototype.saluer

+ +

Notre classe Professeur() doit hériter des méthodes définies dans le prototype de Personne(). Aussi comment procéder pour obtenir ce résultat ?

+ +

Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :

+ +
Professeur.prototype = Object.create(Personne.prototype);
+ +
    +
  1. Ici, notre ami create() vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à Professeur.prototype. Le nouvel objet possède Personne.prototype désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur Personne.prototype. 
    2. +
  2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de Professeur() est désormais équivalent à celui de Personne(), parce que nous avons défini Professeur.prototype pour référencer un objet qui hérite ses propriétés de  Personne.prototype ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer Professeur.prototype.constructor dans la console pour vérifier.
    3. +
  3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : + 
    Professeur.prototype.constructor = Professeur;
    +
    4. +
  4. +

    A présent, si vous sauvegardez et rafraichissez après avoir écrit Professeur.prototype.constructor, cela devrait retourner Professeur(), et en plus nous héritons maintenant de Personne() !

    +
    5. +
+ +

Donner au prototype de Professeur() une nouvelle fonction saluer()

+ +

Pour terminer notre code, nous devons définir une nouvelle fonction saluer() sur le constructeur de Professeur().

+ +

La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :

+ +
Professeur.prototype.saluer = function() {
+  var prefix;
+
+  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
+    prefix = 'M.';
+  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
+    prefix = 'Mme';
+  } else {
+    prefix = '';
+  }
+
+  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
+};
+ +

Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.

+ +

 

+ +

Exécuter l'exemple

+ +

Une fois tout le code saisi, essayez de créer une instance d'objet Professeur() en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :

+ +
var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
+ +

Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet professeur1, par exemple :

+ +
professeur1.nom_complet.nom;
+professeur1.interets[0];
+professeur1.bio();
+professeur1.matiere;
+professeur1.saluer();Ffa
+ +

Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique Personne() via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée Professeur().

+ +

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

+ +

La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.

+ +

Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.

+ +

Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.

+ +

CoffeeScript par exemple fournit les fonctionnalités class, extends, etc.

+ +

Un exercice plus complexe.

+ +

Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.

+ +

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

+ +

Résumé sur les membres de l'Objet

+ +

Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :

+ +
    +
  1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
    2. +
  2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
    3. +
  3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
    4. +
+ +

Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.

+ +

Quand devez-vous utiliser  l'héritage en JavaScript?

+ +

Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. 

+ +

D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. 

+ +

En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. 

+ +

Note: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée délégation — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.

+ +

Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. 

+ +

En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.

+ +

Résumé

+ +

Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. 

+ +

Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

 

+ +

Dans ce module

+ + + +

 

+
+ +

 

diff --git a/files/fr/learn/javascript/objects/json/index.html b/files/fr/learn/javascript/objects/json/index.html deleted file mode 100644 index 8fa5a7e935..0000000000 --- a/files/fr/learn/javascript/objects/json/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Manipuler des données JSON -slug: Learn/JavaScript/Objects/JSON -tags: - - Apprendre - - Article - - Débutant - - JSON - - JavaScript - - Manuel - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.

- - - - - - - - - - - - -
Prérequis :Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).
Objectif :Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.
- -

Plus sérieusement, qu'est ce que le JSON ?

- -

{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par Douglas Crockford. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.

- -

Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.

- -
-

Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom  de la linéarisation (stringification).

-
- -

Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le {{glossary("MIME type")}} application/json.

- -

Structure du JSON

- -

Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée superHeroes par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article Les bases de JavaScript orienté objets à l'aide de la notation point / crochets. Par exemple :

- -
superHeroes.hometown
-superHeroes['active']
- -

Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. D'abord, nous partons de la variable — superHeroes
    2. -
  2. À l'intérieur de laquelle nous désirons accéder à la propriété members, donc, nous tapons ["members"].
    3. -
  3. members contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons [1].
    4. -
  4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété powers, donc, nous utilisons ["powers"].
    5. -
  5. Enfin, à l'intérieur de cette propriété powers nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons [2].
    6. -
- -
-

Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

-
- -

Des tableaux en tant que JSON

- -

Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : [0]["powers"][0].

- -

Notes diverses

- - - -

Activité : Manipuler le JSON au travers d'un exemple

- -

Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.

- -

Lançons nous

- -

Pour commencer, faites une copie locale de nos fichiers heroes.html et style.css. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :

- -
<header>
-</header>
-
-<section>
-</section>
- -

Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :

- -
var header = document.querySelector('header');
-var section = document.querySelector('section');
- -

Nos données JSON sont disponibles sur notre GitHub ici : https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

- -

- -

Chargeons notre JSON

- -

Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment XHR). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.

- -
    -
  1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : - 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : - 
    var request = new XMLHttpRequest();
    -
    3. -
  3. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante : - 
    request.open('GET', requestURL);
    - -

    Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :

    - -
      -
    • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
      • -
    • L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
      • -
    -
    4. -
  4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() : - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code : - 
    request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.

- -

Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.

- -

Remplissage de l'en-tête

- -

Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :

- -
function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  var myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

Nous avons appelé le paramètre de cette fonction jsonObj  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.

- -

Création des fiches des héros

- -

Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :

- -
function showHeroes(jsonObj) {
-  var heroes = jsonObj['members'];
-
-  for (var i = 0; i < heroes.length; i++) {
-    var myArticle = document.createElement('article');
-    var myH2 = document.createElement('h2');
-    var myPara1 = document.createElement('p');
-    var myPara2 = document.createElement('p');
-    var myPara3 = document.createElement('p');
-    var myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    var superPowers = heroes[i].powers;
-    for (var j = 0; j < superPowers.length; j++) {
-      var listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

Pour commencer, on stocke la propriété members de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.

- -

Maintenant, on utilise une boucle for pour parcourir chaque object du tableau. Pour chaque cas, il faut :

- -
    -
  1. Créer plusieurs nouveaux éléments : un <article>, un <h2>, trois <p>s, et un <ul>.
    2. -
  2. Mettre le name du héros actuel dans le <h2>.
    3. -
  3. Remplir les trois paragraphes avec leur secretIdentity, leur age, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.
    4. -
  4. Stocker la propriété powers dans une nouvelle variable nommée superPowers contenant un tableau listant les super-pouvoirs du héros actuel.
    5. -
  5. Utiliser une autre boucle for pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément <li>, y placer le super-pouvoir et placer le listItem dans l'élément <ul> (myList) en utilisant appendChild().
    6. -
  6. Pour finir, on ajoute <h2>, les <p>s et <ul> à <article> (myArticle), et on ajoute <article> à <section>. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML.
    7. -
- -
-

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

-
- -
-

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

-
- -

Conversion entre objets et textes

- -

Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :

- -
request.responseType = 'json';
- -

Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :

- - - -

Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  var superHeroesText = request.response; // get the string from the response
-  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

Comme vous pouvez le deviner, stringify() fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :

- -
var myJSON = { "name": "Chris", "age": "38" };
-myJSON
-var myString = JSON.stringify(myJSON);
-myString
- -

On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec stringify() — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.

- -

Résumé

- -

Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d'analyse syntaxique (parsage)  du JSON  et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md new file mode 100644 index 0000000000..8fa5a7e935 --- /dev/null +++ b/files/fr/learn/javascript/objects/json/index.md @@ -0,0 +1,338 @@ +--- +title: Manipuler des données JSON +slug: Learn/JavaScript/Objects/JSON +tags: + - Apprendre + - Article + - Débutant + - JSON + - JavaScript + - Manuel + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir Premiers pas et Les blocs) et en Javascript orienté objets (voir Introduction aux objets).
Objectif :Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.
+ +

Plus sérieusement, qu'est ce que le JSON ?

+ +

{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par Douglas Crockford. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.

+ +

Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global JSON disposant des méthodes pour assurer la conversion entre les deux.

+ +
+

Note : Convertir une chaîne de caractères en un objet natif se nomme analyse syntaxique (parsage) tandis que le contraire porte le nom  de la linéarisation (stringification).

+
+ +

Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension .json et le {{glossary("MIME type")}} application/json.

+ +

Structure du JSON

+ +

Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée superHeroes par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article Les bases de JavaScript orienté objets à l'aide de la notation point / crochets. Par exemple :

+ +
superHeroes.hometown
+superHeroes['active']
+ +

Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. D'abord, nous partons de la variable — superHeroes
    2. +
  2. À l'intérieur de laquelle nous désirons accéder à la propriété members, donc, nous tapons ["members"].
    3. +
  3. members contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons [1].
    4. +
  4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété powers, donc, nous utilisons ["powers"].
    5. +
  5. Enfin, à l'intérieur de cette propriété powers nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons [2].
    6. +
+ +
+

Note : L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple JSONTest.html (voir le code source). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.

+
+ +

Des tableaux en tant que JSON

+ +

Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : [0]["powers"][0].

+ +

Notes diverses

+ + + +

Activité : Manipuler le JSON au travers d'un exemple

+ +

Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.

+ +

Lançons nous

+ +

Pour commencer, faites une copie locale de nos fichiers heroes.html et style.css. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :

+ +
var header = document.querySelector('header');
+var section = document.querySelector('section');
+ +

Nos données JSON sont disponibles sur notre GitHub ici : https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :

+ +

+ +

Chargeons notre JSON

+ +

Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment XHR). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.

+ +
    +
  1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : + 
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet XMLHttpRequest à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : + 
    var request = new XMLHttpRequest();
    +
    3. +
  3. Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode open(). Ajoutez la ligne suivante : + 
    request.open('GET', requestURL);
    + +

    Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :

    + +
      +
    • La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode GET est appropriée dans la mesure où nous voulons simplement récupérer quelques données.
      • +
    • L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.
      • +
    +
    4. +
  4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur 'json' à  responseType, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode send() : + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code : + 
    request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété response) dans la variable superHeroes ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <header> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <section>.

+ +

Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir onload) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété request.response sera disponible au moment où nous essayerons d'en faire quelque chose.

+ +

Remplissage de l'en-tête

+ +

Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :

+ +
function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

Nous avons appelé le paramètre de cette fonction jsonObj  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de createElement(), nous fixons son textContent à la valeur de la propriété squadName de l'objet, puis nous l'ajoutons à l'en-tête en utilisant appendChild(). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère homeTown et la propriété formed de l'objet.

+ +

Création des fiches des héros

+ +

Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :

+ +
function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i < heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j < superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

Pour commencer, on stocke la propriété members de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.

+ +

Maintenant, on utilise une boucle for pour parcourir chaque object du tableau. Pour chaque cas, il faut :

+ +
    +
  1. Créer plusieurs nouveaux éléments : un <article>, un <h2>, trois <p>s, et un <ul>.
    2. +
  2. Mettre le name du héros actuel dans le <h2>.
    3. +
  3. Remplir les trois paragraphes avec leur secretIdentity, leur age, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.
    4. +
  4. Stocker la propriété powers dans une nouvelle variable nommée superPowers contenant un tableau listant les super-pouvoirs du héros actuel.
    5. +
  5. Utiliser une autre boucle for pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément <li>, y placer le super-pouvoir et placer le listItem dans l'élément <ul> (myList) en utilisant appendChild().
    6. +
  6. Pour finir, on ajoute <h2>, les <p>s et <ul> à <article> (myArticle), et on ajoute <article> à <section>. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML.
    7. +
+ +
+

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source heroes-finished.html (ou regardez-le en action.)

+
+ +
+

Note : Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier superheroes.json dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article Les bases du JavaScript orienté objet pour obtenir plus de détails sur la notation avec un point et avec une accolade.

+
+ +

Conversion entre objets et textes

+ +

Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :

+ +
request.responseType = 'json';
+ +

Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet JSON interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :

+ + + +

Vous pouvez voir la première méthode en action dans notre exemple heroes-finished-json-parse.html (voir le code source) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode parse() pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

Comme vous pouvez le deviner, stringify() fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :

+ +
var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString
+ +

On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec stringify() — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.

+ +

Résumé

+ +

Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d'analyse syntaxique (parsage)  du JSON  et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html deleted file mode 100644 index a264d9063b..0000000000 --- a/files/fr/learn/javascript/objects/object-oriented_js/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: Le JavaScript orienté objet pour débutants -slug: Learn/JavaScript/Objects/Object-oriented_JS -tags: - - Apprendre - - Débutant - - Guide - - JavaScript - - OOJS - - OOP - - POO -translation_of: Learn/JavaScript/Objects/Object-oriented_JS -original_slug: Learn/JavaScript/Objects/JS_orienté-objet ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

- - - - - - - - - - - - -
Pré-requis :Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir Premiers pas et Blocs de construction)
Objectif :Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.
- -

La programmation orientée objet de loin

- -

Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.

- -

Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est encapsulé) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'espace de noms ou namespace, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.

- -

Définissons un modèle objet

- -

Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.

- -

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

- -

Classe Personne avec attributs élémentaires

- -

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

- -

Créons des objets

- -

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

- -

Instantiation on a Personn Class for JS examples (fr)

- -

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

- -

Classes filles

- -

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

- -

Inheritance principle with French text for JS example

- -

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

- -
-

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.

-
- -

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

- -

Professor instantiation example for JS fr

- -

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

- -

Constructeurs et instances d'objet

- -

Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément class pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées constructeurs pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.

- -

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

- -
-

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

-
- -

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

- -

Un exemple simple

- -
    -
  1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : - 
    function creerNouvellePersonne(nom) {
-  var obj = {};
-  obj.nom = nom;
-  obj.salutation = function() {
-    alert('Salut ! Je m\'appelle ' + this.nom + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : - 
    var salva = creerNouvellePersonne('Salva');
-salva.nom;
-salva.salutation();
    - Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !
    3. -
  3. Remplacez la fonction précédente par celle-ci : - 
    function Personne(nom) {
-  this.nom = nom;
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  };
-}
    -
    4. -
- -

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

- -
-

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

-
- -

Comment pouvons-nous utiliser un constructeur ?

- -
    -
  1. Ajoutez les lignes suivantes au code déjà existant : - 
    var personne1 = new Personne('Bob');
-var personne2 = new Personne('Sarah');
    -
    2. -
  2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : - 
    personne1.nom
-personne1.salutation()
-personne2.nom
-personne2.salutation()
    -
    3. -
- -

Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser personne1 et personne2 pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut nom et de la même méthode salutation(). Heureusement, les attributs et les méthodes utilisent this ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.

- -

Revoyons l'appel au constructeur :

- -
var personne1 = new Personne('Bob');
-var personne2 = new Personne('Sarah');
- -

Dans chaque cas, le mot clé new est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :

- -
function Personne(nom) {
-  this.nom = nom;
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  };
-}
- -

Une fois les objets créés, les variables personne1 et personne2 contiennent les objets suivants :

- -
{
-  nom: 'Bob',
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-}
-
-{
-  nom: 'Sarah',
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-}
- -

On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons salutation() à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.

- -

Créons une version finalisée de notre constructeur

- -

L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice Personne().

- -
    -
  1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : - 
    function Personne(prenom, nom, age, genre, interets) {
-  this.nom = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-  this.bio = function() {
-    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
-  };
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
-  };
-};
    -
    2. -
  2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : - 
    var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
    -
    3. -
- -

Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :

- -
personne1['age']
-personne1.interets[1]
-personne1.bio()
-// etc.
- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

-
- -

Exercices

- -

Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.

- -

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

- -
-

Note : Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

-
- -

D'autres manières d'instancier des objets

- -

Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.

- -

Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.

- -

Le constructeur Object()

- -

Vous pouvez en premier lieu utiliser le constructeur Object() pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.

- -
    -
  1. Essayez la commande suivante dans la console JavaScript de votre navigateur : - 
    var personne1 = new Object();
    -
    2. -
  2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. - 
    personne1.nom = 'Chris';
-personne1['age'] = 38;
-personne1.salutation = function() {
-  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-};
    -
    3. -
  3. Vous pouvez aussi passer un objet en paramètre du constructeur Object(), afin de prédéfinir certains attributs et méthodes. - 
    var personne1 = new Object({
-  nom: 'Chris',
-  age: 38,
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-});
    -
    4. -
- -

Via la méthode create()

- -

Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  

- -

Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée create() qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .

- -
    -
  1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : - 
    var personne2 = Object.create(personne1);
    -
    2. -
  2. Maintenant : - 
    personne2.nom
-personne2.salutation()
    -
    3. -
- -

personne2 a été créée à partir de personne1 — et elle possède les mêmes propriétés. 

- -

L'inconvénient de create() est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.

- -

Nous verrons les détails et les effets de create() plus tard.

- -

Résumé

- -

Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.

- -

Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.md b/files/fr/learn/javascript/objects/object-oriented_js/index.md new file mode 100644 index 0000000000..a264d9063b --- /dev/null +++ b/files/fr/learn/javascript/objects/object-oriented_js/index.md @@ -0,0 +1,279 @@ +--- +title: Le JavaScript orienté objet pour débutants +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Apprendre + - Débutant + - Guide + - JavaScript + - OOJS + - OOP + - POO +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +original_slug: Learn/JavaScript/Objects/JS_orienté-objet +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

+ + + + + + + + + + + + +
Pré-requis :Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir Premiers pas et Blocs de construction)
Objectif :Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.
+ +

La programmation orientée objet de loin

+ +

Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.

+ +

Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est encapsulé) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'espace de noms ou namespace, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.

+ +

Définissons un modèle objet

+ +

Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.

+ +

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

+ +

Classe Personne avec attributs élémentaires

+ +

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

+ +

Créons des objets

+ +

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

+ +

Instantiation on a Personn Class for JS examples (fr)

+ +

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

+ +

Classes filles

+ +

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

+ +

Inheritance principle with French text for JS example

+ +

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

+ +
+

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.

+
+ +

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

+ +

Professor instantiation example for JS fr

+ +

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

+ +

Constructeurs et instances d'objet

+ +

Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément class pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées constructeurs pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.

+ +

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

+ +
+

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

+
+ +

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

+ +

Un exemple simple

+ +
    +
  1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : + 
    function creerNouvellePersonne(nom) {
+  var obj = {};
+  obj.nom = nom;
+  obj.salutation = function() {
+    alert('Salut ! Je m\'appelle ' + this.nom + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : + 
    var salva = creerNouvellePersonne('Salva');
+salva.nom;
+salva.salutation();
    + Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !
    3. +
  3. Remplacez la fonction précédente par celle-ci : + 
    function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}
    +
    4. +
+ +

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

+ +
+

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

+
+ +

Comment pouvons-nous utiliser un constructeur ?

+ +
    +
  1. Ajoutez les lignes suivantes au code déjà existant : + 
    var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');
    +
    2. +
  2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : + 
    personne1.nom
+personne1.salutation()
+personne2.nom
+personne2.salutation()
    +
    3. +
+ +

Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser personne1 et personne2 pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut nom et de la même méthode salutation(). Heureusement, les attributs et les méthodes utilisent this ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.

+ +

Revoyons l'appel au constructeur :

+ +
var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');
+ +

Dans chaque cas, le mot clé new est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :

+ +
function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}
+ +

Une fois les objets créés, les variables personne1 et personne2 contiennent les objets suivants :

+ +
{
+  nom: 'Bob',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+
+{
+  nom: 'Sarah',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+ +

On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons salutation() à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.

+ +

Créons une version finalisée de notre constructeur

+ +

L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice Personne().

+ +
    +
  1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : + 
    function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.bio = function() {
+    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  };
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
+  };
+};
    +
    2. +
  2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : + 
    var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
    +
    3. +
+ +

Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :

+ +
personne1['age']
+personne1.interets[1]
+personne1.bio()
+// etc.
+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

+
+ +

Exercices

+ +

Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.

+ +

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

+ +
+

Note : Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

+
+ +

D'autres manières d'instancier des objets

+ +

Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.

+ +

Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.

+ +

Le constructeur Object()

+ +

Vous pouvez en premier lieu utiliser le constructeur Object() pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.

+ +
    +
  1. Essayez la commande suivante dans la console JavaScript de votre navigateur : + 
    var personne1 = new Object();
    +
    2. +
  2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. + 
    personne1.nom = 'Chris';
+personne1['age'] = 38;
+personne1.salutation = function() {
+  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+};
    +
    3. +
  3. Vous pouvez aussi passer un objet en paramètre du constructeur Object(), afin de prédéfinir certains attributs et méthodes. + 
    var personne1 = new Object({
+  nom: 'Chris',
+  age: 38,
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+});
    +
    4. +
+ +

Via la méthode create()

+ +

Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  

+ +

Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée create() qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .

+ +
    +
  1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : + 
    var personne2 = Object.create(personne1);
    +
    2. +
  2. Maintenant : + 
    personne2.nom
+personne2.salutation()
    +
    3. +
+ +

personne2 a été créée à partir de personne1 — et elle possède les mêmes propriétés. 

+ +

L'inconvénient de create() est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.

+ +

Nous verrons les détails et les effets de create() plus tard.

+ +

Résumé

+ +

Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.

+ +

Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.html b/files/fr/learn/javascript/objects/object_building_practice/index.html deleted file mode 100644 index 7028077f88..0000000000 --- a/files/fr/learn/javascript/objects/object_building_practice/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: La construction d'objet en pratique -slug: Learn/JavaScript/Objects/Object_building_practice -tags: - - Apprendre - - Article - - Canvas - - Débutant - - JavaScript - - Manuel - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects/Object_building_practice -original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
- -

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

- - - - - - - - - - - - -
Pré-requis : -

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 

-
Objectif : -

Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".

-
- -

Faisons bondir quelques balles

- -

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 

- -

- -
    -
- -

Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

- -

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

- -
    -
  1. Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
    2. -
  2. Quelques styles très simples qui servent principalement à mettre en forme et placer le <h1>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
    3. -
  3. Un peu de JavaScript qui sert à paramétrer l'élément  <canvas> et fournir les fonctions globalles que nous utiliserons.
    4. -
- -

La première partie du script ressemble à ceci :

- -
const canvas = document.querySelector('canvas');
-
-const ctx = canvas.getContext('2d');
-
-const width = canvas.width = window.innerWidth;
-const height = canvas.height = window.innerHeight;
- -

Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 

- -

Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

- -

Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.

- -

Le dernier morceau du script ressemble à ceci :

- -
function random(min, max) {
-  var num = Math.floor(Math.random() * (max - min + 1)) + min;
-  return num;
-}
- -

Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. 

- -

Modéliser une balle dans notre programme

- -

Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.

- -
function Ball(x, y, velX, velY, color, size) {
-  this.x = x;
-  this.y = y;
-  this.velX = velX;
-  this.velY = velY;
-  this.color = color;
-  this.size = size;
-}
- -

Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :

- - - -

Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.

- -

Dessiner la balle

- -

En premier lieu ajoutez la méthode draw() au prototype de 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();
-}
- -

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

- - - -

Vous pouvez déjà commencer à tester votre objet.

- -
    -
  1. Sauvegardez le code et chargez le fichier html dans un navigateur.
    2. -
  2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.
    3. -
  3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : - 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    -
    4. -
  4. Essayez d'appeler ses membres : - 
    testBall.x
-testBall.size
-testBall.color
-testBall.draw()
    -
    5. -
  5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
    6. -
- -

Mettre à jour les données de la balle

- -

Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode update() au prototype de 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;
-}
- -

Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif velY) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif velY).

- -

Dans les quatre cas nous :

- - - -

Dans chaque cas, nous incluons la taille size de la balle dans les calculs parce que les coordonnées  x/y  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.

- -

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

- -

Cela suffira pour l'instant, passons à l'animation !

- -

Animer la balle

- -

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

- -
    -
  1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : - - 
    let balls = [];
-
    - - 
    while (balls.length < 25) {
-  let size = random(10,20);
-  let ball = new Ball(
-    // ball position always drawn at least one ball width
-    // away from the edge of the canvas, to avoid drawing errors
-    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);
-}
    - Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
    2. -
  2. Ajoutez ce qui suit au bas de votre code maintenant : - 
    function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  for (let i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
-
-  requestAnimationFrame(loop);
-}
    - -

    Notre fonction loop() fonctionne comme suit :

    - -
      -
    • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
      • -
    • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
      • -
    • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
      • -
    • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
      • -
    -
    3. -
  3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. - 
    loop();
    -
    4. -
- -

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

- -

Ajouter la détection de collision

- -

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

- -
    -
  1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). - - 
    Ball.prototype.collisionDetect = function() {
-  for (let j = 0; j < balls.length; j++) {
-    if (!(this === balls[j])) {
-      const dx = this.x - balls[j].x;
-      const dy = this.y - balls[j].y;
-      const 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) +')';
-      }
-    }
-  }
-}
    - -

    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :

    - -
      -
    • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
      • -
    • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
      • -
    • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
      • -
    • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
      • -
    -
    2. -
  2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();: - 
    balls[i].collisionDetect();
    -
    3. -
  3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
    4. -
- -
-

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

-
- -

Résumé

- -

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.

- -

C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md new file mode 100644 index 0000000000..7028077f88 --- /dev/null +++ b/files/fr/learn/javascript/objects/object_building_practice/index.md @@ -0,0 +1,317 @@ +--- +title: La construction d'objet en pratique +slug: Learn/JavaScript/Objects/Object_building_practice +tags: + - Apprendre + - Article + - Canvas + - Débutant + - JavaScript + - Manuel + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects/Object_building_practice +original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

+ + + + + + + + + + + + +
Pré-requis : +

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 

+
Objectif : +

Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".

+
+ +

Faisons bondir quelques balles

+ +

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 

+ +

+ +
    +
+ +

Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

+ +

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

+ +
    +
  1. Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
    2. +
  2. Quelques styles très simples qui servent principalement à mettre en forme et placer le <h1>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
    3. +
  3. Un peu de JavaScript qui sert à paramétrer l'élément  <canvas> et fournir les fonctions globalles que nous utiliserons.
    4. +
+ +

La première partie du script ressemble à ceci :

+ +
const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;
+ +

Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 

+ +

Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

+ +

Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.

+ +

Le dernier morceau du script ressemble à ceci :

+ +
function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. 

+ +

Modéliser une balle dans notre programme

+ +

Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}
+ +

Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :

+ + + +

Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.

+ +

Dessiner la balle

+ +

En premier lieu ajoutez la méthode draw() au prototype de 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();
+}
+ +

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

+ + + +

Vous pouvez déjà commencer à tester votre objet.

+ +
    +
  1. Sauvegardez le code et chargez le fichier html dans un navigateur.
    2. +
  2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.
    3. +
  3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : + 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Essayez d'appeler ses membres : + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
    6. +
+ +

Mettre à jour les données de la balle

+ +

Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode update() au prototype de 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;
+}
+ +

Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif velY) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif velY).

+ +

Dans les quatre cas nous :

+ + + +

Dans chaque cas, nous incluons la taille size de la balle dans les calculs parce que les coordonnées  x/y  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.

+ +

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

+ +

Cela suffira pour l'instant, passons à l'animation !

+ +

Animer la balle

+ +

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

+ +
    +
  1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : + + 
    let balls = [];
+
    + + 
    while (balls.length < 25) {
+  let size = random(10,20);
+  let ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the edge of the canvas, to avoid drawing errors
+    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);
+}
    + Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
    2. +
  2. Ajoutez ce qui suit au bas de votre code maintenant : + 
    function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  for (let i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
    + +

    Notre fonction loop() fonctionne comme suit :

    + +
      +
    • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
      • +
    • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
      • +
    • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
      • +
    • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
      • +
    +
    3. +
  3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. + 
    loop();
    +
    4. +
+ +

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

+ +

Ajouter la détection de collision

+ +

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

+ +
    +
  1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). + + 
    Ball.prototype.collisionDetect = function() {
+  for (let j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      const dx = this.x - balls[j].x;
+      const dy = this.y - balls[j].y;
+      const 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) +')';
+      }
+    }
+  }
+}
    + +

    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :

    + +
      +
    • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
      • +
    • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
      • +
    • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
      • +
    • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
      • +
    +
    2. +
  2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();: + 
    balls[i].collisionDetect();
    +
    3. +
  3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
    4. +
+ +
+

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

+
+ +

Résumé

+ +

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.

+ +

C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.html b/files/fr/learn/javascript/objects/object_prototypes/index.html deleted file mode 100644 index 95663a0f7b..0000000000 --- a/files/fr/learn/javascript/objects/object_prototypes/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Prototypes Objet -slug: Learn/JavaScript/Objects/Object_prototypes -tags: - - Constructeur - - JavaScript - - Prototype -translation_of: Learn/JavaScript/Objects/Object_prototypes -original_slug: Learn/JavaScript/Objects/Prototypes_Objet ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

- - - - - - - - - - - - -
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectifs :Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.
- -

Un langage basé sur des prototypes ?

- -

JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un prototype objet d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou prototype chain en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.

- -

En réalité, les méthodes et attributs sont définis dans l'attribut prototype , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.

- -

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

- -
-

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

-
- -

Prenons un exemple afin de rendre cela un peu plus clair.

- -

Comprendre les prototypes objet

- -

Reprenons notre exemple dans lequel nous avions écrit notre constructeur Personne(). Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple oojs-class-further-exercises.html example (voir aussi le code source).

- -

Dans cet exemple, nous avons défini un constructeur comme suit :

- -
function Personne(prenom, nom, age, genre, interets) {
-
-  // property and method definitions
-
-};
- -

Nous avons ensuite instancié des objets comme ceci :

- -
var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
- -

Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

- -

- -

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

- -

- -

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

- -
personne1.valueOf()
- -

Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :

- - - -
-

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

-
- -
-

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

-
- -

L'attribut prototype : là où l'on définit les éléments héritables

- -

Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation Object on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet Personne1. Pourquoi Personne1 hérite de certains de ces éléments mais pas de tous ?

- -

Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut prototype d'Object (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous Object.prototype. et pas ceux situés juste sous Object. La valeur de l'attribut prototype est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.

- -

Ainsi Object.prototype.watch(), Object.prototype.valueOf() …  sont disponibles pour n'importe quel objet qui hérite de Object.prototype ce qui inclus les nouvelles instances créées à partir du constructeur Personne().

- -

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

- -
-

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.

-
- -
    -
  1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : - 
    Personne.prototype
    -
    2. -
  2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : - 
    Object.prototype
    -
    3. -
- -

On observe que plusieurs méthodes sont définies au niveau de l'attribut prototype d'Object, qui seront alors disponibles pour les objets qui héritent d'Object, comme nous l'avons vu plus haut.

- -

Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs prototype des objets globeaux comme String,  Date, Number, et  Array. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :

- -
var maChaine = 'Ceci est ma chaine de caracteres.';
- -

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

- -
-

Attention : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

-
- -

Revenons sur create()

- -

Nous avons vu précedemment que la méthode Object.create() pouvait être utilisée pour instancier des objets.

- -
    -
  1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : - 
    var personne2 = Object.create(personne1);
    -
    2. -
  2. En réalité create() se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, personne2 est créé à partir de personne1 qui agit en tant que prototype. Vous pouvez le vérifier via : - 
    person2.__proto__
    -
    3. -
- -

Cela renverra l'objet personne1.

- -

L'attribut constructor

- -

Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut constructor. L'attribut constructor renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut Personne.prototype deviennent disponibles pour toutes les instances créées à partir du constructeur Personne(). De cette manière, l'attribut constructor est aussi disponible au sein de personne1 et personne2.

- -
    -
  1. Par exemple, vous pouvez tester le code suivant : - 
    personne1.constructor
-personne2.constructor
    - -

    Chaque commande devrait renvoyer le constructeur Personne() étant donné qu'il a permis d'instancier ces objets.

    - -

    Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut constructor pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé new pour signifier que l'on souhaite construire un objet.

    -
    2. -
  2. Par exemple : - 
    var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);
    -
    3. -
  3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : - 
    personne3.prenom
-personne3.age
-personne3.bio()
    -
    4. -
- -

Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.

- -

L'attribut constructor possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :

- -
instanceName.constructor.name
- -

Vous pouvez essayer :

- -
personne1.constructor.name
- -

Modifions les prototypes

- -

Voyons au travers d'un exemple comment modifier l'attribut prototype d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).

- -
    -
  1. Revenons à notre exemple oojs-class-further-exercises.html et faisons une copie local du code source. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut prototype du constructeur : - - 
    Personne.prototype.aurevoir = function() {
-  alert(this.nom.prenom + ' est sorti. Au revoir !');
-}
    -
    2. -
  2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : - 
    personne1.aurevoir();
    -
    3. -
- -

Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.

- -

Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :

- -
function Personne(prenom, nom, age, genre, interets) {
-
-  // définition des attrbuts et des méthodes
-
-};
-
-var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
-
-Personne.prototype.aurevoir= function() {
-  alert(this.nom.prenom + ' est sorti. Au revoir !');
-}
- -

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

-
- -

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

- -
Personne.prototype.nomComplet = 'Bob Smith';
- -

Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :

- -
Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;
- -

Ça ne fonctionnera toujours pas. En effet, this aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors undefined undefined. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.

- -

En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :

- -
// Constructeur avec définition des attributs
-
-function Test(a, b, c, d) {
-  // définition des attributs
-};
-
-// Définition de la première méthode
-
-Test.prototype.x = function() { ... }
-
-// Définition de la seconde méthode
-
-Test.prototype.y = function() { ... }
-
-// etc...
- -

Ce type d'implémentation peut être observée dans l'appli plan d'école de Piotr Zalewa par exemple.

- -

Résumé

- -

Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.

- -

Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md new file mode 100644 index 0000000000..95663a0f7b --- /dev/null +++ b/files/fr/learn/javascript/objects/object_prototypes/index.md @@ -0,0 +1,245 @@ +--- +title: Prototypes Objet +slug: Learn/JavaScript/Objects/Object_prototypes +tags: + - Constructeur + - JavaScript + - Prototype +translation_of: Learn/JavaScript/Objects/Object_prototypes +original_slug: Learn/JavaScript/Objects/Prototypes_Objet +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+ +

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

+ + + + + + + + + + + + +
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectifs :Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.
+ +

Un langage basé sur des prototypes ?

+ +

JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un prototype objet d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou prototype chain en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.

+ +

En réalité, les méthodes et attributs sont définis dans l'attribut prototype , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.

+ +

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

+ +
+

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

+
+ +

Prenons un exemple afin de rendre cela un peu plus clair.

+ +

Comprendre les prototypes objet

+ +

Reprenons notre exemple dans lequel nous avions écrit notre constructeur Personne(). Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple oojs-class-further-exercises.html example (voir aussi le code source).

+ +

Dans cet exemple, nous avons défini un constructeur comme suit :

+ +
function Personne(prenom, nom, age, genre, interets) {
+
+  // property and method definitions
+
+};
+ +

Nous avons ensuite instancié des objets comme ceci :

+ +
var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
+ +

Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

+ +

+ +

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

+ +

+ +

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

+ +
personne1.valueOf()
+ +

Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :

+ + + +
+

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

+
+ +
+

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

+
+ +

L'attribut prototype : là où l'on définit les éléments héritables

+ +

Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation Object on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet Personne1. Pourquoi Personne1 hérite de certains de ces éléments mais pas de tous ?

+ +

Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut prototype d'Object (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous Object.prototype. et pas ceux situés juste sous Object. La valeur de l'attribut prototype est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.

+ +

Ainsi Object.prototype.watch(), Object.prototype.valueOf() …  sont disponibles pour n'importe quel objet qui hérite de Object.prototype ce qui inclus les nouvelles instances créées à partir du constructeur Personne().

+ +

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

+ +
+

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.

+
+ +
    +
  1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : + 
    Personne.prototype
    +
    2. +
  2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : + 
    Object.prototype
    +
    3. +
+ +

On observe que plusieurs méthodes sont définies au niveau de l'attribut prototype d'Object, qui seront alors disponibles pour les objets qui héritent d'Object, comme nous l'avons vu plus haut.

+ +

Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs prototype des objets globeaux comme String,  Date, Number, et  Array. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :

+ +
var maChaine = 'Ceci est ma chaine de caracteres.';
+ +

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

+ +
+

Attention : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

+
+ +

Revenons sur create()

+ +

Nous avons vu précedemment que la méthode Object.create() pouvait être utilisée pour instancier des objets.

+ +
    +
  1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : + 
    var personne2 = Object.create(personne1);
    +
    2. +
  2. En réalité create() se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, personne2 est créé à partir de personne1 qui agit en tant que prototype. Vous pouvez le vérifier via : + 
    person2.__proto__
    +
    3. +
+ +

Cela renverra l'objet personne1.

+ +

L'attribut constructor

+ +

Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut constructor. L'attribut constructor renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut Personne.prototype deviennent disponibles pour toutes les instances créées à partir du constructeur Personne(). De cette manière, l'attribut constructor est aussi disponible au sein de personne1 et personne2.

+ +
    +
  1. Par exemple, vous pouvez tester le code suivant : + 
    personne1.constructor
+personne2.constructor
    + +

    Chaque commande devrait renvoyer le constructeur Personne() étant donné qu'il a permis d'instancier ces objets.

    + +

    Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut constructor pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé new pour signifier que l'on souhaite construire un objet.

    +
    2. +
  2. Par exemple : + 
    var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);
    +
    3. +
  3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : + 
    personne3.prenom
+personne3.age
+personne3.bio()
    +
    4. +
+ +

Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.

+ +

L'attribut constructor possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :

+ +
instanceName.constructor.name
+ +

Vous pouvez essayer :

+ +
personne1.constructor.name
+ +

Modifions les prototypes

+ +

Voyons au travers d'un exemple comment modifier l'attribut prototype d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).

+ +
    +
  1. Revenons à notre exemple oojs-class-further-exercises.html et faisons une copie local du code source. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut prototype du constructeur : + + 
    Personne.prototype.aurevoir = function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}
    +
    2. +
  2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : + 
    personne1.aurevoir();
    +
    3. +
+ +

Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.

+ +

Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :

+ +
function Personne(prenom, nom, age, genre, interets) {
+
+  // définition des attrbuts et des méthodes
+
+};
+
+var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
+
+Personne.prototype.aurevoir= function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}
+ +

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

+
+ +

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

+ +
Personne.prototype.nomComplet = 'Bob Smith';
+ +

Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :

+ +
Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;
+ +

Ça ne fonctionnera toujours pas. En effet, this aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors undefined undefined. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.

+ +

En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :

+ +
// Constructeur avec définition des attributs
+
+function Test(a, b, c, d) {
+  // définition des attributs
+};
+
+// Définition de la première méthode
+
+Test.prototype.x = function() { ... }
+
+// Définition de la seconde méthode
+
+Test.prototype.y = function() { ... }
+
+// etc...
+ +

Ce type d'implémentation peut être observée dans l'appli plan d'école de Piotr Zalewa par exemple.

+ +

Résumé

+ +

Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.

+ +

Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/performance/css/index.html b/files/fr/learn/performance/css/index.html deleted file mode 100644 index f2f3f0dfa2..0000000000 --- a/files/fr/learn/performance/css/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Optimisation des performances en CSS -slug: Learn/Performance/CSS -translation_of: Learn/Performance/CSS ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}}

- -

Peindre une page non stylisée, puis la repeindre une fois les styles analysés constituerait une mauvaise expérience pour l'utilisateur. C'est pourquoi les feuilles de style CSS bloquent le rendu, sauf si le navigateur sait que les feuilles de style CSS ne sont pas nécessaires. Le navigateur peut peindre la page une fois qu'il a téléchargé le CSS et construit le modèle objet CSS. Les navigateurs suivent un chemin de rendu spécifique : la peinture n'intervient qu'après la mise en page, qui intervient après la création de l'arbre de rendu, qui nécessite à son tour les arbres DOM et CSSOM. Pour optimiser la construction du CSSOM, il faut supprimer les styles inutiles, les minifier, les compresser et les mettre en cache, et répartir les CSS qui ne sont pas nécessaires au chargement de la page dans des fichiers supplémentaires afin de réduire le blocage du rendu CSS.

- -

Optimiser le temps de bloquage du rendu

- -

Les CSS peuvent adapter les styles à des conditions particulières grâce aux requêtes média. Les requêtes média sont importantes pour une conception Web adaptative et nous aident à optimiser un chemin de rendu critique. Le navigateur bloque le rendu jusqu'à ce qu'il analyse tous ces styles, mais il ne bloque pas le rendu des styles qu'il sait qu'il n'utilisera pas, comme les feuilles de style d'impression. En divisant le CSS en plusieurs fichiers basés sur des requêtes média, vous pouvez empêcher le blocage du rendu pendant le téléchargement du CSS inutilisé. Pour créer un lien CSS non bloquant, déplacez les styles qui ne sont pas immédiatement utilisés, tels que les styles d'impression, dans un fichier distinct, ajoutez une balise HTML <link>, et ajoutez une requête média, indiquant dans ce cas qu'il s'agit d'une feuille de style d'impression.

- -
<link rel="stylesheet" href="styles.css"> <!-- bloquant -->
-<link rel="stylesheet" href="print.css" media="print"> <!-- non bloquant -->
-<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- non bloquant sur grand écran -->
- -

Par défaut, le navigateur suppose que chaque feuille de style spécifiée bloque le rendu. Indiquez au navigateur quand la feuille de style doit être appliquée en ajoutant un attribut media avec la requête média. Lorsque le navigateur voit une feuille de style, il sait qu'il n'a besoin de l'appliquer que pour un scénario spécifique, il télécharge quand même la feuille de style, mais ne rend pas le bloc. En séparant la feuille de style en plusieurs fichiers, le fichier principal bloquant le rendu, dans ce cas styles.css, est beaucoup plus petit, ce qui réduit le temps de blocage du rendu.

- -

Les animations sur le GPU

- -

Les navigateurs sont déjà optimisés pour manipuler les animations CSS, ainsi que les propriétés d'animation qui ne provoquent pas de réorganisation soudaine du document (ces autres propriétés nécessiteront alors un nouveau rendu). Cette optimisation s'effectue en plaçant les éléments animés sur un autre fil d'exécution que l'on peut alors envoyer sur le GPU, bien plus rapide pour ce genre de tâche. Pour profiter de cette optimisation, il faut alors animer de préférence avec les propriétés de transformation 3D (transform: translateZ(), rotate3d(), etc.), de transformation 2D ainsi que les propriétés opacity, position: fixed, will-change et filter. D'autres éléments, parmi lesquels <video>, <canvas> ou encore <iframe>, fonctionnent aussi sur leur propre fil d'exécution. Cette technique permet donc de tirer profit de la vitesse d'exécution du GPU pour chaque élément géré sur un nouveau fil d'exécution, et permet d'obtenir de bien meilleures performances, en particulier sur mobile.

- -

La propriété will-change

- -

La propriété CSS will-change indique au navigateur les propriétés CSS d'un élément qui sont susceptibles d'être modifiées par la suite (lors d'animations par exemple), afin que le navigateur puisse s'y préparer et optimiser ces changements. Cela permet principalement d'améliorer les performances en réalisant en amont des calculs parfois gourmands.

- -
will-change: opacity, transform;
- -

La propriété font-display

- -

Insérée dans une règle @font-face, la propriété CSS font-display permet de définir la logique de chargement et d'affichage des polices par le navigateur. Elle permet par exemple d'afficher le texte avec une police par défaut le temps que l'autre charge ou lorsque le chargement échoue. Cela permet de rendre le texte visible sans l'attente du chargement des polices, mais a pour défaut un flash brusque de changement de police une fois la ressource chargée.

- -
@font-face {
-  font-family: someFont;
-  src: url(/path/to/fonts/someFont.woff) format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: fallback;
-}
- -

Dans cet exemple, la dernière règle font-display: fallback; permet justement d'afficher le texte avec une police par défaut en attendant le chargement de la police someFont.woff.

- -

La propriété contain

- -

La propriété CSS contain permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendants du reste de l'arborescence du document. Ceci offre la possibilité au navigateur de recalculer la mise en page, le style, le rendu, la taille ou toute combinaison de ces propriétés seulement pour une portion de l'arborescence DOM, sans avoir à étendre ces calculs à la totalité de la page.

- -

Conclusion

- -

Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page :

- - - -

Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis.

- -

{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}}

- -

Dans ce module

- - - -

Voir aussi

- - diff --git a/files/fr/learn/performance/css/index.md b/files/fr/learn/performance/css/index.md new file mode 100644 index 0000000000..f2f3f0dfa2 --- /dev/null +++ b/files/fr/learn/performance/css/index.md @@ -0,0 +1,84 @@ +--- +title: Optimisation des performances en CSS +slug: Learn/Performance/CSS +translation_of: Learn/Performance/CSS +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}} {{draft}}

+ +

Peindre une page non stylisée, puis la repeindre une fois les styles analysés constituerait une mauvaise expérience pour l'utilisateur. C'est pourquoi les feuilles de style CSS bloquent le rendu, sauf si le navigateur sait que les feuilles de style CSS ne sont pas nécessaires. Le navigateur peut peindre la page une fois qu'il a téléchargé le CSS et construit le modèle objet CSS. Les navigateurs suivent un chemin de rendu spécifique : la peinture n'intervient qu'après la mise en page, qui intervient après la création de l'arbre de rendu, qui nécessite à son tour les arbres DOM et CSSOM. Pour optimiser la construction du CSSOM, il faut supprimer les styles inutiles, les minifier, les compresser et les mettre en cache, et répartir les CSS qui ne sont pas nécessaires au chargement de la page dans des fichiers supplémentaires afin de réduire le blocage du rendu CSS.

+ +

Optimiser le temps de bloquage du rendu

+ +

Les CSS peuvent adapter les styles à des conditions particulières grâce aux requêtes média. Les requêtes média sont importantes pour une conception Web adaptative et nous aident à optimiser un chemin de rendu critique. Le navigateur bloque le rendu jusqu'à ce qu'il analyse tous ces styles, mais il ne bloque pas le rendu des styles qu'il sait qu'il n'utilisera pas, comme les feuilles de style d'impression. En divisant le CSS en plusieurs fichiers basés sur des requêtes média, vous pouvez empêcher le blocage du rendu pendant le téléchargement du CSS inutilisé. Pour créer un lien CSS non bloquant, déplacez les styles qui ne sont pas immédiatement utilisés, tels que les styles d'impression, dans un fichier distinct, ajoutez une balise HTML <link>, et ajoutez une requête média, indiquant dans ce cas qu'il s'agit d'une feuille de style d'impression.

+ +
<link rel="stylesheet" href="styles.css"> <!-- bloquant -->
+<link rel="stylesheet" href="print.css" media="print"> <!-- non bloquant -->
+<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- non bloquant sur grand écran -->
+ +

Par défaut, le navigateur suppose que chaque feuille de style spécifiée bloque le rendu. Indiquez au navigateur quand la feuille de style doit être appliquée en ajoutant un attribut media avec la requête média. Lorsque le navigateur voit une feuille de style, il sait qu'il n'a besoin de l'appliquer que pour un scénario spécifique, il télécharge quand même la feuille de style, mais ne rend pas le bloc. En séparant la feuille de style en plusieurs fichiers, le fichier principal bloquant le rendu, dans ce cas styles.css, est beaucoup plus petit, ce qui réduit le temps de blocage du rendu.

+ +

Les animations sur le GPU

+ +

Les navigateurs sont déjà optimisés pour manipuler les animations CSS, ainsi que les propriétés d'animation qui ne provoquent pas de réorganisation soudaine du document (ces autres propriétés nécessiteront alors un nouveau rendu). Cette optimisation s'effectue en plaçant les éléments animés sur un autre fil d'exécution que l'on peut alors envoyer sur le GPU, bien plus rapide pour ce genre de tâche. Pour profiter de cette optimisation, il faut alors animer de préférence avec les propriétés de transformation 3D (transform: translateZ(), rotate3d(), etc.), de transformation 2D ainsi que les propriétés opacity, position: fixed, will-change et filter. D'autres éléments, parmi lesquels <video>, <canvas> ou encore <iframe>, fonctionnent aussi sur leur propre fil d'exécution. Cette technique permet donc de tirer profit de la vitesse d'exécution du GPU pour chaque élément géré sur un nouveau fil d'exécution, et permet d'obtenir de bien meilleures performances, en particulier sur mobile.

+ +

La propriété will-change

+ +

La propriété CSS will-change indique au navigateur les propriétés CSS d'un élément qui sont susceptibles d'être modifiées par la suite (lors d'animations par exemple), afin que le navigateur puisse s'y préparer et optimiser ces changements. Cela permet principalement d'améliorer les performances en réalisant en amont des calculs parfois gourmands.

+ +
will-change: opacity, transform;
+ +

La propriété font-display

+ +

Insérée dans une règle @font-face, la propriété CSS font-display permet de définir la logique de chargement et d'affichage des polices par le navigateur. Elle permet par exemple d'afficher le texte avec une police par défaut le temps que l'autre charge ou lorsque le chargement échoue. Cela permet de rendre le texte visible sans l'attente du chargement des polices, mais a pour défaut un flash brusque de changement de police une fois la ressource chargée.

+ +
@font-face {
+  font-family: someFont;
+  src: url(/path/to/fonts/someFont.woff) format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Dans cet exemple, la dernière règle font-display: fallback; permet justement d'afficher le texte avec une police par défaut en attendant le chargement de la police someFont.woff.

+ +

La propriété contain

+ +

La propriété CSS contain permet quant à elle de spécifier au navigateur qu'un élément et son contenu sont, dans la mesure du possible, indépendants du reste de l'arborescence du document. Ceci offre la possibilité au navigateur de recalculer la mise en page, le style, le rendu, la taille ou toute combinaison de ces propriétés seulement pour une portion de l'arborescence DOM, sans avoir à étendre ces calculs à la totalité de la page.

+ +

Conclusion

+ +

Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page :

+ + + +

Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis.

+ +

{{PreviousMenuNext("Learn/Performance/html", "Learn/Performance/fonts", "Learn/Performance")}}

+ +

Dans ce module

+ + + +

Voir aussi

+ + diff --git a/files/fr/learn/performance/html/index.html b/files/fr/learn/performance/html/index.html deleted file mode 100644 index 2c6ae834d6..0000000000 --- a/files/fr/learn/performance/html/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Fonctionnalités de performances liées à HTML -slug: Learn/Performance/HTML -translation_of: Learn/Performance/HTML ---- -

{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}}

- -

HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <video> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.

- - - - - - - - - - - - -
Prérequis :Bases de l'informatique, logiciels de base installés et connaissances de base des technologies web opérant côté client.
Objectifs :En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web.
- -

Éléments & attributs ayant un impact sur les performances

- - - -

Conclusion

- -

{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}

- -

Dans ce module

- - - -

Voir aussi

- - diff --git a/files/fr/learn/performance/html/index.md b/files/fr/learn/performance/html/index.md new file mode 100644 index 0000000000..2c6ae834d6 --- /dev/null +++ b/files/fr/learn/performance/html/index.md @@ -0,0 +1,82 @@ +--- +title: Fonctionnalités de performances liées à HTML +slug: Learn/Performance/HTML +translation_of: Learn/Performance/HTML +--- +

{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}} {{draft}}

+ +

HTML est par défaut rapide et accessible. Il est du devoir de toute personne développant des sites web et des applications de s'assurer que ces deux caractéristiques sont préservées lors de la création ou de la modification de code HTML. Des difficultés peuvent apparaître par exemple lorsque la taille de fichier d'un élément <video> est trop importante, ou lorsqu'une page web n'est pas optimisée pour les appareils mobiles. Ce module a pour but de présenter les fonctionnalités clés de HTML qui sont liées aux performances, et qui peuvent améliorer drastiquement la qualité de vos pages web.

+ + + + + + + + + + + + +
Prérequis :Bases de l'informatique, logiciels de base installés et connaissances de base des technologies web opérant côté client.
Objectifs :En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web.
+ +

Éléments & attributs ayant un impact sur les performances

+ + + +

Conclusion

+ +

{{PreviousMenuNext("Learn/Performance/javascript_performance", "Learn/Performance/CSS", "Learn/Performance")}}

+ +

Dans ce module

+ + + +

Voir aussi

+ + diff --git a/files/fr/learn/performance/index.html b/files/fr/learn/performance/index.html deleted file mode 100644 index 56b6ccb0f0..0000000000 --- a/files/fr/learn/performance/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Performance Web -slug: Learn/Performance -tags: - - Apprendre - - CSS - - HTML - - HTTP - - JavaScript - - Performance - - Performance Web - - TopicStub -translation_of: Learn/Performance ---- -

{{LearnSidebar}}

- -

La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de performance web, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.

- -

Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'accessibilité,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.

- -

Parcours d'apprentissage

- -

Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module Commencer avec le web.

- -

Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que:

- - - -

Une fois que vous aurez parcouru ce module, vous serez probablement ravi d'approfondir les performances Web — vous pouvez trouver de nombreux autres enseignement dans notre section principale de performance Web MDN, y compris des aperçus des API de performance, des outils de test et d'analyse, et goulots d'étranglement des performances.

- -

Guides

- -

Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les parcourir; vous devriez certainement commencer par le premier.

- -
-
Le "pourquoi" des performances Web
-
Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux.
-
Qu'est-ce que la performance Web ?
-
Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.
-
Comment les utilisateurs perçoivent-ils les performances ?
-
La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels.
-
- -
-
Mesurer les performances
-
Maintenant que vous comprenez quelques métriques de performance, nous nous penchons plus en profondeur sur les outils de performance, les métriques et les API et comment nous pouvons intégrer les performances dans le flux de travail de développement Web.
-
Multimédia: images
-
Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Il est possible de diffuser différents fichiers multimédias en fonction de la capacité, de la taille et de la densité de pixels de chaque agent utilisateur. Dans cet article, nous discutons de l'impact des images sur les performances et des méthodes pour réduire le nombre d'octets envoyés par image.
-
Multimédia: vidéo
-
Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Dans cet article, nous discutons de l'impact du contenu vidéo sur les performances, et des astuces telles que la suppression de pistes audio des vidéos d'arrière-plan peuvent améliorer les performances.
-
Meilleures pratiques en matière de performances JavaScript
-
JavaScript, lorsqu'il est utilisé correctement, peut permettre des expériences Web interactives et immersives - ou il peut considérablement nuire au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article décrit certaines bonnes pratiques JavaScript à prendre en compte pour garantir que même un contenu complexe est aussi performant que possible.
-
Fonctionnalités de performances HTML
-
Certains attributs et l'ordre source de votre balisage peuvent avoir un impact sur les performances de votre site Web. En minimisant le nombre de nœuds DOM, en vous assurant que le meilleur ordre et les meilleurs attributs sont utilisés pour inclure du contenu tel que des styles, des scripts, des médias et des scripts tiers, vous pouvez considérablement améliorer l'expérience utilisateur. Cet article examine en détail comment le HTML peut être utilisé pour garantir des performances optimales.
-
Optimisation des performances en CSS
-
Le CSS peut être un objectif d'optimisation moins important pour améliorer les performances, mais certaines fonctionnalités CSS ont un impact plus important sur les performances que d'autres. Dans cet article, nous examinons certaines propriétés CSS qui ont un impact sur les performances et suggérons des méthodes de gestion des styles pour garantir que les performances ne sont pas affectées négativement.
-
Polices et performances
-
Examinez si vous devez inclure des polices externes et, le cas échéant, comment inclure les polices dont votre conception a besoin avec le moins d'impact sur les performances de vos sites.
-
- -
-
Performances mobiles
-
L'accès Web sur les appareils mobiles étant si populaire et toutes les plates-formes mobiles ayant des navigateurs Web à part entière, mais éventuellement une bande passante, un processeur et une autonomie de batterie limités, il est important de prendre en compte les performances de votre contenu Web sur ces plates-formes. Cet article examine les considérations de performances spécifiques aux mobiles.
-
Mettre l'accent sur la performance
-
Un développeur peut faire de nombreuses choses différentes pour améliorer les performances, mais à quelle vitesse est-il assez rapide? Comment pouvez-vous convaincre les pouvoirs de l'importance de ces efforts? Une fois optimisé, comment pouvez-vous vous assurer que le ballonnement ne revient pas? Dans cet article, nous examinons des directions convaincantes, développons une culture de performance et un budget de performance, et introduisons des moyens de garantir que les régressions ne se faufilent pas dans votre base de code.
-
- -

Voir aussi

- -
-
Ressources de performance Web
-
Outre les composants frontaux des fichiers HTML, CSS, JavaScript et multimédia, il existe des fonctionnalités qui peuvent ralentir les applications et des fonctionnalités qui peuvent rendre les applications subjectivement et objectivement plus rapides. Il existe de nombreuses API, outils de développement, bonnes pratiques et mauvaises pratiques relatives aux performances Web. Ici, nous présenterons bon nombre de ces fonctionnalités au niveau de base et fournirons des liens vers des plongées plus approfondies pour améliorer les performances de chaque sujet.
-
Images responsives
-
Dans cet article, nous découvrirons le concept d'images responsives - des images qui fonctionnent bien sur des appareils avec des tailles d'écran, des résolutions et d'autres fonctionnalités très différentes - et nous examinerons les outils fournis par HTML pour les implémenter. Cela permet d'améliorer les performances sur différents appareils. Les images responsives ne sont qu'une partie du responsive design, un futur sujet CSS à apprendre.
-
Section principale des performances Web sur MDN
-
Notre section principale sur les performances Web - vous trouverez ici beaucoup plus de détails sur les performances Web, y compris des aperçus des API de performance, des outils de test et d'analyse et des problèmes de goulots d'étranglement des performances.
-
diff --git a/files/fr/learn/performance/index.md b/files/fr/learn/performance/index.md new file mode 100644 index 0000000000..56b6ccb0f0 --- /dev/null +++ b/files/fr/learn/performance/index.md @@ -0,0 +1,81 @@ +--- +title: Performance Web +slug: Learn/Performance +tags: + - Apprendre + - CSS + - HTML + - HTTP + - JavaScript + - Performance + - Performance Web + - TopicStub +translation_of: Learn/Performance +--- +

{{LearnSidebar}}

+ +

La création de sites Web nécessite HTML, CSS, et JavaScript. Pour créer des sites Web et des applications que les gens veulent utiliser, qui attirent et fidélisent les utilisateurs, vous devez créer une bonne expérience utilisateur. Une bonne expérience utilisateur consiste à s'assurer que le contenu est rapide à charger et réactif à l'interaction de l'utilisateur. Ceci est connu sous le nom de performance web, et dans ce module, vous vous concentrerez sur les principes fondamentaux de la création de sites Web performants.

+ +

Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en tenir autant que possible aux meilleures pratiques du Web telles que les performances et l'accessibilité,cependant, il est bon de se concentrer spécifiquement sur ces sujets et de s'assurer que vous les connaissez bien.

+ +

Parcours d'apprentissage

+ +

Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module Commencer avec le web.

+ +

Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que:

+ + + +

Une fois que vous aurez parcouru ce module, vous serez probablement ravi d'approfondir les performances Web — vous pouvez trouver de nombreux autres enseignement dans notre section principale de performance Web MDN, y compris des aperçus des API de performance, des outils de test et d'analyse, et goulots d'étranglement des performances.

+ +

Guides

+ +

Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les parcourir; vous devriez certainement commencer par le premier.

+ +
+
Le "pourquoi" des performances Web
+
Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux.
+
Qu'est-ce que la performance Web ?
+
Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances.
+
Comment les utilisateurs perçoivent-ils les performances ?
+
La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels.
+
+ +
+
Mesurer les performances
+
Maintenant que vous comprenez quelques métriques de performance, nous nous penchons plus en profondeur sur les outils de performance, les métriques et les API et comment nous pouvons intégrer les performances dans le flux de travail de développement Web.
+
Multimédia: images
+
Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Il est possible de diffuser différents fichiers multimédias en fonction de la capacité, de la taille et de la densité de pixels de chaque agent utilisateur. Dans cet article, nous discutons de l'impact des images sur les performances et des méthodes pour réduire le nombre d'octets envoyés par image.
+
Multimédia: vidéo
+
Le fruit le plus bas de la performance Web est souvent l'optimisation des médias. Dans cet article, nous discutons de l'impact du contenu vidéo sur les performances, et des astuces telles que la suppression de pistes audio des vidéos d'arrière-plan peuvent améliorer les performances.
+
Meilleures pratiques en matière de performances JavaScript
+
JavaScript, lorsqu'il est utilisé correctement, peut permettre des expériences Web interactives et immersives - ou il peut considérablement nuire au temps de téléchargement, au temps de rendu, aux performances dans l'application, à l'autonomie de la batterie et à l'expérience utilisateur. Cet article décrit certaines bonnes pratiques JavaScript à prendre en compte pour garantir que même un contenu complexe est aussi performant que possible.
+
Fonctionnalités de performances HTML
+
Certains attributs et l'ordre source de votre balisage peuvent avoir un impact sur les performances de votre site Web. En minimisant le nombre de nœuds DOM, en vous assurant que le meilleur ordre et les meilleurs attributs sont utilisés pour inclure du contenu tel que des styles, des scripts, des médias et des scripts tiers, vous pouvez considérablement améliorer l'expérience utilisateur. Cet article examine en détail comment le HTML peut être utilisé pour garantir des performances optimales.
+
Optimisation des performances en CSS
+
Le CSS peut être un objectif d'optimisation moins important pour améliorer les performances, mais certaines fonctionnalités CSS ont un impact plus important sur les performances que d'autres. Dans cet article, nous examinons certaines propriétés CSS qui ont un impact sur les performances et suggérons des méthodes de gestion des styles pour garantir que les performances ne sont pas affectées négativement.
+
Polices et performances
+
Examinez si vous devez inclure des polices externes et, le cas échéant, comment inclure les polices dont votre conception a besoin avec le moins d'impact sur les performances de vos sites.
+
+ +
+
Performances mobiles
+
L'accès Web sur les appareils mobiles étant si populaire et toutes les plates-formes mobiles ayant des navigateurs Web à part entière, mais éventuellement une bande passante, un processeur et une autonomie de batterie limités, il est important de prendre en compte les performances de votre contenu Web sur ces plates-formes. Cet article examine les considérations de performances spécifiques aux mobiles.
+
Mettre l'accent sur la performance
+
Un développeur peut faire de nombreuses choses différentes pour améliorer les performances, mais à quelle vitesse est-il assez rapide? Comment pouvez-vous convaincre les pouvoirs de l'importance de ces efforts? Une fois optimisé, comment pouvez-vous vous assurer que le ballonnement ne revient pas? Dans cet article, nous examinons des directions convaincantes, développons une culture de performance et un budget de performance, et introduisons des moyens de garantir que les régressions ne se faufilent pas dans votre base de code.
+
+ +

Voir aussi

+ +
+
Ressources de performance Web
+
Outre les composants frontaux des fichiers HTML, CSS, JavaScript et multimédia, il existe des fonctionnalités qui peuvent ralentir les applications et des fonctionnalités qui peuvent rendre les applications subjectivement et objectivement plus rapides. Il existe de nombreuses API, outils de développement, bonnes pratiques et mauvaises pratiques relatives aux performances Web. Ici, nous présenterons bon nombre de ces fonctionnalités au niveau de base et fournirons des liens vers des plongées plus approfondies pour améliorer les performances de chaque sujet.
+
Images responsives
+
Dans cet article, nous découvrirons le concept d'images responsives - des images qui fonctionnent bien sur des appareils avec des tailles d'écran, des résolutions et d'autres fonctionnalités très différentes - et nous examinerons les outils fournis par HTML pour les implémenter. Cela permet d'améliorer les performances sur différents appareils. Les images responsives ne sont qu'une partie du responsive design, un futur sujet CSS à apprendre.
+
Section principale des performances Web sur MDN
+
Notre section principale sur les performances Web - vous trouverez ici beaucoup plus de détails sur les performances Web, y compris des aperçus des API de performance, des outils de test et d'analyse et des problèmes de goulots d'étranglement des performances.
+
diff --git a/files/fr/learn/performance/measuring_performance/index.html b/files/fr/learn/performance/measuring_performance/index.html deleted file mode 100644 index 402e218d4c..0000000000 --- a/files/fr/learn/performance/measuring_performance/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Mesure des performances -slug: Learn/Performance/Measuring_performance -translation_of: 'Learn/Performance/Measuring_performance' ---- -
{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}
- -

La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.

- -

Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.

- -

Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.

- - - - - - - - - - - - -
Pré-requis :Bases de l'informatique, logiciels de base installés et connaissances de base des technologies web opérant côté client.
Objectif : -

Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.

-
- -

Les API de mesure des performances

- -

Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre d'API Web destinées à créer vos propres outils de mesure de performances.

- -

Vous pouvez utiliser l'API d'horodatage de navigation pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.

- -

Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais) : Prompt for unload ; redirect ; unload ; App cache ; DNS ; TCP ; Request ; Response ; Processing ; onLoad ; navigationStart ; redirectStart ; redirectEnd ; fetchStart ; domainLookupEnd ; domainLookupStart ; connectStart (secureConnectionStart) ; connectEnd ; requestStart ; responseStart ; responseEnd ; unloadStart ; unloadEnd ; domLoading ; domInteractive ; domContentLoaded ; domComplete ; loadEventStart ; loadEventEnd.

- -

L'API de performances propose un accès aux informations liées aux performances, ce qui comprend l'API de chronologie des performances, l'API d'horodatage de la navigation, l'API d'horodatage du visiteur ainsi que l'API d'horodatage des ressources. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.

- -

L'objet PerformanceEntry fait partie de la chronologie des performances. Une entrée performance peut directement être créée en utilisant {{domxref("PerformanceMark","PerformanceMark")}} ou une {{domxref("PerformanceMeasure","PerformanceMeasure")}} (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.

- -

L'API PerformanceObserver peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles entrées de performances lorsqu'elles enregistrent la chronologie des performances dans le navigateur.

- -

Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant l'horodatage de navigation pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.

- -

Outils de mesure

- -

Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :

- - - -

Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.

- -

Outils de rapport de performances génériques

- -

Les outils tels que PageSpeed Insights sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.

- -

Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :

- -

Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla.

- -

Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.

- -

webpagetest.org est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.

- -

Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.

- -

Outils réseau

- -

La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le moniteur réseau de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.

- -

- -

Vous pouvez aussi utiliser le moniteur de performances pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.

- -

- -

Conclusion

- -

Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.

- -

{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/performance/measuring_performance/index.md b/files/fr/learn/performance/measuring_performance/index.md new file mode 100644 index 0000000000..402e218d4c --- /dev/null +++ b/files/fr/learn/performance/measuring_performance/index.md @@ -0,0 +1,101 @@ +--- +title: Mesure des performances +slug: Learn/Performance/Measuring_performance +translation_of: 'Learn/Performance/Measuring_performance' +--- +
{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}
+ +

La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.

+ +

Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.

+ +

Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.

+ + + + + + + + + + + + +
Pré-requis :Bases de l'informatique, logiciels de base installés et connaissances de base des technologies web opérant côté client.
Objectif : +

Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.

+
+ +

Les API de mesure des performances

+ +

Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre d'API Web destinées à créer vos propres outils de mesure de performances.

+ +

Vous pouvez utiliser l'API d'horodatage de navigation pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.

+ +

Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais) : Prompt for unload ; redirect ; unload ; App cache ; DNS ; TCP ; Request ; Response ; Processing ; onLoad ; navigationStart ; redirectStart ; redirectEnd ; fetchStart ; domainLookupEnd ; domainLookupStart ; connectStart (secureConnectionStart) ; connectEnd ; requestStart ; responseStart ; responseEnd ; unloadStart ; unloadEnd ; domLoading ; domInteractive ; domContentLoaded ; domComplete ; loadEventStart ; loadEventEnd.

+ +

L'API de performances propose un accès aux informations liées aux performances, ce qui comprend l'API de chronologie des performances, l'API d'horodatage de la navigation, l'API d'horodatage du visiteur ainsi que l'API d'horodatage des ressources. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.

+ +

L'objet PerformanceEntry fait partie de la chronologie des performances. Une entrée performance peut directement être créée en utilisant {{domxref("PerformanceMark","PerformanceMark")}} ou une {{domxref("PerformanceMeasure","PerformanceMeasure")}} (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.

+ +

L'API PerformanceObserver peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles entrées de performances lorsqu'elles enregistrent la chronologie des performances dans le navigateur.

+ +

Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant l'horodatage de navigation pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.

+ +

Outils de mesure

+ +

Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :

+ + + +

Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.

+ +

Outils de rapport de performances génériques

+ +

Les outils tels que PageSpeed Insights sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.

+ +

Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :

+ +

Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla.

+ +

Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.

+ +

webpagetest.org est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.

+ +

Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.

+ +

Outils réseau

+ +

La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le moniteur réseau de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.

+ +

+ +

Vous pouvez aussi utiliser le moniteur de performances pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.

+ +

+ +

Conclusion

+ +

Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.

+ +

{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/performance/multimedia/index.html b/files/fr/learn/performance/multimedia/index.html deleted file mode 100644 index 56b98c3888..0000000000 --- a/files/fr/learn/performance/multimedia/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: 'Multimédia : Images' -slug: Learn/Performance/Multimedia -translation_of: Learn/Performance/Multimedia ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}
- -

Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances.

- - - - - - - - - - - - -
Pré-requis :Bases de l'informatique, logiciels de base installés et connaissances de base des technologies web opérant côté client.
Objectifs :Connaître les différents formats d'images, apprendre leur impact sur les performances et savoir comment réduire l'impact des images sur le temps de chargement général d'une page web.
- -
-

Note : Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que https://images.guide (en anglais).

-
- -

Pourquoi optimiser vos éléments multimédia ?

- -

On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos (source, en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia.

- -

Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet (source, en anglais).

- -

En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil.

- -

L'optimisation de la distribution des images

- -

Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la performance perçue et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées.

- -

Stratégie de chargement

- -

Une des plus grandes améliorations utilisable sur la plupart des sites web est le chargement différé des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple lazysizes (en anglais), mais sachez que les navigateurs travaillent sur l'attribut lazyload, qui est actuellement en phase d'expérimentation.

- -

En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez :

- - - -

Le format le plus optimisé

- -

Le format de fichier le plus optimisé dépend directement du type d'image à charger.

- -
-

Note : Pour obtenir des informations plus générales sur les types d'images, consultez le guide des types d'images et de formats d'images.

-
- -

Le format SVG est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format PNG sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence.

- -

Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements :

- - - -

SVGOMG est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe ImageOptim online ou Squoosh.

- -

Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé JPEG progressif. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. MozJPEG est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne Squoosh. Les meilleurs résultats sont obtenus avec une optimisation à 75 %.

- -

D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs.

- - - -

Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément <picture> avec l'aide d'un élément <source> équipé d'un attribut type.

- -

Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont Cloudinary et Image Engine.

- -

Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments <img> et <picture>. Ces éléments vous permettent aussi d'utiliser des WebP animés pour tous les autres navigateurs modernes.

- -
<picture>
-   <source type="video/mp4" src="giphy.mp4">
-   <source type="image/webp" src="giphy.webp">
-   <img src="giphy.gif">
-</picture>
- -

Servir la taille optimale

- -

Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans Retina). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments <picture> et <source> avec les attributs media et/ou sizes. Un article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais).

- -

Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI :

- - - -

Contrôler la priorité (et l'ordre) de téléchargement des images

- -

Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site.

- -

La première chose à vérifier est que vos images de contenu utilisent bien des éléments <img> ou <picture>, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS background-image. sachez que les images référencées avec les éléments <img> ou <picture> ont une priorité de chargement plus importante que les images d'arrière-plan.

- -

Deuxièmement, avec l'adoption progressive des indices de priorité (API Priority Hints), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut importance sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes.

- -

Stratégie de rendu

- -

Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un reflow du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs width et height pour que le navigateur puisse réserver de l'espace pour la mise en page des images.

- -

Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété background-color pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée.

- -

Conclusion

- -

Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante.

- -

{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/performance/multimedia/index.md b/files/fr/learn/performance/multimedia/index.md new file mode 100644 index 0000000000..56b98c3888 --- /dev/null +++ b/files/fr/learn/performance/multimedia/index.md @@ -0,0 +1,144 @@ +--- +title: 'Multimédia : Images' +slug: Learn/Performance/Multimedia +translation_of: Learn/Performance/Multimedia +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}
+ +

Les fichiers média, et plus précisément les images et les vidéos, représentent plus de 70 % des octets téléchargés sur un site web classique. En termes de performance lors du téléchargement des ressources d'une page, la suppression des fichiers média et la réduction de la taille des fichiers est la solution de facilité pour produire des sites performants. Cet article s'intéresse à l'optimisation des images et des vidéos dans le but d'améliorer les performances.

+ + + + + + + + + + + + +
Pré-requis :Bases de l'informatique, logiciels de base installés et connaissances de base des technologies web opérant côté client.
Objectifs :Connaître les différents formats d'images, apprendre leur impact sur les performances et savoir comment réduire l'impact des images sur le temps de chargement général d'une page web.
+ +
+

Note : Cet article est une introduction à l'optimisation des éléments multimédia sur le web, couvrant les principes généraux et les techniques de base. Pour aller plus loin, consultez des ressources plus spécialisées, telles que https://images.guide (en anglais).

+
+ +

Pourquoi optimiser vos éléments multimédia ?

+ +

On considère que pour un site classique, en moyenne 51 % de la bande passante utilisée provient des images, et 25 % provient des vidéos (source, en anglais). Il est donc raisonnable de dire qu'il est important de porter une attention particulière à l'optimisation du contenu multimédia.

+ +

Il est aussi important de prendre en considération la consommation de données. De nombreuses personnes utilisent des forfaits de connexion internet limités voir même des connexions facturées à la donnée téléchargée, où chaque octet de données consommé est facturé. Et cela ne concerne pas que les pays émergents. En 2018, 24 % des habitants du Royaume-Uni utilisaient ce type de connexion internet (source, en anglais).

+ +

En outre, il est important de prendre en compte la mémoire utilisée, car de nombreux appareils mobiles ont une RAM limitée. N'oubliez pas que quand les images sont téléchargées, elles sont stockées dans la mémoire vive de l'appareil.

+ +

L'optimisation de la distribution des images

+ +

Bien qu'il s'agisse de l'élément consommant le plus de bande passante, l'impact du téléchargement des images sur la performance perçue et largement moins important que ce à quoi l'on pourrait s'attendre, principalement du fait que le contenu de la page est téléchargé immédiatement et que les personnes qui visitent le site voient les images s'afficher au fur et à mesure du chargement. Mais si l'on veut proposer la meilleure expérience possible, il reste important d'afficher le plus tôt possible des images complètement chargées.

+ +

Stratégie de chargement

+ +

Une des plus grandes améliorations utilisable sur la plupart des sites web est le chargement différé des images se situant en dessous de la ligne de flottaison, plutôt que de toutes les téléchargées directement sans se soucier de l'emplacement où elles se trouvent par rapport à l'écran de la personne qui visite le site (elle pourrait même ne jamais faire défiler son écran jusqu'à certaines images situées plus bas dans la page !). Plusieurs bibliothèques JavaScript peuvent implémenter cela pour vous, par exemple lazysizes (en anglais), mais sachez que les navigateurs travaillent sur l'attribut lazyload, qui est actuellement en phase d'expérimentation.

+ +

En plus de charger un sous-ensemble d'images, vous devriez ensuite vous attarder sur les formats d'images que vous utilisez :

+ + + +

Le format le plus optimisé

+ +

Le format de fichier le plus optimisé dépend directement du type d'image à charger.

+ +
+

Note : Pour obtenir des informations plus générales sur les types d'images, consultez le guide des types d'images et de formats d'images.

+
+ +

Le format SVG est le plus approprié pour les images qui ne comprennent que quelques couleurs et qui n'ont pas la complexité d'une photographie. Cela nécessite la mise à disposition d'une source dans un format vectoriel. Si cette image n'est disponible qu'en format bitmap, alors le format PNG sera la solution de repli idéale. De bons exemples d'images idéalement fournies en SVG sont les logos, les illustrations, les graphiques ou les icônes (veuillez noter qu'il vaut mieux utiliser des images au format SVG que des polices d'icônes !). Qu'il s'agisse de SVG ou de PNG, les deux formats prennent en charge la transparence.

+ +

Les images peuvent être enregistrées au format PNG à l'aide de trois différentes combinaison de traitements :

+ + + +

SVGOMG est un bon outil pour optimiser les SVG en ligne. Pour les PNG il existe ImageOptim online ou Squoosh.

+ +

Pour les motifs photographiques qui ne contiennent pas de transparence, il y a un grand nombre de formats disponibles. Si vous voulez jouer la sécurité, alors optez pour le format compressé JPEG progressif. Par rapport aux JPEG normaux, les JPEG progressifs s'affichent progressivement (d'où le nom) ce qui veut dire que le visiteur verra d'abord une version basse résolution, puis l'image gagnera en clarté au fur et à mesure que l'image se charge, au lieu de devoir attendre que l'image soit complètement chargée de haut en bas avant qu'elle ne puisse s'afficher. MozJPEG est un bon outil de compression. Il est utilisé par l'outil d'optimisation d'images en ligne Squoosh. Les meilleurs résultats sont obtenus avec une optimisation à 75 %.

+ +

D'autres formats proposent des compressions encore plus efficaces que le format JPEG, mais ils ne sont pas toujours compatibles avec tous les navigateurs.

+ + + +

Compte-tenu de la faible prise en charge de JPEG-XR et de JPEG2000 et en prenant en compte les coûts de décodage dans l'équation, le seul format pouvant concurrencer sérieusement JPEG est le format WebP. C'est la raison pour laquelle vous devriez envisager de l'utiliser, pour les navigateurs qui le supportent. Cela peut être fait en utilisant l'élément <picture> avec l'aide d'un élément <source> équipé d'un attribut type.

+ +

Si tout cela vous semble un peu trop compliqué ou si vous pensez que cela vous demandera trop de travail, sachez qu'il existe des services en ligne que vous pouvez utiliser en tant que CDN d'images et qui vont servir automatiquement et à la volée le bon format d'image, en fonction du type d'appareil ou de navigateur demandant l'affichage de l'image. Les CDN d'images les plus importants sur le marché sont Cloudinary et Image Engine.

+ +

Pour finir, si vous avez besoin d'afficher des images animées sur votre page, sachez que Safari permet l'utilisation de fichiers vidéo à l'intérieur des éléments <img> et <picture>. Ces éléments vous permettent aussi d'utiliser des WebP animés pour tous les autres navigateurs modernes.

+ +
<picture>
+   <source type="video/mp4" src="giphy.mp4">
+   <source type="image/webp" src="giphy.webp">
+   <img src="giphy.gif">
+</picture>
+ +

Servir la taille optimale

+ +

Dans le monde de la livraison d'images, l'approche « universelle » n'est pas celle qui donne les meilleurs résultats. En effet, pour les plus petits écrans, vous pourriez vouloir servir des images avec une résolution plus petite, et inversement pour les écrans les plus larges. En plus de cela, vous pourriez avoir envie de servir des images de haute résolution aux appareils qui ont un écran le plus de DPI (comme les écrans Retina). Ainsi, sauf si vous créez de nombreuses variations intermédiaires de vos images, vous allez aussi avoir besoin d'un moyen de servir le bon fichier pour le bon navigateur. Vous pouvez pour cela agrémenter vos éléments <picture> et <source> avec les attributs media et/ou sizes. Un article détaillé sur la combinaison de ces attributs peut être trouvé ici (en anglais).

+ +

Deux effets intéressants sont à garder en tête concernant les écrans à haut niveau de DPI :

+ + + +

Contrôler la priorité (et l'ordre) de téléchargement des images

+ +

Les images les plus importantes doivent être affichées le plus rapidement possible aux personnes visitant votre site, afin d'améliorer la performance qu'ils perçoivent de votre site.

+ +

La première chose à vérifier est que vos images de contenu utilisent bien des éléments <img> ou <picture>, et que vos images d'arrière-plan sont bien définies à l'aide de la propriété CSS background-image. sachez que les images référencées avec les éléments <img> ou <picture> ont une priorité de chargement plus importante que les images d'arrière-plan.

+ +

Deuxièmement, avec l'adoption progressive des indices de priorité (API Priority Hints), vous pouvez aller plus loin dans le contrôle de la priorité en utilisant un attribut importance sur vos balises d'images. Un cas d'utilisation concret pour l'utilisation des indices de priorité sont les diaporamas d'images où on mettra une priorité plus haute sur la première image que sur les suivantes.

+ +

Stratégie de rendu

+ +

Comme les images sont chargées de façon asynchrone et continuent à charger après la première peinture de la page, un reflow du contenu de la page peut survenir si leurs dimensions ne sont pas définies avant le chargement. C'est par exemple le cas lorsque le texte se fait repousser vers le bas au chargement des images. Pour cette raison, il est très important de mettre en place des attributs width et height pour que le navigateur puisse réserver de l'espace pour la mise en page des images.

+ +

Pour les images d'arrière-plan, il est important de mettre en place une valeur pour la propriété background-color pour que le contenu éventuellement affiché par-dessus l'image soit lisible même avant que l'image ne soit chargée.

+ +

Conclusion

+ +

Dans cette section nous avons vu l'optimisation des images. Vous avez maintenant une compréhension générale de la façon d'optimiser la bande passante de la moitié des sites web. Ce n'est qu'un des types d'optimisation consommant la bande passante des visiteurs et ralentissant le chargement des pages. Dans le prochain article, nous verrons l'optimisation du critère responsable de 20 % de la consommation de bande passante.

+ +

{{PreviousMenuNext("Learn/Performance/measuring_performance", "Learn/Performance/video", "Learn/Performance")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/performance/why_web_performance/index.html b/files/fr/learn/performance/why_web_performance/index.html deleted file mode 100644 index 30d21bd82a..0000000000 --- a/files/fr/learn/performance/why_web_performance/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Le "pourquoi" des performances Web -slug: Learn/Performance/why_web_performance -tags: - - Apprendre - - Débutant - - Introduction - - Performance - - Performance Web - - Reference - - Tutoriel -translation_of: Learn/Performance/why_web_performance -original_slug: Learn/Performance/pourquoi_performance_web ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}
- -

La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique, installation des outils de base, et connaissances de base des technologies Web côté client.
Objectif:Connaître les raisons pour lesquelles les performances Web sont importantes pour une bonne expérience utilisateur.
- -

Les performances Web font référence à la rapidité avec laquelle le contenu du site se charge et s'affiche dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela.

- -

Pourquoi se soucier de la performance?

- -

Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'accessibilité web. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.

- -

À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.

- - - -

Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec DOMContentLoaded (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.

- -

Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir combien coûte le téléchargement de votre site.)

- -

Améliorer les taux de conversion

- -

La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.

- -

Un taux de conversion est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web.

- -

La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes.

- -

La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.

- -

Voici quelques exemples concrets d'améliorations des performances:

- - - -

Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.

- -

Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir performance budgets).

- -

Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!

- -

Conclusion

- -

Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web.

- -

{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/performance/why_web_performance/index.md b/files/fr/learn/performance/why_web_performance/index.md new file mode 100644 index 0000000000..30d21bd82a --- /dev/null +++ b/files/fr/learn/performance/why_web_performance/index.md @@ -0,0 +1,100 @@ +--- +title: Le "pourquoi" des performances Web +slug: Learn/Performance/why_web_performance +tags: + - Apprendre + - Débutant + - Introduction + - Performance + - Performance Web + - Reference + - Tutoriel +translation_of: Learn/Performance/why_web_performance +original_slug: Learn/Performance/pourquoi_performance_web +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}
+ +

La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique, installation des outils de base, et connaissances de base des technologies Web côté client.
Objectif:Connaître les raisons pour lesquelles les performances Web sont importantes pour une bonne expérience utilisateur.
+ +

Les performances Web font référence à la rapidité avec laquelle le contenu du site se charge et s'affiche dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela.

+ +

Pourquoi se soucier de la performance?

+ +

Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'accessibilité web. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.

+ +

À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.

+ + + +

Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec DOMContentLoaded (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.

+ +

Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir combien coûte le téléchargement de votre site.)

+ +

Améliorer les taux de conversion

+ +

La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.

+ +

Un taux de conversion est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web.

+ +

La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes.

+ +

La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.

+ +

Voici quelques exemples concrets d'améliorations des performances:

+ + + +

Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.

+ +

Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir performance budgets).

+ +

Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!

+ +

Conclusion

+ +

Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web.

+ +

{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/django/admin_site/index.html b/files/fr/learn/server-side/django/admin_site/index.html deleted file mode 100644 index af9b0309f9..0000000000 --- a/files/fr/learn/server-side/django/admin_site/index.html +++ /dev/null @@ -1,372 +0,0 @@ ---- -title: 'Django didactique Section 4: Site d''administration de Django' -slug: Learn/Server-side/Django/Admin_site -tags: - - Apprentissage - - Article - - Didacticiel - - Débutant - - Python - - django - - django_admin -translation_of: Learn/Server-side/Django/Admin_site ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
- -

Nous avons créé le modèle de données pour le site web de la bibliothèque locale. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.

- - - - - - - - - - - - -
Pré-requis:Avoir complété Django didactique Section 3: Utilisation des modèles de données
Objectif:Comprendre les avantages et les limites du site d'administration de Django. Utiliser ce site pour enregistrer des données pour les objets créés dans le chapitre précédent.
- -

Survol

- -

Le site d'administration et l'application admin associée de Django peut utiliser les objets déclarés du modèle de données pour réaliser automatiquement un espace de publications, de création, de mise à jour ou de suppression d'enregistrements. Cet outil permet d'économiser du temps pendant les développements et de tester rapidement le modèle de données et par voie de conséquence de vérifier la disponibilité des données et la cohérence du modèle créé. En fonction de votre type d'application web, le site d'administration peut aussi servir à gérer les données du site en production. Comme une approche centrée sur le modèle de données n'est pas appropriée à une présentation utilisateur, les concepteurs de Django recommandent de ne se servir de ce site que pour une administration interne des données (c'est-à-dire, juste pour les administrateurs techniques ou fonctionnels de l'application).

- -

Quand nous avons créé le squelette du projet, nous avons généré automatiquement toute ce qui était nécessaire à son administration au sein de l'application web (le détail des relations en jeux sont décrites sur le site documentaire Django). Au final, vous n'aurez juste qu'à ajouter vos modèles dans l'administration du site en les enregistrant. A la fin de ce chapitre, vous aurez des pistes sur l'une des manière d'améliorer l'affichage des données dans la zone d'administration.

- -

Passons aux actes ! Après l'enregistrement des objets du modèle relationnel, nous verrons comment créer un super-utilisateur, s'authentifier et ensuite créer quelques livres, auteurs et ouvrages à la disposition des lecteurs. Ces données seront très utiles pour tester ensuite les vues et gabarits qui seront abordés dans les chapitres suivants.

- -

Enregistrer les objets de la modélisation

- -

En premier lieu, il faut editer le fichier admin.py de l'application catalog (c'est-à-dire le fichier ./locallibrary/catalog/admin.py). Il devrait ressembler à celui ci-dessous — notez qu'il contient d'ores et déjà l'import du module django.contrib.admin:

- -
from django.contrib import admin
-
-# Register your models here.
-
- -

L'enregistrement de objets de modélisation se fait par l'appel de la fonction admin.site.register comme indiqué ci-dessous. Il vous suffit pour le moment de copier le texte ci-dessous et de l'ajouter à la fin du fichier.Register the models by copying the following text into the bottom of the file.

- -
from catalog.models import Author, Genre, Book, BookInstance
-
-admin.site.register(Book)
-admin.site.register(Author)
-admin.site.register(Genre)
-admin.site.register(BookInstance)
-
- -
-

Note : Si vous avez répondu au défi de la modelisation des langues des livres (voir le chapitre précédent sur les modèles de données), vous pouvez aussi importer cet objet !

-

Cela devrait être de la forme : admin.site.register(Language) et n'oubliez pas d'importer l'objet.

-
- -

C'est la méthode la plus rapide et la plus simple pour enregistrer un ou plusieurs modèles. Le site d'administration est très adaptable et nous aborderons plus loin ces questions.

- -

Générer un super-utilisateur

- -

Pour acceder au site d'administration, il est necessaire de s'authentifier avec un utilisateur qui dispose du statut Statut d'équipe activé. Afin de visualiser et créer des enregsitrement, vous aurez aussi besoin de disposer de droits de manipulation des obejts. A ce stade, vous pouvez créer à l'aide du fichier manage.py un super-utilisateur qui dispose de tous les droits et permissions.

- -

Exécutez la commande python ci-dessous qui appelle le fichier manage.py en étant dans le même dossier que le fichier (c'est-à-dire ./locallibrary/), pour créer le super-utilsiateur. La commande va vous demander de répondre le nom d'utilsiateur, l'adresse mail et un mot de passe fort.

- -
python3 manage.py createsuperuser
-
- -

Une fois cette étape réalisée, vous pouvez redémarrer le serveur de développement :

- -
python3 manage.py runserver
-
-
- -

Accéder et utiliser le site admin

- -

Pour vous authentifier au site, ouvrez l'URL /admin du site local (concrètement, http://127.0.0.1:8000/admin) et identifiez vous avec votre compte de super-utilisateur.

- -
-

Note : Vous serez redirigé⋅e vers l'application interne à Django de gestion de l'authentification et la pages de demande d'authentitification avant d'accéder réellement au site d'administration.

- -

Si vous accéder au site local sans /admin, vous aurez un message d'erreur car les routages d'URL n'ont pas encore été traité. ne vous en inquiétez pas cela va venir...

-
- -

Cet partie du site affiche tous les modèles définis et déclarés dans le fichier de contrôle de l'administration du site. Les objets sont regroupés par application (pour notre cas, uniquement l'application Catalog à cette étape des travaux). Vous pouvez cliquez sur chacun des noms d'objet publiés pour accéder à l'écran qui gère les informations sur les objets de ce type contenu en base de données et vous pouvez les éditer et les modifier. Vous pouvez aussi cliquer sur le lien + Ajouter pour créer un nouvel enregistrement.

- -

Admin Site - Home page

- -

Cliquez sur le lien + Ajouter à la droite de l'objet Books pour créer un nouveau livre. Le site va afficher une page de saisie de données (analogue à celle ci-dessous). Notez que Django prend en compte le type de champs définit dans le modèle pour utiliser le widget associé ainsi que le champs help_text quand vous l'aviez défini. 

- -

Entrez les valeurs des champs. Pour les champs qui relèvent de relations entre objet, vous pouvez utiliser le bouton + pour accéder en cascade au formulaire de saisie des informations nécessaires à la créarion de cette objet. Vous pouvez aussi sélectionner un objet si d'autres avaient été créés précédement. Ne pas oublier de cliquer sur Enregistrer et ajouter un nouveau ou Enregistrer et continuer les modification pour sauvegarder en base de données les informations saisies.

- -

Admin Site - Book Add

- -
-

Note : À ce stade, prenez le temps d'enregistrer plusieurs livres, genres et auteurs. Assurez-vous que chacun est associé à plusieurs autres éléments cela rendra vos listes à venir plus riches et intéressantes quand nous aborderons ces sujets.

-
- -

Après avoir saisie les informations et ajouté vos livres, cliquez sur le lien Accueil pour revenir à la page principale du site d'administration. Cliquez sur le lien Books pour afficher la liste des livres enregistrés (ou sur d'autres liens pour voir les autres objets présents en base). Après avoir ajouter quelques livres, votre page devrait ressembler à celle ci-dessous. La liste des livres est affichée par titre ; c'est, en fait, la valeur délivrée par la méthode __str__() du modèle d'objet Book comme cela a été codé dans le précédent chapitre.

- -

Admin Site - List of book objects

- -

À partir de la liste affichée, vous pouvez supprimer des instances en selectionnant les items par les cases à cocher à gauche du titre puis supprimer... dans la liste des actions proposée puis en cliquant sur Envoyer. Vous pouvez aussi ajouter des livres en cliquant sur AJOUTER BOOK.

- -

Vous pouvez editer un livre en cliquant son nom sur la liste des ouvrages. La page d'édition, image ci-dessous, est proche de celle d'ajout d'un livre. Les principales différences sont le titre de la page (Modification de book, au lieu d'ajout de bbok), l'ajout en rouge du bouton supprimer, l'historique des modifications et voir sur le site. Ce dernier bouton est visible car nous créer la méthode get_absolute_url() dans la définition du modèle de données (à ce stade, une erreur sera provoquée si vous cliquez sur ce bouton).

- -

Admin Site - Book Edit

- -

Revenez à la page d'accueil (à l'aide du lien Accueil du fil d'Ariane), puis affichez les listes des Authors et des Genres. Vous devriez déjà en avoir créé un certain nombre à partir de l'ajout des nouveaux livres, mais n'hésitez pas à en ajouter d'autres.

- -

Ce qui manque actuellement ce sont des Book Instances. Vous n'en avez pas car elles ne sont pas créées à partir des objets Books (bien que vous pourriez créer un objet Book à partir d'un objet BookInstance car c'est la nature de la relation ForeignKey). Retournez à la page d'acceuil et cliquez sur le bouton Ajouter associé aux objets Book Instance et accéder à l'écran de création. Vous pouvez noter le très grand identifiant unique global utilisé pour identifier séparelment les ouvrages.

- -

Admin Site - BookInstance Add

- -

Créez plusieurs de ces enregistrements pour chacun de vos livres. Définissez un statut Available (Disponible) pour certains d'entre eux et On loan (Prêt) pour d’autres. Pour un statut différent de Available, vous devrez préciser une date d'échéance à venir.

- -

Nous avons terminé cette étape ! Vous savez comment configurer et utiliser le site d'administration. Vous pouvez continuer à créer des enregistrements pour Book, BookInstance, Genre et Author, que nous pourrons utiliser une fois que nous aurons créé nos propres vues de détail.

- -

Configuration avancée

- -

La cadriciel Django réalise une excellente assistance avec la création d'un site d'administration de base en utilisant les données des enregistrements effectués :

- - - -

mais vous avez la possibilité de personnaliser le comportement du site d'administration. Vous allez pouvoir notamment faire :

- - - -

Dans la section qui suit, nous allons effectuer quelques modification pour améliorer l'interface de votre application LocalLibrary. Nous allons notamment ajouter des informations pour les objets Book et Author, et améliorer la présentation de leur vue d'édition. Il n'y aura pas de changement pour les objets Language et Genre qui ne possèdent pas assez d'information pour que cela puisse avoir une incidence réelle !

- -

Le détail complet de la personnalisation du site d'administration est disponible sur le site documentaire de Django.

- -

Enregistrer un objet de la classe ModelAdmin

- -

Pour modifier la manière d'afficher un objet hérité de la classe Model dans l'interface d'administration, vous devez définir une classe d'objet héritée de la classe ModelAdmin qui décrit l'affichage d'un objet et de l'enregistrer avec votre objet Model.

- -

Commençons avec l'objet Author. Éditez le fichier admin.py dans le dossier catalog de l'application(concrètement le fichier /locallibrary/catalog/admin.py). Commentez la ligne qui vous a permis d'enregistrer l'objet Author :

- -
# admin.site.register(Author)
- -

Ensuite ajoutez une nouvelle classe d'objets AuthorAdmin et enregistrez-le comme indiqué ci-dessous.

- -
# Define the admin class
-class AuthorAdmin(admin.ModelAdmin):
-    pass
-
-# Register the admin class with the associated model
-admin.site.register(Author, AuthorAdmin)
-
- -

Ensuite nous allons opérer de manière analogue avec un objet hérité de ModelAdmin pour les objets Book, et BookInstance. À nouveau, nous commentons les enregistrements initiaux :

- -
# admin.site.register(Book)
-# admin.site.register(BookInstance)
- -

Puis nous créons et enrgistrons les nouveaux modèles. Pour les besoins de l'exercice, nous allons utiliser, pour enregistrer ces modèles, le décorateur @register qui réalise la même opération que la méthode admin.site.register() :

- -
# Register the Admin classes for Book using the decorator
-@admin.register(Book)
-class BookAdmin(admin.ModelAdmin):
-    pass
-
-# Register the Admin classes for BookInstance using the decorator
-@admin.register(BookInstance)
-class BookInstanceAdmin(admin.ModelAdmin):
-    pass
-
- -

Pour le moment, toutes les classes d’administration sont vides (cf. pass), par conséquent le comportement d'affichage n'est pas modifié. Cependant, nous allons pouvoir désormais modifier les comportements d'affichage pour chacun des objets nouvellement enregistrés.

- -

Configurer les vues en liste

- -

La liste des auteurs (objet Author) est affichée dans l'application LocalLibrary à l'aide du nom généré par la méthode  __str__(). Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive list_display pour ajouter d'autres champs de l'objet Author.

- -

Modifiez votre classe AuthorAdmin comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet Author.

- -
class AuthorAdmin(admin.ModelAdmin):
-    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
-
- -

Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir une page équivalente à celle ci-dessous :

- -

Admin Site - Improved Author List

- -

Pour les livres, nous allons visulaiser les objets  Book en affichant les champs author and genre. Le champs author est de type ForeignKey décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode __str__() de l'objet Author pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe BookAdmin comme suit :

- -
class BookAdmin(admin.ModelAdmin):
-    list_display = ('title', 'author', 'display_genre')
-
- -

Le champ genre représente une relation n à n (ManyToManyField) qui ne peut pas être prise en charge par la directive list_display. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(display_genre) qui permettra de traiter l'affichage des informations souhaitées pour le genre.

- -
-

Note : C'est dans un but pédagogique que nous recherchons ici l'affichage du genre qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications  — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.

-
- -

Ajoutez le code ci-dessous dans votre modèle d'objet Book (concrètement dans le fichier locallibrary/catalog/models.py). Cette fonction génère une chaîne de caractère contenant les trois premières valeurs de tous les genres (s'ils existent) et créer une courte destription (short_description) qui sera utilisé par le site d'administration avec cette méthode.

- -
    def display_genre(self):
-        """Create a string for the Genre. This is required to display genre in Admin."""
-        return ', '.join(genre.name for genre in self.genre.all()[:3])
-
-    display_genre.short_description = 'Genre'
-
- -

Après avoir sauvegardé vos fichiers models.py et admin.py, vous pouvez accéder à la page web d'administration des livres et vous y découvrirez une page semblable à celle ci-dessous :

- -

Admin Site - Improved Book List

- -

Les champs Genre Language ne dispose que d'une seule valeur. Il n'est donc pas utile de créer une page d'affichage spélicale.

- -
-

Note : Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt BookInstance !

-
- -

Ajouter des filtres

- -

Si vous avez beaucoup d'éléments à l'affichage des listes, il devient utile de d'appliquer des filtres pour les afficher. Ceci est réalisé avec l'attribut list_filter de la classe ModelAdmin. Modifier votre classe d'objet d'affichage BookInstanceAdmin avec les code ci-dessous :

- -
class BookInstanceAdmin(admin.ModelAdmin):
-    list_filter = ('status', 'due_back')
-
- -

La page de la vue en liste des ouvrages à consultation (BookInstance) est désormais agrémentée d'un bloc de filtrage par statut (champs status) et date de retour (due back). Vous pouvez sélectionner la valeur de ces deux critères de filtrage (remarquez la manière avec laquelle les valeurs des critères est proposée).

- -

Admin Site - BookInstance List Filters

- -

Organiser la vue d'affichage d'un modèle

- -

La vue est agencée, par défaut, en affichant verticalement dans l'ordre de déclaration des champs de l'objet modèle. Cette règle d'affichage peut être modifiée en indiquant quels champs afficher (ou exclure) et organiser les informations en sections avec un affichage horizontal ou vertical et les widgets à utiliser.

- -
-

Note : Les modèles de l'application LocalLibrary ne sont pas très compliqués sans énormément d'information à traiter. Il n'y a pas un grand besoin de changement d'affichage ; les éléments ci-dessous sont données pour avoir une idée des possibilités et savoir, le moment venu, comment faire.

-
- -

Contrôler l'affichage et la dispostion des champs

- -

Modifiez votre classe d'objet AuthorAdmin en ajoutant l'attribut fields comme indiqué en gras ci-dessous :

- -
class AuthorAdmin(admin.ModelAdmin):
-    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
-    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
-
- -

Ce champ (fields) contrôle l'affichage des champs. Les champs déclarés sont affichés verticalement dans l'ordre de déclaration et seront affichés en groupe horizontalement s'ils sont déclarés dans un tuple (c'est le cas pour les date de naissance et de décès des auteurs).

- -

La page web de votre application locale devrait ressembler à celle ci-dessous :

- -

Admin Site - Improved Author Detail

- -
-

Note : Vous pouvez aussi utiliser l'attribut exclude pour identifier des attributs du modèle que vous souhaitez exclure de l'affichage (les autres attributs seront alors affichés). Pour plus de détails vous pouvez consulter la documentation Django sur l'attribut exclude.

-
- -

Organiser des sections dans votre vue de détail

- -

Vous avez la possibilité de créer des sections à l'affichage pour regrouper des éléments à renseigner en utilisant l'attribut fieldsets.

- -

Nous allons utiliser l'objet BookInstance pour mettre en avant cette possibilité. Nous avons à afficher des informations sur l'ouvrage (nom, édition, id) et sur sa disponibilité actuelle ou à venir (statut et retour de prêt). Nous choisissons d'afficher ces éléments dans deux sections différentes, l'une nommée et l'autre pas. Modifiez l'objet BookInstanceAdmin avec le texte en gras comme ci-dessous :

- -
@admin.register(BookInstance)
-class BookInstanceAdmin(admin.ModelAdmin):
-    list_filter = ('status', 'due_back')
-
-    fieldsets = (
-        (None, {
-            'fields': ('book', 'imprint', 'id')
-        }),
-        ('Availability', {
-            'fields': ('status', 'due_back')
-        }),
-    )
- -

Chaque section peut avoir un titre (ou aucun si vous indiquez la valeur None) et des champs regroupés à l'aide de tuples enregistrés dans un dictionnaire — le schéma de déclaration peut paraître compliqué à décrire mais assez aisé à comprendre à la lecture du code ci-dessus formaté pour être plus compréhensible.

- -

Le résultat de cette description devrait vous apparaître de manière analogue à celle présente  ci-dessous :

- -

Admin Site - Improved BookInstance Detail with sections

- -

Publier des enregistrements associés

- -

Parfois, il peut être très utile d'ajouter à l'affichage des éléments associés en même temps. C'est le cas, par exemple, pour les copies d'ouvrage associés à un livre en bibliothèque. Il est utile pour le bibliothécaire de disposer à la fois des informations sur le livre et des copies présentes ou non en rayonnage..

- -

Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal (TabularInline) ou vertical (StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle BookInstance dans le fichier admin.py pour disposer des informations inline à l'affichage des informations sur votre objet Book. Gardez en mémoire que c'est l'objet  BookAdmin qui gère l'affichage les informations de l'objet Book; c'est donc BookAdmin il doit donc être modifié :

- -
class BooksInstanceInline(admin.TabularInline):
-    model = BookInstance
-
-@admin.register(Book)
-class BookAdmin(admin.ModelAdmin):
-    list_display = ('title', 'author', 'display_genre')
-    inlines = [BooksInstanceInline]
-
- -

Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées :

- -

Admin Site - Book with Inlines

- -

Dans le cas présent nous avons juste décidé d'afficher toutes les informations des copies associées à un livre. Si vous consultez sur la documentation Django les informations relatives au type TabularInline vous aurez accès à l'ensemble des éléments qui permettent de filtrer et afficher les éléments dont vous aurez besoin. 

- -
-

Note : Il y a quelques limitations pénibles à ces outils. Si vous observez bien la liste des copies pour un ouvrage, vous decouvrirez des copies fantômes sans nom et informations pré-reservées pour de futures instances à enregistrer. Il serait préférable de ne pas les avoir et vous devriez alors appliquer un filtre pour éliminer de l'affichage ces copies. Vous pourriez aussi ajouter une section particulière pour permettre d'ajouter de nouvelles copies dans les rayonnages... La première solution est assez rapide à traiter en utilisant l'attribut extra à 0 dans la définition de l'objet BooksInstanceInline ... essayez !

-
- -

Défi

- -

Beaucoup de sujets ont été abordés dans ce chapitre, c'est l'occasion de les mettre en application :

- -
    -
  1. Améliorer l'affichage des objets BookInstance, ajoutez les éléments nécessaire pour disposer du livre, du statut de la date de fin de prêt et de l'identifiant au lieu du code unique et du titre donné par la méthode __str__() de l'objet.
    2. -
  2. Ajouter une information associée pour disposer du détail des informations sur l'auteur. Appuyez vous sur l'exemple avec les objets Book/BookInstance pour y parvenir.
    3. -
- - - -

Résumé

- -

Beaucoup de sujets ont été abordés dans ce chapitre... Vous avez acquis les base du site d'administration et à créer un suoper-utilisateur, voius avez aussi navigué dans le site d'admlinistration et vous avez appris à modifier les formulaires de saisie et comment ajouter, modifier ou supprimer des données.

- -

A voir aussi

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/django/admin_site/index.md b/files/fr/learn/server-side/django/admin_site/index.md new file mode 100644 index 0000000000..af9b0309f9 --- /dev/null +++ b/files/fr/learn/server-side/django/admin_site/index.md @@ -0,0 +1,372 @@ +--- +title: 'Django didactique Section 4: Site d''administration de Django' +slug: Learn/Server-side/Django/Admin_site +tags: + - Apprentissage + - Article + - Didacticiel + - Débutant + - Python + - django + - django_admin +translation_of: Learn/Server-side/Django/Admin_site +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
+ +

Nous avons créé le modèle de données pour le site web de la bibliothèque locale. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.

+ + + + + + + + + + + + +
Pré-requis:Avoir complété Django didactique Section 3: Utilisation des modèles de données
Objectif:Comprendre les avantages et les limites du site d'administration de Django. Utiliser ce site pour enregistrer des données pour les objets créés dans le chapitre précédent.
+ +

Survol

+ +

Le site d'administration et l'application admin associée de Django peut utiliser les objets déclarés du modèle de données pour réaliser automatiquement un espace de publications, de création, de mise à jour ou de suppression d'enregistrements. Cet outil permet d'économiser du temps pendant les développements et de tester rapidement le modèle de données et par voie de conséquence de vérifier la disponibilité des données et la cohérence du modèle créé. En fonction de votre type d'application web, le site d'administration peut aussi servir à gérer les données du site en production. Comme une approche centrée sur le modèle de données n'est pas appropriée à une présentation utilisateur, les concepteurs de Django recommandent de ne se servir de ce site que pour une administration interne des données (c'est-à-dire, juste pour les administrateurs techniques ou fonctionnels de l'application).

+ +

Quand nous avons créé le squelette du projet, nous avons généré automatiquement toute ce qui était nécessaire à son administration au sein de l'application web (le détail des relations en jeux sont décrites sur le site documentaire Django). Au final, vous n'aurez juste qu'à ajouter vos modèles dans l'administration du site en les enregistrant. A la fin de ce chapitre, vous aurez des pistes sur l'une des manière d'améliorer l'affichage des données dans la zone d'administration.

+ +

Passons aux actes ! Après l'enregistrement des objets du modèle relationnel, nous verrons comment créer un super-utilisateur, s'authentifier et ensuite créer quelques livres, auteurs et ouvrages à la disposition des lecteurs. Ces données seront très utiles pour tester ensuite les vues et gabarits qui seront abordés dans les chapitres suivants.

+ +

Enregistrer les objets de la modélisation

+ +

En premier lieu, il faut editer le fichier admin.py de l'application catalog (c'est-à-dire le fichier ./locallibrary/catalog/admin.py). Il devrait ressembler à celui ci-dessous — notez qu'il contient d'ores et déjà l'import du module django.contrib.admin:

+ +
from django.contrib import admin
+
+# Register your models here.
+
+ +

L'enregistrement de objets de modélisation se fait par l'appel de la fonction admin.site.register comme indiqué ci-dessous. Il vous suffit pour le moment de copier le texte ci-dessous et de l'ajouter à la fin du fichier.Register the models by copying the following text into the bottom of the file.

+ +
from catalog.models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+
+ +
+

Note : Si vous avez répondu au défi de la modelisation des langues des livres (voir le chapitre précédent sur les modèles de données), vous pouvez aussi importer cet objet !

+

Cela devrait être de la forme : admin.site.register(Language) et n'oubliez pas d'importer l'objet.

+
+ +

C'est la méthode la plus rapide et la plus simple pour enregistrer un ou plusieurs modèles. Le site d'administration est très adaptable et nous aborderons plus loin ces questions.

+ +

Générer un super-utilisateur

+ +

Pour acceder au site d'administration, il est necessaire de s'authentifier avec un utilisateur qui dispose du statut Statut d'équipe activé. Afin de visualiser et créer des enregsitrement, vous aurez aussi besoin de disposer de droits de manipulation des obejts. A ce stade, vous pouvez créer à l'aide du fichier manage.py un super-utilisateur qui dispose de tous les droits et permissions.

+ +

Exécutez la commande python ci-dessous qui appelle le fichier manage.py en étant dans le même dossier que le fichier (c'est-à-dire ./locallibrary/), pour créer le super-utilsiateur. La commande va vous demander de répondre le nom d'utilsiateur, l'adresse mail et un mot de passe fort.

+ +
python3 manage.py createsuperuser
+
+ +

Une fois cette étape réalisée, vous pouvez redémarrer le serveur de développement :

+ +
python3 manage.py runserver
+
+
+ +

Accéder et utiliser le site admin

+ +

Pour vous authentifier au site, ouvrez l'URL /admin du site local (concrètement, http://127.0.0.1:8000/admin) et identifiez vous avec votre compte de super-utilisateur.

+ +
+

Note : Vous serez redirigé⋅e vers l'application interne à Django de gestion de l'authentification et la pages de demande d'authentitification avant d'accéder réellement au site d'administration.

+ +

Si vous accéder au site local sans /admin, vous aurez un message d'erreur car les routages d'URL n'ont pas encore été traité. ne vous en inquiétez pas cela va venir...

+
+ +

Cet partie du site affiche tous les modèles définis et déclarés dans le fichier de contrôle de l'administration du site. Les objets sont regroupés par application (pour notre cas, uniquement l'application Catalog à cette étape des travaux). Vous pouvez cliquez sur chacun des noms d'objet publiés pour accéder à l'écran qui gère les informations sur les objets de ce type contenu en base de données et vous pouvez les éditer et les modifier. Vous pouvez aussi cliquer sur le lien + Ajouter pour créer un nouvel enregistrement.

+ +

Admin Site - Home page

+ +

Cliquez sur le lien + Ajouter à la droite de l'objet Books pour créer un nouveau livre. Le site va afficher une page de saisie de données (analogue à celle ci-dessous). Notez que Django prend en compte le type de champs définit dans le modèle pour utiliser le widget associé ainsi que le champs help_text quand vous l'aviez défini. 

+ +

Entrez les valeurs des champs. Pour les champs qui relèvent de relations entre objet, vous pouvez utiliser le bouton + pour accéder en cascade au formulaire de saisie des informations nécessaires à la créarion de cette objet. Vous pouvez aussi sélectionner un objet si d'autres avaient été créés précédement. Ne pas oublier de cliquer sur Enregistrer et ajouter un nouveau ou Enregistrer et continuer les modification pour sauvegarder en base de données les informations saisies.

+ +

Admin Site - Book Add

+ +
+

Note : À ce stade, prenez le temps d'enregistrer plusieurs livres, genres et auteurs. Assurez-vous que chacun est associé à plusieurs autres éléments cela rendra vos listes à venir plus riches et intéressantes quand nous aborderons ces sujets.

+
+ +

Après avoir saisie les informations et ajouté vos livres, cliquez sur le lien Accueil pour revenir à la page principale du site d'administration. Cliquez sur le lien Books pour afficher la liste des livres enregistrés (ou sur d'autres liens pour voir les autres objets présents en base). Après avoir ajouter quelques livres, votre page devrait ressembler à celle ci-dessous. La liste des livres est affichée par titre ; c'est, en fait, la valeur délivrée par la méthode __str__() du modèle d'objet Book comme cela a été codé dans le précédent chapitre.

+ +

Admin Site - List of book objects

+ +

À partir de la liste affichée, vous pouvez supprimer des instances en selectionnant les items par les cases à cocher à gauche du titre puis supprimer... dans la liste des actions proposée puis en cliquant sur Envoyer. Vous pouvez aussi ajouter des livres en cliquant sur AJOUTER BOOK.

+ +

Vous pouvez editer un livre en cliquant son nom sur la liste des ouvrages. La page d'édition, image ci-dessous, est proche de celle d'ajout d'un livre. Les principales différences sont le titre de la page (Modification de book, au lieu d'ajout de bbok), l'ajout en rouge du bouton supprimer, l'historique des modifications et voir sur le site. Ce dernier bouton est visible car nous créer la méthode get_absolute_url() dans la définition du modèle de données (à ce stade, une erreur sera provoquée si vous cliquez sur ce bouton).

+ +

Admin Site - Book Edit

+ +

Revenez à la page d'accueil (à l'aide du lien Accueil du fil d'Ariane), puis affichez les listes des Authors et des Genres. Vous devriez déjà en avoir créé un certain nombre à partir de l'ajout des nouveaux livres, mais n'hésitez pas à en ajouter d'autres.

+ +

Ce qui manque actuellement ce sont des Book Instances. Vous n'en avez pas car elles ne sont pas créées à partir des objets Books (bien que vous pourriez créer un objet Book à partir d'un objet BookInstance car c'est la nature de la relation ForeignKey). Retournez à la page d'acceuil et cliquez sur le bouton Ajouter associé aux objets Book Instance et accéder à l'écran de création. Vous pouvez noter le très grand identifiant unique global utilisé pour identifier séparelment les ouvrages.

+ +

Admin Site - BookInstance Add

+ +

Créez plusieurs de ces enregistrements pour chacun de vos livres. Définissez un statut Available (Disponible) pour certains d'entre eux et On loan (Prêt) pour d’autres. Pour un statut différent de Available, vous devrez préciser une date d'échéance à venir.

+ +

Nous avons terminé cette étape ! Vous savez comment configurer et utiliser le site d'administration. Vous pouvez continuer à créer des enregistrements pour Book, BookInstance, Genre et Author, que nous pourrons utiliser une fois que nous aurons créé nos propres vues de détail.

+ +

Configuration avancée

+ +

La cadriciel Django réalise une excellente assistance avec la création d'un site d'administration de base en utilisant les données des enregistrements effectués :

+ + + +

mais vous avez la possibilité de personnaliser le comportement du site d'administration. Vous allez pouvoir notamment faire :

+ + + +

Dans la section qui suit, nous allons effectuer quelques modification pour améliorer l'interface de votre application LocalLibrary. Nous allons notamment ajouter des informations pour les objets Book et Author, et améliorer la présentation de leur vue d'édition. Il n'y aura pas de changement pour les objets Language et Genre qui ne possèdent pas assez d'information pour que cela puisse avoir une incidence réelle !

+ +

Le détail complet de la personnalisation du site d'administration est disponible sur le site documentaire de Django.

+ +

Enregistrer un objet de la classe ModelAdmin

+ +

Pour modifier la manière d'afficher un objet hérité de la classe Model dans l'interface d'administration, vous devez définir une classe d'objet héritée de la classe ModelAdmin qui décrit l'affichage d'un objet et de l'enregistrer avec votre objet Model.

+ +

Commençons avec l'objet Author. Éditez le fichier admin.py dans le dossier catalog de l'application(concrètement le fichier /locallibrary/catalog/admin.py). Commentez la ligne qui vous a permis d'enregistrer l'objet Author :

+ +
# admin.site.register(Author)
+ +

Ensuite ajoutez une nouvelle classe d'objets AuthorAdmin et enregistrez-le comme indiqué ci-dessous.

+ +
# Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+
+ +

Ensuite nous allons opérer de manière analogue avec un objet hérité de ModelAdmin pour les objets Book, et BookInstance. À nouveau, nous commentons les enregistrements initiaux :

+ +
# admin.site.register(Book)
+# admin.site.register(BookInstance)
+ +

Puis nous créons et enrgistrons les nouveaux modèles. Pour les besoins de l'exercice, nous allons utiliser, pour enregistrer ces modèles, le décorateur @register qui réalise la même opération que la méthode admin.site.register() :

+ +
# Register the Admin classes for Book using the decorator
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+
+ +

Pour le moment, toutes les classes d’administration sont vides (cf. pass), par conséquent le comportement d'affichage n'est pas modifié. Cependant, nous allons pouvoir désormais modifier les comportements d'affichage pour chacun des objets nouvellement enregistrés.

+ +

Configurer les vues en liste

+ +

La liste des auteurs (objet Author) est affichée dans l'application LocalLibrary à l'aide du nom généré par la méthode  __str__(). Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive list_display pour ajouter d'autres champs de l'objet Author.

+ +

Modifiez votre classe AuthorAdmin comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet Author.

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+
+ +

Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir une page équivalente à celle ci-dessous :

+ +

Admin Site - Improved Author List

+ +

Pour les livres, nous allons visulaiser les objets  Book en affichant les champs author and genre. Le champs author est de type ForeignKey décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode __str__() de l'objet Author pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe BookAdmin comme suit :

+ +
class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+
+ +

Le champ genre représente une relation n à n (ManyToManyField) qui ne peut pas être prise en charge par la directive list_display. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(display_genre) qui permettra de traiter l'affichage des informations souhaitées pour le genre.

+ +
+

Note : C'est dans un but pédagogique que nous recherchons ici l'affichage du genre qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications  — par exemple pour ajouter un lien de suppression de vos enregistrements en liste.

+
+ +

Ajoutez le code ci-dessous dans votre modèle d'objet Book (concrètement dans le fichier locallibrary/catalog/models.py). Cette fonction génère une chaîne de caractère contenant les trois premières valeurs de tous les genres (s'ils existent) et créer une courte destription (short_description) qui sera utilisé par le site d'administration avec cette méthode.

+ +
    def display_genre(self):
+        """Create a string for the Genre. This is required to display genre in Admin."""
+        return ', '.join(genre.name for genre in self.genre.all()[:3])
+
+    display_genre.short_description = 'Genre'
+
+ +

Après avoir sauvegardé vos fichiers models.py et admin.py, vous pouvez accéder à la page web d'administration des livres et vous y découvrirez une page semblable à celle ci-dessous :

+ +

Admin Site - Improved Book List

+ +

Les champs Genre Language ne dispose que d'une seule valeur. Il n'est donc pas utile de créer une page d'affichage spélicale.

+ +
+

Note : Vous trouverez en fin d'article dans la défis personnel des propositions pour améliorer les ouvrages en prêt BookInstance !

+
+ +

Ajouter des filtres

+ +

Si vous avez beaucoup d'éléments à l'affichage des listes, il devient utile de d'appliquer des filtres pour les afficher. Ceci est réalisé avec l'attribut list_filter de la classe ModelAdmin. Modifier votre classe d'objet d'affichage BookInstanceAdmin avec les code ci-dessous :

+ +
class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+ +

La page de la vue en liste des ouvrages à consultation (BookInstance) est désormais agrémentée d'un bloc de filtrage par statut (champs status) et date de retour (due back). Vous pouvez sélectionner la valeur de ces deux critères de filtrage (remarquez la manière avec laquelle les valeurs des critères est proposée).

+ +

Admin Site - BookInstance List Filters

+ +

Organiser la vue d'affichage d'un modèle

+ +

La vue est agencée, par défaut, en affichant verticalement dans l'ordre de déclaration des champs de l'objet modèle. Cette règle d'affichage peut être modifiée en indiquant quels champs afficher (ou exclure) et organiser les informations en sections avec un affichage horizontal ou vertical et les widgets à utiliser.

+ +
+

Note : Les modèles de l'application LocalLibrary ne sont pas très compliqués sans énormément d'information à traiter. Il n'y a pas un grand besoin de changement d'affichage ; les éléments ci-dessous sont données pour avoir une idée des possibilités et savoir, le moment venu, comment faire.

+
+ +

Contrôler l'affichage et la dispostion des champs

+ +

Modifiez votre classe d'objet AuthorAdmin en ajoutant l'attribut fields comme indiqué en gras ci-dessous :

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
+
+ +

Ce champ (fields) contrôle l'affichage des champs. Les champs déclarés sont affichés verticalement dans l'ordre de déclaration et seront affichés en groupe horizontalement s'ils sont déclarés dans un tuple (c'est le cas pour les date de naissance et de décès des auteurs).

+ +

La page web de votre application locale devrait ressembler à celle ci-dessous :

+ +

Admin Site - Improved Author Detail

+ +
+

Note : Vous pouvez aussi utiliser l'attribut exclude pour identifier des attributs du modèle que vous souhaitez exclure de l'affichage (les autres attributs seront alors affichés). Pour plus de détails vous pouvez consulter la documentation Django sur l'attribut exclude.

+
+ +

Organiser des sections dans votre vue de détail

+ +

Vous avez la possibilité de créer des sections à l'affichage pour regrouper des éléments à renseigner en utilisant l'attribut fieldsets.

+ +

Nous allons utiliser l'objet BookInstance pour mettre en avant cette possibilité. Nous avons à afficher des informations sur l'ouvrage (nom, édition, id) et sur sa disponibilité actuelle ou à venir (statut et retour de prêt). Nous choisissons d'afficher ces éléments dans deux sections différentes, l'une nommée et l'autre pas. Modifiez l'objet BookInstanceAdmin avec le texte en gras comme ci-dessous :

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )
+ +

Chaque section peut avoir un titre (ou aucun si vous indiquez la valeur None) et des champs regroupés à l'aide de tuples enregistrés dans un dictionnaire — le schéma de déclaration peut paraître compliqué à décrire mais assez aisé à comprendre à la lecture du code ci-dessus formaté pour être plus compréhensible.

+ +

Le résultat de cette description devrait vous apparaître de manière analogue à celle présente  ci-dessous :

+ +

Admin Site - Improved BookInstance Detail with sections

+ +

Publier des enregistrements associés

+ +

Parfois, il peut être très utile d'ajouter à l'affichage des éléments associés en même temps. C'est le cas, par exemple, pour les copies d'ouvrage associés à un livre en bibliothèque. Il est utile pour le bibliothécaire de disposer à la fois des informations sur le livre et des copies présentes ou non en rayonnage..

+ +

Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal (TabularInline) ou vertical (StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle BookInstance dans le fichier admin.py pour disposer des informations inline à l'affichage des informations sur votre objet Book. Gardez en mémoire que c'est l'objet  BookAdmin qui gère l'affichage les informations de l'objet Book; c'est donc BookAdmin il doit donc être modifié :

+ +
class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+    inlines = [BooksInstanceInline]
+
+ +

Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées :

+ +

Admin Site - Book with Inlines

+ +

Dans le cas présent nous avons juste décidé d'afficher toutes les informations des copies associées à un livre. Si vous consultez sur la documentation Django les informations relatives au type TabularInline vous aurez accès à l'ensemble des éléments qui permettent de filtrer et afficher les éléments dont vous aurez besoin. 

+ +
+

Note : Il y a quelques limitations pénibles à ces outils. Si vous observez bien la liste des copies pour un ouvrage, vous decouvrirez des copies fantômes sans nom et informations pré-reservées pour de futures instances à enregistrer. Il serait préférable de ne pas les avoir et vous devriez alors appliquer un filtre pour éliminer de l'affichage ces copies. Vous pourriez aussi ajouter une section particulière pour permettre d'ajouter de nouvelles copies dans les rayonnages... La première solution est assez rapide à traiter en utilisant l'attribut extra à 0 dans la définition de l'objet BooksInstanceInline ... essayez !

+
+ +

Défi

+ +

Beaucoup de sujets ont été abordés dans ce chapitre, c'est l'occasion de les mettre en application :

+ +
    +
  1. Améliorer l'affichage des objets BookInstance, ajoutez les éléments nécessaire pour disposer du livre, du statut de la date de fin de prêt et de l'identifiant au lieu du code unique et du titre donné par la méthode __str__() de l'objet.
    2. +
  2. Ajouter une information associée pour disposer du détail des informations sur l'auteur. Appuyez vous sur l'exemple avec les objets Book/BookInstance pour y parvenir.
    3. +
+ + + +

Résumé

+ +

Beaucoup de sujets ont été abordés dans ce chapitre... Vous avez acquis les base du site d'administration et à créer un suoper-utilisateur, voius avez aussi navigué dans le site d'admlinistration et vous avez appris à modifier les formulaires de saisie et comment ajouter, modifier ou supprimer des données.

+ +

A voir aussi

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/django/development_environment/index.html b/files/fr/learn/server-side/django/development_environment/index.html deleted file mode 100644 index 326bce1716..0000000000 --- a/files/fr/learn/server-side/django/development_environment/index.html +++ /dev/null @@ -1,413 +0,0 @@ ---- -title: Mettre en place un environnement de développement Django -slug: Learn/Server-side/Django/development_environment -translation_of: Learn/Server-side/Django/development_environment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
- -

Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.

- - - - - - - - - - - - -
Prérequis :Connaissances de base sur l'utilisation d'un terminal/invite de commande et comment installer des packages sur l'OS de l'ordinateur que vous utiliserez pour développer.
Objectif :Avoir un environnement de développement pour Django (2.0) fonctionnel sur votre ordinateur.
- -

Aperçu de l'environnement de développement Django

- -

Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode recommandée pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.

- -

Qu'est-ce que l'environnement de développement Django ?

- -

L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production.

- -

Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple serveur web de développement que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.

- -

Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un éditeur de texte ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.

- -

Quelles sont les options d'installation de Django ?

- -

Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :

- - - -

Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.

- -
-

Note : D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la documentation appropriée peuvent-être trouvés ci-dessous.

-
- -

Quels systèmes d'exploitation sont supportés ?

- -

Les applications web Django peuvent tourner sous presque n'importe quelle machine pouvant faire fonctionner le langage de programmation Python 3 : Windows, macOS, Linux/Unix, Solaris, pour ne nommer que ceux-là. Quasiment n'importe quel ordinateur devrait avoir les performances nécessaires pour faire fonctionner Django lors de la phase de développement.

- -

Dans cet article, nous vous donnons les instructions pour Windows, macOS et Linux/Unix.

- -

Quelle version de Python doit-être utilisée ?

- -

Nous vous recommandons d'utiliser la version la plus récente disponible — au moment de l'écriture de cet article, nous en sommes à la version Python 3.7.2.

- -

Si besoin, les versions de Python 3.5 et ultérieures peuvent être utilisées (le support pour Python 3.5 sera abandonné lors de la sortie des prochaines versions).

- -
-

Note : Python 2.7 ne peut pas être utilisé avec Django 2.1 (la série Django 1.11.x est la dernière à supporter Python 2.7).

-
- -

Où peut-on télécharger Django ?

- -

Il y a trois façons de télécharger Django :

- - - -

Cet article explique comment installer Django depuis PyPI afin d'obtenir la version stable la plus récente.

- -

Quelle base de données ?

- -

Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains problèmes potentiels qu'il vaut mieux éviter).

- -

Dans cet article (et quasiment tout le module), nous utiliserons la base SQLite, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.

- -
-

Note : Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (django-admin). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.

-
- -

Installation globale ou dans un environnement virtuel Python ?

- -

Lorsque vous installez Python3, vous obtenez un environnement global unique partagé par tout le code Python3. Bien que vous puissiez installer n'importe quel package Python souhaité dans cet environnement, vous ne pouvez disposer que d'une seule version d'un package donné à la fois.

- -
-

Note : Les applications installées dans l'environnement global peuvent potentiellement entrer en conflit avec les autres (i.e. si elles dépendent de versions différentes d'un même package).

-
- -

Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.

- -

Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des environnements virtuels Python indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.

- -

Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous.

- -

Installer Python 3

- -

Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez Python 3, vous aurez alors aussi besoin de l'outil Python Package Index — pip3 — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.

- -

Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.

- -
-

Note : En fonction de votre plateforme, vous aurez probablement aussi besoin d'installer Python/pip depuis le gestionnaire de packages de votre système d'exploitation, ou via d'autre moyens. Pour la plupart des plateformes, vous pouvez télécharger les fichiers d'installation requis depuis https://www.python.org/downloads/ et les installer en utilisant la méthode appropriée à votre plateforme.

-
- -

Ubuntu 18.04

- -

Ubuntu Linux 18.04 LTS inclut par défaut Python 3.6.6. Vous pouvez vous en assurer en exécutant les commandes suivantes depuis le terminal bash :

- -
python3 -V
- Python 3.6.6
- -

Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est pas disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :

- -
sudo apt install python3-pip
- -

macOS

- -

macOS "El Capitan"et les versions plus récentes n'incluent pas Python 3. Vous pouvez vous en assurer en exécutant les commandes suivantes dans votre terminal bash :

- -
python3 -V
- -bash: python3ommand not found
- -

Vous pouvez facilement installer Python 3 (ainsi que l'outil pip3) sur python.org:

- -
    -
  1. Téléchargez l'installeur requis : -
      -
    1. Allez sur https://www.python.org/downloads/
      2. -
    2. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
      3. -
    -
    2. -
  2. Localisez le fichier en utilisant le Finder, puis double-cliquez le fichier package. Suivez les consignes d'installation.
    3. -
- -

Vous pouvez désormais confirmer la bonne installation en vérifiant votre version de Python 3 comme indiqué ci-dessous :

- -
python3 -V
- Python 3.7.2
-
- -

Vous pouvez aussi vérifier que pip3 est correctement installé en listant les packages disponibles :

- -
pip3 list
- -

Windows 10

- -

Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil pip3) sur python.org:

- -
    -
  1. Téléchargez l'installeur requis : -
      -
    1. Allez sur https://www.python.org/downloads/
      2. -
    2. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
      3. -
    -
    2. -
  2. Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation
    3. -
  3. Assurez-vous d'avoir coché la case intitulée "Ajouter Python au PATH".
    4. -
- -

Vous pouvez ensuite vérifier que Python s'est correctement installé en tapant le texte suivant dans votre invite de commande :

- -
py -3 -V
- Python 3.7.2
-
- -

L'installeur Windows inclut pip3 (le gestionnaire de packages Python) par défaut. Vous pouvez lister les packages installés de la manière suivante :

- -
pip3 list
-
- -
-

Note : L'installeur devrait configurer tout ce dont vous avez besoin pour que les commandes ci-dessus fonctionnent. Toutefois, si vous obtenez un message vous indiquant que Python ne peut pas être trouvé (Python cannot be found), il est possible que vous ayez oublié de l'ajouter à votre PATH système. Vous pouvez faire cela en réexécutant l'installeur, sélectionnez "Modifier", puis cochez la case intitulée "Ajouter Python aux variables d'environnement" sur le deuxième page.

-
- -

Utiliser Django dans un environnement virtuel Python

- -

Les librairies que nous utiliserons pour créer nos environnements virtuels seront virtualenvwrapper (Linux et macOS) et virtualenvwrapper-win (Windows), , qui à leur tour utilisent l'outil virtualenv. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.

- -

Installer l'utilitaire d'environnement virtuel

- -

Mise en place de l'environnement virtuel sur Ubuntu

- -

Après avoir installé Python et pip vous pouvez installer virtualenvwrapper (qui inclut virtualenv). Le guide d'installation officiel peut être trouvé ici, ou bien vous pouvez suivre les instructions ci-dessous.

- -

Installer l'outil en utilisant pip3:

- -
sudo pip3 install virtualenvwrapper
- -

Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché .bashrc dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
-export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
-export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
- -
-

Note : Les variables VIRTUALENVWRAPPER_PYTHON et VIRTUALENVWRAPPER_VIRTUALENV_ARGS pointent vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
-
- Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.

-
- -

Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal :

- -
source ~/.bashrc
- -

Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous :

- -
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
-...
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
- -

Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande mkvirtualenv.

- -

Mise en place de l'environnement virtuel sur macOS

- -

L'installation de virtualenvwrapper on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du guide officiel d'installation ou suivre les indications ci-dessous).

- -

Installez virtualenvwrapper (ainsi que virtualenv) en utilisant pip comme indiqué ci-dessous.

- -
sudo pip3 install virtualenvwrapper
- -

Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell.

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
-export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh
- -
-

Note : La variable VIRTUALENVWRAPPER_PYTHON pointe vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).

- -

Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :

- -
export WORKON_HOME=$HOME/.virtualenvs
-export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
-export PROJECT_HOME=$HOME/Devel
-source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
- -

Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.

-
- -

Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : .bash_profile dans votre répertoire home.

- -
-

Note : Si vous n'arrivez pas à trouver le fichier .bash_profile depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.

- -

La commande sera la suivante :

- -
>cd ~  # Naviguer vers le répertoire home
-ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile.
-nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal.
-# Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus.
-# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.
-
- -

Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal :

- -
source ~/.bash_profile
- -

Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande mkvirtualenv.

- -

Mise en place de l'environnement virtuel sur Windows 10

- -

Installer virtualenvwrapper-win est encore plus simple qu'installer virtualenvwrapper , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :

- -
pip3 install virtualenvwrapper-win
- -

Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv

- -

Créer un environnement virtuel

- -

Maintenant que vous avez installé virtualenvwrapper ou virtualenvwrapper-win , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.

- -

Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).

- -
$ mkvirtualenv my_django_environment
-
-Running virtualenv with interpreter /usr/bin/python3
-...
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
-(my_django_environment) ubuntu@ubuntu:~$
- -

Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.

- -
-

Note : A partir de ce point dans l'article (et donc dans le module), vous pourrez considérer que toutes les commandes seront exécutées dans un environnement virtuel Python comme celui que nous avons mis en place plus haut.

-
- -

Utiliser un environnement virtuel

- -

Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) :

- - - -

Installer Django

- -

Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé workon pour y entrer, vous pouvez utiliser pip3 pour installer Django.

- -
pip3 install django
- -

Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) :

- -
# Linux/macOS
-python3 -m django --version
- 2.1.5
-
-# Windows
-py -3 -m django --version
- 2.1.5
- -
-

Note : Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :

- -
py -m django --version
- -

Dans Windows, les scripts Python 3 sont exécutés en préfixant la commande avec py -3, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur -3 si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est python3.

-
- -
-

Attention : Le reste de ce module utilise les commandes Linux pour invoquer Python 3 (python3) . . Si vous travaillez sous Windows , remplacez simplement ce préfixe avec : py -3

-
- -

Tester votre installation

- -

Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans.

- -
mkdir django_test
-cd django_test
- -

Vous pouvez ensuite créer un nouveau site squelette intitulé "mytestsite" utilisant l'outil django-admin omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé manage.py.

- -
django-admin startproject mytestsite
-cd mytestsite
- -

Nous pouvons lancer le serveur web de développement depuis ce dossier en utilisant manage.py et la commande runserver command, comme indiqué ci-dessous.

- -
$ python3 manage.py runserver
-Performing system checks...
-
-System check identified no issues (0 silenced).
-
-You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
-Run 'python manage.py migrate' to apply them.
-
-December 16, 2018 - 07:06:30
-Django version 2.1.5, using settings 'mytestsite.settings'
-Starting development server at http://127.0.0.1:8000/
-Quit the server with CONTROL-C.
-
- -
-

Note : La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !

-
- -

Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : http://127.0.0.1:8000/. Vous devriez voir un site ressemblant à celui-ci :

- -

Django Skeleton App Homepage - Django 2.0

- -

Résumé

- -

Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur.

- -

Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant django-admin startproject, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (python3 manage.py runserver). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/django/development_environment/index.md b/files/fr/learn/server-side/django/development_environment/index.md new file mode 100644 index 0000000000..326bce1716 --- /dev/null +++ b/files/fr/learn/server-side/django/development_environment/index.md @@ -0,0 +1,413 @@ +--- +title: Mettre en place un environnement de développement Django +slug: Learn/Server-side/Django/development_environment +translation_of: Learn/Server-side/Django/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+ +

Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.

+ + + + + + + + + + + + +
Prérequis :Connaissances de base sur l'utilisation d'un terminal/invite de commande et comment installer des packages sur l'OS de l'ordinateur que vous utiliserez pour développer.
Objectif :Avoir un environnement de développement pour Django (2.0) fonctionnel sur votre ordinateur.
+ +

Aperçu de l'environnement de développement Django

+ +

Django simplifie le processus de configuration de votre ordinateur pour que vous puissiez rapidement commencer à développer des applications web. Cette section explique ce que vous aurez dans l'environnement de développement, et vous fournit un aperçu de certaines options de configuration et d'installation. Le reste de l'article explique la méthode recommandée pour installer l'environnement de développement Django sur Ubuntu, macOS et Windows, et comment le tester.

+ +

Qu'est-ce que l'environnement de développement Django ?

+ +

L'environnement de développement correspond à une installation de Django sur votre ordinateur local que vous pouvez utiliser pour développer et tester des applications Django avant de les déployer sur un environnement de production.

+ +

Le principal outil que fournit Django est un ensemble de scripts Python utilisés pour créer et travailler avec des projets Django, ainsi qu'un simple serveur web de développement que vous pouvez utiliser pour tester en local (i.e. sur votre propre ordinateur, pas sur un serveur web externe) des applications web Django dans votre navigateur web.

+ +

Il y a plusieurs autres outils annexes, qui font partie de l'environnement de développement, que nous ne couvrirons pas ici. Cela inclut des choses comme un éditeur de texte ou un IDE pour éditer votre code, et un outil de gestion de contrôle de version comme Git pour gérer en toute prudence les différentes versions de votre code. Nous supposerons ici que vous avez déjà un éditeur de texte installé.

+ +

Quelles sont les options d'installation de Django ?

+ +

Django est extrêmement flexible sur sa manière d'être installé et configuré. Django peut-être :

+ + + +

Chacune de ces options requiert une configuration et une installation légèrement différente. Les sous-sections ci-dessous vous expliquent différents choix. Dans le reste de l'article, nous vous montrerons comment installer Django sur un nombre restreint de systèmes d'exploitation, et nous supposerons que cette installation aura été suivie pour tout le reste du module.

+ +
+

Note : D'autres options d'installation possibles sont traitées dans la documentation officielle de Django. Les liens vers la documentation appropriée peuvent-être trouvés ci-dessous.

+
+ +

Quels systèmes d'exploitation sont supportés ?

+ +

Les applications web Django peuvent tourner sous presque n'importe quelle machine pouvant faire fonctionner le langage de programmation Python 3 : Windows, macOS, Linux/Unix, Solaris, pour ne nommer que ceux-là. Quasiment n'importe quel ordinateur devrait avoir les performances nécessaires pour faire fonctionner Django lors de la phase de développement.

+ +

Dans cet article, nous vous donnons les instructions pour Windows, macOS et Linux/Unix.

+ +

Quelle version de Python doit-être utilisée ?

+ +

Nous vous recommandons d'utiliser la version la plus récente disponible — au moment de l'écriture de cet article, nous en sommes à la version Python 3.7.2.

+ +

Si besoin, les versions de Python 3.5 et ultérieures peuvent être utilisées (le support pour Python 3.5 sera abandonné lors de la sortie des prochaines versions).

+ +
+

Note : Python 2.7 ne peut pas être utilisé avec Django 2.1 (la série Django 1.11.x est la dernière à supporter Python 2.7).

+
+ +

Où peut-on télécharger Django ?

+ +

Il y a trois façons de télécharger Django :

+ + + +

Cet article explique comment installer Django depuis PyPI afin d'obtenir la version stable la plus récente.

+ +

Quelle base de données ?

+ +

Django supporte quatre bases de données principales (PostgreSQL, MySQL, Oracle et SQLite), et des librairies fournies par la communauté offrent différents niveaux de support pour d'autre bases de données SQL et NoSQL populaires. Nous vous recommandons de choisir la même base de données pour la production et le développement (bien que Django puisse abstraire plusieurs différences entre les bases de données en utilisant son Mapper Relationnel-Objet (ORM), il reste tout de même certains problèmes potentiels qu'il vaut mieux éviter).

+ +

Dans cet article (et quasiment tout le module), nous utiliserons la base SQLite, qui sauvegarde ses données dans des fichiers. SQLite a été conçu pour être utilisé comme une base de données légère, mais elle ne peut pas supporter un haut niveau de compétition. Elle est cependant un excellent choix pour des applications qui sont prioritairement en lecture seule.

+ +
+

Note : Django est configuré pour utiliser SQLite par défaut lorsque vous démarrez le projet de votre site web en utilisant les outils standards (django-admin). C'est un très bon choix lorsque vous débutez car elle ne requiert aucune configuration ou installation particulière.

+
+ +

Installation globale ou dans un environnement virtuel Python ?

+ +

Lorsque vous installez Python3, vous obtenez un environnement global unique partagé par tout le code Python3. Bien que vous puissiez installer n'importe quel package Python souhaité dans cet environnement, vous ne pouvez disposer que d'une seule version d'un package donné à la fois.

+ +
+

Note : Les applications installées dans l'environnement global peuvent potentiellement entrer en conflit avec les autres (i.e. si elles dépendent de versions différentes d'un même package).

+
+ +

Si vous installez Django dans l'environnement par défaut/global, vous ne pourrez alors cibler qu'une seule version de Django sur votre machine. Cela peut devenir un problème si vous souhaitez créer de nouveaux sites web (utilisant la dernière version de Django) tout en maintenant d'autres sites web dépendant de versions antérieures.

+ +

Ainsi, un développeur Python/Django confirmé lance généralement ses applications Python dans des environnements virtuels Python indépendants. Cela permet d'avoir plusieurs environnements Django sur un seul et même ordinateur. L'équipe de développement de Django elle-même recommande d'utiliser des environnements virtuels Python.

+ +

Ce module suppose que vous avez installé Django dans un environnement virtuel, et nous vous montrons comment le faire ci-dessous.

+ +

Installer Python 3

+ +

Si vous souhaitez utiliser Django, vous devrez installer Python sur votre système d'exploitation. Si vous utilisez Python 3, vous aurez alors aussi besoin de l'outil Python Package Index — pip3 — qui est utilisé pour gérer (installer, mettre à jour, supprimer) les packages/librairies Python qui seront utilisés par Django et vos autres applications Python.

+ +

Cette section décrit brièvement comment vérifier quelle version de Python sont disponibles, et comment installer de nouvelles versions si nécessaire, sur Ubuntu Linux 18.04, macOS et Windows 10.

+ +
+

Note : En fonction de votre plateforme, vous aurez probablement aussi besoin d'installer Python/pip depuis le gestionnaire de packages de votre système d'exploitation, ou via d'autre moyens. Pour la plupart des plateformes, vous pouvez télécharger les fichiers d'installation requis depuis https://www.python.org/downloads/ et les installer en utilisant la méthode appropriée à votre plateforme.

+
+ +

Ubuntu 18.04

+ +

Ubuntu Linux 18.04 LTS inclut par défaut Python 3.6.6. Vous pouvez vous en assurer en exécutant les commandes suivantes depuis le terminal bash :

+ +
python3 -V
+ Python 3.6.6
+ +

Toutefois, l'outil d'Index des Packages Python dont vous aurez besoin pour installer des packages avec Python 3 (y compris Django) n'est pas disponible par défaut. Vous pouvez installer pip3 avec le terminal bash avec :

+ +
sudo apt install python3-pip
+ +

macOS

+ +

macOS "El Capitan"et les versions plus récentes n'incluent pas Python 3. Vous pouvez vous en assurer en exécutant les commandes suivantes dans votre terminal bash :

+ +
python3 -V
+ -bash: python3ommand not found
+ +

Vous pouvez facilement installer Python 3 (ainsi que l'outil pip3) sur python.org:

+ +
    +
  1. Téléchargez l'installeur requis : +
      +
    1. Allez sur https://www.python.org/downloads/
      2. +
    2. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
      3. +
    +
    2. +
  2. Localisez le fichier en utilisant le Finder, puis double-cliquez le fichier package. Suivez les consignes d'installation.
    3. +
+ +

Vous pouvez désormais confirmer la bonne installation en vérifiant votre version de Python 3 comme indiqué ci-dessous :

+ +
python3 -V
+ Python 3.7.2
+
+ +

Vous pouvez aussi vérifier que pip3 est correctement installé en listant les packages disponibles :

+ +
pip3 list
+ +

Windows 10

+ +

Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil pip3) sur python.org:

+ +
    +
  1. Téléchargez l'installeur requis : +
      +
    1. Allez sur https://www.python.org/downloads/
      2. +
    2. Sélectionnez le bouton Download Python 3.7.2 (le numéro de version mineure peut varier).
      3. +
    +
    2. +
  2. Installez Python en double-cliquant sur le fichier télécharger puis en suivant les consignes d'installation
    3. +
  3. Assurez-vous d'avoir coché la case intitulée "Ajouter Python au PATH".
    4. +
+ +

Vous pouvez ensuite vérifier que Python s'est correctement installé en tapant le texte suivant dans votre invite de commande :

+ +
py -3 -V
+ Python 3.7.2
+
+ +

L'installeur Windows inclut pip3 (le gestionnaire de packages Python) par défaut. Vous pouvez lister les packages installés de la manière suivante :

+ +
pip3 list
+
+ +
+

Note : L'installeur devrait configurer tout ce dont vous avez besoin pour que les commandes ci-dessus fonctionnent. Toutefois, si vous obtenez un message vous indiquant que Python ne peut pas être trouvé (Python cannot be found), il est possible que vous ayez oublié de l'ajouter à votre PATH système. Vous pouvez faire cela en réexécutant l'installeur, sélectionnez "Modifier", puis cochez la case intitulée "Ajouter Python aux variables d'environnement" sur le deuxième page.

+
+ +

Utiliser Django dans un environnement virtuel Python

+ +

Les librairies que nous utiliserons pour créer nos environnements virtuels seront virtualenvwrapper (Linux et macOS) et virtualenvwrapper-win (Windows), , qui à leur tour utilisent l'outil virtualenv. Les outils d'habillage permettent de créer une interface consistante pour gérer les interfaces sur toutes les plateformes.

+ +

Installer l'utilitaire d'environnement virtuel

+ +

Mise en place de l'environnement virtuel sur Ubuntu

+ +

Après avoir installé Python et pip vous pouvez installer virtualenvwrapper (qui inclut virtualenv). Le guide d'installation officiel peut être trouvé ici, ou bien vous pouvez suivre les instructions ci-dessous.

+ +

Installer l'outil en utilisant pip3:

+ +
sudo pip3 install virtualenvwrapper
+ +

Ajoutez ensuite les lignes suivantes à la fin de votre fichier de configuration shell (le fichier caché .bashrc dans votre répertoire home). Elles indiquent les endroits où vos environnements virtuels seront installés, l'emplacement de vos projets de développement, et l'emplacement du script installé avec ce package :

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

Note : Les variables VIRTUALENVWRAPPER_PYTHON et VIRTUALENVWRAPPER_VIRTUALENV_ARGS pointent vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
+
+ Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.

+
+ +

Puis relancez le fichier de configuration en exécutant la commande suivante dans votre terminal :

+ +
source ~/.bashrc
+ +

Vous devriez alors voir apparaître plusieurs lignes de script semblables à celles ci-dessous :

+ +
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+ +

Vous pouvez maintenant créer un nouvel environnement virtuel avec la commande mkvirtualenv.

+ +

Mise en place de l'environnement virtuel sur macOS

+ +

L'installation de virtualenvwrapper on sur macOS est quasiment identique à celle sur Ubuntu (une fois de plus, vous pouvez suivre les instructions du guide officiel d'installation ou suivre les indications ci-dessous).

+ +

Installez virtualenvwrapper (ainsi que virtualenv) en utilisant pip comme indiqué ci-dessous.

+ +
sudo pip3 install virtualenvwrapper
+ +

Puis ajoutez les lignes suivantes à la fin de votre fichier de configuration shell.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +
+

Note : La variable VIRTUALENVWRAPPER_PYTHON pointe vers l'emplacement d'installation par défaut de Python3, et source /usr/local/bin/virtualenvwrapper.sh pointe vers l'emplacement par défaut du script virtualenvwrapper.sh. Si le virtualenv ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).

+ +

Par exemple, une installation test sur macOS a résulté en l'ajout des lignes suivantes dans le fichier startup :

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.7/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /Library/Frameworks/Python.framework/Versions/3.7/bin/virtualenvwrapper.sh
+ +

Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes which virtualenvwrapper.sh et which python3.

+
+ +

Ce sont les mêmes lignes que pour Ubuntu, mais le nom du fichier de configuration caché du répertoire home est différent : .bash_profile dans votre répertoire home.

+ +
+

Note : Si vous n'arrivez pas à trouver le fichier .bash_profile depuis le finder, vous pouvez aussi l'ouvrir depuis le terminal en utilisant nano.

+ +

La commande sera la suivante :

+ +
>cd ~  # Naviguer vers le répertoire home
+ls -la # Listez le contenu du répertoire. Vous devriez voir .bash_profile.
+nano .bash_profile # Ouvrez le fichier avec l'éditeur de texte nano, depuis le terminal.
+# Allez à la fin du fichier, puis copiez-collez les lignes ci-dessus.
+# Utilisez Ctrl+X pour quitter nano, sélectionnez Y pour sauvegarder le fichier.
+
+ +

Puis relancez le fichier de configuration en appelant la ligne suivante depuis le terminal :

+ +
source ~/.bash_profile
+ +

Vous devriez alors voir apparaître plusieurs lignes de script (les mêmes scripts que ceux présents dans l'installation Ubuntu). Vous devriez maintenant pouvoir créer un nouvel environnement virtuel avec la commande mkvirtualenv.

+ +

Mise en place de l'environnement virtuel sur Windows 10

+ +

Installer virtualenvwrapper-win est encore plus simple qu'installer virtualenvwrapper , parce que vous n'avez pas besoin de configurer là où l'outil enregistre les informations de l'environnement virtuel (il y a des valeurs par défaut). Tout ce que vous avez besoin de faire est de lancer la commande suivante depuis l'invite de commande :

+ +
pip3 install virtualenvwrapper-win
+ +

Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv

+ +

Créer un environnement virtuel

+ +

Maintenant que vous avez installé virtualenvwrapper ou virtualenvwrapper-win , travailler avec des environnements virtuels sera une tâche très similaire entre chaque plateforme.

+ +

Vous pouvez désormais créer un nouvel environnement virtuel avec la commande mkvirtualenv. Lors de son exécution, vous pourrez voir l'environnement être configuré (ce que vous verrez changera légèrement en fonction de votre plateforme). Lorsque l'exécution de la commande sera terminée, votre environnement virtuel sera actif — vous pouvez voir au début de la ligne de commande le nom de votre environnement entre parenthèses (nous vous montrons le résultat pour Ubuntu ci-dessous, mais la dernière ligne est similaire sur Windows/macOS).

+ +
$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$
+ +

Maintenant que vous êtes dans votre environnement virtuel vous pouvez installer Django et commencer à développer.

+ +
+

Note : A partir de ce point dans l'article (et donc dans le module), vous pourrez considérer que toutes les commandes seront exécutées dans un environnement virtuel Python comme celui que nous avons mis en place plus haut.

+
+ +

Utiliser un environnement virtuel

+ +

Il y a quelques commandes que vous devriez connaître (il y en a davantage dans la documentation de l'outil, mais celles-ci sont celles que vous utiliserez le plus souvent) :

+ + + +

Installer Django

+ +

Une fois que vous avez créé votre environnement virtuel, et que vous avez utilisé workon pour y entrer, vous pouvez utiliser pip3 pour installer Django.

+ +
pip3 install django
+ +

Vous pouvez tester l'installation de Django en exécutant la commande suivante (celle-ci ne fait que tester le fait que Python puisse trouver le module Django) :

+ +
# Linux/macOS
+python3 -m django --version
+ 2.1.5
+
+# Windows
+py -3 -m django --version
+ 2.1.5
+ +
+

Note : Si la commande Windows ci-dessus n'indique aucun module Django présent, essayez :

+ +
py -m django --version
+ +

Dans Windows, les scripts Python 3 sont exécutés en préfixant la commande avec py -3, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur -3 si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est python3.

+
+ +
+

Attention : Le reste de ce module utilise les commandes Linux pour invoquer Python 3 (python3) . . Si vous travaillez sous Windows , remplacez simplement ce préfixe avec : py -3

+
+ +

Tester votre installation

+ +

Les tests ci-dessus fonctionnent, mais ne font rien de très divertissant. Un test plus intéressant consiste à créer un projet squelette et de voir si il fonctionne. Pour ce faire, naviguez tout d'abord dans votre invite/terminal de commande à l'endroit où vous désirez stocker vos applications Django. Créez un dossier pour votre site test et placez-vous dedans.

+ +
mkdir django_test
+cd django_test
+ +

Vous pouvez ensuite créer un nouveau site squelette intitulé "mytestsite" utilisant l'outil django-admin omme montré. Après avoir créé le site, vous pouvez naviguer dans le dossier où vous trouverez le script principal pour gérer vos projets, intitulé manage.py.

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

Nous pouvons lancer le serveur web de développement depuis ce dossier en utilisant manage.py et la commande runserver command, comme indiqué ci-dessous.

+ +
$ python3 manage.py runserver
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+December 16, 2018 - 07:06:30
+Django version 2.1.5, using settings 'mytestsite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+
+ +
+

Note : La commande ci-dessus montre le résultat de l'exécution sur Linux/macOS. Vous pouvez ignorer les warnings à propos des "15 unapplied migration(s)" à partir de là !

+
+ +

Maintenant que votre serveur est lancé, vous pouvez voir le site en naviguant vers l'URL suivante depuis votre navigateur local : http://127.0.0.1:8000/. Vous devriez voir un site ressemblant à celui-ci :

+ +

Django Skeleton App Homepage - Django 2.0

+ +

Résumé

+ +

Vous avez maintenant un environnement de développement Django fonctionnel et opérationnel sur votre ordinateur.

+ +

Dans la section test vous avez aussi vu comment créer un nouveau site web Django en utilisant django-admin startproject, et comment aller dessus depuis votre navigateur en utilisant le serveur de développement web (python3 manage.py runserver). Dans le prochain article nous détaillerons ce processus, et créant un application web simple mais complète.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/django/forms/index.html b/files/fr/learn/server-side/django/forms/index.html deleted file mode 100644 index 2d63644055..0000000000 --- a/files/fr/learn/server-side/django/forms/index.html +++ /dev/null @@ -1,651 +0,0 @@ ---- -title: 'Django Tutorial Part 9: Working with forms' -slug: Learn/Server-side/Django/Forms -tags: - - Beginner - - CodingScripting - - DjangoForms - - Forms - - HTML forms - - Learn - - Tutorial - - django - - server side -translation_of: Learn/Server-side/Django/Forms ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
- -

Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web LocalLibrary pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs. 

- - - - - - - - - - - - -
Prérequis:Avoir terminé les formations précédentes, y compris Django Tutorial Part 8: User authentication and permissions.
Objectifs:Comprendre comment écrire des formulaires pour récupérer des informations de la part des utilisateurs et mettre à jour la base de données. Comprendre commment il est possible de simplifier grandement la création de formulaires si l 'on travaille avec un seul modèle en utilisant les vues génériques de formulaires d'éditions s'appuyant sur des classes.   
- -

Vue d'ensemble

- -

Un formulaire HTML regroupe au moins un champ remplissable et des composants élémentaires d'interface web.  Il peut être utilisé pour réunir des saisies de la part des utilisateurs avant envoi vers un serveur. Les formulaires sont souples: ils s'adaptent à plusieurs modes de saisie. En effet, Il existe des composants élementaires d'interfaces graphique pour des  modes de saisie non contrainte avec une zone de saisie de texte, ou resteinte au type date avec un date picker,  la saisie d'un variable optionnelle via une boîte à cocher,  d'un choix à faire parmi plusieurs valeurs possibles avec les boutons radio etc... . Les formulaires permettent de partager des informations avec le serveur de manière relativement sécurisée  car ils permettent d'envoyer des requêtes de  type POST protégeant de la falsification des requêtes inter-site.

- -

Bien que nous n'ayons pas encore créé de formulaire au cours de cette formation, nous en avons déjà rencontré sur l'interface d'administration Django Admin — par exemple la capture d'écran ci-dessous montre un formulaire d'édition  de l'un de nos modèle de Book  (livre), comprenant des composants élémentaires d'interface graphique de chois de valeur parmi une liste proposée,  et des zones des saisie de texte.

- -

Admin Site - Book Add

- -

Travailler avec des formulaires peut s'avérer compliqué ! Les développeurs doivent non seulement écrire le code  HTML pour le formulaire, mais aussi vérifier et corriger sur le serveur les données saisies (et éventuellement aussi dans le navigateur), renvoyer le formulaire avec des messages d'erreur pour informer les usagers de tout champ invalide, prendre en charge les données quand elles passent l'étape de vérification, et finalement renvoyer une information à l'utilisateur d'une manière ou d'une autre pour indiquer ce succès. Les formulaires sous Django enlèvent beaucoup de travail à chacune de ces étapes, grâce à un cadriciel qui permet de déclarer des formulaires et leurs champs à travers un langage de programmation, puis d'utiliser ces objets non seulement pour générer le code HTML, mais aussi une grosse partie de la vérification des données et du retour d'information à l'utilisateur.

- -

Dans cette formation, nous allons vous montrer quelque-unes des manièrs de créer et de travailler avec les formulaires, et en particulier, comment les vues sur les formulaires génériques d'édition peuvent réduire significativement la quantité de travail à fournir pour créer les formulaires de manipulation de vos modèles. En chemin nous allons étendre notre application LocalLibrary en ajoutant un formulaire permettant aux bibliothécaires de prolonger le prêt de libres, et nous allons créer des pages pour créer, modifier et supprimer des livres et des auteurs (reproduisant une version basique du formulaire ci-dessus pour éditer des livres. )

- -

Formulaires HTML

- -

D'abord, un premier aperçu des formulaires HTML (HTML Forms). Soit un formulaire HTML simple, composé d'un unique champ de saisie texte , présent pour y entrer le nom d'une "équipe" quelconque, et son sa description dans l'étiquette associée :

- -

Simple name field example in HTML form

- -

Le formulaire est défini en HTML comme une collection d'éléments enfermés entre deux balises <form> ... </form> contenant au moins une balise <input> dont la valeur d'attribut 'type' doit valoir "submit":

- -
<form action="/team_name_url/" method="post">
-    <label for="team_name">Enter name: </label>
-    <input id="team_name" type="text" name="name_field" value="Default name for team.">
-    <input type="submit" value="OK">
-</form>
-
- -

Bien qu'ici nous n'ayons qu'un champ de saisie texte destiné à recevoir le nom d'équipe, une formulaire pourrait avoir un nombre quelconque d'autres champs de saisie et leurs étiquettes de description associées. La valeur de l'attribut 'type' définit la sorte de composant élementaire d'interface graphique  affichée. Les attributs 'id' et 'name' permettent d'identifier le champ en JavaScript/CSS/HTML alors que l'attribut 'value' définit la valeur initiale du champ lorsqu'il est affiché pour la première fois. La description associée  est déclarée par la balise <label> (voir "Enter Name" au dessus) , avec un attribut 'for' devant contenir la valeur de l'attribut 'id' du champ imput à laquelle on souhaite l'associer.  

- -

La balise <input> dont l'attribut 'type' vaut submit sera affichée (par défaut) comme un bouton  qui peut être cliqué par l'utilisateur pour envoyer vers le serveur les données figurant dans tous les autres éléments de formulaire <input> (dans le cas présent, la valeur actuelle de 'team name'. Les attributs de formulaire déterminent d'une part la méthode HTTP (attribut method) utilisée pour envoyer les donnnées et d'autre part la destination des données sur le serveur (attribut action ):

- - - -

Le rôle du serveur est d'abord de fournir le formulaire sous sa forme initiale  — c'est à dire une série de champs soit vides, soit préremplis avec des valeurs initiales. Après l'impulsion de l'utilisateur sur le bouton submit, le seurveur va recevoir les données du formulaire avec les valeurs saisies dans le navigateur, et va devoir vérifier ces données. Si le formulaire contient des données invalides, le seurveur devrait afficher le formulaire de nouveau, cette fois ci avec les données utilisateur entrées dans les champs "valides" et des messages pour décrire le problème pour les champs invalides. Dès que le serveur reçoit une requête dont tous les données de champs sont valides, il peut effectuer les actions appropriées ( c'est à dire sauver les données, renvoyer le résultat d'une recherche, téléverser un fichier, etc...)  et ensuite notifier l'utilisateur .  

- -

Comme vous pouvez l'imaginer, créer le code HTML, vérifier les données envoyées, réafficher les données entrées avec l'adjonction de rapports sur les erreurs, effectuer les opérations désirées sur les données valides peut représenter pas mal d'efforts de réflexion et d'essais erreur. Django rend cela bien plus facile, en enlevant la nécessité de concevoir une partie de ce code pénible et répétitif!

- -

Les étapes de gestion d'un formulaire avec Django

- -

Django gère un formulaire en utilisant les mêmes techniques qu'évoquées lors des formations précédentes (pour afficher des informations à propos de nos modèles): La vue reçoit une requête, exécute toute acion nécessaire, incluant la lecture de données depuis les modèles, puis génère une page HTML (à partir d'un squelette à qui nous transmettons un contexte contenant les données à afficher ). Ce qui rend les choses plus compliquées, c'est que le serveur a aussi besoin d'être capable de traiter les données fournies par l'utilisateur (pas seulement le contexte) et doit pouvoir réafficher les pages s'il y a une quelconque erreur.

- -

Voici ci-dessous un diagramme représentant les étapes de gestion d'un formulaire de requêtes, commencant par la demande par le navigateur d'une page, dont le code HTML se trouve contenir un formulaire (en vert).

- -

Updated form handling process doc.

- -

En se basant sur la lecture du diagramme ci-dessus, les tâches principales dont s'aquitte Django à l'occasion de la gestion d'un formulaire sont : 

- -
    -
  1. Afficher le formulaire sous sa forme par défaut la première fois où il est demandé par l'utilisateur. -
      -
    • Le formulaire peut contenir des champs vides (par exemple si vous créez un nouvel enregistrement ) ou peut être prérempli de valeurs initiales (par exemple si vous modifiez les valeurs d'un enregistrement existant, ou que ces champs ont des valeurs initiales utiles ).
      • -
    • Le formulaire est qualifié à cette étape de formulaire libre, parce qu'il n'est associé à aucune donnée entré par l'utilisateur (bien qu'il puisse avoir des valeurs initiales) . 
      • -
    -
    2. -
  2. Recevoir des données d'une requete d'envoi de données et les lier au formulaire. -
      -
    • Lier les données au formulaire signifie que les données entrées par l'utilisateur, ainsi que les erreurs éventuelles sont accessibles lorsque nous avons besoin de réafficher le formulaire. 
      • -
    -
    3. -
  3. Nettoyer et valider les données -
      -
    • Le nettoyage de données consiste à désinfecter la saisie (par exemple en supprimant les caractères non valides, et qui pourraient être utilisés pour envoyer du contenu malveillant au serveur.) et à convertir ces données en types Python cohérents. 
      • -
    • La validation vérifie que les valeurs envoyées sont appropriées au champ (par exemple dans le bon intervalle de dates, ni trop long ni trop court, etc.) 
      • -
    -
    4. -
  4. Si une donnée n'est pas valide, ré-affiche le formulaire, cette fois-ci avec les données déjà saisies par l'utilisateur et les messages d'erreur pour les champs en erreur.
    5. -
  5. Si toutes les données sont conformes, effectue les actions demandées (e.g. sauvegarde les données, envoyer un mail, renvoie le résultat d'une recherche, télécharge un fichier etc.)
    6. -
  6. Une fois toutes ces actions accomplies, redirige l'utilisateur vers une autre page.
    7. -
- -

Django fournit une multitude d'outils et de méthodes pour vous assister dans les tâches mentionnées ci-dessus. Parmi eux la plus importante, la classe Form, qui simplifie à la fois la production de formulaire HTML mais aussi la validation de donnée. In the next section we describe how forms work using the practical example of a page to allow librarians to renew books.

- -
-

Note : Comprendre l'utilisation de Form vous aidera quand nous parlerons des classes de formulaires de Django plus complexes. 

-
- -

Formulaire de renouvellement de livre par l'utilisation de vue Form

- -

Nous allons maintenant créer une page qui permettra aux bibliothécaires de renouveler les livres empruntés (les rendre disponible à nouveau). Pour cela nous allons créer un formulaire qui permet aux utilisateurs de saisir une valeur de type Date. Considérons le champ avec une valeur initiale égale à la date du jour plus 3 semaines (la période normale d'emprunt d'un livre), et ajouter une validation pour s'assurer que le bibliothécaire ne peut pas saisir une date dans le passé ou une date trop éloignée dans le futur. Quand une date valide a été entrée, nous l'enregistrons dans le champ BookInstance.due_back de l'enregistrement courant.

- -

L'exemple va utiliser une vue basée sur une fonction et une classe Form. Les sections suivantes expliquent comment les formulaires fonctionnent, et les changements que vous devez faire à notre projet en cours LocalLibrary.

- -

Formulaire

- -

La classe Form est le cœur du système de gestion des formulaires de Django. Elle spécifie les champs présents dans le formulaire, affiche les widgets, les labels, les valeurs initiales, les valeurs valides et (après validation) les messages d'erreur associés aux champs invalides. Cette classe fournit également des méthodes pour se restituer elle-même dans les templates en utilisant des formats prédéfinis (tables, listes etc.) ou pour obtenir la valeur de chaque élément de formulaire (permettant un rendu manuel fin).

- -

Déclarer un formulaire

- -

La syntaxe de déclaration pour un Form est très semblable à celle utilisée pour déclarer un Model, et partage les mêmes types de champs (et des paramètres similaires). Cela est logique, puisque dans les deux cas nous avons besoin de nous assurer que chaque champ gère le bon type de donnée, est contraint lors de la validation des données, et a une description pour l'affichage/la documentation.

- -

Les données de formulaire sont stockées dans un fichier application forms.py, à l'intérieur du répertoire de l'application. Créez et ouvrez le fichier locallibrary/catalog/forms.py. Pour créer un Form, nous importons la bibliothèque forms, dérivons une classe de la classe Form, et déclarons les champs du formulaire. Une classe très basique de formulaire pour notre formulaire de renouvellement de livre dans notre bibliothèque est montrée ci-dessous :

- -
from django import forms
-
-class RenewBookForm(forms.Form):
-    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
-
- -

Champs de formulaire

- -

Dans ce cas, nous avons un unique champ DateField pour entrer la date du renouvellement, qui sera rendue en HTML avec une valeur vide, le label par défaut "Renewal date:", et un texte utilitaire indiquant comment s'en servir : "Enter a date between now and 4 weeks (default 3 weeks)." Comme aucun des autres arguments optionnels ne sont spécifiés, le champ acceptera des dates en utilisant les input_formats suivants : YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), et sera rendu en utilisant le widget par défaut : DateInput.

- -

Il y a beaucoup d'autres types de champs, que vous reconnaîtrez sans peine en raison de leur ressemblance avec les classes de champs équivalentes pour les modèles : BooleanField, CharField, ChoiceField, TypedChoiceField, DateField, DateTimeField, DecimalField, DurationField, EmailField, FileField, FilePathField, FloatField, ImageField, IntegerField, GenericIPAddressField, MultipleChoiceField, TypedMultipleChoiceField, NullBooleanField, RegexField, SlugField, TimeField, URLField, UUIDField, ComboField, MultiValueField, SplitDateTimeField, ModelMultipleChoiceField, ModelChoiceField​​​​.

- -

Les arguments communs de la plupart des champs sont listés ci-dessous (ils ont les valeurs les plus communes par défaut) :

- - - -

Validation

- -

Django fournit un grand nombre d'endroits pour valider vos données. La façon la plus simple de valider un champ unique est de remplacer la méthode clean_<fieldname>() pour le champ à vérifier. Ainsi, par exemple, nous pouvons vérifier que les valeurs entrées pour le champ renewal_date sont entre maintenant et dans 4 semaines, en implémentant la méthode clean_renewal_date() comme montré ci-après.

- -

Mettez à jour votre fichier forms.py, de telle sorte qu'il ressemble à cela :

- -
from django import forms
-
-from django.core.exceptions import ValidationError
-from django.utils.translation import ugettext_lazy as _
-import datetime #for checking renewal date range.
-
-class RenewBookForm(forms.Form):
-    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
-
-    def clean_renewal_date(self):
-        data = self.cleaned_data['renewal_date']
-
-        #Check date is not in past.
-        if data < datetime.date.today():
-            raise ValidationError(_('Invalid date - renewal in past'))
-
-        #Check date is in range librarian allowed to change (+4 weeks).
-        if data > datetime.date.today() + datetime.timedelta(weeks=4):
-            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
-
-        # Remember to always return the cleaned data.
-        return data
- -

Il y a deux choses importantes à noter. La première est que nous accédons à nos données en utilisant self.cleaned_data['renewal_date'], et que nous retournons ces données, que nous les ayons changées ou non, à la fin de la fonction. Cette étape nous donne des données "nettoyées", purgées de valeurs potentiellement dangereuses en utilisant les validateurs par défaut, et converties en type standard correct pour les données considérées (dans ce cas un objet Python datetime.datetime).

- -

Le deuxième point est que, si une valeur tombe en dehors de l'intervalle que nous avons autorisé, nous levons une ValidationError, en spécifiant le texte d'erreur que nous voulons afficher dans la zone du formulaire prévue pour le cas où l'utilisateur entre une valeur incorrecte. L'exemple ci-dessus enveloppe aussi ce texte dans ugettext_lazy() (importée comme _()), une des fonctions de traduction Django, ce qui est une bonne pratique si vous voulez traduire votre site plus tard.

- -
-

Note : Il y a un grand nombre d'autres méthodes et exemples au sujet de la validation des formulaires dans Form and field validation (Django Docs). Par exemple, au cas où vous avez plusieurs champs dépendants les uns des autres, vous pouvez réécrire la fonction Form.clean(), et lever de nouveau une ValidationError.

-
- -

C'est tout ce dont nous avons besoin pour notre formulaire dans cet exemple.

- -

Configuration d'URL

- -

Avant de créer notre vue, ajoutons une configuration d'URL pour la page renew-books. Copiez la configuration suivante à la fin de locallibrary/catalog/urls.py.

- -
urlpatterns += [
- url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'),
-]
- -

La configuration d'URL va rediriger les URLs ayant le format /catalog/book/<bookinstance id>/renew/ vers la fonction appelée renew_book_librarian() dans views.py, et envoyer l'id de BookInstance comme paramètre sous le nom pk. Le pattern ne fonctionnera que si pk est un uuid correctement formaté.

- -
-

Note : Nous pouvons appeler comme bon nous semble la donnée d'URL "pk" que nous avons capturée, car nous contrôlons complètement la fonction de notre view (nous n'utilisons pas une vue générique detail, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci pk, pour "primary key", est une convention qu'il est raisonnable d'utiliser !

-
- -

Vue

- -

Comme nous l'avons expliqué ci-dessus dans Django form handling process, la vue doit retourner le formulaire par défaut s'il est appelé pour la première fois, et ensuite soit le retourner à nouveau avec les messages d'erreur si les données sont invalides, soit gérer les données et rediriger vers une nouvelle page si elles sont valides. Pour effectuer ces différentes actions, la vue doit être en mesure de savoir si elle est appelée pour la première fois (et retourner le formulaire par défaut) ou pour la deuxième fois ou plus (et valider les données).

- -

Pour les formulaires qui utilisent une requête POST pour envoyer une information au serveur, la manière la plus commune de procéder pour la vue est de tester le type de requête POST (if request.method == 'POST':) pour repérer des requêtes de type validation de formulaire, et GET (en utilisant une condition else) pour identifer une requête initiale de création de formulaire. Si vous voulez utiliser une requête GET pour envoyer vos données, alors une approche classique pour savoir si la vue est invoquée pour la première fois ou non est de lire les données du formulaire (p. ex. lire une valeur cachée dans le formulaire).

- -

Le processus de renouvellement de livre va écrire dans notre base de données, aussi, par convention, nous utiliserons le type de requête POST. Le bout de code ci-dessous montre le procédé (très classique) pour cette sorte de vue basée sur des fonctions.

- -
import datetime
-
-from django.shortcuts import get_object_or_404
-from django.http import HttpResponseRedirect
-from django.core.urlresolvers import reverse
-
-from .forms import RenewBookForm
-
-def renew_book_librarian(request, pk):
-    book_inst=get_object_or_404(BookInstance, pk = pk)
-
-    # If this is a POST request then process the Form data
-    if request.method == 'POST':
-
-        # Create a form instance and populate it with data from the request (binding):
-        form = RenewBookForm(request.POST)
-
-        # Check if the form is valid:
-        if form.is_valid():
-            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
-            book_inst.due_back = form.cleaned_data['renewal_date']
-            book_inst.save()
-
-            # redirect to a new URL:
-            return HttpResponseRedirect(reverse('all-borrowed') )
-
-    # If this is a GET (or any other method) create the default form.
-    else:
-        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
-        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
-
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
- -

Nous importons tout d'abord notre formulaire (RenewBookForm) et un certain nombre d'autres objets/méthodes utiles, dont nous nous servons dans le corps de la fonction de notre vue :

- - - -

Dans la vue, nous utilisons d'abord l'argument pk dans la fonction get_object_or_404(), afin d'obtenir la BookInstance courante (si cette instance n'existe pas, la vue se termine immédiatement et la page va afficher une erreur ). Si ce n'est pas une requête POST (cas géré par la clause else), alors nous créons le formulaire par défaut en lui passant une valeur initial pour le champ renewal_date (comme montré en gras ci-dessous, c'est la date actuelle plus 3 semaines).

- -
 book_inst=get_object_or_404(BookInstance, pk = pk)
-
-    # If this is a GET (or any other method) create the default form
-    else:
-        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
-        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
-
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
- -

Après création du formulaire, nous appelons la fonction render() pour créer la page HTML, en précisant le template et un contexte qui contient notre formulaire. Dans ce cas, le contexte contient aussi notre BookInstance, que nous allons utiliser dans le template pour fournir des informations à propos du livre que nous sommes en train de renouveler.

- -

En revanche, s'il s'agit d'une requête POST, alors nous créons notre objet form et le peuplons avec des données récupérées dans la requête. Ce processus est appelé "binding" (liaison) et nous permet de valider le formulaire. Ensuite nous vérifions que le formulaire est valide, ce qui déclenche tout le code de validation sur tous les champs - ce qui inclut à la fois le code générique vérifiant que notre champ date est effectivement une date valide, et notre fonction clean_renewal_date(), spécifique à notre formulaire, pour vérifier que la date est dans le bon intervalle.

- -
    book_inst=get_object_or_404(BookInstance, pk = pk)
-
-    # If this is a POST request then process the Form data
-    if request.method == 'POST':
-
-        # Create a form instance and populate it with data from the request (binding):
-        form = RenewBookForm(request.POST)
-
-        # Check if the form is valid:
-        if form.is_valid():
-            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
-            book_inst.due_back = form.cleaned_data['renewal_date']
-            book_inst.save()
-
-            # redirect to a new URL:
-            return HttpResponseRedirect(reverse('all-borrowed') )
-
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
- -

Si le formulaire n'est pas valide, nous appelons aussi la fonction render(), mais cette fois les valeurs passées dans le contexte vont inclure les messages d'erreur.

- -

Si le formulaire est valide, alors nous pouvons commencer à utiliser les données, en y accédant à travers l'attribut form.cleaned_data (p. ex. data = form.cleaned_data['renewal_date']). Ici nous ne faisons que sauvegarder dans la valeur due_back de l'objet BookInstance associé les données reçues.

- -
-

Attention : Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple request.POST['renewal_date'], ou request.GET['renewal_date'] si vous utilisez une requête GET), ce n'est PAS recommandé. Les données nettoyées sont assainies, validées et converties en types standard Python.

-
- -

L'étape finale dans la partie "gestion de formulaire" de la vue est de rediriger vers une autre page, habituellement une page "success". Dans ce cas, nous utilisons HttpResponseRedirect et reverse() pour rediriger vers la vue appelée 'all-borrowed' (qui a été créée dans la partie "challenge" de Django Tutorial Part 8: User authentication and permissions. Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/').

- -

C'est tout ce qui est requis pour la gestion du formulaire lui-même, mais il nous faut encore restreindre l'accès à la vue aux seuls libraires. Nous devrions sans doute créer un nouveau réglage de permission dans BookInstance ("can_renew"), mais, pour ne pour ne pas compliquer les choses ici, nous allons simplement utiliser le décorateur de fonction @permission_required avec notre permission existante can_mark_returned.

- -

Le résultat final de la vue est donc comme indiqué ci-dessous. Veuillez copier ceci en bas de locallibrary/catalog/views.py.

- -
from django.contrib.auth.decorators import permission_required
-
-from django.shortcuts import get_object_or_404
-from django.http import HttpResponseRedirect
-from django.core.urlresolvers import reverse
-import datetime
-
-from .forms import RenewBookForm
-
-@permission_required('catalog.can_mark_returned')
-def renew_book_librarian(request, pk):
-    """
-    View function for renewing a specific BookInstance by librarian
-    """
-    book_inst=get_object_or_404(BookInstance, pk = pk)
-
-    # If this is a POST request then process the Form data
-    if request.method == 'POST':
-
-        # Create a form instance and populate it with data from the request (binding):
-        form = RenewBookForm(request.POST)
-
-        # Check if the form is valid:
-        if form.is_valid():
-            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
-            book_inst.due_back = form.cleaned_data['renewal_date']
-            book_inst.save()
-
-            # redirect to a new URL:
-            return HttpResponseRedirect(reverse('all-borrowed') )
-
-    # If this is a GET (or any other method) create the default form.
-    else:
-        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
-        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
-
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
-
- -

Le template

- -

Créez le template référencé dans la vue (/catalog/templates/catalog/book_renew_librarian.html) et copiez-y le code suivant :

- -
{% extends "base_generic.html" %}
-{% block content %}
-
- <h1>Renew: \{{bookinst.book.title}}</h1>
- <p>Borrower: \{{bookinst.borrower}}</p>
- <p{% if bookinst.is_overdue %} class="text-danger"{% endif %}>Due date: \{{bookinst.due_back}}</p>
-
- <form action="" method="post">
- {% csrf_token %}
- <table>
- \{{ form }}
-  </table>
- <input type="submit" value="Submit" />
- </form>
-
-{% endblock %}
- -

La majeure partie de ce code devrait vous être familière si vous avez suivi les tutoriels précédents. Nous étendons le template de base et ensuite redéfinissons le block "content". Nous sommes en mesure de référencer \{{ book_instance }} (et ses variables), puisqu'il a été passé dans l'objet context par la fonction render(), et nous utilisons tout cela pour lister le titre du livre, son emprunteur et la date originale de retour.

- -

Le code du formulaire est relativement simple. Nous déclarons d'abord les tags form, en précisant où le formulaire doit être adressé (action) et la method utilisée pour soumettre les donées (ici un "HTTP POST"). Si vous vous rappelez ce qui a été dit en haut de cette page (aperçu sur les HTML Forms), une action vide comme ici signifie que les données de formulaire seront postées à nouveau à l'URL actuelle (ce qui est le comportement que nous voulons !). À l'intérieur des tags, nous définissons le bouton , sur lequel l'utilisateur peut appuyer pour envoyer les données. Le {% csrf_token %} ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery".

- -
-

Note : Ajoutez le {% csrf_token %} à tout template Django que vous créeez et qui utilise POST pour soumettre les données. Cela réduira les risques qu'un utilisateur mal intentionné pirate vos formulaires.

-
- -

Tout ce qui reste est la variable de template \{{ form }}, que nous avons passée au template dans le dictionnaire de contexte. Peut-être sans surprise, quand il est utilisé comme indiqué, il fournit le rendu par défaut de tous les champs de formulaire, y compris leurs labels, widgets et textes d'aide. Voici le rendu :

- -
<tr>
-  <th><label for="id_renewal_date">Renewal date:</label></th>
-  <td>
-  <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required />
-  <br />
-  <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
-  </td>
-</tr>
-
- -
-

Note : Ce n'est peut-être pas évident, car nous n'avons qu'un seul champ, mais, par défaut, chaque champ est défini dans sa propre ligne de tableau. Ce même rendu est fourni si vous référencez la variable de template \{{ form.as_table }}.

-
- -

Si vous aviez entré une date invalide, vous obtiendriez en plus sur la page une liste des erreurs (indiquées en gras ci-dessous).

- -
<tr>
-  <th><label for="id_renewal_date">Renewal date:</label></th>
-  <td>
-  <ul class="errorlist">
-  <li>Invalid date - renewal in past</li>
-  </ul>
-  <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required />
-  <br />
-  <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
- </td>
-</tr>
- -

Autres façons d'utiliser la variable de template du formulaire

- -

Si vous utilisez \{{ form.as_table }} comme indiqué ci-dessus, chaque champ est rendu comme une ligne de tableau. Vous pouvez également rendre chaque champ comme un élément de liste (en utilisant \{{ form.as_ul }}) ou comme un paragraphe (en utilisant \{{ form.as_p }}).

- -

Il est également possible d'avoir un contrôle complet sur le rendu de chaque partie du formulaire, en indexant ses propriétés grâce à la notation pointée. Ainsi, par exemple, nous pouvons accéder un certain nombre d'éléments distincts pour notre champ renewal_date :

- - - -

Pour plus d'exemples sur la manière de rendre manuellement des formulaires dans des templates, et boucler de manière dynamique sur les champs du template, voyez Working with forms > Rendering fields manually (Django docs).

- -

Tester la page

- -

Si vous avez accepté le "challenge" dans Django Tutorial Part 8: User authentication and permissions, vous avez une liste de tous les livres empruntés dans la bibliothèque, ce qui n'est visible que pour le staff de la bibliothèque. Nous pouvons ajouter un lien vers notre page de renouvellement après chaque élément, en utilisant le code de template suivant.

- -
{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}
- -
-

Note : Souvenez-vous que votre login de test devra avoir la permission "catalog.can_mark_returned" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser).

-
- -

Vous pouvez aussi construire manuellement une URL de test comme ceci : http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (un id de bookinstance valide peut être obtenu en navigant vers une page de détail de livre dans votre bibliothèque, et en copiant le champ id).

- -

À quoi cela ressemble-t-il ?

- -

Si tout a bien marché, le formulaire par défaut ressemblera à ceci :

- -

- -

Le formulaire avec valeur erronée ressemblera à ceci :

- -

- -

La liste de tous les livres avec les liens vers le renouvellement ressemblera à ceci :

- -

- -

ModelForms

- -

Créer une classe  en utilisant l'approche décrite ci-dessus est très flexible et vous autorise à créer le type de page de formulaire que vous voulez, et à l'associer à tout type de modèle(s).

- -

Cependant, si vous avez seulement besoin d'un formulaire qui répertorie les champs d'un modèle unique, alors votre modèle définira déjà la plupart des informations requises dans votre formulaire : champs, labels, texte d'aide etc. Plutôt que de créer à nouveau les définitions du modèle dans votre formulaire, il est plus facile d'utiliser la classe d'aide ModelForm pour créer le formulaire d'après votre modèle. Ce ModelForm peut dès lors être utilisé à l'intérieur de vos vues exactement de la même manière qu'un Form ordinaire.

- -

Un ModelForm basique, contenant le même champ que notre RenewBookForm d'origine, est montré ci-dessous. Tout ce que vous avez à faire pour créer le formulaire, c'est ajouter class Meta avec le model (BookInstance) associé, et une liste des fields du modèle à inclure dans le formulaire (vous pouvez inclure tous les champs en utilisant fields = '__all__', ou bien utiliser exclude (au lieu de fields) pour préciser les champs à ne pas importer du modèle).

- -
from django.forms import ModelForm
-from .models import BookInstance
-
-class RenewBookModelForm(ModelForm):
- class Meta:
- model = BookInstance
- fields = ['due_back',]
-
- -
-

Note : Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple Form, et ça ne l'est effectivement pas dans ce cas, parce que nous n'avons qu'un seul champ. Cependant, si vous avez beaucoup de champs, cela peut réduire notablement la quantité de code !

-
- -

Le reste de l'information vient des définitions de champ données par le modèle (par ex. les labels, les widgets, le texte d'aide, les messages d'erreur). S'ils ne sont pas suffisamment satisfaisants, nous pouvons les réécrire dans notre class Meta, en précisant un dictionnaire contenant le champ à modifier et sa nouvelle valeur. Par exemple, dans ce formulaire, nous pourrions souhaiter, pour notre champ, un label tel que "Renewal date" (plutôt que celui par défaut, basé sur le nom du champ : Due Back), et nous voulons aussi que notre texte d'aide soit spécifique à ce cas d'utilisation. La classe Meta ci-dessous vous montre comment réécrire ces champs, et vous pouvez pareillement définir widgets et error_messages si les valeurs par défaut ne sont pas suffisantes.

- -
class Meta:
- model = BookInstance
- fields = ['due_back',]
- labels = { 'due_back': _('Renewal date'), }
- help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } 
-
- -

Pour ajouter une validation, vous pouvez utiliser la même approche que pour un Form normal : vous définissez une fonction appelée clean_field_name(), et vous levez des exceptions de type ValidationError pour les valeurs non valides. La seule différence par rapport à notre formulaire original, c'est que le champ de modèle est appelé due_back et non "renewal_date". Ce changement est nécessaire, dans la mesure où le champ correspondant dans BookInstance est appelé due_back.

- -
from django.forms import ModelForm
-from .models import BookInstance
-
-class RenewBookModelForm(ModelForm):
-    def clean_due_back(self):
-       data = self.cleaned_data['due_back']
-
-  #Check date is not in past.
-       if data < datetime.date.today():
-           raise ValidationError(_('Invalid date - renewal in past'))
-
-       #Check date is in range librarian allowed to change (+4 weeks)
-       if data > datetime.date.today() + datetime.timedelta(weeks=4):
-           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
-
-       # Remember to always return the cleaned data.
-       return data
-
- class Meta:
- model = BookInstance
- fields = ['due_back',]
- labels = { 'due_back': _('Renewal date'), }
- help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
-
- -

La classe RenewBookModelForm ci-dessus est maintenant fonctionnellement équivalente à notre RenewBookForm d'origine. Vous pourriez l'importer et l'utiliser partout où vous utilisez RenewBookForm, du moment que vous changez aussi de renewal_date en due_back le nom de variable du formulaire correspondant, comme dans la deuxième déclaration du formulaire : RenewBookModelForm(initial={'due_back': proposed_renewal_date}.

- -

Vues génériques d'édition

- -

L'algorithme de gestion des formulaires que nous avons utilisé ci-dessus dans notre exemple de vue basée sur une fonction, représente un processus extrêmement commun dans vues destinées à éditer un formulaire. Django abstrait pour vous la plus grande partie de ce processus répétitif ("boilerplate") en proposant des generic editing views pour les vues de création, éditition et suppression basées sur des modèles. Ces vues génériques non seulement assument le comportement d'une vue, mais elles créent automatiquement la classe de formulaire (un ModelForm) pour vous à partir du modèle.

- -
-

Note : En plus des vues d'édition décrites ici, il existe aussi une classe FormView, qui se tient, en termes de rapport "flexibilité"/"effort codage", à mi-chemin entre notre vue basée sur une fonction et les autres vues génériques. En utilisant FormView, vous avez encore besoin de créer votre Form, mais vous n'avez pas besoin d'implémenter tous les éléments d'une gestion standard de formulaire. À la place, vous n'avez qu'à fournir une implémentation de la fonction qui sera appelée une fois que les données envoyées sont reconnues valides.

-
- -

Dans cette section, nous allons utiliser des vues génériques d'édition pour créer des pages afin de pouvoir ajouter les fonctionnalités de création, d'édition et de suppression des enregistrements de type Author de notre bibliothèque, en fournissant efficacement une réimplémentation basique de certaines parties du site Admin (cela peut être intéressant si vous avez besoin d'offrir une fonctionnalité admin d'une manière plus flexible que ce qui peut être présenté par le site admin).

- -

Vues

- -

Ouvrez le fichier vue (locallibrary/catalog/views.py) et ajoutez le bloc de code suivant à la fin :

- -
from django.views.generic.edit import CreateView, UpdateView, DeleteView
-from django.urls import reverse_lazy
-from .models import Author
-
-class AuthorCreate(CreateView):
- model = Author
- fields = '__all__'
- initial={'date_of_death':'12/10/2016',}
-
-class AuthorUpdate(UpdateView):
- model = Author
- fields = ['first_name','last_name','date_of_birth','date_of_death']
-
-class AuthorDelete(DeleteView):
- model = Author
- success_url = reverse_lazy('authors')
- -

Comme vous pouvez le voir, pour les vues "créer", "modifier" et "supprimer", vous avez besoin de dériver respectivement des vues génériques CreateView, UpdateView, et DeleteView, et de définir ensuite le modèle associé.

- -

Pour les cas "créer" et "modifier", vous devez aussi préciser les champs à afficher dans le formulaire (en utilisant la même syntaxe que pour la classe ModelForm). Dans ce cas, nous montrons à la fois la syntaxe pour afficher "tous" les champs, et comment vous pouvez les lister un par un. Vous pouvez aussi spécifier les valeurs initiales pour chacun des champs, en utilisant un dictionnaire de paires nom_du_champ/valeur (ici nous définissons arbitrairement la date de mort, uniquement dans un but de démonstration - sans doute voudrez-vous l'enlever !). Par défaut, ces vues vont rediriger en cas de succès vers une page affichant l'élément nouvellement créé ou modifié, ce qui, dans notre cas, sera la vue "détail" d'un auteur, créée dans un précédent tutoriel. Vous pouvez spécifier un autre lieu de redirection en déclarant explicitement le paramètre success_url (comme indiqué dans la classe AuthorDelete).

- -

La classe  ne requiert pas l'affichage d'aucun champ, aussi n'ont-ils pas besoin d'être précisés. Par contre il vous faut bien spécifier la success_url, car Django n'a pas de valeur par défaut pour cela. Dans ce cas, nous utilisons la fonction  pour rediriger vers notre liste d'auteurs après qu'un auteur ait été supprimé. reverse_lazy() est une version de reverse() exécutée mollement ("lazily"), que nous utilisons ici parce que nous fournissons une URL à un attribut de vue basée sur classe.

- -

Templates

- -

Les vues "créer" et "modifier" utilisent le même template par défaut, lequel sera nommé d'après votre modèle : model_name_form.html (vous pouvez changer le suffixe en autre chose que _form en utilisant le champ template_name_suffix dans votre vue, par exemple template_name_suffix = '_other_suffix').

- -

Créez le fichier de template locallibrary/catalog/templates/catalog/author_form.html, et copiez-y le texte suivant.

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-
-<form action="" method="post">
- {% csrf_token %}
- <table>
- \{{ form.as_table }}
- </table>
- <input type="submit" value="Submit" />
-
-</form>
-{% endblock %}
- -

Ce formulaire est semblable à nos formulaires précédents et affiche les champs en utilisant un tableau. Notez aussi comment nous déclarons à nouveau le {% csrf_token %} pour nous assurer que nos formulaires résisteront à d'éventuelles attaques par CSRF (Cross Site Request Forgery).

- -

La vue "supprimer" s'attend à trouver un template avec un nom au format model_name_confirm_delete.html (de nouveau, vous pouvez changer le suffixe en utilisant template_name_suffix dans votre vue). Créez le fichier de template locallibrary/catalog/templates/catalog/author_confirm_delete.html, et copiez-y le texte suivant.

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-
-<h1>Delete Author</h1>
-
-<p>Are you sure you want to delete the author: \{{ author }}?</p>
-
-<form action="" method="POST">
- {% csrf_token %}
- <input type="submit" action="" value="Yes, delete." />
-</form>
-
-{% endblock %}
-
- -

Configurations d'URL

- -

Ouvrez votre fichier de configuration d'URL (locallibrary/catalog/urls.py) et ajoutez-y à la fin la configuration suivante :

- -
urlpatterns += [
- url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'),
- url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'),
- url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'),
-]
- -

Il n'y a rien de particulièrement nouveau ici ! Vous pouvez voir que les vues sont des classes, et doivent dès lors être appelée via .as_view(), et vous devriez être capable de reconnaître les patterns d'URL dans chaque cas. Nous devons utiliser pk comme nom pour la valeur de nos clés primaires capturées, car c'est le nom de paramètre attendu par les classes de vue.

- -

Les pages de création, modification et suppression d'auteur sont maintenant prêtes à être testées (nous ne nous mettons pas en peine pour cette fois, bien que vous puissiez le faire si vous le souhaiter, de les accrocher dans la barre latérale du site).

- -
-

Note : Les utilisateurs observateurs auront remarqué que nous n'avons rien fait pour empêcher les utilisateurs non autorisés d'accéder ces pages ! Nous laissons cela comme exercice pour vous (suggestion : vous pourriez utiliser le PermissionRequiredMixin, et soit créer une nouvelle permission, soit réutiliser notre permissioncan_mark_returned ).

-
- -

Test de la page

- -

Tout d'abord, connectez-vous au site avec un compte ayant les permissions que vous avez définies comme nécessaires pour accéder aux pages d'édition d'auteur.

- -

Ensuite naviguez à la page de création d'auteur : http://127.0.0.1:8000/catalog/author/create/, ce qui devrait ressembler à la capture d'écran ci-dessous.

- -

Form Example: Create Author

- -

Entrez des valeurs pour les champs et ensuite cliquez sur Submit pour sauvegarder l'enregistrement de cet auteur. Vous devriez maintenant être conduit à une vue "détail" pour votre nouvel auteur, avec une URL du genre http://127.0.0.1:8000/catalog/author/10.

- -

Vous pouvez tester l'édition d'un enregistrement en ajoutant /update/ à la fin de l'URL "détail" (par exemple http://127.0.0.1:8000/catalog/author/10/update/). Nous ne mettons pas de capture d'écran, car c'est à peu près la même chose que la page "create".

- -

Enfin, nous pouvons effacer l'enregistrement en ajoutant "delete" à la fin de l'URL de détail (par exemple http://127.0.0.1:8000/catalog/author/10/delete/). Django devrait vous afficher la page de suppression montrée ci-dessous. Cliquez sur "Yes, delete" pour supprimer l'enregistrement et être reconduit à la liste des auteurs.

- -

- -

Mettez-vous au défi

- -

Créez des formulaires pour créer, modifier et effacer des enregistrements de type Book. Vous pouvez utiliser exactement la même structure que pour les Authors. Si votre template book_form.html est simplement copié-renommé à partir du template author_form.html, alors la nouvelle page "create book" va ressembler à quelque chose comme ceci :

- -

- - - -

Résumé

- -

Créer et gérer des formulaires peut être un processus compliqué ! Django le rend bien plus aisé en fournissant des mécanismes de programmation pour déclarer, rendre et valider des formulaires. Django fournit de plus des vues génériques d'édition de formulaires, qui peuvent faire presque tout le travail si vous voulez définir des pages pour créer, modifier et supprimer des enregistrements associés à une instance d'un modèle unique.

- -

Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste See also ci-dessous), mais vous devez être maintenant en mesure de comprendre comment ajouter des formulaires basiques et un code de gestion de formulaire à vos propres sites web.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}

diff --git a/files/fr/learn/server-side/django/forms/index.md b/files/fr/learn/server-side/django/forms/index.md new file mode 100644 index 0000000000..2d63644055 --- /dev/null +++ b/files/fr/learn/server-side/django/forms/index.md @@ -0,0 +1,651 @@ +--- +title: 'Django Tutorial Part 9: Working with forms' +slug: Learn/Server-side/Django/Forms +tags: + - Beginner + - CodingScripting + - DjangoForms + - Forms + - HTML forms + - Learn + - Tutorial + - django + - server side +translation_of: Learn/Server-side/Django/Forms +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
+ +

Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web LocalLibrary pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs. 

+ + + + + + + + + + + + +
Prérequis:Avoir terminé les formations précédentes, y compris Django Tutorial Part 8: User authentication and permissions.
Objectifs:Comprendre comment écrire des formulaires pour récupérer des informations de la part des utilisateurs et mettre à jour la base de données. Comprendre commment il est possible de simplifier grandement la création de formulaires si l 'on travaille avec un seul modèle en utilisant les vues génériques de formulaires d'éditions s'appuyant sur des classes.   
+ +

Vue d'ensemble

+ +

Un formulaire HTML regroupe au moins un champ remplissable et des composants élémentaires d'interface web.  Il peut être utilisé pour réunir des saisies de la part des utilisateurs avant envoi vers un serveur. Les formulaires sont souples: ils s'adaptent à plusieurs modes de saisie. En effet, Il existe des composants élementaires d'interfaces graphique pour des  modes de saisie non contrainte avec une zone de saisie de texte, ou resteinte au type date avec un date picker,  la saisie d'un variable optionnelle via une boîte à cocher,  d'un choix à faire parmi plusieurs valeurs possibles avec les boutons radio etc... . Les formulaires permettent de partager des informations avec le serveur de manière relativement sécurisée  car ils permettent d'envoyer des requêtes de  type POST protégeant de la falsification des requêtes inter-site.

+ +

Bien que nous n'ayons pas encore créé de formulaire au cours de cette formation, nous en avons déjà rencontré sur l'interface d'administration Django Admin — par exemple la capture d'écran ci-dessous montre un formulaire d'édition  de l'un de nos modèle de Book  (livre), comprenant des composants élémentaires d'interface graphique de chois de valeur parmi une liste proposée,  et des zones des saisie de texte.

+ +

Admin Site - Book Add

+ +

Travailler avec des formulaires peut s'avérer compliqué ! Les développeurs doivent non seulement écrire le code  HTML pour le formulaire, mais aussi vérifier et corriger sur le serveur les données saisies (et éventuellement aussi dans le navigateur), renvoyer le formulaire avec des messages d'erreur pour informer les usagers de tout champ invalide, prendre en charge les données quand elles passent l'étape de vérification, et finalement renvoyer une information à l'utilisateur d'une manière ou d'une autre pour indiquer ce succès. Les formulaires sous Django enlèvent beaucoup de travail à chacune de ces étapes, grâce à un cadriciel qui permet de déclarer des formulaires et leurs champs à travers un langage de programmation, puis d'utiliser ces objets non seulement pour générer le code HTML, mais aussi une grosse partie de la vérification des données et du retour d'information à l'utilisateur.

+ +

Dans cette formation, nous allons vous montrer quelque-unes des manièrs de créer et de travailler avec les formulaires, et en particulier, comment les vues sur les formulaires génériques d'édition peuvent réduire significativement la quantité de travail à fournir pour créer les formulaires de manipulation de vos modèles. En chemin nous allons étendre notre application LocalLibrary en ajoutant un formulaire permettant aux bibliothécaires de prolonger le prêt de libres, et nous allons créer des pages pour créer, modifier et supprimer des livres et des auteurs (reproduisant une version basique du formulaire ci-dessus pour éditer des livres. )

+ +

Formulaires HTML

+ +

D'abord, un premier aperçu des formulaires HTML (HTML Forms). Soit un formulaire HTML simple, composé d'un unique champ de saisie texte , présent pour y entrer le nom d'une "équipe" quelconque, et son sa description dans l'étiquette associée :

+ +

Simple name field example in HTML form

+ +

Le formulaire est défini en HTML comme une collection d'éléments enfermés entre deux balises <form> ... </form> contenant au moins une balise <input> dont la valeur d'attribut 'type' doit valoir "submit":

+ +
<form action="/team_name_url/" method="post">
+    <label for="team_name">Enter name: </label>
+    <input id="team_name" type="text" name="name_field" value="Default name for team.">
+    <input type="submit" value="OK">
+</form>
+
+ +

Bien qu'ici nous n'ayons qu'un champ de saisie texte destiné à recevoir le nom d'équipe, une formulaire pourrait avoir un nombre quelconque d'autres champs de saisie et leurs étiquettes de description associées. La valeur de l'attribut 'type' définit la sorte de composant élementaire d'interface graphique  affichée. Les attributs 'id' et 'name' permettent d'identifier le champ en JavaScript/CSS/HTML alors que l'attribut 'value' définit la valeur initiale du champ lorsqu'il est affiché pour la première fois. La description associée  est déclarée par la balise <label> (voir "Enter Name" au dessus) , avec un attribut 'for' devant contenir la valeur de l'attribut 'id' du champ imput à laquelle on souhaite l'associer.  

+ +

La balise <input> dont l'attribut 'type' vaut submit sera affichée (par défaut) comme un bouton  qui peut être cliqué par l'utilisateur pour envoyer vers le serveur les données figurant dans tous les autres éléments de formulaire <input> (dans le cas présent, la valeur actuelle de 'team name'. Les attributs de formulaire déterminent d'une part la méthode HTTP (attribut method) utilisée pour envoyer les donnnées et d'autre part la destination des données sur le serveur (attribut action ):

+ + + +

Le rôle du serveur est d'abord de fournir le formulaire sous sa forme initiale  — c'est à dire une série de champs soit vides, soit préremplis avec des valeurs initiales. Après l'impulsion de l'utilisateur sur le bouton submit, le seurveur va recevoir les données du formulaire avec les valeurs saisies dans le navigateur, et va devoir vérifier ces données. Si le formulaire contient des données invalides, le seurveur devrait afficher le formulaire de nouveau, cette fois ci avec les données utilisateur entrées dans les champs "valides" et des messages pour décrire le problème pour les champs invalides. Dès que le serveur reçoit une requête dont tous les données de champs sont valides, il peut effectuer les actions appropriées ( c'est à dire sauver les données, renvoyer le résultat d'une recherche, téléverser un fichier, etc...)  et ensuite notifier l'utilisateur .  

+ +

Comme vous pouvez l'imaginer, créer le code HTML, vérifier les données envoyées, réafficher les données entrées avec l'adjonction de rapports sur les erreurs, effectuer les opérations désirées sur les données valides peut représenter pas mal d'efforts de réflexion et d'essais erreur. Django rend cela bien plus facile, en enlevant la nécessité de concevoir une partie de ce code pénible et répétitif!

+ +

Les étapes de gestion d'un formulaire avec Django

+ +

Django gère un formulaire en utilisant les mêmes techniques qu'évoquées lors des formations précédentes (pour afficher des informations à propos de nos modèles): La vue reçoit une requête, exécute toute acion nécessaire, incluant la lecture de données depuis les modèles, puis génère une page HTML (à partir d'un squelette à qui nous transmettons un contexte contenant les données à afficher ). Ce qui rend les choses plus compliquées, c'est que le serveur a aussi besoin d'être capable de traiter les données fournies par l'utilisateur (pas seulement le contexte) et doit pouvoir réafficher les pages s'il y a une quelconque erreur.

+ +

Voici ci-dessous un diagramme représentant les étapes de gestion d'un formulaire de requêtes, commencant par la demande par le navigateur d'une page, dont le code HTML se trouve contenir un formulaire (en vert).

+ +

Updated form handling process doc.

+ +

En se basant sur la lecture du diagramme ci-dessus, les tâches principales dont s'aquitte Django à l'occasion de la gestion d'un formulaire sont : 

+ +
    +
  1. Afficher le formulaire sous sa forme par défaut la première fois où il est demandé par l'utilisateur. +
      +
    • Le formulaire peut contenir des champs vides (par exemple si vous créez un nouvel enregistrement ) ou peut être prérempli de valeurs initiales (par exemple si vous modifiez les valeurs d'un enregistrement existant, ou que ces champs ont des valeurs initiales utiles ).
      • +
    • Le formulaire est qualifié à cette étape de formulaire libre, parce qu'il n'est associé à aucune donnée entré par l'utilisateur (bien qu'il puisse avoir des valeurs initiales) . 
      • +
    +
    2. +
  2. Recevoir des données d'une requete d'envoi de données et les lier au formulaire. +
      +
    • Lier les données au formulaire signifie que les données entrées par l'utilisateur, ainsi que les erreurs éventuelles sont accessibles lorsque nous avons besoin de réafficher le formulaire. 
      • +
    +
    3. +
  3. Nettoyer et valider les données +
      +
    • Le nettoyage de données consiste à désinfecter la saisie (par exemple en supprimant les caractères non valides, et qui pourraient être utilisés pour envoyer du contenu malveillant au serveur.) et à convertir ces données en types Python cohérents. 
      • +
    • La validation vérifie que les valeurs envoyées sont appropriées au champ (par exemple dans le bon intervalle de dates, ni trop long ni trop court, etc.) 
      • +
    +
    4. +
  4. Si une donnée n'est pas valide, ré-affiche le formulaire, cette fois-ci avec les données déjà saisies par l'utilisateur et les messages d'erreur pour les champs en erreur.
    5. +
  5. Si toutes les données sont conformes, effectue les actions demandées (e.g. sauvegarde les données, envoyer un mail, renvoie le résultat d'une recherche, télécharge un fichier etc.)
    6. +
  6. Une fois toutes ces actions accomplies, redirige l'utilisateur vers une autre page.
    7. +
+ +

Django fournit une multitude d'outils et de méthodes pour vous assister dans les tâches mentionnées ci-dessus. Parmi eux la plus importante, la classe Form, qui simplifie à la fois la production de formulaire HTML mais aussi la validation de donnée. In the next section we describe how forms work using the practical example of a page to allow librarians to renew books.

+ +
+

Note : Comprendre l'utilisation de Form vous aidera quand nous parlerons des classes de formulaires de Django plus complexes. 

+
+ +

Formulaire de renouvellement de livre par l'utilisation de vue Form

+ +

Nous allons maintenant créer une page qui permettra aux bibliothécaires de renouveler les livres empruntés (les rendre disponible à nouveau). Pour cela nous allons créer un formulaire qui permet aux utilisateurs de saisir une valeur de type Date. Considérons le champ avec une valeur initiale égale à la date du jour plus 3 semaines (la période normale d'emprunt d'un livre), et ajouter une validation pour s'assurer que le bibliothécaire ne peut pas saisir une date dans le passé ou une date trop éloignée dans le futur. Quand une date valide a été entrée, nous l'enregistrons dans le champ BookInstance.due_back de l'enregistrement courant.

+ +

L'exemple va utiliser une vue basée sur une fonction et une classe Form. Les sections suivantes expliquent comment les formulaires fonctionnent, et les changements que vous devez faire à notre projet en cours LocalLibrary.

+ +

Formulaire

+ +

La classe Form est le cœur du système de gestion des formulaires de Django. Elle spécifie les champs présents dans le formulaire, affiche les widgets, les labels, les valeurs initiales, les valeurs valides et (après validation) les messages d'erreur associés aux champs invalides. Cette classe fournit également des méthodes pour se restituer elle-même dans les templates en utilisant des formats prédéfinis (tables, listes etc.) ou pour obtenir la valeur de chaque élément de formulaire (permettant un rendu manuel fin).

+ +

Déclarer un formulaire

+ +

La syntaxe de déclaration pour un Form est très semblable à celle utilisée pour déclarer un Model, et partage les mêmes types de champs (et des paramètres similaires). Cela est logique, puisque dans les deux cas nous avons besoin de nous assurer que chaque champ gère le bon type de donnée, est contraint lors de la validation des données, et a une description pour l'affichage/la documentation.

+ +

Les données de formulaire sont stockées dans un fichier application forms.py, à l'intérieur du répertoire de l'application. Créez et ouvrez le fichier locallibrary/catalog/forms.py. Pour créer un Form, nous importons la bibliothèque forms, dérivons une classe de la classe Form, et déclarons les champs du formulaire. Une classe très basique de formulaire pour notre formulaire de renouvellement de livre dans notre bibliothèque est montrée ci-dessous :

+ +
from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+ +

Champs de formulaire

+ +

Dans ce cas, nous avons un unique champ DateField pour entrer la date du renouvellement, qui sera rendue en HTML avec une valeur vide, le label par défaut "Renewal date:", et un texte utilitaire indiquant comment s'en servir : "Enter a date between now and 4 weeks (default 3 weeks)." Comme aucun des autres arguments optionnels ne sont spécifiés, le champ acceptera des dates en utilisant les input_formats suivants : YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), et sera rendu en utilisant le widget par défaut : DateInput.

+ +

Il y a beaucoup d'autres types de champs, que vous reconnaîtrez sans peine en raison de leur ressemblance avec les classes de champs équivalentes pour les modèles : BooleanField, CharField, ChoiceField, TypedChoiceField, DateField, DateTimeField, DecimalField, DurationField, EmailField, FileField, FilePathField, FloatField, ImageField, IntegerField, GenericIPAddressField, MultipleChoiceField, TypedMultipleChoiceField, NullBooleanField, RegexField, SlugField, TimeField, URLField, UUIDField, ComboField, MultiValueField, SplitDateTimeField, ModelMultipleChoiceField, ModelChoiceField​​​​.

+ +

Les arguments communs de la plupart des champs sont listés ci-dessous (ils ont les valeurs les plus communes par défaut) :

+ + + +

Validation

+ +

Django fournit un grand nombre d'endroits pour valider vos données. La façon la plus simple de valider un champ unique est de remplacer la méthode clean_<fieldname>() pour le champ à vérifier. Ainsi, par exemple, nous pouvons vérifier que les valeurs entrées pour le champ renewal_date sont entre maintenant et dans 4 semaines, en implémentant la méthode clean_renewal_date() comme montré ci-après.

+ +

Mettez à jour votre fichier forms.py, de telle sorte qu'il ressemble à cela :

+ +
from django import forms
+
+from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+import datetime #for checking renewal date range.
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        #Check date is not in past.
+        if data < datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        #Check date is in range librarian allowed to change (+4 weeks).
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data
+ +

Il y a deux choses importantes à noter. La première est que nous accédons à nos données en utilisant self.cleaned_data['renewal_date'], et que nous retournons ces données, que nous les ayons changées ou non, à la fin de la fonction. Cette étape nous donne des données "nettoyées", purgées de valeurs potentiellement dangereuses en utilisant les validateurs par défaut, et converties en type standard correct pour les données considérées (dans ce cas un objet Python datetime.datetime).

+ +

Le deuxième point est que, si une valeur tombe en dehors de l'intervalle que nous avons autorisé, nous levons une ValidationError, en spécifiant le texte d'erreur que nous voulons afficher dans la zone du formulaire prévue pour le cas où l'utilisateur entre une valeur incorrecte. L'exemple ci-dessus enveloppe aussi ce texte dans ugettext_lazy() (importée comme _()), une des fonctions de traduction Django, ce qui est une bonne pratique si vous voulez traduire votre site plus tard.

+ +
+

Note : Il y a un grand nombre d'autres méthodes et exemples au sujet de la validation des formulaires dans Form and field validation (Django Docs). Par exemple, au cas où vous avez plusieurs champs dépendants les uns des autres, vous pouvez réécrire la fonction Form.clean(), et lever de nouveau une ValidationError.

+
+ +

C'est tout ce dont nous avons besoin pour notre formulaire dans cet exemple.

+ +

Configuration d'URL

+ +

Avant de créer notre vue, ajoutons une configuration d'URL pour la page renew-books. Copiez la configuration suivante à la fin de locallibrary/catalog/urls.py.

+ +
urlpatterns += [
+ url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'),
+]
+ +

La configuration d'URL va rediriger les URLs ayant le format /catalog/book/<bookinstance id>/renew/ vers la fonction appelée renew_book_librarian() dans views.py, et envoyer l'id de BookInstance comme paramètre sous le nom pk. Le pattern ne fonctionnera que si pk est un uuid correctement formaté.

+ +
+

Note : Nous pouvons appeler comme bon nous semble la donnée d'URL "pk" que nous avons capturée, car nous contrôlons complètement la fonction de notre view (nous n'utilisons pas une vue générique detail, laquelle attendrait des paramètres avec un certain nom). Cependant, le raccourci pk, pour "primary key", est une convention qu'il est raisonnable d'utiliser !

+
+ +

Vue

+ +

Comme nous l'avons expliqué ci-dessus dans Django form handling process, la vue doit retourner le formulaire par défaut s'il est appelé pour la première fois, et ensuite soit le retourner à nouveau avec les messages d'erreur si les données sont invalides, soit gérer les données et rediriger vers une nouvelle page si elles sont valides. Pour effectuer ces différentes actions, la vue doit être en mesure de savoir si elle est appelée pour la première fois (et retourner le formulaire par défaut) ou pour la deuxième fois ou plus (et valider les données).

+ +

Pour les formulaires qui utilisent une requête POST pour envoyer une information au serveur, la manière la plus commune de procéder pour la vue est de tester le type de requête POST (if request.method == 'POST':) pour repérer des requêtes de type validation de formulaire, et GET (en utilisant une condition else) pour identifer une requête initiale de création de formulaire. Si vous voulez utiliser une requête GET pour envoyer vos données, alors une approche classique pour savoir si la vue est invoquée pour la première fois ou non est de lire les données du formulaire (p. ex. lire une valeur cachée dans le formulaire).

+ +

Le processus de renouvellement de livre va écrire dans notre base de données, aussi, par convention, nous utiliserons le type de requête POST. Le bout de code ci-dessous montre le procédé (très classique) pour cette sorte de vue basée sur des fonctions.

+ +
import datetime
+
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.core.urlresolvers import reverse
+
+from .forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

Nous importons tout d'abord notre formulaire (RenewBookForm) et un certain nombre d'autres objets/méthodes utiles, dont nous nous servons dans le corps de la fonction de notre vue :

+ + + +

Dans la vue, nous utilisons d'abord l'argument pk dans la fonction get_object_or_404(), afin d'obtenir la BookInstance courante (si cette instance n'existe pas, la vue se termine immédiatement et la page va afficher une erreur ). Si ce n'est pas une requête POST (cas géré par la clause else), alors nous créons le formulaire par défaut en lui passant une valeur initial pour le champ renewal_date (comme montré en gras ci-dessous, c'est la date actuelle plus 3 semaines).

+ +
 book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

Après création du formulaire, nous appelons la fonction render() pour créer la page HTML, en précisant le template et un contexte qui contient notre formulaire. Dans ce cas, le contexte contient aussi notre BookInstance, que nous allons utiliser dans le template pour fournir des informations à propos du livre que nous sommes en train de renouveler.

+ +

En revanche, s'il s'agit d'une requête POST, alors nous créons notre objet form et le peuplons avec des données récupérées dans la requête. Ce processus est appelé "binding" (liaison) et nous permet de valider le formulaire. Ensuite nous vérifions que le formulaire est valide, ce qui déclenche tout le code de validation sur tous les champs - ce qui inclut à la fois le code générique vérifiant que notre champ date est effectivement une date valide, et notre fonction clean_renewal_date(), spécifique à notre formulaire, pour vérifier que la date est dans le bon intervalle.

+ +
    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

Si le formulaire n'est pas valide, nous appelons aussi la fonction render(), mais cette fois les valeurs passées dans le contexte vont inclure les messages d'erreur.

+ +

Si le formulaire est valide, alors nous pouvons commencer à utiliser les données, en y accédant à travers l'attribut form.cleaned_data (p. ex. data = form.cleaned_data['renewal_date']). Ici nous ne faisons que sauvegarder dans la valeur due_back de l'objet BookInstance associé les données reçues.

+ +
+

Attention : Alors que vous pouvez accéder aussi aux données de formulaire directement à travers la requête (par exemple request.POST['renewal_date'], ou request.GET['renewal_date'] si vous utilisez une requête GET), ce n'est PAS recommandé. Les données nettoyées sont assainies, validées et converties en types standard Python.

+
+ +

L'étape finale dans la partie "gestion de formulaire" de la vue est de rediriger vers une autre page, habituellement une page "success". Dans ce cas, nous utilisons HttpResponseRedirect et reverse() pour rediriger vers la vue appelée 'all-borrowed' (qui a été créée dans la partie "challenge" de Django Tutorial Part 8: User authentication and permissions. Si vous n'avez pas créé cette page, vous pouvez rediriger vers la page d'accueil à l'URL '/').

+ +

C'est tout ce qui est requis pour la gestion du formulaire lui-même, mais il nous faut encore restreindre l'accès à la vue aux seuls libraires. Nous devrions sans doute créer un nouveau réglage de permission dans BookInstance ("can_renew"), mais, pour ne pour ne pas compliquer les choses ici, nous allons simplement utiliser le décorateur de fonction @permission_required avec notre permission existante can_mark_returned.

+ +

Le résultat final de la vue est donc comme indiqué ci-dessous. Veuillez copier ceci en bas de locallibrary/catalog/views.py.

+ +
from django.contrib.auth.decorators import permission_required
+
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.core.urlresolvers import reverse
+import datetime
+
+from .forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """
+    View function for renewing a specific BookInstance by librarian
+    """
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+
+ +

Le template

+ +

Créez le template référencé dans la vue (/catalog/templates/catalog/book_renew_librarian.html) et copiez-y le code suivant :

+ +
{% extends "base_generic.html" %}
+{% block content %}
+
+ <h1>Renew: \{{bookinst.book.title}}</h1>
+ <p>Borrower: \{{bookinst.borrower}}</p>
+ <p{% if bookinst.is_overdue %} class="text-danger"{% endif %}>Due date: \{{bookinst.due_back}}</p>
+
+ <form action="" method="post">
+ {% csrf_token %}
+ <table>
+ \{{ form }}
+  </table>
+ <input type="submit" value="Submit" />
+ </form>
+
+{% endblock %}
+ +

La majeure partie de ce code devrait vous être familière si vous avez suivi les tutoriels précédents. Nous étendons le template de base et ensuite redéfinissons le block "content". Nous sommes en mesure de référencer \{{ book_instance }} (et ses variables), puisqu'il a été passé dans l'objet context par la fonction render(), et nous utilisons tout cela pour lister le titre du livre, son emprunteur et la date originale de retour.

+ +

Le code du formulaire est relativement simple. Nous déclarons d'abord les tags form, en précisant où le formulaire doit être adressé (action) et la method utilisée pour soumettre les donées (ici un "HTTP POST"). Si vous vous rappelez ce qui a été dit en haut de cette page (aperçu sur les HTML Forms), une action vide comme ici signifie que les données de formulaire seront postées à nouveau à l'URL actuelle (ce qui est le comportement que nous voulons !). À l'intérieur des tags, nous définissons le bouton , sur lequel l'utilisateur peut appuyer pour envoyer les données. Le {% csrf_token %} ajouté juste à l'intérieur des tags "form" est un des éléments de protection utilisés par Django contre les "cross-site forgery".

+ +
+

Note : Ajoutez le {% csrf_token %} à tout template Django que vous créeez et qui utilise POST pour soumettre les données. Cela réduira les risques qu'un utilisateur mal intentionné pirate vos formulaires.

+
+ +

Tout ce qui reste est la variable de template \{{ form }}, que nous avons passée au template dans le dictionnaire de contexte. Peut-être sans surprise, quand il est utilisé comme indiqué, il fournit le rendu par défaut de tous les champs de formulaire, y compris leurs labels, widgets et textes d'aide. Voici le rendu :

+ +
<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+  <td>
+  <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required />
+  <br />
+  <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+  </td>
+</tr>
+
+ +
+

Note : Ce n'est peut-être pas évident, car nous n'avons qu'un seul champ, mais, par défaut, chaque champ est défini dans sa propre ligne de tableau. Ce même rendu est fourni si vous référencez la variable de template \{{ form.as_table }}.

+
+ +

Si vous aviez entré une date invalide, vous obtiendriez en plus sur la page une liste des erreurs (indiquées en gras ci-dessous).

+ +
<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+  <td>
+  <ul class="errorlist">
+  <li>Invalid date - renewal in past</li>
+  </ul>
+  <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required />
+  <br />
+  <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+ </td>
+</tr>
+ +

Autres façons d'utiliser la variable de template du formulaire

+ +

Si vous utilisez \{{ form.as_table }} comme indiqué ci-dessus, chaque champ est rendu comme une ligne de tableau. Vous pouvez également rendre chaque champ comme un élément de liste (en utilisant \{{ form.as_ul }}) ou comme un paragraphe (en utilisant \{{ form.as_p }}).

+ +

Il est également possible d'avoir un contrôle complet sur le rendu de chaque partie du formulaire, en indexant ses propriétés grâce à la notation pointée. Ainsi, par exemple, nous pouvons accéder un certain nombre d'éléments distincts pour notre champ renewal_date :

+ + + +

Pour plus d'exemples sur la manière de rendre manuellement des formulaires dans des templates, et boucler de manière dynamique sur les champs du template, voyez Working with forms > Rendering fields manually (Django docs).

+ +

Tester la page

+ +

Si vous avez accepté le "challenge" dans Django Tutorial Part 8: User authentication and permissions, vous avez une liste de tous les livres empruntés dans la bibliothèque, ce qui n'est visible que pour le staff de la bibliothèque. Nous pouvons ajouter un lien vers notre page de renouvellement après chaque élément, en utilisant le code de template suivant.

+ +
{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a> {% endif %}
+ +
+

Note : Souvenez-vous que votre login de test devra avoir la permission "catalog.can_mark_returned" pour pouvoir accéder la page de renouvellement de livre (utilisez peut-être votre compte superuser).

+
+ +

Vous pouvez aussi construire manuellement une URL de test comme ceci : http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (un id de bookinstance valide peut être obtenu en navigant vers une page de détail de livre dans votre bibliothèque, et en copiant le champ id).

+ +

À quoi cela ressemble-t-il ?

+ +

Si tout a bien marché, le formulaire par défaut ressemblera à ceci :

+ +

+ +

Le formulaire avec valeur erronée ressemblera à ceci :

+ +

+ +

La liste de tous les livres avec les liens vers le renouvellement ressemblera à ceci :

+ +

+ +

ModelForms

+ +

Créer une classe  en utilisant l'approche décrite ci-dessus est très flexible et vous autorise à créer le type de page de formulaire que vous voulez, et à l'associer à tout type de modèle(s).

+ +

Cependant, si vous avez seulement besoin d'un formulaire qui répertorie les champs d'un modèle unique, alors votre modèle définira déjà la plupart des informations requises dans votre formulaire : champs, labels, texte d'aide etc. Plutôt que de créer à nouveau les définitions du modèle dans votre formulaire, il est plus facile d'utiliser la classe d'aide ModelForm pour créer le formulaire d'après votre modèle. Ce ModelForm peut dès lors être utilisé à l'intérieur de vos vues exactement de la même manière qu'un Form ordinaire.

+ +

Un ModelForm basique, contenant le même champ que notre RenewBookForm d'origine, est montré ci-dessous. Tout ce que vous avez à faire pour créer le formulaire, c'est ajouter class Meta avec le model (BookInstance) associé, et une liste des fields du modèle à inclure dans le formulaire (vous pouvez inclure tous les champs en utilisant fields = '__all__', ou bien utiliser exclude (au lieu de fields) pour préciser les champs à ne pas importer du modèle).

+ +
from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+ class Meta:
+ model = BookInstance
+ fields = ['due_back',]
+
+ +
+

Note : Cela peut ne pas sembler beaucoup plus simple que d'utiliser un simple Form, et ça ne l'est effectivement pas dans ce cas, parce que nous n'avons qu'un seul champ. Cependant, si vous avez beaucoup de champs, cela peut réduire notablement la quantité de code !

+
+ +

Le reste de l'information vient des définitions de champ données par le modèle (par ex. les labels, les widgets, le texte d'aide, les messages d'erreur). S'ils ne sont pas suffisamment satisfaisants, nous pouvons les réécrire dans notre class Meta, en précisant un dictionnaire contenant le champ à modifier et sa nouvelle valeur. Par exemple, dans ce formulaire, nous pourrions souhaiter, pour notre champ, un label tel que "Renewal date" (plutôt que celui par défaut, basé sur le nom du champ : Due Back), et nous voulons aussi que notre texte d'aide soit spécifique à ce cas d'utilisation. La classe Meta ci-dessous vous montre comment réécrire ces champs, et vous pouvez pareillement définir widgets et error_messages si les valeurs par défaut ne sont pas suffisantes.

+ +
class Meta:
+ model = BookInstance
+ fields = ['due_back',]
+ labels = { 'due_back': _('Renewal date'), }
+ help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } 
+
+ +

Pour ajouter une validation, vous pouvez utiliser la même approche que pour un Form normal : vous définissez une fonction appelée clean_field_name(), et vous levez des exceptions de type ValidationError pour les valeurs non valides. La seule différence par rapport à notre formulaire original, c'est que le champ de modèle est appelé due_back et non "renewal_date". Ce changement est nécessaire, dans la mesure où le champ correspondant dans BookInstance est appelé due_back.

+ +
from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    def clean_due_back(self):
+       data = self.cleaned_data['due_back']
+
+  #Check date is not in past.
+       if data < datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       #Check date is in range librarian allowed to change (+4 weeks)
+       if data > datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Remember to always return the cleaned data.
+       return data
+
+ class Meta:
+ model = BookInstance
+ fields = ['due_back',]
+ labels = { 'due_back': _('Renewal date'), }
+ help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
+
+ +

La classe RenewBookModelForm ci-dessus est maintenant fonctionnellement équivalente à notre RenewBookForm d'origine. Vous pourriez l'importer et l'utiliser partout où vous utilisez RenewBookForm, du moment que vous changez aussi de renewal_date en due_back le nom de variable du formulaire correspondant, comme dans la deuxième déclaration du formulaire : RenewBookModelForm(initial={'due_back': proposed_renewal_date}.

+ +

Vues génériques d'édition

+ +

L'algorithme de gestion des formulaires que nous avons utilisé ci-dessus dans notre exemple de vue basée sur une fonction, représente un processus extrêmement commun dans vues destinées à éditer un formulaire. Django abstrait pour vous la plus grande partie de ce processus répétitif ("boilerplate") en proposant des generic editing views pour les vues de création, éditition et suppression basées sur des modèles. Ces vues génériques non seulement assument le comportement d'une vue, mais elles créent automatiquement la classe de formulaire (un ModelForm) pour vous à partir du modèle.

+ +
+

Note : En plus des vues d'édition décrites ici, il existe aussi une classe FormView, qui se tient, en termes de rapport "flexibilité"/"effort codage", à mi-chemin entre notre vue basée sur une fonction et les autres vues génériques. En utilisant FormView, vous avez encore besoin de créer votre Form, mais vous n'avez pas besoin d'implémenter tous les éléments d'une gestion standard de formulaire. À la place, vous n'avez qu'à fournir une implémentation de la fonction qui sera appelée une fois que les données envoyées sont reconnues valides.

+
+ +

Dans cette section, nous allons utiliser des vues génériques d'édition pour créer des pages afin de pouvoir ajouter les fonctionnalités de création, d'édition et de suppression des enregistrements de type Author de notre bibliothèque, en fournissant efficacement une réimplémentation basique de certaines parties du site Admin (cela peut être intéressant si vous avez besoin d'offrir une fonctionnalité admin d'une manière plus flexible que ce qui peut être présenté par le site admin).

+ +

Vues

+ +

Ouvrez le fichier vue (locallibrary/catalog/views.py) et ajoutez le bloc de code suivant à la fin :

+ +
from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+from .models import Author
+
+class AuthorCreate(CreateView):
+ model = Author
+ fields = '__all__'
+ initial={'date_of_death':'12/10/2016',}
+
+class AuthorUpdate(UpdateView):
+ model = Author
+ fields = ['first_name','last_name','date_of_birth','date_of_death']
+
+class AuthorDelete(DeleteView):
+ model = Author
+ success_url = reverse_lazy('authors')
+ +

Comme vous pouvez le voir, pour les vues "créer", "modifier" et "supprimer", vous avez besoin de dériver respectivement des vues génériques CreateView, UpdateView, et DeleteView, et de définir ensuite le modèle associé.

+ +

Pour les cas "créer" et "modifier", vous devez aussi préciser les champs à afficher dans le formulaire (en utilisant la même syntaxe que pour la classe ModelForm). Dans ce cas, nous montrons à la fois la syntaxe pour afficher "tous" les champs, et comment vous pouvez les lister un par un. Vous pouvez aussi spécifier les valeurs initiales pour chacun des champs, en utilisant un dictionnaire de paires nom_du_champ/valeur (ici nous définissons arbitrairement la date de mort, uniquement dans un but de démonstration - sans doute voudrez-vous l'enlever !). Par défaut, ces vues vont rediriger en cas de succès vers une page affichant l'élément nouvellement créé ou modifié, ce qui, dans notre cas, sera la vue "détail" d'un auteur, créée dans un précédent tutoriel. Vous pouvez spécifier un autre lieu de redirection en déclarant explicitement le paramètre success_url (comme indiqué dans la classe AuthorDelete).

+ +

La classe  ne requiert pas l'affichage d'aucun champ, aussi n'ont-ils pas besoin d'être précisés. Par contre il vous faut bien spécifier la success_url, car Django n'a pas de valeur par défaut pour cela. Dans ce cas, nous utilisons la fonction  pour rediriger vers notre liste d'auteurs après qu'un auteur ait été supprimé. reverse_lazy() est une version de reverse() exécutée mollement ("lazily"), que nous utilisons ici parce que nous fournissons une URL à un attribut de vue basée sur classe.

+ +

Templates

+ +

Les vues "créer" et "modifier" utilisent le même template par défaut, lequel sera nommé d'après votre modèle : model_name_form.html (vous pouvez changer le suffixe en autre chose que _form en utilisant le champ template_name_suffix dans votre vue, par exemple template_name_suffix = '_other_suffix').

+ +

Créez le fichier de template locallibrary/catalog/templates/catalog/author_form.html, et copiez-y le texte suivant.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+<form action="" method="post">
+ {% csrf_token %}
+ <table>
+ \{{ form.as_table }}
+ </table>
+ <input type="submit" value="Submit" />
+
+</form>
+{% endblock %}
+ +

Ce formulaire est semblable à nos formulaires précédents et affiche les champs en utilisant un tableau. Notez aussi comment nous déclarons à nouveau le {% csrf_token %} pour nous assurer que nos formulaires résisteront à d'éventuelles attaques par CSRF (Cross Site Request Forgery).

+ +

La vue "supprimer" s'attend à trouver un template avec un nom au format model_name_confirm_delete.html (de nouveau, vous pouvez changer le suffixe en utilisant template_name_suffix dans votre vue). Créez le fichier de template locallibrary/catalog/templates/catalog/author_confirm_delete.html, et copiez-y le texte suivant.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+<h1>Delete Author</h1>
+
+<p>Are you sure you want to delete the author: \{{ author }}?</p>
+
+<form action="" method="POST">
+ {% csrf_token %}
+ <input type="submit" action="" value="Yes, delete." />
+</form>
+
+{% endblock %}
+
+ +

Configurations d'URL

+ +

Ouvrez votre fichier de configuration d'URL (locallibrary/catalog/urls.py) et ajoutez-y à la fin la configuration suivante :

+ +
urlpatterns += [
+ url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'),
+ url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'),
+ url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'),
+]
+ +

Il n'y a rien de particulièrement nouveau ici ! Vous pouvez voir que les vues sont des classes, et doivent dès lors être appelée via .as_view(), et vous devriez être capable de reconnaître les patterns d'URL dans chaque cas. Nous devons utiliser pk comme nom pour la valeur de nos clés primaires capturées, car c'est le nom de paramètre attendu par les classes de vue.

+ +

Les pages de création, modification et suppression d'auteur sont maintenant prêtes à être testées (nous ne nous mettons pas en peine pour cette fois, bien que vous puissiez le faire si vous le souhaiter, de les accrocher dans la barre latérale du site).

+ +
+

Note : Les utilisateurs observateurs auront remarqué que nous n'avons rien fait pour empêcher les utilisateurs non autorisés d'accéder ces pages ! Nous laissons cela comme exercice pour vous (suggestion : vous pourriez utiliser le PermissionRequiredMixin, et soit créer une nouvelle permission, soit réutiliser notre permissioncan_mark_returned ).

+
+ +

Test de la page

+ +

Tout d'abord, connectez-vous au site avec un compte ayant les permissions que vous avez définies comme nécessaires pour accéder aux pages d'édition d'auteur.

+ +

Ensuite naviguez à la page de création d'auteur : http://127.0.0.1:8000/catalog/author/create/, ce qui devrait ressembler à la capture d'écran ci-dessous.

+ +

Form Example: Create Author

+ +

Entrez des valeurs pour les champs et ensuite cliquez sur Submit pour sauvegarder l'enregistrement de cet auteur. Vous devriez maintenant être conduit à une vue "détail" pour votre nouvel auteur, avec une URL du genre http://127.0.0.1:8000/catalog/author/10.

+ +

Vous pouvez tester l'édition d'un enregistrement en ajoutant /update/ à la fin de l'URL "détail" (par exemple http://127.0.0.1:8000/catalog/author/10/update/). Nous ne mettons pas de capture d'écran, car c'est à peu près la même chose que la page "create".

+ +

Enfin, nous pouvons effacer l'enregistrement en ajoutant "delete" à la fin de l'URL de détail (par exemple http://127.0.0.1:8000/catalog/author/10/delete/). Django devrait vous afficher la page de suppression montrée ci-dessous. Cliquez sur "Yes, delete" pour supprimer l'enregistrement et être reconduit à la liste des auteurs.

+ +

+ +

Mettez-vous au défi

+ +

Créez des formulaires pour créer, modifier et effacer des enregistrements de type Book. Vous pouvez utiliser exactement la même structure que pour les Authors. Si votre template book_form.html est simplement copié-renommé à partir du template author_form.html, alors la nouvelle page "create book" va ressembler à quelque chose comme ceci :

+ +

+ + + +

Résumé

+ +

Créer et gérer des formulaires peut être un processus compliqué ! Django le rend bien plus aisé en fournissant des mécanismes de programmation pour déclarer, rendre et valider des formulaires. Django fournit de plus des vues génériques d'édition de formulaires, qui peuvent faire presque tout le travail si vous voulez définir des pages pour créer, modifier et supprimer des enregistrements associés à une instance d'un modèle unique.

+ +

Il y a bien d'autres choses qui peuvent être faites avec les formulaires (regardez notre liste See also ci-dessous), mais vous devez être maintenant en mesure de comprendre comment ajouter des formulaires basiques et un code de gestion de formulaire à vos propres sites web.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}

diff --git a/files/fr/learn/server-side/django/generic_views/index.html b/files/fr/learn/server-side/django/generic_views/index.html deleted file mode 100644 index 8917b2d6fc..0000000000 --- a/files/fr/learn/server-side/django/generic_views/index.html +++ /dev/null @@ -1,635 +0,0 @@ ---- -title: 'Tutoriel Django - 6e partie : Vues génériques pour les listes et les détails' -slug: Learn/Server-side/Django/Generic_views -tags: - - Beginner - - Learn - - Tutorial - - django - - django templates - - django views -translation_of: Learn/Server-side/Django/Generic_views -original_slug: Learn/Server-side/Django/Vues_generiques ---- -
- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
- -
Ce tutoriel améliore notre site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.
- - - - - - - - - - - - -
Prérequis: -

Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 5: Creating our home page.

-
Objectif: -

Comprendre où et comment utiliser des vues génériques basées sur classes, et comment extraire des patterns dans des URLs pour transmettre les informations aux vues.

-
- -

Aperçu

- -

Dans ce tutoriel, nous allons terminer la première version du site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).

- -

Le processus est semblable à celui utilisé pour créer la page d'index, processus que nous avons montré dans le tutoriel précédent. Nous allons avoir de nouveau besoin de créer des mappages d'URLs, des vues et des templates. La principale différence est que, pour la page des détails, nous allons avoir le défi supplémentaire d'extraire de l'URL des informations que nous transmettrons à la vue. Pour ces pages, nous allons montrer comment utiliser un type de vue complètement différent : des vues "listes" et "détails" génériques et basées sur des classes. Cela peut réduire significativement la somme de code nécessaire, les rendant ainsi faciles à écrire et à maintenir.

- -

La partie finale de ce tutoriel montrera comment paginer vos données quand vous utilisez des vues "listes" génériques basées sur des classes.

- -

Page de liste de livres

- -

La page de liste des livres va afficher une liste de tous les enregistrements de livres disponibles, en utilisant l'URL: catalog/books/. La page va afficher le titre et l'auteur pour chaque enregistrement, et le titre sera un hyperlien vers la page de détails associée. La page aura la même structure et la même zone de navigation que les autres pages du site, et nous pouvons dès lors étendre le template de base (base_generic.html) que nous avons créé dans le tutoriel précédent.

- -

Mappage d'URL

- -

Ouvrez le fichier /catalog/urls.py, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction path() définit un pattern destiné à identifier l'URL ('books/'), une fonction vue qui sera appelée si l'URL correspond (views.BookListView.as_view()), et un nom pour ce mappage particulier.

- -
urlpatterns = [
-    path('', views.index, name='index'),
-    path('books/', views.BookListView.as_view(), name='books'),
-]
- -

Comme discuté dans le tutoriel précédent, l'URL doit auparavant avoir identifié la chaîne /catalog, aussi la vue ne sera réellement appelée que pour l'URL complète: /catalog/books/.

- -

La fonction vue a un format différent de celui que nous avions jusqu'ici : c'est parce que cette vue sera en réalité implémentée sous forme de classe. Nous allons la faire hériter d'une fonction vue générique existante, qui fait la plus grande partie de ce que nous souhaitons réaliser avec cette vue, plutôt que d'écrire notre propre fonction à partir de zéro.

- -

En Django, on accède à la fonction appropriée d'une vue basée sur classe en appelant sa méthode de classe as_view(). Cela a pour effet de créer une instance de la classe, et de s'assurer que les bonnes méthodes seront appelées lors de requêtes HTTP.

- -

Vue (basée sur classe)

- -

Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait render() pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (ListView), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.

- -

Ouvrez le fichier catalog/views.py, et copiez-y le code suivant à la fin :

- -
from django.views import generic
-
-class BookListView(generic.ListView):
-    model = Book
- -

C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (Book), et ensuite rendre un template situé à l'adresse /locallibrary/catalog/templates/catalog/book_list.html (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée object_list OU book_list (c'est-à-dire l'appellation générique "the_model_name_list").

- -
-

Note : Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans /application_name/the_model_name_list.html (catalog/book_list.html dans ce cas) à l'intérieur du répertoire /application_name/templates/ (/catalog/templates/).

-
- -

Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.

- -
class BookListView(generic.ListView):
-    model = Book
-    context_object_name = 'my_book_list'   # your own name for the list as a template variable
-    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
-    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location
- -

Ré-écrire des méthodes dans des vues basées sur classes

- -

Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe.

- -

Par exemple, nous pouvons ré-écrire la méthode get_queryset() pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut queryset, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :

- -
class BookListView(generic.ListView):
-    model = Book
-
-    def get_queryset(self):
-        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
-
- -

Nous pourrions aussi réécrire get_context_data(), afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "some_data" au contexte (elle sera alors accessible comme variable de template).

- -
class BookListView(generic.ListView):
-    model = Book
-
-    def get_context_data(self, **kwargs):
-        # Call the base implementation first to get the context
-        context = super(BookListView, self).get_context_data(**kwargs)
-        # Create any data and add it to the context
-        context['some_data'] = 'This is just some data'
-        return context
- -

Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus :

- - - -
-

Note : Voyez dans Built-in class-based generic views (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.

-
- -

Créer le template pour la Vue Liste

- -

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_list.html, et copiez-y le texte ci-dessous. Comme nous l'avons dit ci-dessus, c'est ce fichier que va chercher par défaut la classe générique "liste" basée sur une vue (dans le cas d'un modèle appelé Book, dans une application appelée catalog).

- -

Les templates pour vues génériques sont exactement comme les autres templates (cependant, bien sûr, le contexte et les informations envoyées au templates peuvent être différents). Comme pour notre template index, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé content.

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-  <h1>Book List</h1>
-  {% if book_list %}
-  <ul>
-    {% for book in book_list %}
-      <li>
-        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
-      </li>
-    {% endfor %}
-  </ul>
-  {% else %}
-    <p>There are no books in the library.</p>
-  {% endif %} 
-{% endblock %}
- -

La vue envoie le contexte (liste de livres), en utilisant par défaut les alias object_list et book_list ; l'un et l'autre fonctionnent.

- -

Exécution conditionnelle

- -

Nous utilisons les balises de templates if, else, et endif pour vérifier que la book_list a été définie et n'est pas vide. Si book_list est vide, alors la condition else affiche un texte expliquant qu'il n'y a pas de livres à lister. Si book_list n'est pas vide, nous parcourons la liste de livres.

- -
{% if book_list %}
-  <!-- code here to list the books -->
-{% else %}
-  <p>There are no books in the library.</p>
-{% endif %}
-
- -

La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template elif (par exemple {% elif var2 %}). Pour plus d'information sur les opérateurs conditionnels, voyez ici :  if, ifequal/ifnotequal, et ifchanged dans Built-in template tags and filters (Django Docs).

- -

Boucles for

- -

Le template utilise les balises de template for et endfor pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template book avec l'information concernant l'élément courant de la liste.

- -
{% for book in book_list %}
-  <li> <!-- code here get information from each book item --> </li>
-{% endfor %}
-
- -

Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable forloop.last pour réaliser une action conditionnelle au dernier passage de la boucle.

- -

Accéder aux variables

- -

Le code à l'intérieur de la boucle crée un élément de liste pour chaque livre, élément qui montre à la fois le titre (comme lien vers la vue détail, encore à créer), et l'auteur.

- -
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
-
- -

Nous accédont aux champs de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple book.title et book.author), où le texte suivant l'item book est le nom du champ (comme défini dans le modèle).

- -

Nous pouvons aussi appeler des fonctions contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons Book.get_absolute_url() pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).

- -
-

Note : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !

-
- -

Mettre à jour le template de base

- -

Ouvrez le template de base (/locallibrary/catalog/templates/base_generic.html) et insérez {% url 'books' %} dans le lien URL pour All books, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").

- -
<li><a href="{% url 'index' %}">Home</a></li>
-<li><a href="{% url 'books' %}">All books</a></li>
-<li><a href="">All authors</a></li>
- -

À quoi cela ressemble-t-il ?

- -

Vous ne pouvez pas encore construire la liste des livres, car il nous manque toujours une dépendance, à savoir le mappage d'URL pour la page de détail de chaque livre, qui est requise pour créer des hyperliens vers chaque livre. Nous allons montrer les vues liste et détail après la prochaine section.

- -

Page de détail d'un livre

- -

La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL catalog/book/<id> (où <id> est la clé primaire pour le livre). En plus des champs définis dans le modèle Book (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (BookInstances), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.

- -

Mappage d'URL

- -

Ouvrez /catalog/urls.py et ajoutez-y le mappeur d'URL 'book-detail' indiqué en gras ci-dessous. Cette fonction path() définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.

- -
urlpatterns = [
-    path('', views.index, name='index'),
-    path('books/', views.BookListView.as_view(), name='books'),
-    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
-]
- -

Pour le chemin book-detail, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, <something>  va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une spécification de convertisseur, qui définit le type de la donnée (int, str, slug, uuid, path).

- -

Dans ce cas, nous utilisons '<int:pk>' pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé pk (abbréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.

- -
-

Note : Comme nous l'avons dit précédemment, notre URL correcte est en réalité catalog/book/<digits> (comme nous sommes dans l'application catalog, /catalog/ est supposé).

-
- -
-

Attention : La vue générique basée sur classe "détail" s'attend à recevoir un paramètre appelé pk. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.

-
- -

Introduction aux chemins et expressions régulières avancés

- -
-

Note : Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.

-
- -

La recherche de pattern fournie par path() est simple et utile pour les cas (très communs) où vous voulez seulement capturer n'importe quelle chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode re_path().

- -

Cette méthode est utilisée exactement comme path(), sauf qu'elle vous permet de spécifier un pattern utilisant une Expression régulière. Par exemple, le chemin précédent pourrait avoir été écrit ainsi :

- -
re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
-
- -

Les expressions régulières sont un outil de recherche de pattern extrêmement puissant. Ils sont, il est vrai, assez peu intuitifs et peuvent se révéler intimidants pour les débutants. Ci-dessous vous trouverez une introduction très courte !

- -

La première chose à savoir est que les expressions régulières devraient ordinairement être déclarées en utilisant la syntaxe "chaîne littérale brute" (c'est-à-dire encadrées ainsi : r'<votre texte d'expression régulière va ici>').

- -

L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche de pattern est contenu dans le tableau qui suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SymbolMeaning
^Recherche le début du texte.
$Recherche la fin du texte.
\dRecherche un digit (0, 1, 2, ... 9).
\wRecherche un caractère de mot, c'est-à-dire tout caractère dans l'alphabet (majuscule ou minuscule), un digit ou un underscore (_).
+Recherche au moins une occurence du caractère précédent. Par exemple, pour rechercher au moins 1 digit, vous utiliseriez \d+. Pour rechercher au moins 1 caractère "a", vous utiliseriez a+.
*Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser \w*.
( )Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures).
(?P<name>...)Capture le pattern (indiqué par …) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom !
[  ]Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.
- -

La plupart des autres caractères peuvent être pris littéralement.

- -

Considérons quelques exemples réels de patterns :

- - - - - - - - - - - - - - - - - - - - - - -
PatternDescription
r'^book/(?P<pk>\d+)$' -

C'est là l'expression régulière utilisée dans notre mappeur d'URL. Elle recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 digit (\d+), et enfin se termine (avec aucun caractère non-digit avant la fin du marqueur de ligne).

- -

Elle capture aussi tous les digits (?P<pk>\d+) et les passe à la vue dans un paramètre appelé 'pk'. Les valeurs capturées sont toujours passées comme des chaînes !

- -

Par exemple, cette expression régulière trouverait une correspondance dans l'URL book/1234, et enverrait alors une variable pk='1234' à la vue.

-
r'^book/(\d+)$' -

Ceci rechercher la même URL que dans le cas précédent. L'information capturée serait envoyée à la vue en tant qu'argument non nommé.

-
r'^book/(?P<stub>[-\w]+)$' -

Ceci recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 caractère étant soit un '-', soit un caractère de mot ([-\w]+), puis la fin. Ce pattern capture aussi cet ensemble de caractères et le passe à la vue en tant que paramètre nommé 'stub'.

- -

Ceci est un pattern relativement typique pour un "stub". Les stubs sont des clés primaires basées sur des mots (plus agréables que des IDs) pour retrouver des données. Vous pouvez utiliser un stub si vous voulez que votre URL de livre contienne plus d'informations. Par exemple /catalog/book/the-secret-garden, plutôt que /catalog/book/33.

-
- -

Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.

- -
-

Note : Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.

-
- -

Passer des options supplémentaires dans vos mappages d'URL

- -

Une fonctionnalité que nous n'avons pas utilisée ici, mais que vous pourriez trouver valable, c'est que vous pouvez passer à la vue des options supplémentaires. Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction path(). Cette approche peut être utile si vous voulez utiliser la même vue pour des ressources multiples, et passer des données pour configurer son comportement dans chaque cas (ci-dessous nous fournissons un template différent dans chaque cas).

- -
path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
-path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
-
- -
-

Note : Les options supplémentaires aussi bien que les patterns capturés sont passés à la vue comme arguments nommés. Si vous utilisez le même nom pour un pattern capturé et une option supplémentaire, alors seul la value du pattern capturé sera envoyé à la vue (la valeur spécifiée dans l'option supplémentaire sera abandonnée).

-
- -

Vue (basée sur classe)

- -

Ouvrez catalog/views.py, et copiez-y le code suivant à la fin du fichier :

- -
class BookDetailView(generic.DetailView):
-    model = Book
- -

C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé /locallibrary/catalog/templates/catalog/book_detail.html, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement Book spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée object OU book (c'est-à-dire, de manière générique, "le_nom_du_modèle").

- -

Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte.

- -

Que se passe-t-il si l'enregistrement n'existe pas ?

- -

Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception Http404 — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.

- -

Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez pas la vue générique basée sur classe "détail".

- -
def book_detail_view(request, primary_key):
-    try:
-        book = Book.objects.get(pk=primary_key)
-    except Book.DoesNotExist:
-        raise Http404('Book does not exist')
-
-    return render(request, 'catalog/book_detail.html', context={'book': book})
-
- -

La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception Http404 pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler render() avec le nom du template et les données concernant le livre dans le paramètre context (comme un dictionnaire).

- -

Une alternative consiste à utiliser la fonction get_object_or_404() comme un raccourci pour lever une exception Http404 si l'enregistrement n'existe pas.

- -
from django.shortcuts import get_object_or_404
-
-def book_detail_view(request, primary_key):
-    book = get_object_or_404(Book, pk=primary_key)
-    return render(request, 'catalog/book_detail.html', context={'book': book})
- -

Créerle template de la Vue Détail

- -

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_detail.html, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe detail (pour un modèle appelé Book dans une application appelée catalog).

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-  <h1>Title: \{{ book.title }}</h1>
-
-  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
-  <p><strong>Summary:</strong> \{{ book.summary }}</p>
-  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
-  <p><strong>Language:</strong> \{{ book.language }}</p>
-  <p><strong>Genre:</strong> \{{ book.genre.all|join:", " }}</p>
-
-  <div style="margin-left:20px;margin-top:20px">
-    <h4>Copies</h4>
-
-    {% for copy in book.bookinstance_set.all %}
-      <hr>
-      <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">
-        \{{ copy.get_status_display }}
-      </p>
-      {% if copy.status != 'a' %}
-        <p><strong>Due to be returned:</strong> \{{ copy.due_back }}</p>
-      {% endif %}
-      <p><strong>Imprint:</strong> \{{ copy.imprint }}</p>
-      <p class="text-muted"><strong>Id:</strong> \{{ copy.id }}</p>
-    {% endfor %}
-  </div>
-{% endblock %}
- - - -
-

Note : Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :

- -
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
-
-
- -

Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été décrit précédemment :

- - - -

Une chose intéressante que nous n'avons pas encore vue, c'est la fonction book.bookinstance_set.all(). Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements BookInstance associés à un Book particulier.

- -
{% for copy in book.bookinstance_set.all %}
-  <!-- code to iterate across each copy/instance of a book -->
-{% endfor %}
- -

Cette méthode est requise parce que vous déclarez un champ ForeignKey (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la ForeignKey, suivi de _set (ainsi la fonction créée dans Book est bookinstance_set()).

- -
-

Note : Ici nous utilisons all() pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode filter() pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.

- -

Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :

- -
[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
-/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
-  allow_empty_first_page=allow_empty_first_page, **kwargs)
-
- -

Ceci vient du fait que l'objet paginator s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre !

- -

Ce tutoriel n'a pas (encore !) traité de la pagination, mais comme vous ne pouvez pas utiliser sort_by() et passer un paramètre (pour la même raison que le filter() décrit précédemment), vous avez le choix entre trois options :

- -
    -
  1. Ajouter un ordering lors de la déclaration de la class Meta dans votre modèle.
    2. -
  2. Ajouter un attribut queryset dans votre vue personnalisée basée sur classe, en spécifiant un order_by().
    3. -
  3. Ajouter une méthode get_queryset à votre vue personnalisée basée sur classe, et préciser de même un order_by().
    4. -
- -

Si vous décidez d'ajouter une class Meta au modèle Author (solution peut-être pas aussi flexible que personnalier la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :

- -
class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
-
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
-
-    def __str__(self):
-        return f'{self.last_name}, {self.first_name}'
-
-    class Meta:
-        ordering = ['last_name']
- -

Bien sûr le champ n'est pas forcément last_name : ce pourrait être un autre champ.

- -

Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets.

-
- -

À quoi cela ressemble-t-il ?

- -

À ce point, nous devrions avoir créé tout ce qu'il faut pour afficher à la fois la liste des livres et les pages de détail pour chaque livre. Lancez le serveur (python3 manage.py runserver) et ouvrez votre navigateur à l'adresse http://127.0.0.1:8000/.

- -
-

Attention : Ne cliquez pas sur les liens vers le détail des auteurs : vous allez les créer lors du prochain défi !

-
- -

Cliquez sur le lien Tous les livres pour afficher la liste des livres.

- -

Book List Page

- -

Ensuite cliquez sur un lien dirigeant vers l'un de vos livres. Si tout est réglé correctement, vous allez voir quelque chose de semblable à la capture d'écran suivante :

- -

Book Detail Page

- -

Pagination

- -

Si vous avez seulement quelques enregistrements, notre page de liste de livres aura une bonne apparence. Mais si vous avez des dizaines ou des centaines d'enregistrements, la page va progressivement devenir plus longue à charger (et aura beaucoup trop de contenu pour naviguer de manière raisonnable). La solution à ce problème est d'ajouter une pagination à vos vues listes, en réduisant le nombre d'éléments affichés sur chaque page.

- -

Django a d'excellents outils pour la pagination. Mieux encore, ces outils sont intégrés dans les vues listes génériques basées sur classes, aussi n'avez-vous pas grand chose à faire pour les activer !

- -

Vues

- -

Ouvrez catalog/views.py, et ajoutez la ligne paginate_by, en gras ci-dessous.

- -
class BookListView(generic.ListView):
-    model = Book
-    paginate_by = 10
- -

Avec cet ajout, dès que vous aurez plus de 10 enregistrements, la vue démarrera la pagination des données qu'elle envoie au template. Les différentes pages sont obtenues en utilisant le paramètre GET : pour obtenir la page 2, vous utiliseriez l'URL /catalog/books/?page=2.

- -

Templates

- -

Maintenant que les données sont paginées, nous avons besoin d'ajouter un outil au template pour parcourir l'ensemble des résultats. Et parce que nous voudrons sûrement faire cela pour toutes les listes vues, nous allons le faire d'une manière qui puisse être ajoutée au template de base.

- -

Ouvrez /locallibrary/catalog/templates/base_generic.html, et copiez-y, sous notre bloc de contenu, le bloc de pagination suivant (mis en gras ci-dessous). Le code commence par vérifier si une pagination est activée sur la page courante. Si oui, il ajoute les liens "précédent" et "suivant" appropriés (et le numéro de la page courante).

- -
{% block content %}{% endblock %}
-
-  {% block pagination %}
-    {% if is_paginated %}
-        <div class="pagination">
-            <span class="page-links">
-                {% if page_obj.has_previous %}
-                    <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
-                {% endif %}
-                <span class="page-current">
-                    Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
-                </span>
-                {% if page_obj.has_next %}
-                    <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
-                {% endif %}
-            </span>
-        </div>
-    {% endif %}
-  {% endblock %} 
- -

Le page_obj est un objet Paginator qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.

- -

Nous utilisons \{{ request.path }} pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.

- -

C'est tout !

- -

À quoi cela ressemble-t-il ?

- -

La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne paginate_by dans votre  fichier catalog/views.py. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en paginate_by = 2.

- -

Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.

- -

Book List Page - paginated

- -

Mettez-vous vous-même au défi !

- -

Le challenge dans cet article consiste à créer les vues détail et liste nécessaires à l'achèvement du projet. Ces pages devront être accessibles aux URLs suivantes :

- - - -

Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle Book, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable.

- -
-

Note :

- - -
- -

Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.

- -

Author List Page

- - - -

Author Detail Page

- - - -

Résumé

- -

Félicitations ! Notre application basique pour bibliothèque est maintenant terminée.

- -

Dans cet article, nous avons appris comment utiliser les vues génériques basées sur classe "liste" et "détail", et nous les avons utilisées pour créer des pages permettant de voir nos livres et nos auteurs. Au passage nous avons appris la recherche d'un pattern d'URL grâce aux expressions régulières, et la manière de passer des données depuis les URLs vers les vues. Nous avons aussi appris quelques trucs supplémentaires pour mieux utiliser les templates. Et en dernier nous vous avons montré comment paginer les vues liste, de façon à pouvoir gérer des listes même avec beaucoup d'enregistrements.

- -

Dans les articles que nous vous présenterons ensuite, nous améliorerons cette application pour intégrer des comptes utilisateurs, et nous allons donc vous montrer comment gérer l'authentification des utilisateurs, les permissions, les sessions et les formulaires.

- -

Voyez aussi

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/django/generic_views/index.md b/files/fr/learn/server-side/django/generic_views/index.md new file mode 100644 index 0000000000..8917b2d6fc --- /dev/null +++ b/files/fr/learn/server-side/django/generic_views/index.md @@ -0,0 +1,635 @@ +--- +title: 'Tutoriel Django - 6e partie : Vues génériques pour les listes et les détails' +slug: Learn/Server-side/Django/Generic_views +tags: + - Beginner + - Learn + - Tutorial + - django + - django templates + - django views +translation_of: Learn/Server-side/Django/Generic_views +original_slug: Learn/Server-side/Django/Vues_generiques +--- +
+ +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+ +
Ce tutoriel améliore notre site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.
+ + + + + + + + + + + + +
Prérequis: +

Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 5: Creating our home page.

+
Objectif: +

Comprendre où et comment utiliser des vues génériques basées sur classes, et comment extraire des patterns dans des URLs pour transmettre les informations aux vues.

+
+ +

Aperçu

+ +

Dans ce tutoriel, nous allons terminer la première version du site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).

+ +

Le processus est semblable à celui utilisé pour créer la page d'index, processus que nous avons montré dans le tutoriel précédent. Nous allons avoir de nouveau besoin de créer des mappages d'URLs, des vues et des templates. La principale différence est que, pour la page des détails, nous allons avoir le défi supplémentaire d'extraire de l'URL des informations que nous transmettrons à la vue. Pour ces pages, nous allons montrer comment utiliser un type de vue complètement différent : des vues "listes" et "détails" génériques et basées sur des classes. Cela peut réduire significativement la somme de code nécessaire, les rendant ainsi faciles à écrire et à maintenir.

+ +

La partie finale de ce tutoriel montrera comment paginer vos données quand vous utilisez des vues "listes" génériques basées sur des classes.

+ +

Page de liste de livres

+ +

La page de liste des livres va afficher une liste de tous les enregistrements de livres disponibles, en utilisant l'URL: catalog/books/. La page va afficher le titre et l'auteur pour chaque enregistrement, et le titre sera un hyperlien vers la page de détails associée. La page aura la même structure et la même zone de navigation que les autres pages du site, et nous pouvons dès lors étendre le template de base (base_generic.html) que nous avons créé dans le tutoriel précédent.

+ +

Mappage d'URL

+ +

Ouvrez le fichier /catalog/urls.py, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction path() définit un pattern destiné à identifier l'URL ('books/'), une fonction vue qui sera appelée si l'URL correspond (views.BookListView.as_view()), et un nom pour ce mappage particulier.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+]
+ +

Comme discuté dans le tutoriel précédent, l'URL doit auparavant avoir identifié la chaîne /catalog, aussi la vue ne sera réellement appelée que pour l'URL complète: /catalog/books/.

+ +

La fonction vue a un format différent de celui que nous avions jusqu'ici : c'est parce que cette vue sera en réalité implémentée sous forme de classe. Nous allons la faire hériter d'une fonction vue générique existante, qui fait la plus grande partie de ce que nous souhaitons réaliser avec cette vue, plutôt que d'écrire notre propre fonction à partir de zéro.

+ +

En Django, on accède à la fonction appropriée d'une vue basée sur classe en appelant sa méthode de classe as_view(). Cela a pour effet de créer une instance de la classe, et de s'assurer que les bonnes méthodes seront appelées lors de requêtes HTTP.

+ +

Vue (basée sur classe)

+ +

Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait render() pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (ListView), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.

+ +

Ouvrez le fichier catalog/views.py, et copiez-y le code suivant à la fin :

+ +
from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book
+ +

C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (Book), et ensuite rendre un template situé à l'adresse /locallibrary/catalog/templates/catalog/book_list.html (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée object_list OU book_list (c'est-à-dire l'appellation générique "the_model_name_list").

+ +
+

Note : Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans /application_name/the_model_name_list.html (catalog/book_list.html dans ce cas) à l'intérieur du répertoire /application_name/templates/ (/catalog/templates/).

+
+ +

Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.

+ +
class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location
+ +

Ré-écrire des méthodes dans des vues basées sur classes

+ +

Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe.

+ +

Par exemple, nous pouvons ré-écrire la méthode get_queryset() pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut queryset, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+
+ +

Nous pourrions aussi réécrire get_context_data(), afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "some_data" au contexte (elle sera alors accessible comme variable de template).

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get the context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Create any data and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context
+ +

Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus :

+ + + +
+

Note : Voyez dans Built-in class-based generic views (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.

+
+ +

Créer le template pour la Vue Liste

+ +

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_list.html, et copiez-y le texte ci-dessous. Comme nous l'avons dit ci-dessus, c'est ce fichier que va chercher par défaut la classe générique "liste" basée sur une vue (dans le cas d'un modèle appelé Book, dans une application appelée catalog).

+ +

Les templates pour vues génériques sont exactement comme les autres templates (cependant, bien sûr, le contexte et les informations envoyées au templates peuvent être différents). Comme pour notre template index, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé content.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Book List</h1>
+  {% if book_list %}
+  <ul>
+    {% for book in book_list %}
+      <li>
+        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+      </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+    <p>There are no books in the library.</p>
+  {% endif %} 
+{% endblock %}
+ +

La vue envoie le contexte (liste de livres), en utilisant par défaut les alias object_list et book_list ; l'un et l'autre fonctionnent.

+ +

Exécution conditionnelle

+ +

Nous utilisons les balises de templates if, else, et endif pour vérifier que la book_list a été définie et n'est pas vide. Si book_list est vide, alors la condition else affiche un texte expliquant qu'il n'y a pas de livres à lister. Si book_list n'est pas vide, nous parcourons la liste de livres.

+ +
{% if book_list %}
+  <!-- code here to list the books -->
+{% else %}
+  <p>There are no books in the library.</p>
+{% endif %}
+
+ +

La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template elif (par exemple {% elif var2 %}). Pour plus d'information sur les opérateurs conditionnels, voyez ici :  if, ifequal/ifnotequal, et ifchanged dans Built-in template tags and filters (Django Docs).

+ +

Boucles for

+ +

Le template utilise les balises de template for et endfor pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template book avec l'information concernant l'élément courant de la liste.

+ +
{% for book in book_list %}
+  <li> <!-- code here get information from each book item --> </li>
+{% endfor %}
+
+ +

Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable forloop.last pour réaliser une action conditionnelle au dernier passage de la boucle.

+ +

Accéder aux variables

+ +

Le code à l'intérieur de la boucle crée un élément de liste pour chaque livre, élément qui montre à la fois le titre (comme lien vers la vue détail, encore à créer), et l'auteur.

+ +
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+
+ +

Nous accédont aux champs de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple book.title et book.author), où le texte suivant l'item book est le nom du champ (comme défini dans le modèle).

+ +

Nous pouvons aussi appeler des fonctions contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons Book.get_absolute_url() pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).

+ +
+

Note : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !

+
+ +

Mettre à jour le template de base

+ +

Ouvrez le template de base (/locallibrary/catalog/templates/base_generic.html) et insérez {% url 'books' %} dans le lien URL pour All books, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+<li><a href="{% url 'books' %}">All books</a></li>
+<li><a href="">All authors</a></li>
+ +

À quoi cela ressemble-t-il ?

+ +

Vous ne pouvez pas encore construire la liste des livres, car il nous manque toujours une dépendance, à savoir le mappage d'URL pour la page de détail de chaque livre, qui est requise pour créer des hyperliens vers chaque livre. Nous allons montrer les vues liste et détail après la prochaine section.

+ +

Page de détail d'un livre

+ +

La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL catalog/book/<id> (où <id> est la clé primaire pour le livre). En plus des champs définis dans le modèle Book (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (BookInstances), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.

+ +

Mappage d'URL

+ +

Ouvrez /catalog/urls.py et ajoutez-y le mappeur d'URL 'book-detail' indiqué en gras ci-dessous. Cette fonction path() définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
+]
+ +

Pour le chemin book-detail, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, <something>  va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une spécification de convertisseur, qui définit le type de la donnée (int, str, slug, uuid, path).

+ +

Dans ce cas, nous utilisons '<int:pk>' pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé pk (abbréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.

+ +
+

Note : Comme nous l'avons dit précédemment, notre URL correcte est en réalité catalog/book/<digits> (comme nous sommes dans l'application catalog, /catalog/ est supposé).

+
+ +
+

Attention : La vue générique basée sur classe "détail" s'attend à recevoir un paramètre appelé pk. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.

+
+ +

Introduction aux chemins et expressions régulières avancés

+ +
+

Note : Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.

+
+ +

La recherche de pattern fournie par path() est simple et utile pour les cas (très communs) où vous voulez seulement capturer n'importe quelle chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode re_path().

+ +

Cette méthode est utilisée exactement comme path(), sauf qu'elle vous permet de spécifier un pattern utilisant une Expression régulière. Par exemple, le chemin précédent pourrait avoir été écrit ainsi :

+ +
re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+
+ +

Les expressions régulières sont un outil de recherche de pattern extrêmement puissant. Ils sont, il est vrai, assez peu intuitifs et peuvent se révéler intimidants pour les débutants. Ci-dessous vous trouverez une introduction très courte !

+ +

La première chose à savoir est que les expressions régulières devraient ordinairement être déclarées en utilisant la syntaxe "chaîne littérale brute" (c'est-à-dire encadrées ainsi : r'<votre texte d'expression régulière va ici>').

+ +

L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche de pattern est contenu dans le tableau qui suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolMeaning
^Recherche le début du texte.
$Recherche la fin du texte.
\dRecherche un digit (0, 1, 2, ... 9).
\wRecherche un caractère de mot, c'est-à-dire tout caractère dans l'alphabet (majuscule ou minuscule), un digit ou un underscore (_).
+Recherche au moins une occurence du caractère précédent. Par exemple, pour rechercher au moins 1 digit, vous utiliseriez \d+. Pour rechercher au moins 1 caractère "a", vous utiliseriez a+.
*Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser \w*.
( )Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures).
(?P<name>...)Capture le pattern (indiqué par …) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom !
[  ]Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.
+ +

La plupart des autres caractères peuvent être pris littéralement.

+ +

Considérons quelques exemples réels de patterns :

+ + + + + + + + + + + + + + + + + + + + + + +
PatternDescription
r'^book/(?P<pk>\d+)$' +

C'est là l'expression régulière utilisée dans notre mappeur d'URL. Elle recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 digit (\d+), et enfin se termine (avec aucun caractère non-digit avant la fin du marqueur de ligne).

+ +

Elle capture aussi tous les digits (?P<pk>\d+) et les passe à la vue dans un paramètre appelé 'pk'. Les valeurs capturées sont toujours passées comme des chaînes !

+ +

Par exemple, cette expression régulière trouverait une correspondance dans l'URL book/1234, et enverrait alors une variable pk='1234' à la vue.

+
r'^book/(\d+)$' +

Ceci rechercher la même URL que dans le cas précédent. L'information capturée serait envoyée à la vue en tant qu'argument non nommé.

+
r'^book/(?P<stub>[-\w]+)$' +

Ceci recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 caractère étant soit un '-', soit un caractère de mot ([-\w]+), puis la fin. Ce pattern capture aussi cet ensemble de caractères et le passe à la vue en tant que paramètre nommé 'stub'.

+ +

Ceci est un pattern relativement typique pour un "stub". Les stubs sont des clés primaires basées sur des mots (plus agréables que des IDs) pour retrouver des données. Vous pouvez utiliser un stub si vous voulez que votre URL de livre contienne plus d'informations. Par exemple /catalog/book/the-secret-garden, plutôt que /catalog/book/33.

+
+ +

Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.

+ +
+

Note : Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.

+
+ +

Passer des options supplémentaires dans vos mappages d'URL

+ +

Une fonctionnalité que nous n'avons pas utilisée ici, mais que vous pourriez trouver valable, c'est que vous pouvez passer à la vue des options supplémentaires. Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction path(). Cette approche peut être utile si vous voulez utiliser la même vue pour des ressources multiples, et passer des données pour configurer son comportement dans chaque cas (ci-dessous nous fournissons un template différent dans chaque cas).

+ +
path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
+
+ +
+

Note : Les options supplémentaires aussi bien que les patterns capturés sont passés à la vue comme arguments nommés. Si vous utilisez le même nom pour un pattern capturé et une option supplémentaire, alors seul la value du pattern capturé sera envoyé à la vue (la valeur spécifiée dans l'option supplémentaire sera abandonnée).

+
+ +

Vue (basée sur classe)

+ +

Ouvrez catalog/views.py, et copiez-y le code suivant à la fin du fichier :

+ +
class BookDetailView(generic.DetailView):
+    model = Book
+ +

C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé /locallibrary/catalog/templates/catalog/book_detail.html, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement Book spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée object OU book (c'est-à-dire, de manière générique, "le_nom_du_modèle").

+ +

Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte.

+ +

Que se passe-t-il si l'enregistrement n'existe pas ?

+ +

Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception Http404 — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.

+ +

Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez pas la vue générique basée sur classe "détail".

+ +
def book_detail_view(request, primary_key):
+    try:
+        book = Book.objects.get(pk=primary_key)
+    except Book.DoesNotExist:
+        raise Http404('Book does not exist')
+
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+
+ +

La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception Http404 pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler render() avec le nom du template et les données concernant le livre dans le paramètre context (comme un dictionnaire).

+ +

Une alternative consiste à utiliser la fonction get_object_or_404() comme un raccourci pour lever une exception Http404 si l'enregistrement n'existe pas.

+ +
from django.shortcuts import get_object_or_404
+
+def book_detail_view(request, primary_key):
+    book = get_object_or_404(Book, pk=primary_key)
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+ +

Créerle template de la Vue Détail

+ +

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_detail.html, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe detail (pour un modèle appelé Book dans une application appelée catalog).

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Title: \{{ book.title }}</h1>
+
+  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
+  <p><strong>Summary:</strong> \{{ book.summary }}</p>
+  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
+  <p><strong>Language:</strong> \{{ book.language }}</p>
+  <p><strong>Genre:</strong> \{{ book.genre.all|join:", " }}</p>
+
+  <div style="margin-left:20px;margin-top:20px">
+    <h4>Copies</h4>
+
+    {% for copy in book.bookinstance_set.all %}
+      <hr>
+      <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">
+        \{{ copy.get_status_display }}
+      </p>
+      {% if copy.status != 'a' %}
+        <p><strong>Due to be returned:</strong> \{{ copy.due_back }}</p>
+      {% endif %}
+      <p><strong>Imprint:</strong> \{{ copy.imprint }}</p>
+      <p class="text-muted"><strong>Id:</strong> \{{ copy.id }}</p>
+    {% endfor %}
+  </div>
+{% endblock %}
+ + + +
+

Note : Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :

+ +
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+
+
+ +

Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été décrit précédemment :

+ + + +

Une chose intéressante que nous n'avons pas encore vue, c'est la fonction book.bookinstance_set.all(). Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements BookInstance associés à un Book particulier.

+ +
{% for copy in book.bookinstance_set.all %}
+  <!-- code to iterate across each copy/instance of a book -->
+{% endfor %}
+ +

Cette méthode est requise parce que vous déclarez un champ ForeignKey (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la ForeignKey, suivi de _set (ainsi la fonction créée dans Book est bookinstance_set()).

+ +
+

Note : Ici nous utilisons all() pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode filter() pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.

+ +

Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :

+ +
[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+
+ +

Ceci vient du fait que l'objet paginator s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre !

+ +

Ce tutoriel n'a pas (encore !) traité de la pagination, mais comme vous ne pouvez pas utiliser sort_by() et passer un paramètre (pour la même raison que le filter() décrit précédemment), vous avez le choix entre trois options :

+ +
    +
  1. Ajouter un ordering lors de la déclaration de la class Meta dans votre modèle.
    2. +
  2. Ajouter un attribut queryset dans votre vue personnalisée basée sur classe, en spécifiant un order_by().
    3. +
  3. Ajouter une méthode get_queryset à votre vue personnalisée basée sur classe, et préciser de même un order_by().
    4. +
+ +

Si vous décidez d'ajouter une class Meta au modèle Author (solution peut-être pas aussi flexible que personnalier la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
+
+    class Meta:
+        ordering = ['last_name']
+ +

Bien sûr le champ n'est pas forcément last_name : ce pourrait être un autre champ.

+ +

Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets.

+
+ +

À quoi cela ressemble-t-il ?

+ +

À ce point, nous devrions avoir créé tout ce qu'il faut pour afficher à la fois la liste des livres et les pages de détail pour chaque livre. Lancez le serveur (python3 manage.py runserver) et ouvrez votre navigateur à l'adresse http://127.0.0.1:8000/.

+ +
+

Attention : Ne cliquez pas sur les liens vers le détail des auteurs : vous allez les créer lors du prochain défi !

+
+ +

Cliquez sur le lien Tous les livres pour afficher la liste des livres.

+ +

Book List Page

+ +

Ensuite cliquez sur un lien dirigeant vers l'un de vos livres. Si tout est réglé correctement, vous allez voir quelque chose de semblable à la capture d'écran suivante :

+ +

Book Detail Page

+ +

Pagination

+ +

Si vous avez seulement quelques enregistrements, notre page de liste de livres aura une bonne apparence. Mais si vous avez des dizaines ou des centaines d'enregistrements, la page va progressivement devenir plus longue à charger (et aura beaucoup trop de contenu pour naviguer de manière raisonnable). La solution à ce problème est d'ajouter une pagination à vos vues listes, en réduisant le nombre d'éléments affichés sur chaque page.

+ +

Django a d'excellents outils pour la pagination. Mieux encore, ces outils sont intégrés dans les vues listes génériques basées sur classes, aussi n'avez-vous pas grand chose à faire pour les activer !

+ +

Vues

+ +

Ouvrez catalog/views.py, et ajoutez la ligne paginate_by, en gras ci-dessous.

+ +
class BookListView(generic.ListView):
+    model = Book
+    paginate_by = 10
+ +

Avec cet ajout, dès que vous aurez plus de 10 enregistrements, la vue démarrera la pagination des données qu'elle envoie au template. Les différentes pages sont obtenues en utilisant le paramètre GET : pour obtenir la page 2, vous utiliseriez l'URL /catalog/books/?page=2.

+ +

Templates

+ +

Maintenant que les données sont paginées, nous avons besoin d'ajouter un outil au template pour parcourir l'ensemble des résultats. Et parce que nous voudrons sûrement faire cela pour toutes les listes vues, nous allons le faire d'une manière qui puisse être ajoutée au template de base.

+ +

Ouvrez /locallibrary/catalog/templates/base_generic.html, et copiez-y, sous notre bloc de contenu, le bloc de pagination suivant (mis en gras ci-dessous). Le code commence par vérifier si une pagination est activée sur la page courante. Si oui, il ajoute les liens "précédent" et "suivant" appropriés (et le numéro de la page courante).

+ +
{% block content %}{% endblock %}
+
+  {% block pagination %}
+    {% if is_paginated %}
+        <div class="pagination">
+            <span class="page-links">
+                {% if page_obj.has_previous %}
+                    <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
+                {% endif %}
+                <span class="page-current">
+                    Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
+                </span>
+                {% if page_obj.has_next %}
+                    <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
+                {% endif %}
+            </span>
+        </div>
+    {% endif %}
+  {% endblock %} 
+ +

Le page_obj est un objet Paginator qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.

+ +

Nous utilisons \{{ request.path }} pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.

+ +

C'est tout !

+ +

À quoi cela ressemble-t-il ?

+ +

La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne paginate_by dans votre  fichier catalog/views.py. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en paginate_by = 2.

+ +

Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.

+ +

Book List Page - paginated

+ +

Mettez-vous vous-même au défi !

+ +

Le challenge dans cet article consiste à créer les vues détail et liste nécessaires à l'achèvement du projet. Ces pages devront être accessibles aux URLs suivantes :

+ + + +

Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle Book, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable.

+ +
+

Note :

+ + +
+ +

Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.

+ +

Author List Page

+ + + +

Author Detail Page

+ + + +

Résumé

+ +

Félicitations ! Notre application basique pour bibliothèque est maintenant terminée.

+ +

Dans cet article, nous avons appris comment utiliser les vues génériques basées sur classe "liste" et "détail", et nous les avons utilisées pour créer des pages permettant de voir nos livres et nos auteurs. Au passage nous avons appris la recherche d'un pattern d'URL grâce aux expressions régulières, et la manière de passer des données depuis les URLs vers les vues. Nous avons aussi appris quelques trucs supplémentaires pour mieux utiliser les templates. Et en dernier nous vous avons montré comment paginer les vues liste, de façon à pouvoir gérer des listes même avec beaucoup d'enregistrements.

+ +

Dans les articles que nous vous présenterons ensuite, nous améliorerons cette application pour intégrer des comptes utilisateurs, et nous allons donc vous montrer comment gérer l'authentification des utilisateurs, les permissions, les sessions et les formulaires.

+ +

Voyez aussi

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/django/home_page/index.html b/files/fr/learn/server-side/django/home_page/index.html deleted file mode 100644 index 5c8f63c457..0000000000 --- a/files/fr/learn/server-side/django/home_page/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: 'Django didactique Section 5: Créer la page d''accueil' -slug: Learn/Server-side/Django/Home_page -tags: - - Article - - Cadriciel - - Code - - Didactique - - Django (Vues) - - Django (gabarits) - - Débutant - - Programmation - - Python - - django -translation_of: Learn/Server-side/Django/Home_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
- -

Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de la bibliothèque locale est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.

- - - - - - - - - - - - -
Pré-requis:L'introduction à cette série didactique et les sections précédentes y compris celle sur le site d'administration du site web.
Objective:Apprendre à construire un routage d'URL et les pages de publication des vues (où les données ne sont pas encodées dans l'url). Obtenir et publier des données via les objets du modèle de données et les publier à l'aide de gabarits.
- -

Survol

- -

Dans les sections précédentes, nous avons défini le modèle de données et les objets Dajngo à manipuler, puis nous avons commencé à peupler des enregistrements à l'aide du site d'administration. Désormais, nous allons œuvrer à la présentation des données et développer le code nécessaire à l'information des utilisateurs. La première étape essentielle est de déterminer les informations que nous souhaitons publier dans nos différentes pages et, par conséquent, identifier les URL qui pourvoiront à la publication de ces informations. Nous serons alors en capacité de construire les routage d'URL, les vues et gabarits qui répondront aux exigences définies.

- -

Le diagramme ci-dessous est important à comprendre car il est au cœur du fonctionnement du cadriciel Django. Il décrit les flux de données et les composants sollicités pour traiter et répondre à une requête HTTP. Nous avons déjà travaillé le modèle de données (à gauche du diagramme), nous allons désormais nous atteler à :

- - - -

- -

Nous aurons à créer 5 pages web pour publier les informations à destination des utilisateurs. Cela fait beaucoup d'éléments à maîtriser dans une seule section d'apprentissage de l'outils. Nous avons donc opté pour ne traiter dans cette section que de la page d'accueil et de traiter les autres pages dans une autre section du didacticiel. Cela permet, en outre, de mieux appréhender les composants comme le routage d'URL ou les vues et d'une manière générale le fonctionnement du modèle de Django.

- -

Identifier les URLs des ressources

- -

Le site web de la bibliothèque locale est essentiellement un site de consultation pour les adhérents de la bibliothèque, nous aurons donc, par conséquent, besoin uniquement de pages pour les vues de détail de chacun des livres (ouvrages, auteur, etc.) de la bibliothèque et d'une page d'accueil.

- -

La liste des URLs dont nous aurons besoin se résume à :

- - - -

Bien que les données dépendent du contenu de la base de données, les trois premières URLs retournent les résultats de requêtes sans informations supplémentaires ; c'est le cas de la page d'accueil qui donnera des décomptes de contenus et des pages sur la listes des livres ou des auteurs.

- -

En revanche, les pages concernant le détails d'un livre ou d'un auteur nécessiteront de traiter l'identifiant d'un  objet. Il sera nécessaire d'extraire de la requête HTTP l'information encodé de cet identifiant pour obtenir ensuite le détail depuis la base de données. Pour cela nous utiliserons un seul jeu de vue et de gabarit pour publier les informations sur les livres (et auteurs).

- -
-

Note : Avec le cadriciel Django, vous pouvez élaborer vos URLs comme bon vous semble — Vous pouvez avoir une approche comme celle présentée ci-dessus, ou de faire un appel de la méthode GET avec un passage de paramètres (/book/?id=6). Cependant, quelque soit l'approche pour laquelle vous opterez, garder en mémoire d'avoir des URLs claires, logique et compréhensibles comme cela est  recommandé par le W3C.

- -

La documentation de Django recommande aussi de coder les informations dans le corps des URLs pour avoir une meilleure conception de ces URLs.

-
- -

La suite de cette section s'intéresse à la conception de la page d'accueil.

- -

Création de la page d'accueil

- -

La toute première page à créer est la page d'accueil (catalog/). Cette page d'index est globalement une page statique contenant le décompte des différents enregistrements de la base de données. Pour faire cela, il sera nécessaire de créer un routage d'URL, une vue et un gabarit. 

- -
-

Note : Cette section est essentielle, et cela vaut vraiment la peine d'être attentif aux concepts déployés dans celle-ci. La plupart des éléments aborder ici seront ré-utilisés par la suite.

-
- -

Routage d'URL

- -

Quand nous avons créé le squelette du site, nous avons mis à jour les routage des urls dans le fichier locallibrary/urls.py afin de nous assurer que toutes les requêtes démarrant par catalog/  seront traités par le configurateur URLConf du module catalog.urls qui traitera la sous-chaîne restante.

- -

L'extrait du code ci-dessous permet d'intégrer dans locallibrary/urls.py le configurateur d'url du module catalog :

- -
urlpatterns += [
-    path('catalog/', include('catalog.urls')),
-]
-
- -

Il est désormais nécessaire de créer un configurateur d'URL du module catalog (URLConf du module est nommé /catalog/urls.py). Ajoutez le chemin ci-dessous :

- -
urlpatterns = [
-    path('', views.index, name='index'),
-]
- -

La fonction path() sert à définir les éléments suivants :

- - - -

La paramètre name utilisé dans la fonction path() permet aussi de définir un identifiant unique qui sert à lier les pages vers celle-ci au sein de l'application. Vous pouvez alors l'utiliser à l'envers en routant dynamiquement des pages en lien vers cette ressource :

- -
<a href="{% url 'index' %}">Home</a>.
- -
-

Note : Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière <a href="/catalog/">Home</a>), mais si nous changions le modèle d'URL, par exemple en /catalog/index, alors le gabarit ne fonctionnerait plus correctement et présenterait un lien mort. L'utilisation des noms et des routage inversés est plus robuste et adapté aux évolutions de l'application.

-
- -

Vue (View function-based)

- -

Une vue est une fonction qui traite une requête HTTP, extrait des données de la base de données et les restitue dans une page HTML à l'aide d'une réponse HTTPA que le navigateur mettra en forme pour l'utilisateur. La fonction index() suit ce modèle de traitement de l'information : elle extrait les informations sur le nombre de livres, d'ouvrage en rayon ou en prêt et d'auteur enregistrés dans la base de données et à l'aide d'un gabarit les publie.

- -

Editer le fichier catalog/views.py.Vous constaterez l'import de la fonction render() qui traite de la génération HTML en utilisat des garabits et des données : 

- -
from django.shortcuts import render
-
-# Create your views here.
-
- -

Copiez les lignes ci-dessous dans le fichier :

- -
from catalog.models import Book, Author, BookInstance, Genre
-
-def index(request):
-    """View function for home page of site."""
-
-    # Generate counts of some of the main objects
-    num_books = Book.objects.all().count()
-    num_instances = BookInstance.objects.all().count()
-
-    # Available books (status = 'a')
-    num_instances_available = BookInstance.objects.filter(status__exact='a').count()
-
-    # The 'all()' is implied by default.
-    num_authors = Author.objects.count()
-
-    context = {
-        'num_books': num_books,
-        'num_instances': num_instances,
-        'num_instances_available': num_instances_available,
-        'num_authors': num_authors,
-    }
-
-    # Render the HTML template index.html with the data in the context variable
-    return render(request, 'index.html', context=context)
- -

La première ligne de code permet d'importer les modèles de données du catalogue décrites dans le module catalog.

- -

La première section de la fonction index() permet à l'aide de requêtes, par l'intermédiaire des objets de modèle de données, d'obtenir les nombres d'enregistrements. Pour cela, nous utilisons la méthode d'objet models objects.all() sur les objets Book et BookInstance. En sus, nous recherchons les ouvrages disponibles, ce qui revient à faire une requête avec un filtre sur l'attribut status de l'objet BookInstance ayant la valeur 'a' (Available). Si vous avez un oubli, vous pouvez consulter La section 3 de Django didactique : utilisation du modèle de données > Chercher des enregistrements.

- -

La dernière ligne de cette fonction est l'appel de la fonction render() dont l'objet est de constituer une page HTML et la transmettre comme une réponse. Cette fonction encapsule plusieurs autres fonctions du cadriciel ce qui permet de simplifier le processus de restitution des informations. La fonction render() utilise les paramètres :

- - - -

Nous aborderons plus en détail les aspects de gabarit et de contexte des variables dans le section suivante du didacticiel. Pour le moment, construisons un premier gabarit sans plus de précisions.

- -

Gabarit (Template)

- -

Un gabarit est un fichier texte qui décrit la structure ou la mise en page d'un document (comme une page HTML) et qui utilise des emplacements réservés pour y insérer des informations issues de la base de données.

- -

La cadriciel Django va rechercher automatiquement ces gabarits dans un répertoire nommé 'templates' dans le dossier de l'application. Si vous reprenez la dernière ligne de la de fonctions index() dans l'exemple ci-dessus, la fonction render() a besoin du fichier index.html qui devrait être placé dans le dossier /locallibrary/catalog/templates/. Dans le cas contraire, cela génère une erreur car le fichier est considéré comme absent.

- -

Vous pouvez en faire l'expérience dès à présent, après avoir redémarré votre serveur local, en accédant à l'URL 127.0.0.1:8000 de votre navigateur. Une page d'erreur explicite s'affiche en indiquant un message du type : "TemplateDoesNotExist at /catalog/", ainsi que de nombreux détails sur l'enchaînement des fonctions aboutissant à cette erreur.

- -
-

Note : En fonction du paramétrage de votre projet - le fichier settings.py de votre projet - Django va chercher pour des gabarits dans différents répertoires et dans ceux de votre application par défaut. Si vous souhaitez approfondir ce sujet vous pouvez consulter la documentation Django relative aux gabarit.

-
- -

Concevoir les gabarits

- -

Django utilise un langage de pour les gabarit qui permet de résoudre certains sujets liés au page HTML. En l'occurrence, dans le site web de la bibliothèque nous aurons des bandeaux de navigateur et autres codes d'en-tête à réutiliser. Dans une vision classique, il faudrait récrire dans chaque page le même code pour obtenir le même rendu. Si cela peut se concevoir pour quelques pages, ce procédé devient vite inopérant voir risqué avec un site dynamique complet.

- -

Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit base_generic.html, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs block et endblock qui peut contenir ou non des données.

- -
-

Note : Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).

-
- -

Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être remplacés par la suite :

- - - -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-  {% block title %}<title>Bibliothèque locale</title>{% endblock %}
-</head>
-<body>
-  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
-  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
-</body>
-</html>
-
- -

Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise extends dans une page complémentaire comme dans l'exemple ci-dessous.  Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises block/endblock qui définissent le début et la fin de section.

- -

A titre indicatif, l'extrait ci-dessous présente la manière d'activer à l'aide de la balise extends le remplacement de la section content. La page HTML générée inclura la structure de la page définit plus haute et le code généré à la fois pour la section title, mais avec les éléments nouveaux, ci-dessous, pour la section content.

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-  <h1>Accueil de la bibliothèque locale</h1>
-  <p>Bienvenue sur la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p>
-{% endblock %}
- -

Le gabarit de base de la bibliothèque

- -

Nous allons nous appuyer sur le gabarit ci-dessous pour constuire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections title, sidebar, et content. La section title contient un titre par défaut. De même la section sidebar contient un liens vers la liste des livres et des auteurs qui pourra être modifié ensuite.

- -
-

Note : Il y a aussi deux balises supplémentaires : url et load static. Elles seront étudiées dans le chapitre suivant.

-
- -

Créez un nouveau fichier nommé base_generic.html dans le dossier /locallibrary/catalog/templates/ (à créer aussi) et copiez-y le texte ci-dessous :

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  {% block title %}<title>Bibliothèque locale</title>{% endblock %}
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-  <!-- Add additional CSS in static file -->
-  {% load static %}
-  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
-</head>
-<body>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-sm-2">
-          {% block sidebar %}
-           <ul class="sidebar-nav">
-               <li><a href="{% url 'index' %}">Home</a></li>
-               <li><a href="">Tous les livres</a></li>
-               <li><a href="">Tous les auteurs</a></li>
-           </ul>
-          {% endblock %}
-      </div>
-         <div class="col-sm-10 ">
-             {% block content %}
-             {% endblock %}
-         </div>
-    </div>
-  </div>
-</body>
-</html>
- -

Ce gabarit fait appel - en ligne 7 - à la bibliothèque de style Bootstrap afin d'améliorer la présentation de la page. L'utilisation de Bootstrap (ou de tout autre cadriciel pour les pages web) est un moyen rapide de créer des pages bien organisées et qui s'affiche très bien sur les différents navigateurs.

- -

De même, ce gabarit fait appel à une feuille de style - en ligne 10 - locale pour ajouter ou adapter des styles. Créez le fichier styles.css dans le répertoire /locallibrary/catalog/static/css/ (à créer aussi) et copiez le contenu ci-dessous :

- -
.sidebar-nav {
-    margin-top: 20px;
-    padding: 0;
-    list-style: none;
-}
- -

La page d'accueil

- -

Maintenant créez le fichier HTML index.html dans le dossier /locallibrary/catalog/templates/ et copiez-y le code ci-dessous. This code extends our base template on the first line, and then replaces the default content block for the template. 

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-  <h1>Accueil de la bibliothèque locale</h1>
-  <p>Bienvenue à la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p>
-  <h2>Contenu dynamique</h2>
-  <p>La bibliothèque dispose des enregistrements suivants:</p>
-  <ul>
-    <li><strong>Livres:</strong> \{{ num_books }}</li>
-    <li><strong>Copies:</strong> \{{ num_instances }}</li>
-    <li><strong>Copies disponibles:</strong> \{{ num_instances_available }}</li>
-    <li><strong>Auteurs:</strong> \{{ num_authors }}</li>
-  </ul>
-{% endblock %}
- -

Dans la section cont'enu dynamique, des emplacements réservés sont définis pour pouvoir y insérer le contenu de variable qui sont identifiées à l'intérieur de doubles accolades (ouvrantes et fermantes). Pour une meilleure visibilité ces emplacements et les variables nommées sont identifiées en caractères gras dans l'extrait de code ci-dessus. 

- -
-

Note: Vous pouvez constatez simplement que les balises de gabarit (fonctions) et les baslises de variables sont entre accolades ; double accolades pour uen variable (\{{ num_books }}), et simple accolade avec le pourcentage ({% extends "base_generic.html" %}) pour les balises.

-
- -

Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaires context transmis à la fonction render() de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction render() traitera le dictionnaire pour restituer uen page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire.

- -
context = {
-    'num_books': num_books,
-    'num_instances': num_instances,
-    'num_instances_available': num_instances_available,
-    'num_authors': num_authors,
-}
-
-return render(request, 'index.html', context=context)
- -

Traiter les fichiers statiques dans les gabarits

- -

Vos projets utiliserons probablement de fichiers statiques, par exemple des images, des fichiers de styles CSS ou des fonctions javascripts. L'emplacement de ces fichiers n'est pas connu a priori ou peut changer en fonction de l'emplacement dans un projet Django. Pour cela, Django vous permet de spécifier les emplacements dans les gabarits par rapport à la variable globale du projet STATIC_URL. Le paramétrage par défaut du site web définit la variable STATIC_URL à '/static/', mais vous pouvez choisir d'heberger ailleurs.

- -

Au sein du gabarit, vous ferrez appel à la balise load en précisant "static" pour faire votre ajout, comme décrits dans l'extrait ci-dessous. Vous utilisez la balise static et vous spécifiez ensuite l'URL pour accéder au fichier nécessaire.

- -
<!-- Add additional CSS in static file -->
-{% load static %}
-<link rel="stylesheet" href="{% static 'css/styles.css' %}">
- -

De la même manière, vous pouvez par exemple :

- -
{% load static %}
-<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;">
-
- -
-

Note : Les exemples ci-dessus indiquent où se trouvent les fichiers, mais le cadriciel ne travail pas ainsi par défaut. Nous avons configuré le serveur web de développement en modifiant le routage des URL (/locallibrary/locallibrary/urls.py) à la création du squelette du site. Cependant nous devrons travailler plus tard la mise en production.

-
- -

Pour plus de détails sur les fichiers statiques vous pouvez consulter la documentation Django sur la gestion des fichiers statiques.

- -

Associer des URL

- -

L'exemple ci-dessous introduit l'utilisation de la balise de gabarit url.

- -
<li><a href="{% url 'index' %}">Home</a></li>
-
- -

Cette balise accepte des référence enregistrées par la fonction path() appelée dans les fichiers  urls.py ainsi que les valeurs pour chacun des arguments associés à une vue. Elle retourne une URL qui peut être utilisée pour lier une ressource.

- -

Où trouver les gabarits...

- -

Par défaut Django ne sait pas où sont vos gabarits, vous devez lui indiquer où les trouver. Pour faire cela, vous allez ajouter le répertoire des gabarits (templates) à la variable d'environnemet du projet TEMPLATES en éditant le fichier settings.py comme indiqué en gras ci-dessous :

- -
TEMPLATES = [
-    {
-        'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [
-            os.path.join(BASE_DIR, 'templates'),
-        ],
-        'APP_DIRS': True,
-        'OPTIONS': {
-            'context_processors': [
-                'django.template.context_processors.debug',
-                'django.template.context_processors.request',
-                'django.contrib.auth.context_processors.auth',
-                'django.contrib.messages.context_processors.messages',
-            ],
-        },
-    },
-]
- -

A quoi cela devrait-il ressembler ?

- -

A ce niveau, nous avons créé l'ensemble des ressources nécessaires à l'affichage de la page d'accueil. Démarrez le serveur (python3 manage.py runserver) et accédez avec votre navigateur à la page d'accueil du site web http://127.0.0.1:8000/. Si tout va bien, vous devriez avoir une page qui ressemble à celle ci-dessous.

- -

Page d'accueil en Français

- -
-

Note: Toutes les ressources n'ayant pas été encore créées les liens vers Tous les livres et Tous les auteurs ne fonctionnent pas encore.

-
- -

Défi

- -

Voici deux suggestion pour tester votre connaissance de Django et des requêtes, vues et gabarits :

- -
    -
  1. La bibliothèque locale dispose d'un gabarit d'origine qui inclu une section title. Surchargez cette section dans le gabarit index et créer un nouveau titre. - -
    -

    Note : La section Concevoir un gabarit détaille la manière de modifier une section.

    -
    -
    2. -
  2. Modifiez la vue pour disposer de décomptes pour les genres et les titres de livre qui contiennent un mot (en repectant la casse) et transmettez cela via le  context. Pour faire cela utilisez les variables num_books et num_instances_available. Ensuite vous pourrez mettre à jour le gabarit de la page d'accueil.
    -  
    3. -
- - - -

Résumé

- -

Dans ce chapitre, nous avons créé la page d'accueil pour notre site — une page web dynamique qui affiche le décompte d'enregistrements issus de la base de données et des liens vers des pages encire à créer. Au cours des étapes de création, nous avons appris et découvert des concept fondamentaux à propos du routage d'url, des vues des requêtes à la base de données et le passage de données vers les gabarits ainsi que leur conception.

- -

Nous allons nous appuyer sur ces éléments pour concevoir dans le prochain chapitres les 4 pages qui manquent.

- -

À voir aussi

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/django/home_page/index.md b/files/fr/learn/server-side/django/home_page/index.md new file mode 100644 index 0000000000..5c8f63c457 --- /dev/null +++ b/files/fr/learn/server-side/django/home_page/index.md @@ -0,0 +1,429 @@ +--- +title: 'Django didactique Section 5: Créer la page d''accueil' +slug: Learn/Server-side/Django/Home_page +tags: + - Article + - Cadriciel + - Code + - Didactique + - Django (Vues) + - Django (gabarits) + - Débutant + - Programmation + - Python + - django +translation_of: Learn/Server-side/Django/Home_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
+ +

Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de la bibliothèque locale est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.

+ + + + + + + + + + + + +
Pré-requis:L'introduction à cette série didactique et les sections précédentes y compris celle sur le site d'administration du site web.
Objective:Apprendre à construire un routage d'URL et les pages de publication des vues (où les données ne sont pas encodées dans l'url). Obtenir et publier des données via les objets du modèle de données et les publier à l'aide de gabarits.
+ +

Survol

+ +

Dans les sections précédentes, nous avons défini le modèle de données et les objets Dajngo à manipuler, puis nous avons commencé à peupler des enregistrements à l'aide du site d'administration. Désormais, nous allons œuvrer à la présentation des données et développer le code nécessaire à l'information des utilisateurs. La première étape essentielle est de déterminer les informations que nous souhaitons publier dans nos différentes pages et, par conséquent, identifier les URL qui pourvoiront à la publication de ces informations. Nous serons alors en capacité de construire les routage d'URL, les vues et gabarits qui répondront aux exigences définies.

+ +

Le diagramme ci-dessous est important à comprendre car il est au cœur du fonctionnement du cadriciel Django. Il décrit les flux de données et les composants sollicités pour traiter et répondre à une requête HTTP. Nous avons déjà travaillé le modèle de données (à gauche du diagramme), nous allons désormais nous atteler à :

+ + + +

+ +

Nous aurons à créer 5 pages web pour publier les informations à destination des utilisateurs. Cela fait beaucoup d'éléments à maîtriser dans une seule section d'apprentissage de l'outils. Nous avons donc opté pour ne traiter dans cette section que de la page d'accueil et de traiter les autres pages dans une autre section du didacticiel. Cela permet, en outre, de mieux appréhender les composants comme le routage d'URL ou les vues et d'une manière générale le fonctionnement du modèle de Django.

+ +

Identifier les URLs des ressources

+ +

Le site web de la bibliothèque locale est essentiellement un site de consultation pour les adhérents de la bibliothèque, nous aurons donc, par conséquent, besoin uniquement de pages pour les vues de détail de chacun des livres (ouvrages, auteur, etc.) de la bibliothèque et d'une page d'accueil.

+ +

La liste des URLs dont nous aurons besoin se résume à :

+ + + +

Bien que les données dépendent du contenu de la base de données, les trois premières URLs retournent les résultats de requêtes sans informations supplémentaires ; c'est le cas de la page d'accueil qui donnera des décomptes de contenus et des pages sur la listes des livres ou des auteurs.

+ +

En revanche, les pages concernant le détails d'un livre ou d'un auteur nécessiteront de traiter l'identifiant d'un  objet. Il sera nécessaire d'extraire de la requête HTTP l'information encodé de cet identifiant pour obtenir ensuite le détail depuis la base de données. Pour cela nous utiliserons un seul jeu de vue et de gabarit pour publier les informations sur les livres (et auteurs).

+ +
+

Note : Avec le cadriciel Django, vous pouvez élaborer vos URLs comme bon vous semble — Vous pouvez avoir une approche comme celle présentée ci-dessus, ou de faire un appel de la méthode GET avec un passage de paramètres (/book/?id=6). Cependant, quelque soit l'approche pour laquelle vous opterez, garder en mémoire d'avoir des URLs claires, logique et compréhensibles comme cela est  recommandé par le W3C.

+ +

La documentation de Django recommande aussi de coder les informations dans le corps des URLs pour avoir une meilleure conception de ces URLs.

+
+ +

La suite de cette section s'intéresse à la conception de la page d'accueil.

+ +

Création de la page d'accueil

+ +

La toute première page à créer est la page d'accueil (catalog/). Cette page d'index est globalement une page statique contenant le décompte des différents enregistrements de la base de données. Pour faire cela, il sera nécessaire de créer un routage d'URL, une vue et un gabarit. 

+ +
+

Note : Cette section est essentielle, et cela vaut vraiment la peine d'être attentif aux concepts déployés dans celle-ci. La plupart des éléments aborder ici seront ré-utilisés par la suite.

+
+ +

Routage d'URL

+ +

Quand nous avons créé le squelette du site, nous avons mis à jour les routage des urls dans le fichier locallibrary/urls.py afin de nous assurer que toutes les requêtes démarrant par catalog/  seront traités par le configurateur URLConf du module catalog.urls qui traitera la sous-chaîne restante.

+ +

L'extrait du code ci-dessous permet d'intégrer dans locallibrary/urls.py le configurateur d'url du module catalog :

+ +
urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+ +

Il est désormais nécessaire de créer un configurateur d'URL du module catalog (URLConf du module est nommé /catalog/urls.py). Ajoutez le chemin ci-dessous :

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+]
+ +

La fonction path() sert à définir les éléments suivants :

+ + + +

La paramètre name utilisé dans la fonction path() permet aussi de définir un identifiant unique qui sert à lier les pages vers celle-ci au sein de l'application. Vous pouvez alors l'utiliser à l'envers en routant dynamiquement des pages en lien vers cette ressource :

+ +
<a href="{% url 'index' %}">Home</a>.
+ +
+

Note : Vus pourriez bien évidemment coder en dur l'accès à la page d'accueil de cette manaière <a href="/catalog/">Home</a>), mais si nous changions le modèle d'URL, par exemple en /catalog/index, alors le gabarit ne fonctionnerait plus correctement et présenterait un lien mort. L'utilisation des noms et des routage inversés est plus robuste et adapté aux évolutions de l'application.

+
+ +

Vue (View function-based)

+ +

Une vue est une fonction qui traite une requête HTTP, extrait des données de la base de données et les restitue dans une page HTML à l'aide d'une réponse HTTPA que le navigateur mettra en forme pour l'utilisateur. La fonction index() suit ce modèle de traitement de l'information : elle extrait les informations sur le nombre de livres, d'ouvrage en rayon ou en prêt et d'auteur enregistrés dans la base de données et à l'aide d'un gabarit les publie.

+ +

Editer le fichier catalog/views.py.Vous constaterez l'import de la fonction render() qui traite de la génération HTML en utilisat des garabits et des données : 

+ +
from django.shortcuts import render
+
+# Create your views here.
+
+ +

Copiez les lignes ci-dessous dans le fichier :

+ +
from catalog.models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """View function for home page of site."""
+
+    # Generate counts of some of the main objects
+    num_books = Book.objects.all().count()
+    num_instances = BookInstance.objects.all().count()
+
+    # Available books (status = 'a')
+    num_instances_available = BookInstance.objects.filter(status__exact='a').count()
+
+    # The 'all()' is implied by default.
+    num_authors = Author.objects.count()
+
+    context = {
+        'num_books': num_books,
+        'num_instances': num_instances,
+        'num_instances_available': num_instances_available,
+        'num_authors': num_authors,
+    }
+
+    # Render the HTML template index.html with the data in the context variable
+    return render(request, 'index.html', context=context)
+ +

La première ligne de code permet d'importer les modèles de données du catalogue décrites dans le module catalog.

+ +

La première section de la fonction index() permet à l'aide de requêtes, par l'intermédiaire des objets de modèle de données, d'obtenir les nombres d'enregistrements. Pour cela, nous utilisons la méthode d'objet models objects.all() sur les objets Book et BookInstance. En sus, nous recherchons les ouvrages disponibles, ce qui revient à faire une requête avec un filtre sur l'attribut status de l'objet BookInstance ayant la valeur 'a' (Available). Si vous avez un oubli, vous pouvez consulter La section 3 de Django didactique : utilisation du modèle de données > Chercher des enregistrements.

+ +

La dernière ligne de cette fonction est l'appel de la fonction render() dont l'objet est de constituer une page HTML et la transmettre comme une réponse. Cette fonction encapsule plusieurs autres fonctions du cadriciel ce qui permet de simplifier le processus de restitution des informations. La fonction render() utilise les paramètres :

+ + + +

Nous aborderons plus en détail les aspects de gabarit et de contexte des variables dans le section suivante du didacticiel. Pour le moment, construisons un premier gabarit sans plus de précisions.

+ +

Gabarit (Template)

+ +

Un gabarit est un fichier texte qui décrit la structure ou la mise en page d'un document (comme une page HTML) et qui utilise des emplacements réservés pour y insérer des informations issues de la base de données.

+ +

La cadriciel Django va rechercher automatiquement ces gabarits dans un répertoire nommé 'templates' dans le dossier de l'application. Si vous reprenez la dernière ligne de la de fonctions index() dans l'exemple ci-dessus, la fonction render() a besoin du fichier index.html qui devrait être placé dans le dossier /locallibrary/catalog/templates/. Dans le cas contraire, cela génère une erreur car le fichier est considéré comme absent.

+ +

Vous pouvez en faire l'expérience dès à présent, après avoir redémarré votre serveur local, en accédant à l'URL 127.0.0.1:8000 de votre navigateur. Une page d'erreur explicite s'affiche en indiquant un message du type : "TemplateDoesNotExist at /catalog/", ainsi que de nombreux détails sur l'enchaînement des fonctions aboutissant à cette erreur.

+ +
+

Note : En fonction du paramétrage de votre projet - le fichier settings.py de votre projet - Django va chercher pour des gabarits dans différents répertoires et dans ceux de votre application par défaut. Si vous souhaitez approfondir ce sujet vous pouvez consulter la documentation Django relative aux gabarit.

+
+ +

Concevoir les gabarits

+ +

Django utilise un langage de pour les gabarit qui permet de résoudre certains sujets liés au page HTML. En l'occurrence, dans le site web de la bibliothèque nous aurons des bandeaux de navigateur et autres codes d'en-tête à réutiliser. Dans une vision classique, il faudrait récrire dans chaque page le même code pour obtenir le même rendu. Si cela peut se concevoir pour quelques pages, ce procédé devient vite inopérant voir risqué avec un site dynamique complet.

+ +

Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit base_generic.html, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs block et endblock qui peut contenir ou non des données.

+ +
+

Note : Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule).

+
+ +

Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être remplacés par la suite :

+ + + +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+  {% block title %}<title>Bibliothèque locale</title>{% endblock %}
+</head>
+<body>
+  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
+  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</body>
+</html>
+
+ +

Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise extends dans une page complémentaire comme dans l'exemple ci-dessous.  Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises block/endblock qui définissent le début et la fin de section.

+ +

A titre indicatif, l'extrait ci-dessous présente la manière d'activer à l'aide de la balise extends le remplacement de la section content. La page HTML générée inclura la structure de la page définit plus haute et le code généré à la fois pour la section title, mais avec les éléments nouveaux, ci-dessous, pour la section content.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Accueil de la bibliothèque locale</h1>
+  <p>Bienvenue sur la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p>
+{% endblock %}
+ +

Le gabarit de base de la bibliothèque

+ +

Nous allons nous appuyer sur le gabarit ci-dessous pour constuire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections title, sidebar, et content. La section title contient un titre par défaut. De même la section sidebar contient un liens vers la liste des livres et des auteurs qui pourra être modifié ensuite.

+ +
+

Note : Il y a aussi deux balises supplémentaires : url et load static. Elles seront étudiées dans le chapitre suivant.

+
+ +

Créez un nouveau fichier nommé base_generic.html dans le dossier /locallibrary/catalog/templates/ (à créer aussi) et copiez-y le texte ci-dessous :

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Bibliothèque locale</title>{% endblock %}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <!-- Add additional CSS in static file -->
+  {% load static %}
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+</head>
+<body>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-sm-2">
+          {% block sidebar %}
+           <ul class="sidebar-nav">
+               <li><a href="{% url 'index' %}">Home</a></li>
+               <li><a href="">Tous les livres</a></li>
+               <li><a href="">Tous les auteurs</a></li>
+           </ul>
+          {% endblock %}
+      </div>
+         <div class="col-sm-10 ">
+             {% block content %}
+             {% endblock %}
+         </div>
+    </div>
+  </div>
+</body>
+</html>
+ +

Ce gabarit fait appel - en ligne 7 - à la bibliothèque de style Bootstrap afin d'améliorer la présentation de la page. L'utilisation de Bootstrap (ou de tout autre cadriciel pour les pages web) est un moyen rapide de créer des pages bien organisées et qui s'affiche très bien sur les différents navigateurs.

+ +

De même, ce gabarit fait appel à une feuille de style - en ligne 10 - locale pour ajouter ou adapter des styles. Créez le fichier styles.css dans le répertoire /locallibrary/catalog/static/css/ (à créer aussi) et copiez le contenu ci-dessous :

+ +
.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}
+ +

La page d'accueil

+ +

Maintenant créez le fichier HTML index.html dans le dossier /locallibrary/catalog/templates/ et copiez-y le code ci-dessous. This code extends our base template on the first line, and then replaces the default content block for the template. 

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Accueil de la bibliothèque locale</h1>
+  <p>Bienvenue à la bibliothèque locale, un site web développé par <em>Mozilla Developer Network</em>!</p>
+  <h2>Contenu dynamique</h2>
+  <p>La bibliothèque dispose des enregistrements suivants:</p>
+  <ul>
+    <li><strong>Livres:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies disponibles:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Auteurs:</strong> \{{ num_authors }}</li>
+  </ul>
+{% endblock %}
+ +

Dans la section cont'enu dynamique, des emplacements réservés sont définis pour pouvoir y insérer le contenu de variable qui sont identifiées à l'intérieur de doubles accolades (ouvrantes et fermantes). Pour une meilleure visibilité ces emplacements et les variables nommées sont identifiées en caractères gras dans l'extrait de code ci-dessus. 

+ +
+

Note: Vous pouvez constatez simplement que les balises de gabarit (fonctions) et les baslises de variables sont entre accolades ; double accolades pour uen variable (\{{ num_books }}), et simple accolade avec le pourcentage ({% extends "base_generic.html" %}) pour les balises.

+
+ +

Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaires context transmis à la fonction render() de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction render() traitera le dictionnaire pour restituer uen page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire.

+ +
context = {
+    'num_books': num_books,
+    'num_instances': num_instances,
+    'num_instances_available': num_instances_available,
+    'num_authors': num_authors,
+}
+
+return render(request, 'index.html', context=context)
+ +

Traiter les fichiers statiques dans les gabarits

+ +

Vos projets utiliserons probablement de fichiers statiques, par exemple des images, des fichiers de styles CSS ou des fonctions javascripts. L'emplacement de ces fichiers n'est pas connu a priori ou peut changer en fonction de l'emplacement dans un projet Django. Pour cela, Django vous permet de spécifier les emplacements dans les gabarits par rapport à la variable globale du projet STATIC_URL. Le paramétrage par défaut du site web définit la variable STATIC_URL à '/static/', mais vous pouvez choisir d'heberger ailleurs.

+ +

Au sein du gabarit, vous ferrez appel à la balise load en précisant "static" pour faire votre ajout, comme décrits dans l'extrait ci-dessous. Vous utilisez la balise static et vous spécifiez ensuite l'URL pour accéder au fichier nécessaire.

+ +
<!-- Add additional CSS in static file -->
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+ +

De la même manière, vous pouvez par exemple :

+ +
{% load static %}
+<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="UML diagram" style="width:555px;height:540px;">
+
+ +
+

Note : Les exemples ci-dessus indiquent où se trouvent les fichiers, mais le cadriciel ne travail pas ainsi par défaut. Nous avons configuré le serveur web de développement en modifiant le routage des URL (/locallibrary/locallibrary/urls.py) à la création du squelette du site. Cependant nous devrons travailler plus tard la mise en production.

+
+ +

Pour plus de détails sur les fichiers statiques vous pouvez consulter la documentation Django sur la gestion des fichiers statiques.

+ +

Associer des URL

+ +

L'exemple ci-dessous introduit l'utilisation de la balise de gabarit url.

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+
+ +

Cette balise accepte des référence enregistrées par la fonction path() appelée dans les fichiers  urls.py ainsi que les valeurs pour chacun des arguments associés à une vue. Elle retourne une URL qui peut être utilisée pour lier une ressource.

+ +

Où trouver les gabarits...

+ +

Par défaut Django ne sait pas où sont vos gabarits, vous devez lui indiquer où les trouver. Pour faire cela, vous allez ajouter le répertoire des gabarits (templates) à la variable d'environnemet du projet TEMPLATES en éditant le fichier settings.py comme indiqué en gras ci-dessous :

+ +
TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+ +

A quoi cela devrait-il ressembler ?

+ +

A ce niveau, nous avons créé l'ensemble des ressources nécessaires à l'affichage de la page d'accueil. Démarrez le serveur (python3 manage.py runserver) et accédez avec votre navigateur à la page d'accueil du site web http://127.0.0.1:8000/. Si tout va bien, vous devriez avoir une page qui ressemble à celle ci-dessous.

+ +

Page d'accueil en Français

+ +
+

Note: Toutes les ressources n'ayant pas été encore créées les liens vers Tous les livres et Tous les auteurs ne fonctionnent pas encore.

+
+ +

Défi

+ +

Voici deux suggestion pour tester votre connaissance de Django et des requêtes, vues et gabarits :

+ +
    +
  1. La bibliothèque locale dispose d'un gabarit d'origine qui inclu une section title. Surchargez cette section dans le gabarit index et créer un nouveau titre. + +
    +

    Note : La section Concevoir un gabarit détaille la manière de modifier une section.

    +
    +
    2. +
  2. Modifiez la vue pour disposer de décomptes pour les genres et les titres de livre qui contiennent un mot (en repectant la casse) et transmettez cela via le  context. Pour faire cela utilisez les variables num_books et num_instances_available. Ensuite vous pourrez mettre à jour le gabarit de la page d'accueil.
    +  
    3. +
+ + + +

Résumé

+ +

Dans ce chapitre, nous avons créé la page d'accueil pour notre site — une page web dynamique qui affiche le décompte d'enregistrements issus de la base de données et des liens vers des pages encire à créer. Au cours des étapes de création, nous avons appris et découvert des concept fondamentaux à propos du routage d'url, des vues des requêtes à la base de données et le passage de données vers les gabarits ainsi que leur conception.

+ +

Nous allons nous appuyer sur ces éléments pour concevoir dans le prochain chapitres les 4 pages qui manquent.

+ +

À voir aussi

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/django/index.html b/files/fr/learn/server-side/django/index.html deleted file mode 100644 index fb38612c78..0000000000 --- a/files/fr/learn/server-side/django/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Django Web Framework (Python) -slug: Learn/Server-side/Django -tags: - - Apprendre - - Débutant - - Python - - django -translation_of: Learn/Server-side/Django ---- -
{{LearnSidebar}}
- -

Django est une infrastructure d'application (aussi appelé framework) côté serveur extremement populaire et dotée de beaucoup de fonctionnalités, écrite en Python. Ce module vous montrera pourquoi Django fait partie des frameworks web les plus populaires ainsi que comment l'installer, le mettre en place, et s'en servir afin de créer vos propres applications web.

- -

Prerequis

- -

Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement comprendre ce qu'est la programmation web côté serveur ainsi que les frameworks web, notamment en lisant les sujets sur notre module d'initiation à la programmation web coté serveur.

- -

Une connaissance générale en programmation et plus précisement en Python est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.

- -
-

Note : Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du Python pour les non-programmeurs dans la documentation sur le site officiel de Python: python.org).

-
- -

Guides

- -
-
Introduction à Django
-
Dans ce premier article, nous répondrons aux questions "qu'est ce que Django ?" et vous donner un aperçu rapide de ce qu'un framework peut vous apporter. Nous survolerons les fonctionnalités principales ainsi que quelques fonctionnalités avancées que nous ne pouvons pas détailler en l'espace d'un seul module. Nous vous montrerons aussi les blocs principaux de Django ce qui vous donnera un aperçu de ce qui est faisable avant de commencer.
-
Installer un environnement de développement pour Django
-
Maintenant que vous savez ce qu'est Django, nous allons nous attaquer à la partie installation, comment l'installer sous Windows, Linux(Ubuntu), et Mac OS X — tant que vous utilisez un système d'exploitation commun, cet article devrait vous donner le nécessaire afin de commencer à développer des applications avec Django.
-
Tutoriel Django: Le site web d'une librairie
-
Le premier article de cette série de tutoriels explique ce que vous aurez à apprendre autour d'un site que nous allons programmer pour une bibliothèque, site web dans lequel nous allons travailler et évoluer à travers plusieurs articles.
-
Tutoriel Django Partie 2: Créer un squelette d'un site web
-
Cet article vous montrera comment créer le "squelette" d'un site web auquel vous pourrez ajouter de quoi le personnaliser avec des paramètres spécifiques, des URLs, des modèles et des templates.
-
Tutoriel Django Partie 3: Utilisation des modèles
-
Cet article montre comment définir des modèles pour le site web que nous appelleront LocalLibrary — les modèles représentent la façon dont sont structurées nos données dans nos applications, nous autoriserons aussi Django à stocker des données dans une base de données pour nous (et modifier cela plus tard). Cet article explique en somme ce qu'un modèle est, comment le déclarer et les champs principaux. Il décrit aussi brièvement comment accéder aux données d'un modèle.
-
Tutoriel Django Partie 4: L'administration d'un site sous Django
-
Maintenant que nous avons créé quelques modèles pour le site web LocalLibrary , nous allons utiliser Django Admin afin d'ajouter quelques "réelles" tables de données. Premièrement, nous allons vous montrer comment enregistrer des modèles avec la partie Admin, ensuite nous allons vous montrer comment se connecter et créer des informations. A la fin, nous allons vous montrer quelques moyens d'améliorer la présentation de la partie Admin.
-
Tutoriel Django Partie 5: Céez votre page d'accueil.
-
Nous sommes fin prêts à ajouter le code afin d'afficher notre première page entièremement — une page d'accueil pour le site web LocalLibrary qui montre combien d'enregistrements nous avons de chaque types de modèles et fournis une barre de navigation avec des liens menant à d'autres pages. Au fur et à mesure, nous gagnerons de l'expérience en écrivant du mapping d'URLs, en obtenant des enregistrements de la base de données et en utilisant des templates.
-
Tutoriel Django Partie 6: Listes génériques et détails des pages
-
Ce tutoriel viens étendre notre site LocaLibrary en y ajoutant des listes et des détails pour les auteurs et les livres. Ici nous allons tout vous apprendre sur les classes et vous montrer comment elles peuvent réduire la quantité de code que vous avez à écrire dans des situations communes. Nous allons aussi vous apprendre comment manipuler les URL plus en détail, ainsi que la réalisation basique d'un moteur de recherche.
-
Tutoriel Django Partie 7: Les sessions de framework
-
Ce tutoriel viens compléter le site LocalLibrary, en ajoutant un compteur de visiteurs basé sur un principe de session sur la page principale C'est un exemple relativement simple, mais il vous permettra de vous apprendre comment utiliser le système de session en fournissant un comportement persistant aux utilisateurs anonyme de votre site.
-
Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions
-
Dans ce tutoriel, nous allons vous montrer comment autoriser les utilisateurs à se connecter à votre site avec leurs propres comptes, et comment contrôler ce qu'ils peuvent faire et voir en fonction des permissions accordées et de s'ils sont connectés ou non. Comme partie de cette démonstration, nous allons étendre le site LocalLibrary en ajoutant une page de connexion, de déconnexion et d'utilisateur - ainsi que des pages dédiées aux membres de la librairie afin de voir quel livre a été emprunté.
-
Tutoriel Django Partie 9: Travailler avec les formulaires
-
Dans ce tutoriel, nous allons vous montrer comment travailler avec les formulaires en HTML avec Django, et plus particulièrement la façon la plus facile d'écrire, créer, mettre à jour et supprimer les formulaires. Pour cela, nous allons devoir étendre le site LocalLibrary afin que les libraires puissent changer les livres, et créer, mettre à jour, et supprimer les auteurs en utilisant nos propres formulaires (au lieu de passer par Django Admin).
-
Tutoriel Django Partie 10: Tester une application Django
-
Plus les sites s'agrandissent, plus il devient dur de les tester manuellement — pas seulement parce que il y a plus de contenu à tester mais aussi parce que les intéractions entre les éléments deviennent plus complexes, un petit changement dans une partie du site peut nécessiter de nombreux tests afin de vérifier que ce changement n'a pas impacté les autres parties du site. La solution à ce problème est de programmer des tests automatiques, qui peuvent facilement et fiablement être executés à chaque changements. Ce tutoriel montre comment automatiser vos tests sur votre site web en utilisant le module de test du framework Django.
-
Tutoriel Django Partie 11: Déployer son site fait avec Django
-
Vous avez créé (et testé) un incroyable site web LocalLibray, vous allez maintenant l'installer sur un serveur public ce qui le rendra accessible aux membres de la librairie à travers internet. Cet article fournis un aperçu de comment vous pourriez trouver un hébergeur pour déployer votre site et de ce dont vous avez besoin pour rendre votre site pleinement fonctionnel.
-
Le module de sécurité de Django
-
Protéger les données de l'utilisateur est essentiel dans la conception d'un site web, nous avons précédemment expliqué quel pouvaient être les menaces principales dans l'article sur la sécurité web — cet article fournis une démonstration pratique des réaction des protections incluse de Django face à ce genre de menaces ainsi que la façon dont elles sont traitées.
-
- -

Evaluation

- -

L'évaluation suivante va tester votre compréhension à créer un site web avec Django comme décris dans la liste des guides ci-dessous.

- -
-
Mini blog avec Django
-
Dans ce devoir, vous utiliserez les connaissances que vous venez d'acquérir, afin de créer votre propre blog.
-
diff --git a/files/fr/learn/server-side/django/index.md b/files/fr/learn/server-side/django/index.md new file mode 100644 index 0000000000..fb38612c78 --- /dev/null +++ b/files/fr/learn/server-side/django/index.md @@ -0,0 +1,65 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Apprendre + - Débutant + - Python + - django +translation_of: Learn/Server-side/Django +--- +
{{LearnSidebar}}
+ +

Django est une infrastructure d'application (aussi appelé framework) côté serveur extremement populaire et dotée de beaucoup de fonctionnalités, écrite en Python. Ce module vous montrera pourquoi Django fait partie des frameworks web les plus populaires ainsi que comment l'installer, le mettre en place, et s'en servir afin de créer vos propres applications web.

+ +

Prerequis

+ +

Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement comprendre ce qu'est la programmation web côté serveur ainsi que les frameworks web, notamment en lisant les sujets sur notre module d'initiation à la programmation web coté serveur.

+ +

Une connaissance générale en programmation et plus précisement en Python est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.

+ +
+

Note : Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du Python pour les non-programmeurs dans la documentation sur le site officiel de Python: python.org).

+
+ +

Guides

+ +
+
Introduction à Django
+
Dans ce premier article, nous répondrons aux questions "qu'est ce que Django ?" et vous donner un aperçu rapide de ce qu'un framework peut vous apporter. Nous survolerons les fonctionnalités principales ainsi que quelques fonctionnalités avancées que nous ne pouvons pas détailler en l'espace d'un seul module. Nous vous montrerons aussi les blocs principaux de Django ce qui vous donnera un aperçu de ce qui est faisable avant de commencer.
+
Installer un environnement de développement pour Django
+
Maintenant que vous savez ce qu'est Django, nous allons nous attaquer à la partie installation, comment l'installer sous Windows, Linux(Ubuntu), et Mac OS X — tant que vous utilisez un système d'exploitation commun, cet article devrait vous donner le nécessaire afin de commencer à développer des applications avec Django.
+
Tutoriel Django: Le site web d'une librairie
+
Le premier article de cette série de tutoriels explique ce que vous aurez à apprendre autour d'un site que nous allons programmer pour une bibliothèque, site web dans lequel nous allons travailler et évoluer à travers plusieurs articles.
+
Tutoriel Django Partie 2: Créer un squelette d'un site web
+
Cet article vous montrera comment créer le "squelette" d'un site web auquel vous pourrez ajouter de quoi le personnaliser avec des paramètres spécifiques, des URLs, des modèles et des templates.
+
Tutoriel Django Partie 3: Utilisation des modèles
+
Cet article montre comment définir des modèles pour le site web que nous appelleront LocalLibrary — les modèles représentent la façon dont sont structurées nos données dans nos applications, nous autoriserons aussi Django à stocker des données dans une base de données pour nous (et modifier cela plus tard). Cet article explique en somme ce qu'un modèle est, comment le déclarer et les champs principaux. Il décrit aussi brièvement comment accéder aux données d'un modèle.
+
Tutoriel Django Partie 4: L'administration d'un site sous Django
+
Maintenant que nous avons créé quelques modèles pour le site web LocalLibrary , nous allons utiliser Django Admin afin d'ajouter quelques "réelles" tables de données. Premièrement, nous allons vous montrer comment enregistrer des modèles avec la partie Admin, ensuite nous allons vous montrer comment se connecter et créer des informations. A la fin, nous allons vous montrer quelques moyens d'améliorer la présentation de la partie Admin.
+
Tutoriel Django Partie 5: Céez votre page d'accueil.
+
Nous sommes fin prêts à ajouter le code afin d'afficher notre première page entièremement — une page d'accueil pour le site web LocalLibrary qui montre combien d'enregistrements nous avons de chaque types de modèles et fournis une barre de navigation avec des liens menant à d'autres pages. Au fur et à mesure, nous gagnerons de l'expérience en écrivant du mapping d'URLs, en obtenant des enregistrements de la base de données et en utilisant des templates.
+
Tutoriel Django Partie 6: Listes génériques et détails des pages
+
Ce tutoriel viens étendre notre site LocaLibrary en y ajoutant des listes et des détails pour les auteurs et les livres. Ici nous allons tout vous apprendre sur les classes et vous montrer comment elles peuvent réduire la quantité de code que vous avez à écrire dans des situations communes. Nous allons aussi vous apprendre comment manipuler les URL plus en détail, ainsi que la réalisation basique d'un moteur de recherche.
+
Tutoriel Django Partie 7: Les sessions de framework
+
Ce tutoriel viens compléter le site LocalLibrary, en ajoutant un compteur de visiteurs basé sur un principe de session sur la page principale C'est un exemple relativement simple, mais il vous permettra de vous apprendre comment utiliser le système de session en fournissant un comportement persistant aux utilisateurs anonyme de votre site.
+
Tutoriel Django Partie 8: L'authentification de l'utilisateur ainsi que les permissions
+
Dans ce tutoriel, nous allons vous montrer comment autoriser les utilisateurs à se connecter à votre site avec leurs propres comptes, et comment contrôler ce qu'ils peuvent faire et voir en fonction des permissions accordées et de s'ils sont connectés ou non. Comme partie de cette démonstration, nous allons étendre le site LocalLibrary en ajoutant une page de connexion, de déconnexion et d'utilisateur - ainsi que des pages dédiées aux membres de la librairie afin de voir quel livre a été emprunté.
+
Tutoriel Django Partie 9: Travailler avec les formulaires
+
Dans ce tutoriel, nous allons vous montrer comment travailler avec les formulaires en HTML avec Django, et plus particulièrement la façon la plus facile d'écrire, créer, mettre à jour et supprimer les formulaires. Pour cela, nous allons devoir étendre le site LocalLibrary afin que les libraires puissent changer les livres, et créer, mettre à jour, et supprimer les auteurs en utilisant nos propres formulaires (au lieu de passer par Django Admin).
+
Tutoriel Django Partie 10: Tester une application Django
+
Plus les sites s'agrandissent, plus il devient dur de les tester manuellement — pas seulement parce que il y a plus de contenu à tester mais aussi parce que les intéractions entre les éléments deviennent plus complexes, un petit changement dans une partie du site peut nécessiter de nombreux tests afin de vérifier que ce changement n'a pas impacté les autres parties du site. La solution à ce problème est de programmer des tests automatiques, qui peuvent facilement et fiablement être executés à chaque changements. Ce tutoriel montre comment automatiser vos tests sur votre site web en utilisant le module de test du framework Django.
+
Tutoriel Django Partie 11: Déployer son site fait avec Django
+
Vous avez créé (et testé) un incroyable site web LocalLibray, vous allez maintenant l'installer sur un serveur public ce qui le rendra accessible aux membres de la librairie à travers internet. Cet article fournis un aperçu de comment vous pourriez trouver un hébergeur pour déployer votre site et de ce dont vous avez besoin pour rendre votre site pleinement fonctionnel.
+
Le module de sécurité de Django
+
Protéger les données de l'utilisateur est essentiel dans la conception d'un site web, nous avons précédemment expliqué quel pouvaient être les menaces principales dans l'article sur la sécurité web — cet article fournis une démonstration pratique des réaction des protections incluse de Django face à ce genre de menaces ainsi que la façon dont elles sont traitées.
+
+ +

Evaluation

+ +

L'évaluation suivante va tester votre compréhension à créer un site web avec Django comme décris dans la liste des guides ci-dessous.

+ +
+
Mini blog avec Django
+
Dans ce devoir, vous utiliserez les connaissances que vous venez d'acquérir, afin de créer votre propre blog.
+
diff --git a/files/fr/learn/server-side/django/introduction/index.html b/files/fr/learn/server-side/django/introduction/index.html deleted file mode 100644 index 6fa1007ece..0000000000 --- a/files/fr/learn/server-side/django/introduction/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Introduction à Django -slug: Learn/Server-side/Django/Introduction -tags: - - Débutant - - Python - - django -translation_of: Learn/Server-side/Django/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester) .

- - - - - - - - - - - - -
Prérequis:Connaissances basiques de programmation. Une compréhension générale de la programmation coté serveur ainsi qu'une compréhension des interactions client-serveur dans les sites web.
Objectif:Se familiariser avec Django en comprenant ce que c'est, les fonctionnalités qu'il fournit ainsi que les blocs de construction principaux d'une application Django.
- -

Qu'est ce que Django?

- -

Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non. 

- -

Django vous aide à écrire une application qui est:

- -
-
Complète
-
Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une documentation complète et à jour.
-
Polyvalent
-
Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django!
-
- Tandis qu'il fournit presque toutes les fonctionnalités dont vous pourriez avoir besoin (comme des base de données populaires, des moteurs de modélisation, etc.), il peut tout de même être étendu pour utiliser d'autres composants si besoin.
-
Sécurisé
-
Django aide les développeurs à éviter les erreurs de sécurité classique en fournissant une infrastructure conçue pour "faire ce qu'il faut" pour protéger les sites internet automatiquement. Par exemple, Django fournit un moyen sécurisé pour gérer les comptes des utilisateurs ainsi que leurs mots de passe, évitant les erreurs classiques comme mettre des informations sur la session dans des cookies, où elles sont vulnérables (à la place les cookies contiennent seulement une clé, et les données sont stockées dans la base de données), ou directement stocker des mots de passe, au lieu de mot de passe hachés.
-
- Un mot de passé haché est une valeur dont la longueur est fixée, créée en envoyant le mot de passe à travers une fonction de hachage cryptographique. Django peut vérifier si un mot de passe entré est correct en l'envoyant dans la fonction de hachage et en comparant le retour avec la valeur stockée dans la base de données. De ce fait, la nature unidirectionnelle de la fonction rend difficile pour un attaquant de retrouver le mot de passe d'origine, même si la valeur hachée est compromise.
-
- Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir Website security pour plus de détails sur ce genre d'attaques).
-
Scalable
-
Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux).
-
Maintenable
-
Les principes de design du code Django encouragent la création d'un code simple à maintenir et réutilisable. Il fait notamment appel à la philosophie du Ne Vous Répétez Pas (DRY pour Don't Repeat Yourself en anglais), afin d'éviter toute duplication superflue, réduisant la taille de votre code. Django promeut aussi le regroupement de fonctionnalités reliées entre elles en "applications" réutilisables et, à un plus bas niveau, regroupe des lignes de code dépendantes entre elles en modules (suivant les lignes du motif d'architecture Modèle-vue-contrôleur (MVC)).
-
Portable
-
Django est écrit en Python, qui fonctionne sous diverses plateformes. Cela veut dire que vous ne serez plus contraint par une plateforme en particulier, et vous pourrez faire fonctionner vos applications sous autant de versions de Linux, Windows et Mac OS X que vous le souhaitez. De plus, Django est très bien supporté par plusieurs fournisseurs d'hébergement web, qui offrent souvent des infrastructures et de la documentation spécifiques pour héberger des sites Django.
-
- -

D'où vient-il ?

- -

À l'origine, Django fut développé entre 2003 et 2005 par une équipe web responsable de la création et de la maintenance de sites journalistiques. Après avoir créé un certain nombre de sites, l'équipe commença à exclure et à réutiliser des codes récurrents et des schémas d'architecture. Ce code récurrent finit par évoluer en un framework générique de développement web, qui fut mis à disposition en open-source sous le projet "Django" en Juillet 2005.

- -

Django a continué à se développer et à s'améliorer, depuis sa première sortie (1.0) en Septembre 2008 jusqu'à la version 2.0 récemment sortie (2017). Chaque sortie a ajouté son lot de nouvelles fonctionnalités et de corrections de bugs, allant du support de nouveaux types de bases de données, de moteurs de templates et de cache, à l'addition de fonctions et de classes de vues 'génériques' (qui réduisent la quantité de code que doivent écrire les développeurs pour tout un tas de tâches de programmation). 

- -
-

Note : Consultez les notes de publication sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.

-
- -

Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web. 

- -

À quel point Django est-il populaire ?

- -

Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme Hot Frameworks tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ? 

- -

Si l'on se base sur la quantité de sites web reconnus qui utilisent Django, la quantité de personnes contribuant à son code source, et la quantité de personnes fournissant du support libre ou payant, alors oui, Django est un framework populaire !

- -

Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : Page d'accueil de Django).

- -

Django est-il restrictif ?

- -

Les frameworks web sont souvent qualifiés de "restrictifs" ou de "non-restrictifs".

- -

Les frameworks restrictifs sont ceux vous donnant une "bonne façon" de réaliser une tâche particulière. Ils sous-tendent souvent un développement rapide dans un domaine particulier (résoudre des problèmes d'un type particulier), car cette bonne façon de faire est souvent bien comprise et bien documentée. Cependant, ils peuvent être moins flexibles dans leurs capacités à résoudre des problèmes en dehors de leur domaine, et offrent souvent moins de choix sur les composants et approches utilisables.

- -

En contraste, les frameworks non-restrictifs ont moins de restrictions sur la meilleure façon d'assembler des composants ensemble pour achever un but, voire même sur quels composants utiliser. Ils simplifient la tâche des développeurs en leur permettant d'utiliser les outils les mieux adaptés à la réalisation d'une tâche particulière, au coût toutefois du besoin du développeur de trouver ces composants.
-
- Django est "plus ou moins restrictif", et offre ainsi le "meilleur de chaque approche". Il fournit un ensemble de composants pour gérer la plupart des tâches de développement web ainsi qu'une (ou deux) approches préférées sur leur utilisation. Toutefois, l'architecture découplée de Django implique que vous pouvez généralement choisir parmi un certain nombre d'options différentes, ou bien fournir un support pour des approches complètement nouvelles si vous le désirez.

- -

À quoi ressemble le code Django ?

- -

Dans un site web traditionnel orienté-données, une application web attend une requête HTTP d'un navigateur web (ou tout autre client). Quand une requête est reçue, l'application en comprend les besoins d'après l'URL et parfois d'après les informations en POST data ou GET data. En fonction de ce qui est attendu, elle peut ensuite lire ou écrire l'information dans une base de données ou réaliser une autre tâche requise pour satisfaire la requête. L'application renvoie ensuite une réponse au navigateur web, créant souvent en dynamique une page HTML affichée dans le navigateur où les données récupérées sont insérées dans les balises d'un modèle HTML.

- -

Les applications web Django regroupent généralement le code qui gère chacune de ces étapes dans des fichiers séparés :

- -

- - - -
-

Note : Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture Modèle Vue Contrôleur.

-
- - - -

Les sections ci-dessous vous donneront une idée de ce à quoi ressemble ces différentes parties d'une application Django (nous verrons plus de détails plus tard dans le jeu, une fois que nous aurons configuré l'environnement de développement).

- -

Envoyer la requête à la bonne vue (urls.py)

- -

Le mapper URL est généralement stocké dans un fichier nommé urls.py. Dans l'exemple ci-dessous, le mapper (urlpatterns) définit une liste de mappings entre des routes (des patterns d'URL spécifiques) et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête.

- -
urlpatterns = [
-    path('admin/', admin.site.urls),
-    path('book/<int:id>/', views.book-detail, name='book-detail'),
-    path('catalog/', include('catalog.urls')),
-    re_path(r'^([0-9]+)/$', views.best),
-]
-
- -

L'objet urlpatterns est une liste de fonctions path() et/ou re_path()(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une virgule de traîne optionnelle. Par exemple : [item1, item2, item3,]).

- -

Le premier argument de chaque méthode est une route (pattern) qui sera reconnu.
- La méthode path() utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction re_path() utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article !

- -

Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation views.book-detail indique que la fonction s'appelle book-detail() , et qu'elle se trouve dans un module appelé views (i.e. dans un fichier intitulé views.py)

- -

Traiter la requête (views.py)

- -

Les vues sont le coeur des applications web. Elles reçoivent des requêtes HTTP de clients web et renvoient des réponses HTTP. Entretemps, elles mobilisent les autres ressources du framework pour accéder aux bases de données, préparer le rendu des templates, etc.

- -

L'exemple ci-dessous montre une fonction vue minimale index(), qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet  HttpRequest comme paramètre (request) et renvoie un objet HttpResponse. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section.

- -
## nom du fichier : view.py (fonction vue Django)
-
-from django.http import HttpResponse
-
-def index(request):
-    # Reçoit une HttpRequest - le paramètre request
-    # réalise des opérations en utilisant les informations de la requête
-    # Renvoie HttpResponse
-    return HttpResponse('Hello from Django!')
-
- -
-

Note : Un peu de Python :

- - -
- - - -

Les vues sont généralement stockées dans un fichier nommé views.py.

- -

Définir les modèles de données (models.py)

- -

Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ types ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous.

- -

L'extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. La classe Team est dérivée de la classe Django models.Model. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ team_level peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut. 

- -
# nom du fichier : 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'),
-        ...  # lister les autres niveaux d'équipes
-    )
-    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-
- -
-

Note : Un peu de Python :

- - -
- -

Requêter les données (views.py)

- -

Le modèle Django fournit une API de requête simplifiée qui nous permet de faire des recherches dans une base de données. Cette API peut inclure plusieurs champs à la fois en supportant plusieurs critères (e.g. exactement, insensible à la casse, supérieur à, etc.), et peut supporter des déclarations complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'équipe commençant par "Fr" ou se terminant par "al"). 

- -

L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ team_level comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction filter() comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : team_level__exact).

- -
## nom du fichier : 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)
-
- -
-
- -

Cette fonction utilise la fonction render() pour créer la HttpResponse qui est renvoyée au navigateur. Cette fonction est un raccourci; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "context"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML.

- -

Renvoyer les données (templates HTML)

- -

Les systèmes template vous permettent de spécifier la structure d'un document en output, en utilisant des paramètres fictifs qui seront substitués par les données lorsque la page est générée. Les templates sont souvent utilisées pour créer du HTML, mais ils peuvent aussi être utilisées pour créer d'autres types de documents. Django supporte à la fois son système natif de template ainsi qu'une autre librairie Python populaire prête à l'emploi appelée Jinja2 (il peut aussi supporter d'autres systèmes au besoin). 

- -

L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction render(). Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées youngest_teams lorsqu'il est généré (contenu dans la variable context dans la fonction render() ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable youngest_teams existe, puis itère dessus dans une boucle for . À chaque itération, le template affiche la valeur du team_name de chaque équipe dans un élément {{htmlelement("li")}}.

- -
## nom du fichier : 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>
- -

Que pouvez-vous faire d'autre ?

- -

Les sections précédentes présentent les caractéristiques principales que vous utiliserez dans presque toutes vos applications web : mapping URL, vues, modèles et templates. Parmi les autres caractéristiques offertes par Django, on peut aussi trouver :

- - - -

Sommaire

- -

Félicitations, vous avez atteint la première étape dans votre voyage avec Django ! Vous devriez désormais comprendre les principaux bénéfices de Django, en savoir un peu plus sur son histoire, et grossièrement à quoi ressemblent chaque partie de votre application Django. Vous devriez aussi avoir appris 2-3 choses à propos du langage de programmation Python, ce qui inclut la syntaxe des listes, fonctions et classes.

- -

Vous avez déjà vu un peu de vrai code Django ci-dessus, mais à la différence du code côté client, vous aurez besoin de configurer un environnement de développement pour l'utiliser. C'est notre prochaine étape.

- -
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
- -

In this module

- - diff --git a/files/fr/learn/server-side/django/introduction/index.md b/files/fr/learn/server-side/django/introduction/index.md new file mode 100644 index 0000000000..6fa1007ece --- /dev/null +++ b/files/fr/learn/server-side/django/introduction/index.md @@ -0,0 +1,277 @@ +--- +title: Introduction à Django +slug: Learn/Server-side/Django/Introduction +tags: + - Débutant + - Python + - django +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester) .

+ + + + + + + + + + + + +
Prérequis:Connaissances basiques de programmation. Une compréhension générale de la programmation coté serveur ainsi qu'une compréhension des interactions client-serveur dans les sites web.
Objectif:Se familiariser avec Django en comprenant ce que c'est, les fonctionnalités qu'il fournit ainsi que les blocs de construction principaux d'une application Django.
+ +

Qu'est ce que Django?

+ +

Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non. 

+ +

Django vous aide à écrire une application qui est:

+ +
+
Complète
+
Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une documentation complète et à jour.
+
Polyvalent
+
Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django!
+
+ Tandis qu'il fournit presque toutes les fonctionnalités dont vous pourriez avoir besoin (comme des base de données populaires, des moteurs de modélisation, etc.), il peut tout de même être étendu pour utiliser d'autres composants si besoin.
+
Sécurisé
+
Django aide les développeurs à éviter les erreurs de sécurité classique en fournissant une infrastructure conçue pour "faire ce qu'il faut" pour protéger les sites internet automatiquement. Par exemple, Django fournit un moyen sécurisé pour gérer les comptes des utilisateurs ainsi que leurs mots de passe, évitant les erreurs classiques comme mettre des informations sur la session dans des cookies, où elles sont vulnérables (à la place les cookies contiennent seulement une clé, et les données sont stockées dans la base de données), ou directement stocker des mots de passe, au lieu de mot de passe hachés.
+
+ Un mot de passé haché est une valeur dont la longueur est fixée, créée en envoyant le mot de passe à travers une fonction de hachage cryptographique. Django peut vérifier si un mot de passe entré est correct en l'envoyant dans la fonction de hachage et en comparant le retour avec la valeur stockée dans la base de données. De ce fait, la nature unidirectionnelle de la fonction rend difficile pour un attaquant de retrouver le mot de passe d'origine, même si la valeur hachée est compromise.
+
+ Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir Website security pour plus de détails sur ce genre d'attaques).
+
Scalable
+
Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux).
+
Maintenable
+
Les principes de design du code Django encouragent la création d'un code simple à maintenir et réutilisable. Il fait notamment appel à la philosophie du Ne Vous Répétez Pas (DRY pour Don't Repeat Yourself en anglais), afin d'éviter toute duplication superflue, réduisant la taille de votre code. Django promeut aussi le regroupement de fonctionnalités reliées entre elles en "applications" réutilisables et, à un plus bas niveau, regroupe des lignes de code dépendantes entre elles en modules (suivant les lignes du motif d'architecture Modèle-vue-contrôleur (MVC)).
+
Portable
+
Django est écrit en Python, qui fonctionne sous diverses plateformes. Cela veut dire que vous ne serez plus contraint par une plateforme en particulier, et vous pourrez faire fonctionner vos applications sous autant de versions de Linux, Windows et Mac OS X que vous le souhaitez. De plus, Django est très bien supporté par plusieurs fournisseurs d'hébergement web, qui offrent souvent des infrastructures et de la documentation spécifiques pour héberger des sites Django.
+
+ +

D'où vient-il ?

+ +

À l'origine, Django fut développé entre 2003 et 2005 par une équipe web responsable de la création et de la maintenance de sites journalistiques. Après avoir créé un certain nombre de sites, l'équipe commença à exclure et à réutiliser des codes récurrents et des schémas d'architecture. Ce code récurrent finit par évoluer en un framework générique de développement web, qui fut mis à disposition en open-source sous le projet "Django" en Juillet 2005.

+ +

Django a continué à se développer et à s'améliorer, depuis sa première sortie (1.0) en Septembre 2008 jusqu'à la version 2.0 récemment sortie (2017). Chaque sortie a ajouté son lot de nouvelles fonctionnalités et de corrections de bugs, allant du support de nouveaux types de bases de données, de moteurs de templates et de cache, à l'addition de fonctions et de classes de vues 'génériques' (qui réduisent la quantité de code que doivent écrire les développeurs pour tout un tas de tâches de programmation). 

+ +
+

Note : Consultez les notes de publication sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django.

+
+ +

Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web. 

+ +

À quel point Django est-il populaire ?

+ +

Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme Hot Frameworks tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ? 

+ +

Si l'on se base sur la quantité de sites web reconnus qui utilisent Django, la quantité de personnes contribuant à son code source, et la quantité de personnes fournissant du support libre ou payant, alors oui, Django est un framework populaire !

+ +

Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : Page d'accueil de Django).

+ +

Django est-il restrictif ?

+ +

Les frameworks web sont souvent qualifiés de "restrictifs" ou de "non-restrictifs".

+ +

Les frameworks restrictifs sont ceux vous donnant une "bonne façon" de réaliser une tâche particulière. Ils sous-tendent souvent un développement rapide dans un domaine particulier (résoudre des problèmes d'un type particulier), car cette bonne façon de faire est souvent bien comprise et bien documentée. Cependant, ils peuvent être moins flexibles dans leurs capacités à résoudre des problèmes en dehors de leur domaine, et offrent souvent moins de choix sur les composants et approches utilisables.

+ +

En contraste, les frameworks non-restrictifs ont moins de restrictions sur la meilleure façon d'assembler des composants ensemble pour achever un but, voire même sur quels composants utiliser. Ils simplifient la tâche des développeurs en leur permettant d'utiliser les outils les mieux adaptés à la réalisation d'une tâche particulière, au coût toutefois du besoin du développeur de trouver ces composants.
+
+ Django est "plus ou moins restrictif", et offre ainsi le "meilleur de chaque approche". Il fournit un ensemble de composants pour gérer la plupart des tâches de développement web ainsi qu'une (ou deux) approches préférées sur leur utilisation. Toutefois, l'architecture découplée de Django implique que vous pouvez généralement choisir parmi un certain nombre d'options différentes, ou bien fournir un support pour des approches complètement nouvelles si vous le désirez.

+ +

À quoi ressemble le code Django ?

+ +

Dans un site web traditionnel orienté-données, une application web attend une requête HTTP d'un navigateur web (ou tout autre client). Quand une requête est reçue, l'application en comprend les besoins d'après l'URL et parfois d'après les informations en POST data ou GET data. En fonction de ce qui est attendu, elle peut ensuite lire ou écrire l'information dans une base de données ou réaliser une autre tâche requise pour satisfaire la requête. L'application renvoie ensuite une réponse au navigateur web, créant souvent en dynamique une page HTML affichée dans le navigateur où les données récupérées sont insérées dans les balises d'un modèle HTML.

+ +

Les applications web Django regroupent généralement le code qui gère chacune de ces étapes dans des fichiers séparés :

+ +

+ + + +
+

Note : Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture Modèle Vue Contrôleur.

+
+ + + +

Les sections ci-dessous vous donneront une idée de ce à quoi ressemble ces différentes parties d'une application Django (nous verrons plus de détails plus tard dans le jeu, une fois que nous aurons configuré l'environnement de développement).

+ +

Envoyer la requête à la bonne vue (urls.py)

+ +

Le mapper URL est généralement stocké dans un fichier nommé urls.py. Dans l'exemple ci-dessous, le mapper (urlpatterns) définit une liste de mappings entre des routes (des patterns d'URL spécifiques) et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête.

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('book/<int:id>/', views.book-detail, name='book-detail'),
+    path('catalog/', include('catalog.urls')),
+    re_path(r'^([0-9]+)/$', views.best),
+]
+
+ +

L'objet urlpatterns est une liste de fonctions path() et/ou re_path()(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une virgule de traîne optionnelle. Par exemple : [item1, item2, item3,]).

+ +

Le premier argument de chaque méthode est une route (pattern) qui sera reconnu.
+ La méthode path() utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction re_path() utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article !

+ +

Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation views.book-detail indique que la fonction s'appelle book-detail() , et qu'elle se trouve dans un module appelé views (i.e. dans un fichier intitulé views.py)

+ +

Traiter la requête (views.py)

+ +

Les vues sont le coeur des applications web. Elles reçoivent des requêtes HTTP de clients web et renvoient des réponses HTTP. Entretemps, elles mobilisent les autres ressources du framework pour accéder aux bases de données, préparer le rendu des templates, etc.

+ +

L'exemple ci-dessous montre une fonction vue minimale index(), qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet  HttpRequest comme paramètre (request) et renvoie un objet HttpResponse. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section.

+ +
## nom du fichier : view.py (fonction vue Django)
+
+from django.http import HttpResponse
+
+def index(request):
+    # Reçoit une HttpRequest - le paramètre request
+    # réalise des opérations en utilisant les informations de la requête
+    # Renvoie HttpResponse
+    return HttpResponse('Hello from Django!')
+
+ +
+

Note : Un peu de Python :

+ + +
+ + + +

Les vues sont généralement stockées dans un fichier nommé views.py.

+ +

Définir les modèles de données (models.py)

+ +

Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ types ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous.

+ +

L'extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. La classe Team est dérivée de la classe Django models.Model. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ team_level peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut. 

+ +
# nom du fichier : 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'),
+        ...  # lister les autres niveaux d'équipes
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+ +
+

Note : Un peu de Python :

+ + +
+ +

Requêter les données (views.py)

+ +

Le modèle Django fournit une API de requête simplifiée qui nous permet de faire des recherches dans une base de données. Cette API peut inclure plusieurs champs à la fois en supportant plusieurs critères (e.g. exactement, insensible à la casse, supérieur à, etc.), et peut supporter des déclarations complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'équipe commençant par "Fr" ou se terminant par "al"). 

+ +

L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ team_level comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction filter() comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : team_level__exact).

+ +
## nom du fichier : 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)
+
+ +
+
+ +

Cette fonction utilise la fonction render() pour créer la HttpResponse qui est renvoyée au navigateur. Cette fonction est un raccourci; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "context"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML.

+ +

Renvoyer les données (templates HTML)

+ +

Les systèmes template vous permettent de spécifier la structure d'un document en output, en utilisant des paramètres fictifs qui seront substitués par les données lorsque la page est générée. Les templates sont souvent utilisées pour créer du HTML, mais ils peuvent aussi être utilisées pour créer d'autres types de documents. Django supporte à la fois son système natif de template ainsi qu'une autre librairie Python populaire prête à l'emploi appelée Jinja2 (il peut aussi supporter d'autres systèmes au besoin). 

+ +

L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction render(). Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées youngest_teams lorsqu'il est généré (contenu dans la variable context dans la fonction render() ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable youngest_teams existe, puis itère dessus dans une boucle for . À chaque itération, le template affiche la valeur du team_name de chaque équipe dans un élément {{htmlelement("li")}}.

+ +
## nom du fichier : 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>
+ +

Que pouvez-vous faire d'autre ?

+ +

Les sections précédentes présentent les caractéristiques principales que vous utiliserez dans presque toutes vos applications web : mapping URL, vues, modèles et templates. Parmi les autres caractéristiques offertes par Django, on peut aussi trouver :

+ + + +

Sommaire

+ +

Félicitations, vous avez atteint la première étape dans votre voyage avec Django ! Vous devriez désormais comprendre les principaux bénéfices de Django, en savoir un peu plus sur son histoire, et grossièrement à quoi ressemblent chaque partie de votre application Django. Vous devriez aussi avoir appris 2-3 choses à propos du langage de programmation Python, ce qui inclut la syntaxe des listes, fonctions et classes.

+ +

Vous avez déjà vu un peu de vrai code Django ci-dessus, mais à la différence du code côté client, vous aurez besoin de configurer un environnement de développement pour l'utiliser. C'est notre prochaine étape.

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

In this module

+ + diff --git a/files/fr/learn/server-side/django/models/index.html b/files/fr/learn/server-side/django/models/index.html deleted file mode 100644 index 18311a5a9f..0000000000 --- a/files/fr/learn/server-side/django/models/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: 'Django didactique Section 3: Utilisation des modèles de données' -slug: Learn/Server-side/Django/Models -translation_of: Learn/Server-side/Django/Models ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
- -

Ce troisième article est consacré aux modèles de données pour les sites web générés avec Django. Après une définition et une présentation de la notion de modèle de données, il explique comment les déclarer, choisir le type de champs et quelques méthodes d'accès au modèle de données via Django.

- - - - - - - - - - - - -
Pré-requis: -

Django didactique Section 2: Créer le squelette du site web.

-
Objectif: -

Concevoir et créer vos propres modèles de données et choisir les attributs idoines.

-
- -

Survol

- -

Les applications web Django donnent accès aux données enregistrées dans une base à l'aide d'une classe d'objets models. Une classe d'objet héritée de models définit une structure de données ainsi que le type, la taille et la nature des champs de cette structure de données. Cela inclut aussi la valeur par défaut, les options ou listes d'option, les informations pour l'aide en ligne ou la définition des étiquettes des champs des formulaires. La définition du modèle de données est une abstraction indépendante du gestionnaire de base de données associé ; une fois choisi le gestionnaire est sollicité par le biais des objets Python/Django et vous n'interagissez pas directement avec lui. Votre rôle est alors de décrire le modèle de données par le biais d'objets appropriés et Django prend en charge les communications avec la base de données.

- -

Ce chapitre vous montre sur la base du site web d'une bibliothèque locale comment concevoir, créer et manipuler les données par l'intermédiaire du modèle de données.

- -

Concevoir le modèle de données de la bibliothèque locale

- -

Une étape préliminaire à la phase de développement est de réfléchir aux données (et donc aux structures de données) nécessaires et utiles pour le projet et aux relations entre-elles.

- -

Nous aurons besoin de conserver des données sur des livres (titre, résumé, auteur, version original, catégorie, ISBN), le nombre disponible en stock (donc un identifiant unique par livre et le statut du prêt). Nous aurons probablement besoin d'enregistrer des informations sur les auteurs qui ne seront pas uniquement le nom ainsi que gérer l'homonymie. Enfin, il sera nécessaire d'ordonner et de trier ces informations par titre, auteur, langue ou catégorie.

- -

En conception, il est judicieux et recommandé de décrire chacun des objets séparément. Dans le cas présent, il nous faudra un objet pour les livres, les copies des livres et les auteurs.

- -

Vous pourriez aussi utiliser les modèles pour définir des listes d'options (comme une liste déroulante pour un choix), plutôt que d'avoir à implémenter avec le code du site web ces choix. C'est d'ailleurs une recommandation à considérer si les options ne sont pas parfaitement connues à l'avance. Ce sera typiquement le cas des catégories de livres (science fiction, poésie, littérature étrangère, etc.) ou des langues des version originales (Français, Anglais, Espagnol, etc.).

- -

Le choix du modèle étant posé, nous avons à considérer les relations entre les objets. Django permet d'établir trois types de relation : les relations un à un qui mettent en relation un et un seul objet avec un autre (OneToOneField), les relations un à n qui partage l'appartenance d'un objet à avec d'autres (ForeignKey) et les relations n à n qui associent des groupes d'objets entre-eux (ManyToManyField).

- -

Avec ces éléments présents à l'esprit, le diagramme  de classes UML ci-dessous décrit les objets de la bibliothèque.

- -

LocalLibrary Model UML

- -

Le modèle ainsi créé, décrit l'objet livre - Book - avec une description générique d'un livre, la copie d'un livre - BookInstance - avec l'état d'un copie physique d'un livre et de sa disponibilité, et l'objet auteur - Author. Les genres des collections pouvant varier, il est plus élégant de concevoir une classe d'objets dédiée comme pour les langues. Considérant que le statut de prêt ne changera pas, il est décidé que le traiter dans le code - BookInstance:status sera géré dans le code Django LOAN_STATUS. Dans le diagramme de classe, les caractéristiques de chacun des attributs et méthodes sont précisées pour plus de clarté du travail à réaliser.

- -

Le diagramme met aussi en évidence les relations entre les objets et la cardinalité des relations. La cardinalité est représentée par les nombres entre crochet avec, si nécessaire, un minimum et un maximum. Par exemple, un ouvrage a, au moins un genre ([1..*]) alors qu'un genre peut ne pas référencer un livre ([0..*]) ce qui se traduira en définition des objets dans models.py.

- -
-

Note : La section ci-dessous est une introduction générale à la modélisation des objets pour les modèles de données dans Django. Gardez à l'esprit la bibliothèque locale et imaginez comment devraient être décrits les objets pour cette bibliothèque.

-
- -

Introduction au modèle de données

- -

Cette section fournit une rapide introduction à la définition des objets de conception du modèle de données. 

- -

Spécification

- -

Les objets sont toujours définis dans le fichier models.py de chaque application. Ils sont conçus comme sous-classe de django.db.models.Model, et sont caractérisés par des attributs ou champs, des méthodes et des métadonnées. L'extrait ci-dessous définit donc la classe MyModelName:

- -
from django.db import models
-
-class MyModelName(models.Model):
-    """A typical class defining a model, derived from the Model class."""
-
-    # Fields
-    my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
-    ...
-
-    # Metadata
-    class Meta:
-        ordering = ['-my_field_name']
-
-    # Methods
-    def get_absolute_url(self):
-        """Returns the url to access a particular instance of MyModelName."""
-        return reverse('model-detail-view', args=[str(self.id)])
-
-    def __str__(self):
-        """String for representing the MyModelName object (in Admin site etc.)."""
-        return self.my_field_name
- -

Détaillons ce qu'il en retourne :

- -

Champs ou attributs

- -

Chaque objet peut contenir autant d'attributs que de besoin et de quelque type qu'il soit. Chaque attribut correspondra à une colonne - ou champ - dans une table de la base de données. Chaque enregistrement, ou ligne dans la table, correspondra à une instance de la classe d'objet et chaque champ sera évalué. Un champ est de la forme :

- -
my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
- -

Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type models.CharField —  dont le nom est my_field_name. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués :

- - - -

Le nom du champs sera utilisé dans les requêtes et les gabarits. Ces champs peuvent avoir une étiquette à l'aide d'un argument de définition (verbose_name) ou ils seront déduits à l'aide d'un changement de casse ou le remplacement des espaces par des soulignés (comme par exemple my_field_name serait l'étiquette par défaut du champs My field name).

- -

L'ordre dans lequel est défini un attribut de la classe d'objet va définir la position de la colonne dans le modèle physique de la base de données ce qui affectera, même la présentation est modifiable, la présentation par défaut des champs dans les formulaires ; c'est notamment le cas pour la partie administration du site web.

- -
Les arguments courants des champs
- -

Vous trouverez ci-dessous les arguments les plus utilisés dans la définition des champs :

- - - -

L'ensemble des options de champs peut être consulté sur le site Django.

- -
Les types courrants de champs
- -

Vous trouverez ci-dessous les arguments les principaux type de champs :

- - - -

L'ensemble des types de champs peut être consulté sur le site Django.

- -

Métadonnées

- -

Vous avez la capacité de déclarer des métadonnées à l'aide de la classe  class Meta, comme précisé ci-dessous :

- -
class Meta:
-    ordering = ['-my_field_name']
-
- -

L'une des fonctionnalités les plus utiles disponible à l'aide des métadonnées est de définir et contrôler le classement des enregistrements. Vous l'obtenez en précisant la liste des champs dans l'attribut ordering comme indiqué ci-dessous. Le classement est fonction du type de l'attribut (une chaîne de caractère a un classement alphabétique alors qu'une date a un classement chronologique). Si vous préfixez le nom du champs du signe moins (-) alors le classement sera naturellement inversé.

- -

Voici un exemple de classe de livre par titre et dates de parution :

- -
ordering = ['title', '-pubdate']
- -

Les livres sont présenté dans l'ordre alphabétique de leur titre, puis dans l'ordre chronologique du plus récent au plus ancien.

- -

Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, verbose_name  peut être au singulier et au pluriel :

- -
verbose_name = 'BetterName'
- -

D'autres attributs vous permettent de compléter des droits d'accès à ceux appliqués par défaut, des classements s'appuyant sur le comportement d'autres champs, ou de définir une classe abstraite (c'est-à-dire qui n'aura pas de transcription dans une table et des enregistrements, mais servira de support à d'autres classes partageant des éléments communs).

- -

D'autres éléments sont aussi disponibles pour contrôler le comportement d'une base de données, mais sont principalement utilisés pour appliquer le modèle ORM sur une base de données déjà existante.

- -

L'ensemble des métadonnées de classe peut être consulté sur le site Django.

- -

Méthodes

- -

Comme tout objet Python, une classe héritée de model peut utiliser des méthodes.

- -

A minima, chaque modèle de données - c'est-à-dire une classe héritée de la classe model du module django.db - vous devez définir la méthode __str__() pour permettre d'afficher un élément compréhensible qui représentera l'instance de la classe. Cette méthode est aussi utilisée au niveau du site d'administration pour afficher les instances de la classe administrée. La plupart du temps, cette méthode retourne un titre ou nom associé à aux objets de la classe.

- -
def __str__(self):
-    return self.field_name
- -

Une seconde méthode très utilisée dans le cadriciel Django est get_absolute_url(). Elle permet de fournir un URL pour afficher dans le site web le contenu de de chacun des enregistrements associés au modèle de données décrit. Si vous utilisez cette méthode, Django ajoutera un bouton pour permet de visualiser le détail des enregistrements. Classiquement, une méthode get_absolute_url() est de la forme :

- -
def get_absolute_url(self):
-    """Returns the url to access a particular instance of the model."""
-    return reverse('model-detail-view', args=[str(self.id)])
-
- -
-

Note : En supposant que vous allez utiliser des URLs du type /myapplication/mymodelname/2 pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'identifiant d'un enregistrement donné), vous devrez créer un routage d'URL pour vous permettre de transmettre l'id à une vue détaillée de l'enregistrement (model detail view dans le cadriciel Django). Cette vue détaillée réalisera l'affichage de l'enregistrement. La fonction reverse() a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs.

- -

Bien entendu, cela requiert d'écrire le routage de l'URL, la vue et le gabarit...

-
- -

Vous pouvez aussi définir toute les méthodes dont vous aurez besoin pour manipuler à travers les objets du modèle de données les enregistrements de la base de données.

- -

Administration des données

- -

A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque.

- -

Créer et modifier des enregistrements

- -

Pour créer un enregistrement, il suffit de définir une instance de la classe d'objet et de la sauvegarder avec la méthode save().

- -
# Créer un nouvel enregistrement en utilisant la méthode d'instanciation.
-record = MyModelName(my_field_name="Instance #1")
-
-# Sauvegarde de l'enregistrement en base de données.
-record.save()
-
- -
-

Note : Si aucun champs n'a été défini comme une clé primaire (option primary_key), un champs nommé id ou pk sera affecté au modèle et sera incrémenté automatiquement. Vous pouvez requêter cet enregistrement à l'aide de ce champ ; le premier enregistrement aura habituellement la valeur entière 1.

-
- -

Les champs de l'enregistrement sont accessibles à l'aide des attributs de la classe d'objet. En utilisant la syntaxe pointée, vous pouvez modifier les valeurs des champs de l'enregistrement. Vous devez utiliser la méthode save() pour enregistrer en base de données les modifications.

- -
# Accès au valeur des champs par le biais des attributs de classe Python.
-print(record.id) # devrez retourner la valeur 1 pour le premier en enregistrement.
-print(record.my_field_name) # devrez afficher 'Instance #1'
-
-# Changer la valeur d'un champs et le sauvegarder en base avec la méthoide save().
-record.my_field_name = "New Instance Name"
-record.save()
- -

Rechercher des enregistrements

- -

La classe de base objects permet de faire des recherches d'enregistrement qui correspondront aux critères de recherche souhaités.

- -
-

Note : Nous utiliserons dans les explications le modèle de données d'un livre (Book)avec des titres (title) et des genres littéraires (genre), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique.

-
- -

Vous pouvez obtenir tous les enregistrements d'un modèle de données sous la forme d'un jeu de données ou QuerySet, en utilisant objects.all(). Un QuerySet est un objet itérable, c'est-à-dire jeu de données contenant des objets que l'on peut parcourir.

- -
all_books = Book.objects.all()
-
- -

Un filtre Django ou filter() est une méthode qui permet de sélectionner un jeu de données répondant à des critères (texte ou numérique) de sélection. Par exemple, nous filtrons les livres dont le titre contient le mot "wild", puis nous dénombrons le jeu de données.

- -
wild_books = Book.objects.filter(title__contains='wild')
-number_wild_books = wild_books.count()
-
- -

Les arguments passés en option sont le champs et la nature du contrôle à effectuer. On utilise le format : field_name__match_type : dans l'exemple ci-dessus, le double sous-ligné marque la séparation entre le champ title et le type de contrôle contains ; concrètement, le filtre est appliqué sur le champ title contenant le mot wild en respectant la casse. Il existe d'autres options de contrôle : icontains (sans respect de la casse), iexact (le champs correspond exactement à la valeur donnée sans respect de la casse), exact (idem en respectant la casse) et in, gt (plus grand que), startswith(commence par), etc. La liste complète est consultable sur la documentation de Django.

- -

Le marqueur "double souligné" permet de construire une chaîne de navigation à travers les objets lorsque le champ considéré est une clé étrangère (ForeignKey). C'est systématiquement le cas lorsque l'on doit filtrer sur une propriété d'un attribut dans une relation un-à-un. Dans ce cas (exemple ci-dessous), vous identifiez l'attribut de la clé étrangère par le biais d'un "double souligné" qui indique le champs à filter. L'exemple ci-dessous indique que vous filtrez les livres selon le nom (name) du genre (genre) du livre.

- -
# Le critère s'appliquera sur les genres contenant 'fiction' i.e. : Fiction, Science fiction, non-fiction etc.
-books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
-
- -
-

Note : Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (ForeignKey/ManyToManyField) que vous en avez besoin en concaténant des noms de champs à l'aide  (__) . Si par exemple vous souhaitez trouver un livre (Book) qui possède différents type (type) de couvertures (cover) identifiées par des noms (name) alors le chemin sera du type : type__cover__name__exact='hard'.

-
- -

La mise en oeuvre des requêtes est très riches en fonction des modèles et des relations, de sous-ensemble de données, etc. Pour une informations détaillées, vous devez consulter les requêtes sur le site de référence de Django.

- -

Définition du modèle de données de l'application LocalLibrary

- -

Cette section est consacrée au démarrage de la définition de l'application LocalLibrary qui permet de gérer une petite bibliothèque locale. Ouvrez le fichier models.py présent dans le répertoire /locallibrary/catalog/. Le code par défaut est déjà en place au début du document et permet d'importer les éléments du module models de django.

- -
from django.db import models
-
-# Create your models here.
- -

L'objet Genre

- -

Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier models.py.

- -
class Genre(models.Model):
-    """Cet objet représente une catégorie ou un genre littéraire."""
-    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
-
-    def __str__(self):
-        """Cette fonction est obligatoirement requise par Django.
-           Elle retourne une chaîne de caractère pour identifier l'instance de la classe d'objet."""
-        return self.name
- -

L'objet, en relation avec la base de données, possède un seul attribut (name) de type chaîne de caractères (CharField), qui sera utilisé pour décrire le genre d'un livre (limité à 200 caractères). Une option (help_text) permet d'utiliser une étiquettes d'aide dans les pages et formulaires du site web. La méthode __str__(), qui retourne simplement le nom du genre littéraire de chaque enregistrement. Puisque qu'il n'y a pas de nom vernaculaire (verbose_name), le champ sera simplement nommé Name dans les formulaires.

- -

L'objet Book

- -

Comme précédemment, vous pouvez copier le descriptif de l'objet Book à la fin du fichier models.py. Cet objet représente un livre dans sa description et non une copie en rayon disponible au prêt. Par conséquent, l'objet contient un titre et son identifiant international (isbn dont on notera l'étiquette en majuscule pour ne pas avoir "Isbn" à la place) sous forme de chaînes de caractère. De plus, l'objet contient un résumé sous forme d'une chaîne de caractère de longueur non explicite pour traiter de résumés plus ou moins long.

- -
from django.urls import reverse # Cette fonction est utilisée pour formater les URL
-
-class Book(models.Model):
-    """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon)."""
-    title = models.CharField(max_length=200)
-
-    # La clé étrangère (ForeignKey) est utilisée car elle représente correcte le modèle de relation en livre et son auteur :
-    #  Un livre a un seul auteur, mais un auteur a écrit plusieurs livres.
-    # Le type de l'objet Author est déclré comme une chaîne de caractère car
-    # la classe d'objet Author n'a pas encore été déclarée dans le fichier
-    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
-
-    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
-    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
-
-    # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre.
-    #  un livre peut avoir plusieurs genres littéraire et réciproquement.
-    # Comme la classe d'objets Genre a été définit précédemment, nous pouvons manipuler l'objet.
-    genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
-
-    def __str__(self):
-        """Fonction requise par Django pour manipuler les objets Book dans la base de données."""
-        return self.title
-
-    def get_absolute_url(self):
-        """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet."""
-        return reverse('book-detail', args=[str(self.id)])
-
- -

Le genre littéraire est une relation n à n (ManyToManyField) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère (ForeignKey) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres.

- -

La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option null positionné à True permet d'avoir un contenu vide en base de données, la second option on_delete=models.SET_NULL qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.

- -

Deux méthodes sont déclarées pour cet objet. La méthode __str__() obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, get_absolute_url(), retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom  book-detail, et nous aurons à définir une vue et un gabarit.

- -

L'objet BookInstance

- -

Occupons nous maintenant de l'objet BookInstance. Comme précédemment, copiez le contenu décrivant l'objet BookInstance ci-dessous dans votre fichier models.py. La classe d'objets décrit une copie d'un ouvrage qu'un individu peut physiquement emprunter. Elle prend en compte les éléments d'information qui permettent de l'identifier individuellement et de connaître son statut à chaque instant ainsi que la date de retour du prêt.

- -

Les attributs et méthodes vont vous paraître familiers. On utilise :

- - - -
import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres
-
-class BookInstance(models.Model):
-    """Cet objet permet de modéliser les copies d'un ouvrage (i.e. qui peut être emprunté)."""
-    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library')
-    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
-    imprint = models.CharField(max_length=200)
-    due_back = models.DateField(null=True, blank=True)
-
-    LOAN_STATUS = (
-        ('m', 'Maintenance'),
-        ('o', 'On loan'),
-        ('a', 'Available'),
-        ('r', 'Reserved'),
-    )
-
-    status = models.CharField(
-        max_length=1,
-        choices=LOAN_STATUS,
-        blank=True,
-        default='m',
-        help_text='Book availability',
-    )
-
-    class Meta:
-        ordering = ['due_back']
-
-    def __str__(self):
-        """Fonction requise par Django pour manipuler les objets Book dans la base de données."""
-        return f'{self.id} ({self.book.title})'
- -

De nouveaux types de champs sont utilisés :

- - - -

La méthode __str__() obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. Elle offre cependant la particularité d'associer l'identifiant unique et le titre du livre qui lui est associé.

- -
-

Note : Un aspect de Python:

- - -
- -

L'objet Author

- -

Terminons en copiant la description de l'objet Author à la fin du fichier models.py.

- -
class Author(models.Model):
-    """Model representing an author."""
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
-
-    class Meta:
-        ordering = ['last_name', 'first_name']
-
-    def get_absolute_url(self):
-        """Returns the url to access a particular author instance."""
-        return reverse('author-detail', args=[str(self.id)])
-
-    def __str__(self):
-        """String for representing the Model object."""
-        return f'{self.last_name}, {self.first_name}'
-
- -

Désormais les notions manipulées pour définir cet objet vous sont connues. L'objet réprésente un auteur par ses nom et prénoms ainsi que par ses dates de naissance et de décès (celles-ci n'étant pas obligatoires). Deux méthodes permettent l'une d'accéder à l'objet de manière compréhensible (__str__()) en retournant les nom et prénom de l'auteur dans cet ordre, et, l'autre (get_absolute_url()) permettra de publier les informations propres à chaque auteur.

- -

Appliquer les modifications en base

- -

Les objets sont tous décrits dans le fichier dédié à la modélisation. Pour qu'elles soient effectives, il est nécessaire d'exécuter les deux commandes python qui gèrent les migrations de la base de données.

- -
python3 manage.py makemigrations
-python3 manage.py migrate
- -

Défi — Introduire les langues

- -

Faisons l'hypothèse qu'un donateur lègue à la bibliothèque des livres dont certains sont écrits dans des langues étrangères comme le Farsi (langue majoritaire en Iran). Le défi consiste donc à modéliser puis utiliser la meilleure représentation possible de ce concept pour la bibliothèque.

- -

Gardez en tête que :

- - - -

Après avoir fait vos choix, modéliser le et ajouter les champs utiles. Vous pouvez ensuite voir sur Github nous l'avons fait.

- -

Une dernière chose... n'oubliez pas d'appliquer les modifications en base de données

- -
python3 manage.py makemigrations
-python3 manage.py migrate
- -

Résumé

- -

Cet article est consacré à la création des objets et leur lien en base de données ainsi qu'à leur gestion. Il s'appuie sur l'exemple de la bibliothèque locale pour lequel nous décrivons le design du modèle relationnel et la manière de l'implementer avec une description d'objet Python conforme au standard du cadriciel Django.

- -

A ce stade, il est prématuré de créer le site web, nous allons simplement utiliser le site d'administration qui permet d'ajouter et de manipuler des données. Nous afficherons ces informations ensuite en créant des vues et de gabarits.

- -

A voir aussi

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/django/models/index.md b/files/fr/learn/server-side/django/models/index.md new file mode 100644 index 0000000000..18311a5a9f --- /dev/null +++ b/files/fr/learn/server-side/django/models/index.md @@ -0,0 +1,462 @@ +--- +title: 'Django didactique Section 3: Utilisation des modèles de données' +slug: Learn/Server-side/Django/Models +translation_of: Learn/Server-side/Django/Models +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
+ +

Ce troisième article est consacré aux modèles de données pour les sites web générés avec Django. Après une définition et une présentation de la notion de modèle de données, il explique comment les déclarer, choisir le type de champs et quelques méthodes d'accès au modèle de données via Django.

+ + + + + + + + + + + + +
Pré-requis: +

Django didactique Section 2: Créer le squelette du site web.

+
Objectif: +

Concevoir et créer vos propres modèles de données et choisir les attributs idoines.

+
+ +

Survol

+ +

Les applications web Django donnent accès aux données enregistrées dans une base à l'aide d'une classe d'objets models. Une classe d'objet héritée de models définit une structure de données ainsi que le type, la taille et la nature des champs de cette structure de données. Cela inclut aussi la valeur par défaut, les options ou listes d'option, les informations pour l'aide en ligne ou la définition des étiquettes des champs des formulaires. La définition du modèle de données est une abstraction indépendante du gestionnaire de base de données associé ; une fois choisi le gestionnaire est sollicité par le biais des objets Python/Django et vous n'interagissez pas directement avec lui. Votre rôle est alors de décrire le modèle de données par le biais d'objets appropriés et Django prend en charge les communications avec la base de données.

+ +

Ce chapitre vous montre sur la base du site web d'une bibliothèque locale comment concevoir, créer et manipuler les données par l'intermédiaire du modèle de données.

+ +

Concevoir le modèle de données de la bibliothèque locale

+ +

Une étape préliminaire à la phase de développement est de réfléchir aux données (et donc aux structures de données) nécessaires et utiles pour le projet et aux relations entre-elles.

+ +

Nous aurons besoin de conserver des données sur des livres (titre, résumé, auteur, version original, catégorie, ISBN), le nombre disponible en stock (donc un identifiant unique par livre et le statut du prêt). Nous aurons probablement besoin d'enregistrer des informations sur les auteurs qui ne seront pas uniquement le nom ainsi que gérer l'homonymie. Enfin, il sera nécessaire d'ordonner et de trier ces informations par titre, auteur, langue ou catégorie.

+ +

En conception, il est judicieux et recommandé de décrire chacun des objets séparément. Dans le cas présent, il nous faudra un objet pour les livres, les copies des livres et les auteurs.

+ +

Vous pourriez aussi utiliser les modèles pour définir des listes d'options (comme une liste déroulante pour un choix), plutôt que d'avoir à implémenter avec le code du site web ces choix. C'est d'ailleurs une recommandation à considérer si les options ne sont pas parfaitement connues à l'avance. Ce sera typiquement le cas des catégories de livres (science fiction, poésie, littérature étrangère, etc.) ou des langues des version originales (Français, Anglais, Espagnol, etc.).

+ +

Le choix du modèle étant posé, nous avons à considérer les relations entre les objets. Django permet d'établir trois types de relation : les relations un à un qui mettent en relation un et un seul objet avec un autre (OneToOneField), les relations un à n qui partage l'appartenance d'un objet à avec d'autres (ForeignKey) et les relations n à n qui associent des groupes d'objets entre-eux (ManyToManyField).

+ +

Avec ces éléments présents à l'esprit, le diagramme  de classes UML ci-dessous décrit les objets de la bibliothèque.

+ +

LocalLibrary Model UML

+ +

Le modèle ainsi créé, décrit l'objet livre - Book - avec une description générique d'un livre, la copie d'un livre - BookInstance - avec l'état d'un copie physique d'un livre et de sa disponibilité, et l'objet auteur - Author. Les genres des collections pouvant varier, il est plus élégant de concevoir une classe d'objets dédiée comme pour les langues. Considérant que le statut de prêt ne changera pas, il est décidé que le traiter dans le code - BookInstance:status sera géré dans le code Django LOAN_STATUS. Dans le diagramme de classe, les caractéristiques de chacun des attributs et méthodes sont précisées pour plus de clarté du travail à réaliser.

+ +

Le diagramme met aussi en évidence les relations entre les objets et la cardinalité des relations. La cardinalité est représentée par les nombres entre crochet avec, si nécessaire, un minimum et un maximum. Par exemple, un ouvrage a, au moins un genre ([1..*]) alors qu'un genre peut ne pas référencer un livre ([0..*]) ce qui se traduira en définition des objets dans models.py.

+ +
+

Note : La section ci-dessous est une introduction générale à la modélisation des objets pour les modèles de données dans Django. Gardez à l'esprit la bibliothèque locale et imaginez comment devraient être décrits les objets pour cette bibliothèque.

+
+ +

Introduction au modèle de données

+ +

Cette section fournit une rapide introduction à la définition des objets de conception du modèle de données. 

+ +

Spécification

+ +

Les objets sont toujours définis dans le fichier models.py de chaque application. Ils sont conçus comme sous-classe de django.db.models.Model, et sont caractérisés par des attributs ou champs, des méthodes et des métadonnées. L'extrait ci-dessous définit donc la classe MyModelName:

+ +
from django.db import models
+
+class MyModelName(models.Model):
+    """A typical class defining a model, derived from the Model class."""
+
+    # Fields
+    my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+    ...
+
+    # Metadata
+    class Meta:
+        ordering = ['-my_field_name']
+
+    # Methods
+    def get_absolute_url(self):
+        """Returns the url to access a particular instance of MyModelName."""
+        return reverse('model-detail-view', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the MyModelName object (in Admin site etc.)."""
+        return self.my_field_name
+ +

Détaillons ce qu'il en retourne :

+ +

Champs ou attributs

+ +

Chaque objet peut contenir autant d'attributs que de besoin et de quelque type qu'il soit. Chaque attribut correspondra à une colonne - ou champ - dans une table de la base de données. Chaque enregistrement, ou ligne dans la table, correspondra à une instance de la classe d'objet et chaque champ sera évalué. Un champ est de la forme :

+ +
my_field_name = models.CharField(max_length=20, help_text='Enter field documentation')
+ +

Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type models.CharField —  dont le nom est my_field_name. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués :

+ + + +

Le nom du champs sera utilisé dans les requêtes et les gabarits. Ces champs peuvent avoir une étiquette à l'aide d'un argument de définition (verbose_name) ou ils seront déduits à l'aide d'un changement de casse ou le remplacement des espaces par des soulignés (comme par exemple my_field_name serait l'étiquette par défaut du champs My field name).

+ +

L'ordre dans lequel est défini un attribut de la classe d'objet va définir la position de la colonne dans le modèle physique de la base de données ce qui affectera, même la présentation est modifiable, la présentation par défaut des champs dans les formulaires ; c'est notamment le cas pour la partie administration du site web.

+ +
Les arguments courants des champs
+ +

Vous trouverez ci-dessous les arguments les plus utilisés dans la définition des champs :

+ + + +

L'ensemble des options de champs peut être consulté sur le site Django.

+ +
Les types courrants de champs
+ +

Vous trouverez ci-dessous les arguments les principaux type de champs :

+ + + +

L'ensemble des types de champs peut être consulté sur le site Django.

+ +

Métadonnées

+ +

Vous avez la capacité de déclarer des métadonnées à l'aide de la classe  class Meta, comme précisé ci-dessous :

+ +
class Meta:
+    ordering = ['-my_field_name']
+
+ +

L'une des fonctionnalités les plus utiles disponible à l'aide des métadonnées est de définir et contrôler le classement des enregistrements. Vous l'obtenez en précisant la liste des champs dans l'attribut ordering comme indiqué ci-dessous. Le classement est fonction du type de l'attribut (une chaîne de caractère a un classement alphabétique alors qu'une date a un classement chronologique). Si vous préfixez le nom du champs du signe moins (-) alors le classement sera naturellement inversé.

+ +

Voici un exemple de classe de livre par titre et dates de parution :

+ +
ordering = ['title', '-pubdate']
+ +

Les livres sont présenté dans l'ordre alphabétique de leur titre, puis dans l'ordre chronologique du plus récent au plus ancien.

+ +

Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, verbose_name  peut être au singulier et au pluriel :

+ +
verbose_name = 'BetterName'
+ +

D'autres attributs vous permettent de compléter des droits d'accès à ceux appliqués par défaut, des classements s'appuyant sur le comportement d'autres champs, ou de définir une classe abstraite (c'est-à-dire qui n'aura pas de transcription dans une table et des enregistrements, mais servira de support à d'autres classes partageant des éléments communs).

+ +

D'autres éléments sont aussi disponibles pour contrôler le comportement d'une base de données, mais sont principalement utilisés pour appliquer le modèle ORM sur une base de données déjà existante.

+ +

L'ensemble des métadonnées de classe peut être consulté sur le site Django.

+ +

Méthodes

+ +

Comme tout objet Python, une classe héritée de model peut utiliser des méthodes.

+ +

A minima, chaque modèle de données - c'est-à-dire une classe héritée de la classe model du module django.db - vous devez définir la méthode __str__() pour permettre d'afficher un élément compréhensible qui représentera l'instance de la classe. Cette méthode est aussi utilisée au niveau du site d'administration pour afficher les instances de la classe administrée. La plupart du temps, cette méthode retourne un titre ou nom associé à aux objets de la classe.

+ +
def __str__(self):
+    return self.field_name
+ +

Une seconde méthode très utilisée dans le cadriciel Django est get_absolute_url(). Elle permet de fournir un URL pour afficher dans le site web le contenu de de chacun des enregistrements associés au modèle de données décrit. Si vous utilisez cette méthode, Django ajoutera un bouton pour permet de visualiser le détail des enregistrements. Classiquement, une méthode get_absolute_url() est de la forme :

+ +
def get_absolute_url(self):
+    """Returns the url to access a particular instance of the model."""
+    return reverse('model-detail-view', args=[str(self.id)])
+
+ +
+

Note : En supposant que vous allez utiliser des URLs du type /myapplication/mymodelname/2 pour afficher individuellement les données des enregistrements de la table associée à votre modèle de données (où "2" est l'identifiant d'un enregistrement donné), vous devrez créer un routage d'URL pour vous permettre de transmettre l'id à une vue détaillée de l'enregistrement (model detail view dans le cadriciel Django). Cette vue détaillée réalisera l'affichage de l'enregistrement. La fonction reverse() a pour objectif d'écrire l'URL dans un format cohérent avec le traitement des URL par les navigateurs.

+ +

Bien entendu, cela requiert d'écrire le routage de l'URL, la vue et le gabarit...

+
+ +

Vous pouvez aussi définir toute les méthodes dont vous aurez besoin pour manipuler à travers les objets du modèle de données les enregistrements de la base de données.

+ +

Administration des données

+ +

A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque.

+ +

Créer et modifier des enregistrements

+ +

Pour créer un enregistrement, il suffit de définir une instance de la classe d'objet et de la sauvegarder avec la méthode save().

+ +
# Créer un nouvel enregistrement en utilisant la méthode d'instanciation.
+record = MyModelName(my_field_name="Instance #1")
+
+# Sauvegarde de l'enregistrement en base de données.
+record.save()
+
+ +
+

Note : Si aucun champs n'a été défini comme une clé primaire (option primary_key), un champs nommé id ou pk sera affecté au modèle et sera incrémenté automatiquement. Vous pouvez requêter cet enregistrement à l'aide de ce champ ; le premier enregistrement aura habituellement la valeur entière 1.

+
+ +

Les champs de l'enregistrement sont accessibles à l'aide des attributs de la classe d'objet. En utilisant la syntaxe pointée, vous pouvez modifier les valeurs des champs de l'enregistrement. Vous devez utiliser la méthode save() pour enregistrer en base de données les modifications.

+ +
# Accès au valeur des champs par le biais des attributs de classe Python.
+print(record.id) # devrez retourner la valeur 1 pour le premier en enregistrement.
+print(record.my_field_name) # devrez afficher 'Instance #1'
+
+# Changer la valeur d'un champs et le sauvegarder en base avec la méthoide save().
+record.my_field_name = "New Instance Name"
+record.save()
+ +

Rechercher des enregistrements

+ +

La classe de base objects permet de faire des recherches d'enregistrement qui correspondront aux critères de recherche souhaités.

+ +
+

Note : Nous utiliserons dans les explications le modèle de données d'un livre (Book)avec des titres (title) et des genres littéraires (genre), car expliquer la manière de rechercher sur un modèle théorique n'est pas très pédagogique.

+
+ +

Vous pouvez obtenir tous les enregistrements d'un modèle de données sous la forme d'un jeu de données ou QuerySet, en utilisant objects.all(). Un QuerySet est un objet itérable, c'est-à-dire jeu de données contenant des objets que l'on peut parcourir.

+ +
all_books = Book.objects.all()
+
+ +

Un filtre Django ou filter() est une méthode qui permet de sélectionner un jeu de données répondant à des critères (texte ou numérique) de sélection. Par exemple, nous filtrons les livres dont le titre contient le mot "wild", puis nous dénombrons le jeu de données.

+ +
wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = wild_books.count()
+
+ +

Les arguments passés en option sont le champs et la nature du contrôle à effectuer. On utilise le format : field_name__match_type : dans l'exemple ci-dessus, le double sous-ligné marque la séparation entre le champ title et le type de contrôle contains ; concrètement, le filtre est appliqué sur le champ title contenant le mot wild en respectant la casse. Il existe d'autres options de contrôle : icontains (sans respect de la casse), iexact (le champs correspond exactement à la valeur donnée sans respect de la casse), exact (idem en respectant la casse) et in, gt (plus grand que), startswith(commence par), etc. La liste complète est consultable sur la documentation de Django.

+ +

Le marqueur "double souligné" permet de construire une chaîne de navigation à travers les objets lorsque le champ considéré est une clé étrangère (ForeignKey). C'est systématiquement le cas lorsque l'on doit filtrer sur une propriété d'un attribut dans une relation un-à-un. Dans ce cas (exemple ci-dessous), vous identifiez l'attribut de la clé étrangère par le biais d'un "double souligné" qui indique le champs à filter. L'exemple ci-dessous indique que vous filtrez les livres selon le nom (name) du genre (genre) du livre.

+ +
# Le critère s'appliquera sur les genres contenant 'fiction' i.e. : Fiction, Science fiction, non-fiction etc.
+books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')
+
+ +
+

Note : Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (ForeignKey/ManyToManyField) que vous en avez besoin en concaténant des noms de champs à l'aide  (__) . Si par exemple vous souhaitez trouver un livre (Book) qui possède différents type (type) de couvertures (cover) identifiées par des noms (name) alors le chemin sera du type : type__cover__name__exact='hard'.

+
+ +

La mise en oeuvre des requêtes est très riches en fonction des modèles et des relations, de sous-ensemble de données, etc. Pour une informations détaillées, vous devez consulter les requêtes sur le site de référence de Django.

+ +

Définition du modèle de données de l'application LocalLibrary

+ +

Cette section est consacrée au démarrage de la définition de l'application LocalLibrary qui permet de gérer une petite bibliothèque locale. Ouvrez le fichier models.py présent dans le répertoire /locallibrary/catalog/. Le code par défaut est déjà en place au début du document et permet d'importer les éléments du module models de django.

+ +
from django.db import models
+
+# Create your models here.
+ +

L'objet Genre

+ +

Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier models.py.

+ +
class Genre(models.Model):
+    """Cet objet représente une catégorie ou un genre littéraire."""
+    name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)')
+
+    def __str__(self):
+        """Cette fonction est obligatoirement requise par Django.
+           Elle retourne une chaîne de caractère pour identifier l'instance de la classe d'objet."""
+        return self.name
+ +

L'objet, en relation avec la base de données, possède un seul attribut (name) de type chaîne de caractères (CharField), qui sera utilisé pour décrire le genre d'un livre (limité à 200 caractères). Une option (help_text) permet d'utiliser une étiquettes d'aide dans les pages et formulaires du site web. La méthode __str__(), qui retourne simplement le nom du genre littéraire de chaque enregistrement. Puisque qu'il n'y a pas de nom vernaculaire (verbose_name), le champ sera simplement nommé Name dans les formulaires.

+ +

L'objet Book

+ +

Comme précédemment, vous pouvez copier le descriptif de l'objet Book à la fin du fichier models.py. Cet objet représente un livre dans sa description et non une copie en rayon disponible au prêt. Par conséquent, l'objet contient un titre et son identifiant international (isbn dont on notera l'étiquette en majuscule pour ne pas avoir "Isbn" à la place) sous forme de chaînes de caractère. De plus, l'objet contient un résumé sous forme d'une chaîne de caractère de longueur non explicite pour traiter de résumés plus ou moins long.

+ +
from django.urls import reverse # Cette fonction est utilisée pour formater les URL
+
+class Book(models.Model):
+    """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon)."""
+    title = models.CharField(max_length=200)
+
+    # La clé étrangère (ForeignKey) est utilisée car elle représente correcte le modèle de relation en livre et son auteur :
+    #  Un livre a un seul auteur, mais un auteur a écrit plusieurs livres.
+    # Le type de l'objet Author est déclré comme une chaîne de caractère car
+    # la classe d'objet Author n'a pas encore été déclarée dans le fichier
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+
+    summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book')
+    isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
+
+    # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre.
+    #  un livre peut avoir plusieurs genres littéraire et réciproquement.
+    # Comme la classe d'objets Genre a été définit précédemment, nous pouvons manipuler l'objet.
+    genre = models.ManyToManyField(Genre, help_text='Select a genre for this book')
+
+    def __str__(self):
+        """Fonction requise par Django pour manipuler les objets Book dans la base de données."""
+        return self.title
+
+    def get_absolute_url(self):
+        """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet."""
+        return reverse('book-detail', args=[str(self.id)])
+
+ +

Le genre littéraire est une relation n à n (ManyToManyField) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère (ForeignKey) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres.

+ +

La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option null positionné à True permet d'avoir un contenu vide en base de données, la second option on_delete=models.SET_NULL qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.

+ +

Deux méthodes sont déclarées pour cet objet. La méthode __str__() obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, get_absolute_url(), retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom  book-detail, et nous aurons à définir une vue et un gabarit.

+ +

L'objet BookInstance

+ +

Occupons nous maintenant de l'objet BookInstance. Comme précédemment, copiez le contenu décrivant l'objet BookInstance ci-dessous dans votre fichier models.py. La classe d'objets décrit une copie d'un ouvrage qu'un individu peut physiquement emprunter. Elle prend en compte les éléments d'information qui permettent de l'identifier individuellement et de connaître son statut à chaque instant ainsi que la date de retour du prêt.

+ +

Les attributs et méthodes vont vous paraître familiers. On utilise :

+ + + +
import uuid # Ce module est nécessaire à la gestion des identifiants unique (RFC 4122) pour les copies des livres
+
+class BookInstance(models.Model):
+    """Cet objet permet de modéliser les copies d'un ouvrage (i.e. qui peut être emprunté)."""
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text='Unique ID for this particular book across whole library')
+    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
+    imprint = models.CharField(max_length=200)
+    due_back = models.DateField(null=True, blank=True)
+
+    LOAN_STATUS = (
+        ('m', 'Maintenance'),
+        ('o', 'On loan'),
+        ('a', 'Available'),
+        ('r', 'Reserved'),
+    )
+
+    status = models.CharField(
+        max_length=1,
+        choices=LOAN_STATUS,
+        blank=True,
+        default='m',
+        help_text='Book availability',
+    )
+
+    class Meta:
+        ordering = ['due_back']
+
+    def __str__(self):
+        """Fonction requise par Django pour manipuler les objets Book dans la base de données."""
+        return f'{self.id} ({self.book.title})'
+ +

De nouveaux types de champs sont utilisés :

+ + + +

La méthode __str__() obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. Elle offre cependant la particularité d'associer l'identifiant unique et le titre du livre qui lui est associé.

+ +
+

Note : Un aspect de Python:

+ + +
+ +

L'objet Author

+ +

Terminons en copiant la description de l'objet Author à la fin du fichier models.py.

+ +
class Author(models.Model):
+    """Model representing an author."""
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    class Meta:
+        ordering = ['last_name', 'first_name']
+
+    def get_absolute_url(self):
+        """Returns the url to access a particular author instance."""
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        """String for representing the Model object."""
+        return f'{self.last_name}, {self.first_name}'
+
+ +

Désormais les notions manipulées pour définir cet objet vous sont connues. L'objet réprésente un auteur par ses nom et prénoms ainsi que par ses dates de naissance et de décès (celles-ci n'étant pas obligatoires). Deux méthodes permettent l'une d'accéder à l'objet de manière compréhensible (__str__()) en retournant les nom et prénom de l'auteur dans cet ordre, et, l'autre (get_absolute_url()) permettra de publier les informations propres à chaque auteur.

+ +

Appliquer les modifications en base

+ +

Les objets sont tous décrits dans le fichier dédié à la modélisation. Pour qu'elles soient effectives, il est nécessaire d'exécuter les deux commandes python qui gèrent les migrations de la base de données.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ +

Défi — Introduire les langues

+ +

Faisons l'hypothèse qu'un donateur lègue à la bibliothèque des livres dont certains sont écrits dans des langues étrangères comme le Farsi (langue majoritaire en Iran). Le défi consiste donc à modéliser puis utiliser la meilleure représentation possible de ce concept pour la bibliothèque.

+ +

Gardez en tête que :

+ + + +

Après avoir fait vos choix, modéliser le et ajouter les champs utiles. Vous pouvez ensuite voir sur Github nous l'avons fait.

+ +

Une dernière chose... n'oubliez pas d'appliquer les modifications en base de données

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ +

Résumé

+ +

Cet article est consacré à la création des objets et leur lien en base de données ainsi qu'à leur gestion. Il s'appuie sur l'exemple de la bibliothèque locale pour lequel nous décrivons le design du modèle relationnel et la manière de l'implementer avec une description d'objet Python conforme au standard du cadriciel Django.

+ +

A ce stade, il est prématuré de créer le site web, nous allons simplement utiliser le site d'administration qui permet d'ajouter et de manipuler des données. Nous afficherons ces informations ensuite en créant des vues et de gabarits.

+ +

A voir aussi

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/django/skeleton_website/index.html b/files/fr/learn/server-side/django/skeleton_website/index.html deleted file mode 100644 index 636b371873..0000000000 --- a/files/fr/learn/server-side/django/skeleton_website/index.html +++ /dev/null @@ -1,403 +0,0 @@ ---- -title: 'Django didactique Section 2: Créer le squelette du site web' -slug: Learn/Server-side/Django/skeleton_website -tags: - - Apprentissage - - Article - - Didactitiel - - Débutant - - Guide - - Intro - - Programmation - - Tutoriel - - django -translation_of: Learn/Server-side/Django/skeleton_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
- -

Ce second article de la série didactique Django va décrire comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spécifiques comme les modèles de données, les vues, les gabarits, les formulaires...

- - - - - - - - - - - - -
Prérequis:Set up a Django development environment. Avoir pris connaissance de l'article précédent.
Objectifs:Être capable d'utiliser les outils de Django pour initier un nouveau projet.
- -

Vue d'ensemble

- -

Cet article décrit comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spcifiques comme les modèles de données, vues, formulaires... qui chacun seront vus plus en details dans les articles suivants.

- -

La création est aisée:

- -
    -
  1. Utilisez la commande django-admin pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (manage.py).
    2. -
  2. Utilisez manage.py pour créer une ou plusieurs applications du projet. -
    -

    Note : Un site web consiste en une ou plusieurs sections, par exemple un site principal, un blog, un wiki,... La bonne pratique avec Django est de réaliser chacun des composants comme des applications séparées qui pourront éventuellement être réutilisées dans d'autres projets.

    -
    -
    3. -
  3. Enregistrez la nouvelle application dans le projet.
    4. -
  4. Liez les urls et chemins pour chaque application.
    5. -
- -

Pour le site web "Bibliothèque locale", le dossier du site web et celui du projet auront le même nom locallibrary. Une seule application catalog sera utilisée. La hiérachie de dossier du projet à la forme ci-dessous :

- -
locallibrary/         # Website folder
-    manage.py         # Script to run Django tools for this project (created using django-admin)
-    locallibrary/     # Website/project folder (created using django-admin)
-    catalog/          # Application folder (created using manage.py)
-
- -
-

Note : Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, en anglais, n'ont pas été modifiés.

-
- -

La suite de ce chapitre est consacrée pas à pas aux étapes de création d'un projet et d'une application. La fin du chapitre sera consacré à quelques éléments de configuration du site qui peuvent être réalisés à ce stade.

- -

Créer le projet locallibrary

- -

Tout d'abord, il est nécessaire d'ouvrir une fenêtre pour exécuter des commandes en ligne (un terminal sous Linux/MacOS ou une fenêtre command sous Windows). Assurez-vous d'être dans un environnement virtuel python, déplacez-vous dans votre arborescence de dossiers pour être dans votre zone de développement des applications Django. Créez-y un sous-dossier pour les projets Django django_projects et déplacez-vous dans ce dernier :

- -
mkdir django_projects
-cd django_projects
- -

Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande  django-admin startproject. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous :

- -
django-admin startproject locallibrary
-cd locallibrary
- -

La commande django-admin crée une arboresence contenant des fichiers et un sous-dossier portant le même nom que le projet :

- -
locallibrary/
-    manage.py
-    locallibrary/
-        __init__.py
-        settings.py
-        urls.py
-        wsgi.py
- -

Votre répertoire de travail est de la forme :

- -
../django_projects/locallibrary/
- -

Le sous-dossier locallibrary permettra de gérer les requêtes web, il contient :

- - - -

Le fichier manage.py est utilisé pour créer et gérer les applications au sein du projet. C'est une boîte à outil précieuse qu'il ne faut pas modifier.

- -

Créer l'application catalog

- -

La commande ci-dessous va créer l'application catalog. Vous devez être dans le dossier de votre projet locallibrary pour exécuter cette commande (dans le même dossier que le fichier manage.py de votre projet) :

- -
python3 manage.py startapp catalog
- -
-

Note : La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : py -3 manage.py startapp catalog

- -

Si vous travaillez dans un environnement Windows, l'ensemble de la série didactique est écrite pour un environnement Linux/MacOS. Pensez, alors, à remplacer les commandes python3 par py -3.

- -

Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être  py manage.py startapp catalog

-
- -

Cet outil crée un nouveau dossier, du nom de l'application, et le peuple de fichiers essentiels. La plupart des fichiers ont des noms caractéristiques de leur fonction dans le fonctionnement de Django (par exemple, les vues sont traitées dans views.py, le modèle de données dans models.py, etc.). Ces fichiers contiennent les éléments minimaux nécessaires à leur utilisation dans le projet.

- -

Le dossier projet locallibrary est agrémenté d'un nouveau sous-dossier catalog :

- -
locallibrary/
-    manage.py
-    locallibrary/
-    catalog/
-        admin.py
-        apps.py
-        models.py
-        tests.py
-        views.py
-        __init__.py
-        migrations/
-
- -

A ceci s'ajoute :

- - - -
-

Note : Vous pouvez constater que dans le dossier de l'application, il n'y a pas de fichier pour gérer les urls, les gabarits ou les fichiers statiques. Nouys verrons ce point un peu plus loin, ils ne sont pas systématiquement nécessaires.

-
- -

Enregistrer l'application catalog

- -

Après avoir créé l'application, il est necessaire de l'enregistrée au sein du projet. Ceci permet de prendre en charge l'ensemble des éléments de l'application pour qu'ils soient pris automatiquement en charge par le quadriciel. L'enregistrement se fait dans la section INSTALLED_APPS en ajoutant le nom de l'application à la liste déjà présente.

- -

Éditez le fichier django_projects/locallibrary/locallibrary/settings.py et allez jusqu'à la liste INSTALLED_APPS. Ajoutez alors comme indiqué ci-dessous l'application à la liste.

- -
INSTALLED_APPS = [
-    'django.contrib.admin',
-    'django.contrib.auth',
-    'django.contrib.contenttypes',
-    'django.contrib.sessions',
-    'django.contrib.messages',
-    'django.contrib.staticfiles',
-    'catalog.apps.CatalogConfig', 
-]
- -

Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le nom (CatalogConfig) qui a été généré dans le fichier /locallibrary/catalog/apps.py quand l'application a été créée.

- -
-

Note : Nous verrons plus loin les autres paramètres de ce fichier(comme MIDDLEWARE). Cela permet la prise en charge par Django administration site et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc).

-
- -

Définir la base de données

- -

Dès à présent, la base de données doit être décrite. Il est souvent recommandé pour minimiser une transition délicate d'utiliser la même base de données en développement et en production. La documentation concernant les bases de données prises en charge sont bien décrites sur le site du projet Django.

- -

Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas  de paramétrages complémentaires. Ci-dessous la définition dans settings.py est nécessaire pour utiliser ce SGBD :

- -
DATABASES = {
-    'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
-    }
-}
-
- -

D'autres paramètrages du projet

- -

Le fichier settings.py est utilisé pour l'ensemble des paramètres du projet, mais pour le moment nous n'allons nous occuper du fuseau horaire. Le format des fuseaux horaires est le format standard en informatique (Liste des codes - en anglais). Changez la variable TIME_ZONE de votre projet avec la chaîne appropriée à votre fuseau, par exemple :

- -
TIME_ZONE = 'Europe/Paris'
- -

Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l'instant :

- - - -

Configurer le routage des URLs

- -

La création du site web s'appuie sur un routage d'URL et une gestion de la cartographie des URLs dans le fichier urls.py) présent dans le dossier du projet. Même si vous pouvez directement utiliser ce fichier pour gérer le routage des URLs, il est recommandé d'utiliser un mécanisme de subsidiarité avec une gestion d'URLs par application. En outre cette méthode de délégation permet une meilleure poratbilité de vos développements dans vos différents projets.

- -

A l'ouverture du fichier locallibrary/locallibrary/urls.py,  vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs.

- -
"""locallibrary URL Configuration
-
-The `urlpatterns` list routes URLs to views. For more information please see:
-    https://docs.djangoproject.com/en/2.1/topics/http/urls/
-Examples:
-Function views
-    1. Add an import:  from my_app import views
-    2. Add a URL to urlpatterns:  path('', views.home, name='home')
-Class-based views
-    1. Add an import:  from other_app.views import Home
-    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
-Including another URLconf
-    1. Import the include() function: from django.urls import include, path
-    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
-"""
-from django.contrib import admin
-from django.urls import path
-
-urlpatterns = [
-    path('admin/', admin.site.urls),
-]
-
- -

Le routage des URLs est géré à l'aide de la variable urlpatterns. Elle consititue une liste Python de fonctions path(). Chaque instance path() peut associer des motifs d'URL à une vue particulière, qui sera appelée si l'URL appellée correspond au motif décrit, ou vers une autre liste d'URL (dans ce cas, le motif est à considérer comme le motif de base pour le module dans lequel il est décrit). La variable urlpatterns contient au démarrage une seule fonction qui permet de gérer l'URL d'administration du site et utilisant le module par défaut de Django admin.site.urls.

- -
-

Note : Dans la fonction path(), une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple 'catalog/<id>/'). Ce motif correspondra à une URL du type /catalog/des_caracteres/. La chaîne des_caracteres sera transmis à la vue comme une chaîne de caractère associée à une variable nommée id. Ce point sera vu en détails plus loin dans la série didactique.

-
- -

Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable urlpatterns une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour catalog/ dont la gestion est déléguée au fichier urls.py du module catalog (c'est-à-dire le fichier catalog/urls.py).

- -
# Use include() to add paths from the catalog application
-from django.urls import include
-from django.urls import path
-
-urlpatterns += [
-    path('catalog/', include('catalog.urls')),
-]
-
-
- -

Il est nécessaire de rediriger la racine du site (concrètement https://127.0.0.1:8000/) vers celui de la seule application catalog qui va être utilisée dans ce projet (concrètemen 127.0.0.1:8000/catalog/). Pour cette étape, nous utilisons la fonction particulière (RedirectView) qui prend comme argument le lien relatif (concrètement /catalog/) quand le motif de l'URL correspondra (concrètement la racine du site).

- -

Ajoutez les lignes ci-dessous au bas du fichier urls.py :

- -
#Add URL maps to redirect the base URL to our application
-from django.views.generic import RedirectView
-urlpatterns += [
-    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
-]
-
- -

La racine du site ('/') est prise en compte par Django, il est donc inutile d'écrire le chemin avec le caractère '/' en début. Si vous maintenez ce mode d'écriture, vous aurez le message ci-dessous au démarrage du serveur :

- -
System check identified some issues:
-
-WARNINGS:
-?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
-Remove this slash as it is unnecessary.
-If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'.
-
- -

Django ne s'occupe pas nativement de fichiers statiques tels que des fichiers CSS, JavaScript, ou des images, cependant il est très utile pour que le serveur de développement le fasse pendant la création du site. Une dernière étape de configuration du routage générique des urls, consiste donc à gérer la publication des fichiers statiques. 

- -

Ajoutez les lignes ci-dessous au bas du fichier urls.py :

- -
# Use static() to add url mapping to serve static files during development (only)
-from django.conf import settings
-from django.conf.urls.static import static
-
-urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-
- -
-

Note : Il y a plusieurs manière pour ajouter des routes à la variable urlpatterns (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur += pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape :

- -
urlpatterns = [
-    path('admin/', admin.site.urls),
-    path('catalog/', include('catalog.urls')),
-    path('', RedirectView.as_view(url='/catalog/')),
-] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-
- -

De même, nous avons ajouté des imports de module à chaque étapes (par exemple, from django.urls import include) ce qui permet de bien voir les différentes étapes. Cependant, l'habitude veut que tous les imports soient traités en début de fichier Python.

-
- -

Dernière étape ! Il faut créer le fichier urls.py dans l'application (ou le module) catalog et de définir la variable urlpatterns vide pour le moment. 

- -
from django.urls import path
-from . import views
-
-urlpatterns = [
-
-]
-
- -

Tester le site web

- -

A ce niveau, le squelette du site est prêt. Le site ne produit rien de concret mais il peut être démarré pour s'assurer que les modifications apportées ne génèrent pas d'erreur au démarrage du serveur.

- -

Avant de démarer le serveur, et si vous vous souvenez bien, nous devrions faire une mise à niveau de la base de données. Il s'agit de préparer et de faire une migration de la base de données.

- -

Exécuter la migartion de la base de données

- -

Django utilise une cartographie d'objet relation ou mapping d'objet relationnel pour simuler une base de données orientée objet avec une base de données relationnelles. Au fur et à mesure des modification qui sont apportées dans la définition du modèle de données, le quadriciel va générer les scripts de migration (ces scripts sont localisés dans locallibrary/catalog/migration) pour modifier les structures de données associées dans la base de données.

- -

Quand le site a été créé (cf. supra), Django a automatiquement ajouté plusieurs modèles de base pour pouvoir administrer le site (point qui sera abordé plus loin). Pour configurer la base de données, avec ces éléments de base, il vous faut exécuter les commandes en ligne ci-dessous dans le répertoire racine du projet (dossier où se trouve manage.py):

- -
python3 manage.py makemigrations
-python3 manage.py migrate
-
- -
-

Attention : Chaque fois que vous ferez évoluer le modèle de données, vous devrez exécuter le commandes ci-dessus (elles seront traduites en structure dans la base de données que cela conduise à l'ajout ou au retrait d'objets ou d'attributs).

-
- -

L'option makemigrations réalise (sans les appliquer) les migrations nécessaires à toutes les applications du projet. Vous pouvez cependant préciser le nom de l'application pour laquelle vous souhaitez réaliser la migration. Ceci permet de vérifier le code et la cohérence du modèle de donner avant de l'appliquer réellement. Quand vous aurez un niveau expert, vous pourrez choisir de les modifier à la marge.

- -

L'option migrate applique les modifications sur la base de données (Django trace les modifications réalisées dans la base de données).

- -
-

Note : Vous pouvez consulter la documentation Migrations (sur le site Django) pour plus d'informations.

-
- -

Démarrer le site web

- -

Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur.

- -
-

Note : Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL http://127.0.0.1:8000/. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes django-admin and manage.py: runserver.

-
- -

Pour démarrer le serveur local, il suffit d'exécuter la commande ci-dessous dans le répertoire du projet (dossier où se trouver manage.py) :

- -
python3 manage.py runserver
-
- Performing system checks...
-
- System check identified no issues (0 silenced).
- August 15, 2018 - 16:11:26
- Django version 2.1, using settings 'locallibrary.settings'
- Starting development server at http://127.0.0.1:8000/
- Quit the server with CTRL-BREAK.
-
- -

Dès que le serveur est actif, vous pouvez utiliser votre navigateur est accéder à l'URL http://127.0.0.1:8000/. Vous devriez accéder à la page d'erreur ci-dessous :

- -

Django Debug page for Django 2.0

- -

Ne vous inquitez ! Cette erreur était attendue ; elle est due à l'absence de défintion de routes dans le fichier catalog/urls.py ou dans le module catalog.urls module (que nous avons déclaré dans le fichier urls.py du projet). 

- -
-

Note : La page web ci-dessus met en exergue une fonctionnalité utile de Django ; le mode des traces de debogag. Au lieu d'une simple erreur renvoyée par le serveur, celui-ci affiche un écran d'erreur avec des informations utiles pour corriger le développement conduisant à cette erreur d'affichage. Dans le cas présent, l'erreur est due au motif de l'URL qui ne correspond pas à ce qui a été configuré.

-
- -

À ce stade, nous pouvons considérer que le serveur fonctionne !

- -
-

Note : Chaque fois que vous apportez des modifications significatives, il est important d'exécuter à nouveau un migration et un test du serveur. Cela est assez rapide, pour ne pas s'en priver !

-
- -

Relevez le défi...

- -

Le dossier catalog/ a été créé automatiquement et contient des fichiers pour les vues, modèles de données, etc. Ouvrez-les pour les consulter. 

- -

Comme vous avez pu le constatez plus haut, une route pour l'administration du site (http://127.0.0.1:8000/admin/) existe déjà dans le fichier urls.py du projet. Avec votre navigateur web, vous pouvez découvrir ce qui est derrière ce site.

- - - -

Résumé

- -

Le squelette du site web est entièrement construit à ce stade. Désormais, vous allez pouvoir y ajouter des urls, des vues, des modèles de données, des gabarits et des formulaires.

- -

Maintenant que ceci est fait, le site web Local Library est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire.

- -

A voir aussi...

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/django/skeleton_website/index.md b/files/fr/learn/server-side/django/skeleton_website/index.md new file mode 100644 index 0000000000..636b371873 --- /dev/null +++ b/files/fr/learn/server-side/django/skeleton_website/index.md @@ -0,0 +1,403 @@ +--- +title: 'Django didactique Section 2: Créer le squelette du site web' +slug: Learn/Server-side/Django/skeleton_website +tags: + - Apprentissage + - Article + - Didactitiel + - Débutant + - Guide + - Intro + - Programmation + - Tutoriel + - django +translation_of: Learn/Server-side/Django/skeleton_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
+ +

Ce second article de la série didactique Django va décrire comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spécifiques comme les modèles de données, les vues, les gabarits, les formulaires...

+ + + + + + + + + + + + +
Prérequis:Set up a Django development environment. Avoir pris connaissance de l'article précédent.
Objectifs:Être capable d'utiliser les outils de Django pour initier un nouveau projet.
+ +

Vue d'ensemble

+ +

Cet article décrit comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spcifiques comme les modèles de données, vues, formulaires... qui chacun seront vus plus en details dans les articles suivants.

+ +

La création est aisée:

+ +
    +
  1. Utilisez la commande django-admin pour créer le dossier du projet ainsi que les sous-dossiers et fichiers de base ainsi que le script de gestion du projet (manage.py).
    2. +
  2. Utilisez manage.py pour créer une ou plusieurs applications du projet. +
    +

    Note : Un site web consiste en une ou plusieurs sections, par exemple un site principal, un blog, un wiki,... La bonne pratique avec Django est de réaliser chacun des composants comme des applications séparées qui pourront éventuellement être réutilisées dans d'autres projets.

    +
    +
    3. +
  3. Enregistrez la nouvelle application dans le projet.
    4. +
  4. Liez les urls et chemins pour chaque application.
    5. +
+ +

Pour le site web "Bibliothèque locale", le dossier du site web et celui du projet auront le même nom locallibrary. Une seule application catalog sera utilisée. La hiérachie de dossier du projet à la forme ci-dessous :

+ +
locallibrary/         # Website folder
+    manage.py         # Script to run Django tools for this project (created using django-admin)
+    locallibrary/     # Website/project folder (created using django-admin)
+    catalog/          # Application folder (created using manage.py)
+
+ +
+

Note : Afin de respecter la cohérence du code et pouvoir utiliser les développements sur GitHub, les noms du site et des applications, en anglais, n'ont pas été modifiés.

+
+ +

La suite de ce chapitre est consacrée pas à pas aux étapes de création d'un projet et d'une application. La fin du chapitre sera consacré à quelques éléments de configuration du site qui peuvent être réalisés à ce stade.

+ +

Créer le projet locallibrary

+ +

Tout d'abord, il est nécessaire d'ouvrir une fenêtre pour exécuter des commandes en ligne (un terminal sous Linux/MacOS ou une fenêtre command sous Windows). Assurez-vous d'être dans un environnement virtuel python, déplacez-vous dans votre arborescence de dossiers pour être dans votre zone de développement des applications Django. Créez-y un sous-dossier pour les projets Django django_projects et déplacez-vous dans ce dernier :

+ +
mkdir django_projects
+cd django_projects
+ +

Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande  django-admin startproject. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous :

+ +
django-admin startproject locallibrary
+cd locallibrary
+ +

La commande django-admin crée une arboresence contenant des fichiers et un sous-dossier portant le même nom que le projet :

+ +
locallibrary/
+    manage.py
+    locallibrary/
+        __init__.py
+        settings.py
+        urls.py
+        wsgi.py
+ +

Votre répertoire de travail est de la forme :

+ +
../django_projects/locallibrary/
+ +

Le sous-dossier locallibrary permettra de gérer les requêtes web, il contient :

+ + + +

Le fichier manage.py est utilisé pour créer et gérer les applications au sein du projet. C'est une boîte à outil précieuse qu'il ne faut pas modifier.

+ +

Créer l'application catalog

+ +

La commande ci-dessous va créer l'application catalog. Vous devez être dans le dossier de votre projet locallibrary pour exécuter cette commande (dans le même dossier que le fichier manage.py de votre projet) :

+ +
python3 manage.py startapp catalog
+ +
+

Note : La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : py -3 manage.py startapp catalog

+ +

Si vous travaillez dans un environnement Windows, l'ensemble de la série didactique est écrite pour un environnement Linux/MacOS. Pensez, alors, à remplacer les commandes python3 par py -3.

+ +

Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être  py manage.py startapp catalog

+
+ +

Cet outil crée un nouveau dossier, du nom de l'application, et le peuple de fichiers essentiels. La plupart des fichiers ont des noms caractéristiques de leur fonction dans le fonctionnement de Django (par exemple, les vues sont traitées dans views.py, le modèle de données dans models.py, etc.). Ces fichiers contiennent les éléments minimaux nécessaires à leur utilisation dans le projet.

+ +

Le dossier projet locallibrary est agrémenté d'un nouveau sous-dossier catalog :

+ +
locallibrary/
+    manage.py
+    locallibrary/
+    catalog/
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        migrations/
+
+ +

A ceci s'ajoute :

+ + + +
+

Note : Vous pouvez constater que dans le dossier de l'application, il n'y a pas de fichier pour gérer les urls, les gabarits ou les fichiers statiques. Nouys verrons ce point un peu plus loin, ils ne sont pas systématiquement nécessaires.

+
+ +

Enregistrer l'application catalog

+ +

Après avoir créé l'application, il est necessaire de l'enregistrée au sein du projet. Ceci permet de prendre en charge l'ensemble des éléments de l'application pour qu'ils soient pris automatiquement en charge par le quadriciel. L'enregistrement se fait dans la section INSTALLED_APPS en ajoutant le nom de l'application à la liste déjà présente.

+ +

Éditez le fichier django_projects/locallibrary/locallibrary/settings.py et allez jusqu'à la liste INSTALLED_APPS. Ajoutez alors comme indiqué ci-dessous l'application à la liste.

+ +
INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'catalog.apps.CatalogConfig', 
+]
+ +

Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le nom (CatalogConfig) qui a été généré dans le fichier /locallibrary/catalog/apps.py quand l'application a été créée.

+ +
+

Note : Nous verrons plus loin les autres paramètres de ce fichier(comme MIDDLEWARE). Cela permet la prise en charge par Django administration site et donne accès à de nombreuses fonctionnalités (gestion des sessions, de l'authentication, etc).

+
+ +

Définir la base de données

+ +

Dès à présent, la base de données doit être décrite. Il est souvent recommandé pour minimiser une transition délicate d'utiliser la même base de données en développement et en production. La documentation concernant les bases de données prises en charge sont bien décrites sur le site du projet Django.

+ +

Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas  de paramétrages complémentaires. Ci-dessous la définition dans settings.py est nécessaire pour utiliser ce SGBD :

+ +
DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+ +

D'autres paramètrages du projet

+ +

Le fichier settings.py est utilisé pour l'ensemble des paramètres du projet, mais pour le moment nous n'allons nous occuper du fuseau horaire. Le format des fuseaux horaires est le format standard en informatique (Liste des codes - en anglais). Changez la variable TIME_ZONE de votre projet avec la chaîne appropriée à votre fuseau, par exemple :

+ +
TIME_ZONE = 'Europe/Paris'
+ +

Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l'instant :

+ + + +

Configurer le routage des URLs

+ +

La création du site web s'appuie sur un routage d'URL et une gestion de la cartographie des URLs dans le fichier urls.py) présent dans le dossier du projet. Même si vous pouvez directement utiliser ce fichier pour gérer le routage des URLs, il est recommandé d'utiliser un mécanisme de subsidiarité avec une gestion d'URLs par application. En outre cette méthode de délégation permet une meilleure poratbilité de vos développements dans vos différents projets.

+ +

A l'ouverture du fichier locallibrary/locallibrary/urls.py,  vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs.

+ +
"""locallibrary URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.1/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+
+ +

Le routage des URLs est géré à l'aide de la variable urlpatterns. Elle consititue une liste Python de fonctions path(). Chaque instance path() peut associer des motifs d'URL à une vue particulière, qui sera appelée si l'URL appellée correspond au motif décrit, ou vers une autre liste d'URL (dans ce cas, le motif est à considérer comme le motif de base pour le module dans lequel il est décrit). La variable urlpatterns contient au démarrage une seule fonction qui permet de gérer l'URL d'administration du site et utilisant le module par défaut de Django admin.site.urls.

+ +
+

Note : Dans la fonction path(), une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple 'catalog/<id>/'). Ce motif correspondra à une URL du type /catalog/des_caracteres/. La chaîne des_caracteres sera transmis à la vue comme une chaîne de caractère associée à une variable nommée id. Ce point sera vu en détails plus loin dans la série didactique.

+
+ +

Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable urlpatterns une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour catalog/ dont la gestion est déléguée au fichier urls.py du module catalog (c'est-à-dire le fichier catalog/urls.py).

+ +
# Use include() to add paths from the catalog application
+from django.urls import include
+from django.urls import path
+
+urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+
+ +

Il est nécessaire de rediriger la racine du site (concrètement https://127.0.0.1:8000/) vers celui de la seule application catalog qui va être utilisée dans ce projet (concrètemen 127.0.0.1:8000/catalog/). Pour cette étape, nous utilisons la fonction particulière (RedirectView) qui prend comme argument le lien relatif (concrètement /catalog/) quand le motif de l'URL correspondra (concrètement la racine du site).

+ +

Ajoutez les lignes ci-dessous au bas du fichier urls.py :

+ +
#Add URL maps to redirect the base URL to our application
+from django.views.generic import RedirectView
+urlpatterns += [
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]
+
+ +

La racine du site ('/') est prise en compte par Django, il est donc inutile d'écrire le chemin avec le caractère '/' en début. Si vous maintenez ce mode d'écriture, vous aurez le message ci-dessous au démarrage du serveur :

+ +
System check identified some issues:
+
+WARNINGS:
+?: (urls.W002) Your URL pattern '/' has a route beginning with a '/'.
+Remove this slash as it is unnecessary.
+If this pattern is targeted in an include(), ensure the include() pattern has a trailing '/'.
+
+ +

Django ne s'occupe pas nativement de fichiers statiques tels que des fichiers CSS, JavaScript, ou des images, cependant il est très utile pour que le serveur de développement le fasse pendant la création du site. Une dernière étape de configuration du routage générique des urls, consiste donc à gérer la publication des fichiers statiques. 

+ +

Ajoutez les lignes ci-dessous au bas du fichier urls.py :

+ +
# Use static() to add url mapping to serve static files during development (only)
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +
+

Note : Il y a plusieurs manière pour ajouter des routes à la variable urlpatterns (dans les étapes décrites ci-dessus nous avons ajouté petit à patir en utilisant l'opérateur += pour bien séparer les étapes). Il est en réalité tout à fait possible de tout regrouper dans une seule étape :

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('', RedirectView.as_view(url='/catalog/')),
+] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +

De même, nous avons ajouté des imports de module à chaque étapes (par exemple, from django.urls import include) ce qui permet de bien voir les différentes étapes. Cependant, l'habitude veut que tous les imports soient traités en début de fichier Python.

+
+ +

Dernière étape ! Il faut créer le fichier urls.py dans l'application (ou le module) catalog et de définir la variable urlpatterns vide pour le moment. 

+ +
from django.urls import path
+from . import views
+
+urlpatterns = [
+
+]
+
+ +

Tester le site web

+ +

A ce niveau, le squelette du site est prêt. Le site ne produit rien de concret mais il peut être démarré pour s'assurer que les modifications apportées ne génèrent pas d'erreur au démarrage du serveur.

+ +

Avant de démarer le serveur, et si vous vous souvenez bien, nous devrions faire une mise à niveau de la base de données. Il s'agit de préparer et de faire une migration de la base de données.

+ +

Exécuter la migartion de la base de données

+ +

Django utilise une cartographie d'objet relation ou mapping d'objet relationnel pour simuler une base de données orientée objet avec une base de données relationnelles. Au fur et à mesure des modification qui sont apportées dans la définition du modèle de données, le quadriciel va générer les scripts de migration (ces scripts sont localisés dans locallibrary/catalog/migration) pour modifier les structures de données associées dans la base de données.

+ +

Quand le site a été créé (cf. supra), Django a automatiquement ajouté plusieurs modèles de base pour pouvoir administrer le site (point qui sera abordé plus loin). Pour configurer la base de données, avec ces éléments de base, il vous faut exécuter les commandes en ligne ci-dessous dans le répertoire racine du projet (dossier où se trouve manage.py):

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +
+

Attention : Chaque fois que vous ferez évoluer le modèle de données, vous devrez exécuter le commandes ci-dessus (elles seront traduites en structure dans la base de données que cela conduise à l'ajout ou au retrait d'objets ou d'attributs).

+
+ +

L'option makemigrations réalise (sans les appliquer) les migrations nécessaires à toutes les applications du projet. Vous pouvez cependant préciser le nom de l'application pour laquelle vous souhaitez réaliser la migration. Ceci permet de vérifier le code et la cohérence du modèle de donner avant de l'appliquer réellement. Quand vous aurez un niveau expert, vous pourrez choisir de les modifier à la marge.

+ +

L'option migrate applique les modifications sur la base de données (Django trace les modifications réalisées dans la base de données).

+ +
+

Note : Vous pouvez consulter la documentation Migrations (sur le site Django) pour plus d'informations.

+
+ +

Démarrer le site web

+ +

Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur.

+ +
+

Note : Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL http://127.0.0.1:8000/. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes django-admin and manage.py: runserver.

+
+ +

Pour démarrer le serveur local, il suffit d'exécuter la commande ci-dessous dans le répertoire du projet (dossier où se trouver manage.py) :

+ +
python3 manage.py runserver
+
+ Performing system checks...
+
+ System check identified no issues (0 silenced).
+ August 15, 2018 - 16:11:26
+ Django version 2.1, using settings 'locallibrary.settings'
+ Starting development server at http://127.0.0.1:8000/
+ Quit the server with CTRL-BREAK.
+
+ +

Dès que le serveur est actif, vous pouvez utiliser votre navigateur est accéder à l'URL http://127.0.0.1:8000/. Vous devriez accéder à la page d'erreur ci-dessous :

+ +

Django Debug page for Django 2.0

+ +

Ne vous inquitez ! Cette erreur était attendue ; elle est due à l'absence de défintion de routes dans le fichier catalog/urls.py ou dans le module catalog.urls module (que nous avons déclaré dans le fichier urls.py du projet). 

+ +
+

Note : La page web ci-dessus met en exergue une fonctionnalité utile de Django ; le mode des traces de debogag. Au lieu d'une simple erreur renvoyée par le serveur, celui-ci affiche un écran d'erreur avec des informations utiles pour corriger le développement conduisant à cette erreur d'affichage. Dans le cas présent, l'erreur est due au motif de l'URL qui ne correspond pas à ce qui a été configuré.

+
+ +

À ce stade, nous pouvons considérer que le serveur fonctionne !

+ +
+

Note : Chaque fois que vous apportez des modifications significatives, il est important d'exécuter à nouveau un migration et un test du serveur. Cela est assez rapide, pour ne pas s'en priver !

+
+ +

Relevez le défi...

+ +

Le dossier catalog/ a été créé automatiquement et contient des fichiers pour les vues, modèles de données, etc. Ouvrez-les pour les consulter. 

+ +

Comme vous avez pu le constatez plus haut, une route pour l'administration du site (http://127.0.0.1:8000/admin/) existe déjà dans le fichier urls.py du projet. Avec votre navigateur web, vous pouvez découvrir ce qui est derrière ce site.

+ + + +

Résumé

+ +

Le squelette du site web est entièrement construit à ce stade. Désormais, vous allez pouvoir y ajouter des urls, des vues, des modèles de données, des gabarits et des formulaires.

+ +

Maintenant que ceci est fait, le site web Local Library est opérationnel et nous allons passer à la partie codage et développement pour que le site produise ce qu'il est censé faire.

+ +

A voir aussi...

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/django/testing/index.html b/files/fr/learn/server-side/django/testing/index.html deleted file mode 100644 index c61cb87e24..0000000000 --- a/files/fr/learn/server-side/django/testing/index.html +++ /dev/null @@ -1,956 +0,0 @@ ---- -title: 'Django Tutorial Part 10: Testing a Django web application' -slug: Learn/Server-side/Django/Testing -tags: - - Beginner - - CodingScripting - - Django Testing - - Testing - - Tutorial - - django - - server-side - - tests - - unit tests -translation_of: Learn/Server-side/Django/Testing ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
- -

Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des tests unitaires sur votre site web en utilisant le framework de tests de Django.

- - - - - - - - - - - - -
Prérequis:Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 9: Working with forms.
Objectif:Comprendre comment écrire des tests unitaires pour des sites web basés sur Django.
- -

Vue d'ensemble

- -

Le site Local Library a actuellement des pages pour afficher des listes de tous les livres et auteurs, des pages de détail pour les éléments de type Book et Author, une page pour renouveler des BookInstances, et des pages pour créer, mettre à jour et effacer des éléments de type Author (et également des enregistrements de type Book, si vous avez relevé le défi dans le tutoriel sur les formulaires). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier superficiellement que tout fonctionne comme prévu peut prendre plusieurs minutes. Quand nous allons faire des modifications et agrandir le site, le temps requis pour vérifier manuellement que tout fonctionne "proprement" va grandir. Si nous continuons comme cela, nous allons sûrement passer beaucoup de temps à tester notre code, et peu à l'améliorer.

- -

Les tests automatiques peuvent vraiment nous aider à régler ce problème. Les avantages évidents sont qu'ils peuvent être lancés bien rapidement que des tests manuels, peuvent réaliser des tests à un niveau bien plus bas de détail, et tester exactement les mêmes fonctionnalités à chaque fois (des testeurs humains sont loin d'être aussi fiables !). Parce qu'ils sont rapides, les tests automatisés peuvent être exécutés plus régulièrement, et si un test échoue, ils pointent exactement vers la partie du code qui n'a pas fonctionné comme prévu.

- -

De plus, les tests automatisés peuvent se comporter comme le premier "utilisateur" de votre code dans le monde réel, vous obligeant à être rigoureux quand vous définissez et documentez la manière dont votre site doit se comporter. Souvent ils constituent une base pour vos exemples et votre documentation. Pour ces raisons, il existe des processus de développement de logiciels qui commencent par la définition et l'implémentation de tests, et ce n'est qu'après que le code est écrit pour atteindre le comportement attendu (par ex. le développement test-driven et le développement behaviour-driven).

- -

Ce tutoriel montre comment écrire des tests automatisés pour Django, en ajoutant un certain nombre de tests au site web LocalLibrary.

- -

Catégories de tests

- -

Il y a beaucoup de genres, de niveaux et de classifications de tests, ainsi que de manières de tester. Les tests automatisés les plus importants sont:

- -
-
Les tests unitaires
-
Ils vérifient le comportement fonctionnel de composants individuels, souvent au niveau des classes et des fonctions.
-
Les tests de régression
-
Ce sont des tests qui reproduisent des bugs historiques. Chaque test a été lancé originellement pour vérifier que le bug a été résolu, et on le relance ensuite pour s'assurer qu'il n'a pas été ré-introduit suite aux changements de code.
-
Les test d'intégration
-
Ils vérifient comment les groupes de composants fonctionnent quand ils sont utilisés ensemble. Les tests d'intégraion sont attentifs aux interactions souhaitées entre composants, mais pas nécessairement aux opérations internes de chaque composant. Ils peuvent couvrir des groupes simples de composants à travers tout le site.
-
- -
-

Note : Les autres genres habituels de tests comprennent : la boîte noire, la boîte blanche, les tests manuels, automatiques, de canari (canary), de fumée (smoke), de conformité (conformance), d'approbation (acceptance), fonctionnels, système, performance, chargement et stress. Consultez pour plus d'information sur chacun d'eux.

-
- -

Que fournit Django pour tester ?

- -

Tester un site web est une tâche complexe, car c'est une opération qui comporte plusieurs couches de logique : depuis la couche HTTP, la gestion des requêtes, les modèles d'interrogation de bases de données, jusqu'à la validation des formulaires, leur traitement et le rendu des templates.

- -

Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python unittest. Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API (LiveServerTestCase) et des outils pour utiliser d'autres frameworks de test. Par exemple vous pouvez intégrer le célèbre framework Selenium pour simuler l'interaction entre un utilisateur et un vrai navigateur.

- -

Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par unittest) (SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne True ou False, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (setUp) et/ou un comportement de fin (tearDown) définis dans la classe, comme indiqué ci-dessous.

- -
class YourTestClass(TestCase):
-    def setUp(self):
-        # Setup run before every test method.
-        pass
-
-    def tearDown(self):
-        # Clean up run after every test method.
-        pass
-
-    def test_something_that_will_pass(self):
-        self.assertFalse(False)
-
-    def test_something_that_will_fail(self):
-        self.assertTrue(False)
-
- -

La meilleure classe de base pour la plupart des tests est django.test.TestCase. Cette classe de test crée une base de données vide avant que ses tests ne soient lancés, et lance toutes les fonctions de test dans sa propre transaction. La classe possède aussi un Client de test, que vous pouvez utiliser pour simuler l'interaction entre un utilisateur et le code au niveau de la vue. Dans les sections suivantes, nous allons nous concentrer sur les tests unitaires, créés en utilisant la classe de base TestCase.

- -
-

Note : La classe django.test.TestCase est très commode, mais peut avoir pour effet de ralentir certains tests plus que nécessaire (tous les tests n'ont pas besoin de créer leur propre base de données ni de simuler une interaction au niveau de la vue). Une fois que vous serez familiarisé avec ce que vous pouvez faire avec cette classe, vous voudrez sans doute remplacer certains de vos tests avec d'autres classes plus simples parmi celles qui sont disponibles.

-
- -

Que faut-il tester ?

- -

Vous pouvez tester tous les aspects de votre code, mais non les librairies ou fonctionnalités faisant partie de Python ou de Django.

- -

Ainsi par exemple, considérez le modèle Author défini ci-dessous. Vous n'avez pas besoin de tester explicitement que first_name et last_name ont été stockés correctement comme CharField dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que date_of_birth a été validé comme champ date, car, encore une fois, cela est implémenté par Django.

- -

En revanche, vous pouvez tester que les textes utilisés pour les labels (First name, Last name, Date of birth, Died), ainsi que le respect de la taille allouée au champ texte (100 caractères), car c'est là une partie de votre propre design et quelque chose qui pourrait être cassé/modifié dans le futur.

- -
class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
-
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
-
-    def __str__(self):
-        return '%s, %s' % (self.last_name, self.first_name)
- -

De même, vous pouvez tester que les méthodes personnalisées get_absolute_url() et __str__() se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de get_absolute_url(), vous pouvez supposer que la méthode Django reverse() a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.

- -
-

Note : Les lecteurs attentifs auront noté que nous pourrions aussi vouloir limiter les dates de naissance et de décès à des valeurs sensibles, et vérifier que le décès intervient après la naissance. En Django, cette contrainte est ajoutée à vos classes de formulaires (bien que vous puissiez définir des validateurs pour les champs du modèle et des validateurs de modèles, ceux-ci ne sont utilisés qu'au niveau du formulaire s'ils sont appelés par la méthode clean() du modèle. Cela requière un ModelForm ou bien la méthode clean() du modèle a besoin d'être appelée explicitement.)

-
- -

Avec cela en tête, commençons à voir comment définir et lancer des tests.

- -

Vue d'ensemble de la structure de test

- -

Avant d'entrer dans le détail de "que tester", voyons d'abord brièvement où et comment les tests sont définis.

- -

Django utilise le built-in test discovery du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern test*.py. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple :

- -
catalog/
-  /tests/
-    __init__.py
-    test_models.py
-    test_forms.py
-    test_views.py
-
- -

Créez une structure de fichier comme montré ci-dessus, dans votre projet LocalLibrary. Le ficheir __init__.py doit être vide (il dit simplement à Python que ce répertoire est un package). Vous pouvez créer les trois fichiers de test en copiant et renommant le fichier de test du squelette /catalog/tests.py.

- -
-

Note : le fichier de test du squelette /catalog/tests.py a été créé automatiquement quand nous avons construit le squelette du site web Django. Il est parfaitement "légal" de mettre tous vos tests dedans, mais si vous testez correctement, vous allez rapidement vous retrouver avec un fichier de test énorme et impossible à gérer.

- -

Supprimez le fichier de squelette, car nous n'en aurons plus besoin.

-
- -

Ouvrez le fichier /catalog/tests/test_models.py. Ce fichier doit importer django.test.TestCase, comme indiqué ci-après :

- -

Open /catalog/tests/test_models.py. The file should import django.test.TestCase, as shown:

- -
from django.test import TestCase
-
-# Create your tests here.
-
- -

Souvent vous voudrez ajouter une classe de test pour chaque modèle/vue/form que vous voulez tester, avec des méthodes individuelles pour tester une fonctionnalité spécifique. Dans d'autres cas vous pourriez souhaiter avoir une class séparée pour tester un cas d'utilisation spécifique, avec des fonctions de test individuelles pour tester les aspects de ce cas d'utilisation (par exemple, une classe pour tester que tel champ d'un modèle est validé correctement, avec des fonctions pour tester chaque possibilité d'échec). Encore une fois, c'est à vous de décider de la structure à adopter, mais elle sera meilleure si vous êtes cohérent.

- -

Ajoutez la classe de test ci-dessous à la fin du fichier. La classe montre comment construire une classe de test de cas dérivant de TestCase.

- -
class YourTestClass(TestCase):
-    @classmethod
-    def setUpTestData(cls):
-        print("setUpTestData: Run once to set up non-modified data for all class methods.")
-        pass
-
-    def setUp(self):
-        print("setUp: Run once for every test method to setup clean data.")
-        pass
-
-    def test_false_is_false(self):
-        print("Method: test_false_is_false.")
-        self.assertFalse(False)
-
-    def test_false_is_true(self):
-        print("Method: test_false_is_true.")
-        self.assertTrue(False)
-
-    def test_one_plus_one_equals_two(self):
-        print("Method: test_one_plus_one_equals_two.")
-        self.assertEqual(1 + 1, 2)
- -

La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une configuration pré-test (par exemple, pour créer des modèles ou d'autres objets dont vous aurez besoin pour les tests) :

- - - -
-

Note : Les classes de test ont aussi une méthode tearDown(), que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base TestCase prend soin pour vous de supprimer la base de données utilisées pour les tests.

-
- -

En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions Assert, pour tester si certaines conditions sont vraies, fausses ou égales (AssertTrue, AssertFalse, AssertEqual). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console.

- -

Les méthodes AssertTrue, AssertFalse et AssertEqual sont des assertions standard fournies par unittest. Il y a d'autres assertions standard dans le framework, et aussi des assertions spécifiques à Django, pour tester si une vue redirige (assertRedirects), pour tester si tel template a été utilisé (assertTemplateUsed), etc.

- -
-

Note : Normallement vous ne devriez pas inclure de fonctions print() dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.

-
- -

Comment lancer les tests

- -

La manière la plus facile pour lancer tous les tests est d'utiliser la commande :

- -
python3 manage.py test
- -

Cette commande va lancer la recherche de tous les fichiers ayant la forme test*.py sous le répertoire courant, et lancer tous les tests définis, en utilisant les classes de base appropriées (ici nous avons un certain nombre de fichiers de test, mais pour le moment seul /catalog/tests/test_models.py contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test.

- -
-

Note : Si vous obtenez des erreurs telles que : ValueError: Missing staticfiles manifest entry ..., cela peut être dû au fait que le test ne lance pas collectstatic par défaut, et que votre application utilise une classe de storage qui le requiert (voyez manifest_strict pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement collectstatic avant de lancer les tests :

- -
python3 manage.py collectstatic
-
-
- -

Lancez les tests dans le répertoire racine de LocalLibrary. Vous devriez voir une sortie semblable à celle ci-dessous.

- -
> python3 manage.py test
-
-Creating test database for alias 'default'...
-setUpTestData: Run once to set up non-modified data for all class methods.
-setUp: Run once for every test method to setup clean data.
-Method: test_false_is_false.
-setUp: Run once for every test method to setup clean data.
-Method: test_false_is_true.
-setUp: Run once for every test method to setup clean data.
-Method: test_one_plus_one_equals_two.
-.
-======================================================================
-FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
-----------------------------------------------------------------------
-Traceback (most recent call last):
-  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
-    self.assertTrue(False)
-AssertionError: False is not true
-
-----------------------------------------------------------------------
-Ran 3 tests in 0.075s
-
-FAILED (failures=1)
-Destroying test database for alias 'default'...
- -

Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car False n'est pas True !).

- -
-

Note : La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.

-
- -

Le texte en gras ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions print() dans nos tests). Cela montre comment la méthode setUpTestData() est appelée une fois pour l'ensemble de classe, tandis que setUp() est appelée avant chaque méthode.

- -

La section suivante mnotre comment vous pouvez lancer des test spécifiques, et comment contrôler la quantité d'information fournie par les tests.

- -

Montrer plus d'informations à propos du test

- -

Si vous souhaitez obtenir plus d'informations à propos du test lancé, vous pouvez changer sa verbosité. Par exemple, pour faire la liste de ce qui a fonctionné dans le test, comme de ce qui a échoué (ainsi que tout un tas d'informations sur la manière dont la base de données à été initialisée), vous pouvez mettre la verbosité à "2", comme indiqué ci-dessous :

- -
python3 manage.py test --verbosity 2
- -

Les niveaux de verbosité sont 0, 1, 2 et 3, avec "1" comme valeur par défaut.

- -

Lancer des tests spécifiques

- -

Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de TestCase ou méthode :

- -
# Run the specified module
-python3 manage.py test catalog.tests
-
-# Run the specified module
-python3 manage.py test catalog.tests.test_models
-
-# Run the specified class
-python3 manage.py test catalog.tests.test_models.YourTestClass
-
-# Run the specified method
-python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two
-
- -

Tests de LocalLibrary

- -

Maintenant que nous savons comment lancer nos tests et quel genre de choses nous avons besoin de tester, regardons quelques exemples pratiques.

- -
-

Note : Nous n'allons pas écrire tous les tests possibles, mais ce qui suit devrait vous donner une idée sur le fonctionnement des tests, et ce que vous pouvez faire ensuite.

-
- -

Modèles

- -

Comme nous l'avons dit ci-dessus, nous devrions tester tout ce qui relève de notre design, ou tout ce qui est défini par du code que nous avons écrit nous-mêmes, mais pas les bibliothèques ou le code qui est déjà testé par Django ou par l'équipe qui développe Python.

- -

Par exemple, considérez le modèle Author ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu.

- -
class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
-
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
-
-    def __str__(self):
-        return f'{self.last_name}, {self.first_name}'
- -

Ouvrez notre /catalog/tests/test_models.py, et remplacez tout le code qui s'y trouve par le code de test ci-après pour le modèle Author.

- -

Vous voyez que nous importons d'abord TestCase et faisons dériver d'elle notre classe de test (AuthorModelTest) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite setUpTestData() afin de créer un objet author, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests.

- -
from django.test import TestCase
-
-from catalog.models import Author
-
-class AuthorModelTest(TestCase):
-    @classmethod
-    def setUpTestData(cls):
-        # Set up non-modified objects used by all test methods
-        Author.objects.create(first_name='Big', last_name='Bob')
-
-    def test_first_name_label(self):
-        author = Author.objects.get(id=1)
-        field_label = author._meta.get_field('first_name').verbose_name
-        self.assertEquals(field_label, 'first name')
-
-    def test_date_of_death_label(self):
-        author=Author.objects.get(id=1)
-        field_label = author._meta.get_field('date_of_death').verbose_name
-        self.assertEquals(field_label, 'died')
-
-    def test_first_name_max_length(self):
-        author = Author.objects.get(id=1)
-        max_length = author._meta.get_field('first_name').max_length
-        self.assertEquals(max_length, 100)
-
-    def test_object_name_is_last_name_comma_first_name(self):
-        author = Author.objects.get(id=1)
-        expected_object_name = f'{author.last_name}, {author.first_name}'
-        self.assertEquals(expected_object_name, str(author))
-
-    def test_get_absolute_url(self):
-        author = Author.objects.get(id=1)
-        # This will also fail if the urlconf is not defined.
-        self.assertEquals(author.get_absolute_url(), '/catalog/author/1')
- -

Les tests de champ vérifient que les valeurs des labels de champ (verbose_name) et que la taille des champs de type character sont tels que nous les souhaitons. Ces méthodes ont toutes des noms descriptifs et suivent le même pattern :

- -
# Get an author object to test
-author = Author.objects.get(id=1)
-
-# Get the metadata for the required field and use it to query the required field data
-field_label = author._meta.get_field('first_name').verbose_name
-
-# Compare the value to the expected result
-self.assertEquals(field_label, 'first name')
- -

Les choses intéressantes à noter sont :

- - - -
-

Note : Les tests pour les labels de last_name et date_of_birth, ainsi que le test de la longueur du champ last_name, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus.

-
- -

Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément Author est telle que nous l'attendons.

- -
def test_object_name_is_last_name_comma_first_name(self):
-    author = Author.objects.get(id=1)
-    expected_object_name = f'{author.last_name}, {author.first_name}'
-    self.assertEquals(expected_object_name, str(author))
-
-def test_get_absolute_url(self):
-    author = Author.objects.get(id=1)
-    # This will also fail if the urlconf is not defined.
-    self.assertEquals(author.get_absolute_url(), '/catalog/author/1')
- -

Maintenant lancez les tests. Si vous avez créé le modèle Author comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label date_of_death, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous).

- -
======================================================================
-FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest)
-----------------------------------------------------------------------
-Traceback (most recent call last):
-  File "D:\...\locallibrary\catalog\tests\test_models.py", line 32, in test_date_of_death_label
-    self.assertEquals(field_label,'died')
-AssertionError: 'Died' != 'died'
-- Died
-? ^
-+ died
-? ^
- -

C'est vraiment un bug mineur, mais il met en lumière comment écrire des test peut vérifier de plus près les hypothèses que vous pourriez avoir supposées vraies.

- -
-

Note : Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests.

-
- -

La configuration pour tester les autres modèles est semblable pour tous, aussi nous n'allons pas discuter chacune plus longuement. Sentez-vous libre de créer vos propres tests pour nos autres modèles.

- -

Les Formulaires

- -

La philosophie pour tester vos formulaires est la même que pour tester vos modèles: vous avez besoin de tester tout ce que vous avez codé ou les spécificités de votre design, mais non le comportement du framework sous-jacent, ni celui des autres bibliothèques tierces.

- -

Généralement, cela signifie que vous devriez tester que les formulaires ont bien les champs que vous voulez, et qu'ils sont rendus avec les bons labels et textes d'aide. Vous n'avez pas besoin de vérifier que Django valide correctement les champs selon leurs types (à moins que vous n'ayez créé vos propres champs personnalisés et leurs validations) ; c'est-à-dire que vous n'avez pas besoin de tester qu'un champ email n'accepte que des emails. Cependant vous pouvez avoir besoin de tester toute validation complémentaire que vous vous attendez à voir réalisée sur les champs, et tout message d'erreur généré par votre code.

- -

Considérez notre formulaire pour renouveler les livres. Il a seulement 1 champ pour la date de renouvellement, qui va avoir un label et un texte d'aide que nous avons besoin de vérifier.

- -
class RenewBookForm(forms.Form):
-    """Form for a librarian to renew books."""
-    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
-
-    def clean_renewal_date(self):
-        data = self.cleaned_data['renewal_date']
-
-        # Check if a date is not in the past.
-        if data < datetime.date.today():
-            raise ValidationError(_('Invalid date - renewal in past'))
-
-        # Check if date is in the allowed range (+4 weeks from today).
-        if data > datetime.date.today() + datetime.timedelta(weeks=4):
-            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
-
-        # Remember to always return the cleaned data.
-        return data
- -

Ouvrez notre fichier /catalog/tests/test_forms.py, et remplacez tout le code qui s'y trouve par le code suivant, qui teste le formulaire RenewBookForm. Nous commençons par importer notre formulaire et des bibliothèques Python et Django pour tester les fonctionnalités liées au temps. Ensuite nous déclarons notre classe de test pour formulaire de la même manière que nous l'avons fait pour les modèles, en utilisant un nom descriptif pour notre classe de test dérivée de TestCase.

- -
import datetime
-
-from django.test import TestCase
-from django.utils import timezone
-
-from catalog.forms import RenewBookForm
-
-class RenewBookFormTest(TestCase):
-    def test_renew_form_date_field_label(self):
-        form = RenewBookForm()
-        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
-
-    def test_renew_form_date_field_help_text(self):
-        form = RenewBookForm()
-        self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).')
-
-    def test_renew_form_date_in_past(self):
-        date = datetime.date.today() - datetime.timedelta(days=1)
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertFalse(form.is_valid())
-
-    def test_renew_form_date_too_far_in_future(self):
-        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertFalse(form.is_valid())
-
-    def test_renew_form_date_today(self):
-        date = datetime.date.today()
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertTrue(form.is_valid())
-
-    def test_renew_form_date_max(self):
-        date = timezone.localtime() + datetime.timedelta(weeks=4)
-        form = RenewBookForm(data={'renewal_date': date})
-        self.assertTrue(form.is_valid())
-
- -

Les deux premières fonctions testent que le label et le help_text du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. form.fields['renewal_date']). Notez bien ici que nous devons aussi tester si la valeur du label est None, car même si Django rend le label correct, il retournera None si la valeur n'est pas définie explicitement.

- -

Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (datetime.date.today()) en utilisant datetime.timedelta() (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide.

- -
-

Note : Ici nous n'utilisons pas réellement la base de données ni le client de test. Envisagez de modifier ces tests pour utiliser SimpleTestCase.

- -

Nous avons aussi besoin de vérifier que les erreurs correctes sont levées si le formulaire est invalide. Cependant cela se fait habituellement dans la partie view, c'est pourquoi nous allons nous y attacher dans la prochaine section.

-
- -

C'est tout pour les formulaires; nous en avons d'autres, mais ils sont automatiquement créés par nos vues génériques pour édition basées sur des classes, et c'est là qu'elles doivent être testées. Lancez les tests et vérifiez que notre code passe toujours !

- -

Vues

- -

Pour valider le comportement de notre vue, nous utilisons le client de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes GET et POST à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu.

- -

Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL /catalog/authors/ (une URL nommée 'authors' dans la configuration des URL).

- -
class AuthorListView(generic.ListView):
-    model = Author
-    paginate_by = 10
-
- -

Comme c'est une vue liste générique, presque tout est fait à notre place par Django. Probablement, si vous faites confiance à Django, la seule chose que vous aurez besoin de tester, c'est que la vue est accessible à l'URL correcte et qu'elle peut être atteinte en utilisant son nom. Cependant, si vous utilisez un processus de développement 'test-driven', vous allez commencer par écrire des tests qui confirmeront que la vue affiche bien tous les auteurs, en les paginant par lots de 10.

- -

Ouvrez le fichier /catalog/tests/test_views.py, et remplacez tout texte existant par le code de test suivant, pour la vue AuthorListView. Comme auparavant, nous importons notre modèle et quelques classes utiles. Dans la méthode setUpTestData(), nous définissons un certain nombre d'objets Author, de façon à pouvoir tester notre pagination.

- -
from django.test import TestCase
-from django.urls import reverse
-
-from catalog.models import Author
-
-class AuthorListViewTest(TestCase):
-    @classmethod
-    def setUpTestData(cls):
-        # Create 13 authors for pagination tests
-        number_of_authors = 13
-
-        for author_id in range(number_of_authors):
-            Author.objects.create(
-                first_name=f'Christian {author_id}',
-                last_name=f'Surname {author_id}',
-            )
-
-    def test_view_url_exists_at_desired_location(self):
-        response = self.client.get('/catalog/authors/')
-        self.assertEqual(response.status_code, 200)
-
-    def test_view_url_accessible_by_name(self):
-        response = self.client.get(reverse('authors'))
-        self.assertEqual(response.status_code, 200)
-
-    def test_view_uses_correct_template(self):
-        response = self.client.get(reverse('authors'))
-        self.assertEqual(response.status_code, 200)
-        self.assertTemplateUsed(response, 'catalog/author_list.html')
-
-    def test_pagination_is_ten(self):
-        response = self.client.get(reverse('authors'))
-        self.assertEqual(response.status_code, 200)
-        self.assertTrue('is_paginated' in response.context)
-        self.assertTrue(response.context['is_paginated'] == True)
-        self.assertTrue(len(response.context['author_list']) == 10)
-
-    def test_lists_all_authors(self):
-        # Get second page and confirm it has (exactly) remaining 3 items
-        response = self.client.get(reverse('authors')+'?page=2')
-        self.assertEqual(response.status_code, 200)
-        self.assertTrue('is_paginated' in response.context)
-        self.assertTrue(response.context['is_paginated'] == True)
-        self.assertTrue(len(response.context['author_list']) == 3)
- -

Tous les tests utilisent le client (qui appartient à notre classe dérivée de TestCase), afin de simuler une requête GET et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL.

- -
response = self.client.get('/catalog/authors/')
-response = self.client.get(reverse('authors'))
-
- -

Une fois que nous avons la réponse, nous lui demandons son code de statut, le template utilisé, si la réponse est paginée ou non, le nombre d'éléments retournés et le nombre total d'éléments.

- -
-

Note : Si, dans votre fichier /catalog/views.py, vous mettez la variable paginate_by à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus :

- -
self.assertTrue(len(response.context['author_list']) == 5)
-
-
- -

La variable la plus intéressante que nous montrons ci-dessus est response.context, qui est la variable de contexte passée au template par la vue. C'est incroyablement utile pour tester, parce qu'elle nous autorise à confirmer que notre template reçoit bien toutes les données dont il a besoin. En d'autres termes, nous pouvons vérifier que nous utilisons le template prévu, et quelles données le template utilise, ce qui permet dans une large mesure de vérifier que tous les problèmes de 'render' sont seulement dus au template.

- -

Vues limitées aux utilisateurs connectés

- -

Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue LoanedBooksByUserListView est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type BookInstance qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'.

- -
from django.contrib.auth.mixins import LoginRequiredMixin
-
-class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView):
-    """Generic class-based view listing books on loan to current user."""
-    model = BookInstance
-    template_name ='catalog/bookinstance_list_borrowed_user.html'
-    paginate_by = 10
-
-    def get_queryset(self):
-        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
- -

Ajoutez le code de test suivant à /catalog/tests/test_views.py. Ici nous utilisons d'abord la méthode SetUp() pour créer des logins de comptes d'utilisateurs et des objets de type BookInstance (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé SetUp() plutôt que setUpTestData(), parce que nous allons modifier plus tard certains de ces objets.

- -
-

Note : Le code de setUp() ci-dessous crée un livre avec un Language spécifique, mais votre code n'inclut peut-être pas le modèle Language, étant donné que celui-ci a été créé lors d'un défi. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section RenewBookInstancesViewTest qui suit.

-
- -
import datetime
-
-from django.utils import timezone
-from django.contrib.auth.models import User # Required to assign User as a borrower
-
-from catalog.models import BookInstance, Book, Genre, Language
-
-class LoanedBookInstancesByUserListViewTest(TestCase):
-    def setUp(self):
-        # Create two users
-        test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK')
-        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD')
-
-        test_user1.save()
-        test_user2.save()
-
-        # Create a book
-        test_author = Author.objects.create(first_name='John', last_name='Smith')
-        test_genre = Genre.objects.create(name='Fantasy')
-        test_language = Language.objects.create(name='English')
-        test_book = Book.objects.create(
-            title='Book Title',
-            summary='My book summary',
-            isbn='ABCDEFG',
-            author=test_author,
-            language=test_language,
-        )
-
-        # Create genre as a post-step
-        genre_objects_for_book = Genre.objects.all()
-        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
-        test_book.save()
-
-        # Create 30 BookInstance objects
-        number_of_book_copies = 30
-        for book_copy in range(number_of_book_copies):
-            return_date = timezone.localtime() + datetime.timedelta(days=book_copy%5)
-            the_borrower = test_user1 if book_copy % 2 else test_user2
-            status = 'm'
-            BookInstance.objects.create(
-                book=test_book,
-                imprint='Unlikely Imprint, 2016',
-                due_back=return_date,
-                borrower=the_borrower,
-                status=status,
-            )
-
-    def test_redirect_if_not_logged_in(self):
-        response = self.client.get(reverse('my-borrowed'))
-        self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/')
-
-    def test_logged_in_uses_correct_template(self):
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('my-borrowed'))
-
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        # Check we used correct template
-        self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html')
-
- -

Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons assertRedirects, comme montré dans test_redirect_if_not_logged_in(). Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un status_code de 200 (succès).

- -

Le reste des test vérifie que notre vue ne retourne que les livres qui sont prêtés à notre emprunteur courant. Copiez ce code et collez le à la fin de la classe de test ci-dessus.

- -
    def test_only_borrowed_books_in_list(self):
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('my-borrowed'))
-
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        # Check that initially we don't have any books in list (none on loan)
-        self.assertTrue('bookinstance_list' in response.context)
-        self.assertEqual(len(response.context['bookinstance_list']), 0)
-
-        # Now change all books to be on loan
-        books = BookInstance.objects.all()[:10]
-
-        for book in books:
-            book.status = 'o'
-            book.save()
-
-        # Check that now we have borrowed books in the list
-        response = self.client.get(reverse('my-borrowed'))
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        self.assertTrue('bookinstance_list' in response.context)
-
-        # Confirm all books belong to testuser1 and are on loan
-        for bookitem in response.context['bookinstance_list']:
-            self.assertEqual(response.context['user'], bookitem.borrower)
-            self.assertEqual('o', bookitem.status)
-
-    def test_pages_ordered_by_due_date(self):
-        # Change all books to be on loan
-        for book in BookInstance.objects.all():
-            book.status='o'
-            book.save()
-
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('my-borrowed'))
-
-        # Check our user is logged in
-        self.assertEqual(str(response.context['user']), 'testuser1')
-        # Check that we got a response "success"
-        self.assertEqual(response.status_code, 200)
-
-        # Confirm that of the items, only 10 are displayed due to pagination.
-        self.assertEqual(len(response.context['bookinstance_list']), 10)
-
-        last_date = 0
-        for book in response.context['bookinstance_list']:
-            if last_date == 0:
-                last_date = book.due_back
-            else:
-                self.assertTrue(last_date <= book.due_back)
-                last_date = book.due_back
- -

Vous pourriez aussi ajouter les tests de pagination, si vous voulez !

- -

Tester des vues avec formulaires

- -

Tester des vues avec formulaires est un peu plus compliqué que dans les cas précédents, car vous devez tester un code qui parcourt plus de chemin : l'affichage initial, l'affichage après que la validation des données a échoué, et l'affichage après que la validation a réussi. La bonne nouvelle, c'est que nous utilisons le client de test presque de la même manière que nous l'avons fait pour des vues qui ne font qu'afficher des données.

- -

Pour voir cela, écrivons des tests pour la vue utilisée pour renouveler des livres (renew_book_librarian()) :

- -
from catalog.forms import RenewBookForm
-
-@permission_required('catalog.can_mark_returned')
-def renew_book_librarian(request, pk):
-    """View function for renewing a specific BookInstance by librarian."""
-    book_instance = get_object_or_404(BookInstance, pk=pk)
-
-    # If this is a POST request then process the Form data
-    if request.method == 'POST':
-
-        # Create a form instance and populate it with data from the request (binding):
-        book_renewal_form = RenewBookForm(request.POST)
-
-        # Check if the form is valid:
-        if form.is_valid():
-            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
-            book_instance.due_back = form.cleaned_data['renewal_date']
-            book_instance.save()
-
-            # redirect to a new URL:
-            return HttpResponseRedirect(reverse('all-borrowed'))
-
-    # If this is a GET (or any other method) create the default form
-    else:
-        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
-        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
-
-    context = {
-        'book_renewal_form': book_renewal_form,
-        'book_instance': book_instance,
-    }
-
-    return render(request, 'catalog/book_renew_librarian.html', context)
- -

Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission can_mark_returned, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une BookInstance inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur.

- -

Ajoutez la première partie de la classe de test ci-dessous à la fin du fichier /catalog/tests/test_views.py. Cela crée deux utilisateurs et deux instances de livres, mais ne donne qu'à un seul utilisateur la permission d'accéder à la vue. Le code pour autoriser les permissions durant les tests est montrée en gras :

- -
import uuid
-
-from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
-
-class RenewBookInstancesViewTest(TestCase):
-    def setUp(self):
-        # Create a user
-        test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK')
-        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD')
-
-        test_user1.save()
-        test_user2.save()
-
-        permission = Permission.objects.get(name='Set book as returned')
-        test_user2.user_permissions.add(permission)
-        test_user2.save()
-
-        # Create a book
-        test_author = Author.objects.create(first_name='John', last_name='Smith')
-        test_genre = Genre.objects.create(name='Fantasy')
-        test_language = Language.objects.create(name='English')
-        test_book = Book.objects.create(
-            title='Book Title',
-            summary='My book summary',
-            isbn='ABCDEFG',
-            author=test_author,
-            language=test_language,
-        )
-
-        # Create genre as a post-step
-        genre_objects_for_book = Genre.objects.all()
-        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
-        test_book.save()
-
-        # Create a BookInstance object for test_user1
-        return_date = datetime.date.today() + datetime.timedelta(days=5)
-        self.test_bookinstance1 = BookInstance.objects.create(
-            book=test_book,
-            imprint='Unlikely Imprint, 2016',
-            due_back=return_date,
-            borrower=test_user1,
-            status='o',
-        )
-
-        # Create a BookInstance object for test_user2
-        return_date = datetime.date.today() + datetime.timedelta(days=5)
-        self.test_bookinstance2 = BookInstance.objects.create(
-            book=test_book,
-            imprint='Unlikely Imprint, 2016',
-            due_back=return_date,
-            borrower=test_user2,
-            status='o',
-        )
- -

Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (testuser2) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une BookInstance inexistante. Nous vérifions aussi que le bon template est utilisé.

- -
   def test_redirect_if_not_logged_in(self):
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
-        self.assertEqual(response.status_code, 302)
-        self.assertTrue(response.url.startswith('/accounts/login/'))
-
-    def test_redirect_if_logged_in_but_not_correct_permission(self):
-        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        self.assertEqual(response.status_code, 403)
-
-    def test_logged_in_with_permission_borrowed_book(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk}))
-
-        # Check that it lets us login - this is our book and we have the right permissions.
-        self.assertEqual(response.status_code, 200)
-
-    def test_logged_in_with_permission_another_users_borrowed_book(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-
-        # Check that it lets us login. We're a librarian, so we can view any users book
-        self.assertEqual(response.status_code, 200)
-
-    def test_HTTP404_for_invalid_book_if_logged_in(self):
-        # unlikely UID to match our bookinstance!
-        test_uid = uuid.uuid4()
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid}))
-        self.assertEqual(response.status_code, 404)
-
-    def test_uses_correct_template(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        self.assertEqual(response.status_code, 200)
-
-        # Check we used correct template
-        self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html')
-
- -

Ajoutez la méthode de test suivante, comme montré ci-dessous. Elle vérifie que la date initiale pour le formulaire est trois semaines dans le futur. Notez comment nous pouvons accéder à la valeur initiale de ce champ de formulaire (en gras).

- -
    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
-        self.assertEqual(response.status_code, 200)
-
-        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
-        self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future)
-
- -
-

Attention : Si vous utilisez la class de formulaire RenewBookModelForm(forms.ModelForm) à la place de la classe RenewBookForm(forms.Form), le nom du champ est 'due_back' et non 'renewal_date'.

-
- -

Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirige vers une liste de tous les livres empruntés si le renouvellement réussit. Ce qui diffère ici est que, pour la première fois, nous montrons comment vous pouvez POSTer des données en utilisant le client. Les données postées forment le second argument de la fonction post, et elles sont spécifiées comme un dictionnaire de clés/valeurs.

- -
    def test_redirects_to_all_borrowed_book_list_on_success(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
-        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future})
-        self.assertRedirects(response, reverse('all-borrowed'))
-
- -
-

Attention : La vue all-borrowed a été ajoutée comme défi, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression follow=True dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie /catalog/ plutôt que /).

- -
 response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True )
- self.assertRedirects(response, '/catalog/')
-
- -

Copiez les deux dernières fonctions dans la classe, comme indiqué ci-dessous. Elles testent de nouveau des requêtes POST, mais dans ce cas avec des dates de renouvellement invalides. Nous utilisons la méthode assertFormError() pour vérifier que les messages d'erreur sont ceux que nous attendons.

- -
    def test_form_invalid_renewal_date_past(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
-        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past})
-        self.assertEqual(response.status_code, 200)
-        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past')
-
-    def test_form_invalid_renewal_date_future(self):
-        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
-        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
-        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future})
-        self.assertEqual(response.status_code, 200)
-        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
-
- -

Le même genre de technique peut être utilisé pour tester les autres vues.

- -

Templates

- -

Django fournit des API de test pour vérifier que le bon template sera appelé par vos vues, et pour vous permettre de vérifier que l'information correcte sera envoyée. Il n'y a cependant pas de support d'API spécifique en Django pour tester que votre sortie HTML a le rendu souhaité.

- -

Autres outils de test recommandés

- -

Le framework de test de Django peut vous aider à écrire des tests unitaires et d'intégration efficaces - nous n'avons fait que gratter la surface de ce que peut faire unittest,le framework de test sous-jacent, et plus encore les additions de Django (par exemple, regardez comment vous pouvez utiliser unittest.mock pour patcher les bibliothèques tierces afin de tester plus finement votre propre code).

- -

Comme il y a un grand nombre d'autres outils de test à votre disposition, nous ne mentionnerons que les deux suivants :

- - - -

Défi

- -

Il y a beaucoup d'autres modèles et vues que nous pouvons tester. Comme exercice simple, essayez de créer un cas de test pour la vue AuthorCreate.

- -
class AuthorCreate(PermissionRequiredMixin, CreateView):
-    model = Author
-    fields = '__all__'
-    initial = {'date_of_death':'12/10/2016'}
-    permission_required = 'catalog.can_mark_returned'
- -

Souvenez-vous que vous avez besoin de vérifier tout ce que vous avez spécifié ou ce qui fait partie du design. Cela va inclure qui a accès, la date initiale, le template utilisé, et où la vue redirige en cas de succès.

- -

Résumé

- -

Écrire un code de test n'est ni très excitant ni très fascinant, et par conséquent ce travail est souvent laissé pour la fin (ou complètement délaissé) par les créateurs de sites web. C'est pourtant un élément essentiel pour vous assurer que, malgré les changements apportés, votre code peut passer à une nouvelle version en toute sécurité, et que sa maintenance est rentable.

- -

Dans ce tutoriel, nous vous avons montré comment écrire et lancer des tests pour vos modèles, formulaires et vues. Plus important, nous avons fourni un bref résumé de ce que vous devez tester, ce qui est souvent la chose la plus difficile à comprendre quand on commence. Il y a beaucoup de choses à savoir, mais avec ce que vous avez déjà appris, vous devriez être capable de créer des tests unitaires efficaces pour vos sites web.

- -

Le prochain (et dernier) tutoriel montre comment vous pouvez déployer votre merveilleux (et entièrement testé !) site web Django.

- -

À voir également

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/django/testing/index.md b/files/fr/learn/server-side/django/testing/index.md new file mode 100644 index 0000000000..c61cb87e24 --- /dev/null +++ b/files/fr/learn/server-side/django/testing/index.md @@ -0,0 +1,956 @@ +--- +title: 'Django Tutorial Part 10: Testing a Django web application' +slug: Learn/Server-side/Django/Testing +tags: + - Beginner + - CodingScripting + - Django Testing + - Testing + - Tutorial + - django + - server-side + - tests + - unit tests +translation_of: Learn/Server-side/Django/Testing +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
+ +

Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des tests unitaires sur votre site web en utilisant le framework de tests de Django.

+ + + + + + + + + + + + +
Prérequis:Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 9: Working with forms.
Objectif:Comprendre comment écrire des tests unitaires pour des sites web basés sur Django.
+ +

Vue d'ensemble

+ +

Le site Local Library a actuellement des pages pour afficher des listes de tous les livres et auteurs, des pages de détail pour les éléments de type Book et Author, une page pour renouveler des BookInstances, et des pages pour créer, mettre à jour et effacer des éléments de type Author (et également des enregistrements de type Book, si vous avez relevé le défi dans le tutoriel sur les formulaires). Même avec ce site relativement petit, naviguer manuellement vers chaque page et vérifier superficiellement que tout fonctionne comme prévu peut prendre plusieurs minutes. Quand nous allons faire des modifications et agrandir le site, le temps requis pour vérifier manuellement que tout fonctionne "proprement" va grandir. Si nous continuons comme cela, nous allons sûrement passer beaucoup de temps à tester notre code, et peu à l'améliorer.

+ +

Les tests automatiques peuvent vraiment nous aider à régler ce problème. Les avantages évidents sont qu'ils peuvent être lancés bien rapidement que des tests manuels, peuvent réaliser des tests à un niveau bien plus bas de détail, et tester exactement les mêmes fonctionnalités à chaque fois (des testeurs humains sont loin d'être aussi fiables !). Parce qu'ils sont rapides, les tests automatisés peuvent être exécutés plus régulièrement, et si un test échoue, ils pointent exactement vers la partie du code qui n'a pas fonctionné comme prévu.

+ +

De plus, les tests automatisés peuvent se comporter comme le premier "utilisateur" de votre code dans le monde réel, vous obligeant à être rigoureux quand vous définissez et documentez la manière dont votre site doit se comporter. Souvent ils constituent une base pour vos exemples et votre documentation. Pour ces raisons, il existe des processus de développement de logiciels qui commencent par la définition et l'implémentation de tests, et ce n'est qu'après que le code est écrit pour atteindre le comportement attendu (par ex. le développement test-driven et le développement behaviour-driven).

+ +

Ce tutoriel montre comment écrire des tests automatisés pour Django, en ajoutant un certain nombre de tests au site web LocalLibrary.

+ +

Catégories de tests

+ +

Il y a beaucoup de genres, de niveaux et de classifications de tests, ainsi que de manières de tester. Les tests automatisés les plus importants sont:

+ +
+
Les tests unitaires
+
Ils vérifient le comportement fonctionnel de composants individuels, souvent au niveau des classes et des fonctions.
+
Les tests de régression
+
Ce sont des tests qui reproduisent des bugs historiques. Chaque test a été lancé originellement pour vérifier que le bug a été résolu, et on le relance ensuite pour s'assurer qu'il n'a pas été ré-introduit suite aux changements de code.
+
Les test d'intégration
+
Ils vérifient comment les groupes de composants fonctionnent quand ils sont utilisés ensemble. Les tests d'intégraion sont attentifs aux interactions souhaitées entre composants, mais pas nécessairement aux opérations internes de chaque composant. Ils peuvent couvrir des groupes simples de composants à travers tout le site.
+
+ +
+

Note : Les autres genres habituels de tests comprennent : la boîte noire, la boîte blanche, les tests manuels, automatiques, de canari (canary), de fumée (smoke), de conformité (conformance), d'approbation (acceptance), fonctionnels, système, performance, chargement et stress. Consultez pour plus d'information sur chacun d'eux.

+
+ +

Que fournit Django pour tester ?

+ +

Tester un site web est une tâche complexe, car c'est une opération qui comporte plusieurs couches de logique : depuis la couche HTTP, la gestion des requêtes, les modèles d'interrogation de bases de données, jusqu'à la validation des formulaires, leur traitement et le rendu des templates.

+ +

Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python unittest. Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API (LiveServerTestCase) et des outils pour utiliser d'autres frameworks de test. Par exemple vous pouvez intégrer le célèbre framework Selenium pour simuler l'interaction entre un utilisateur et un vrai navigateur.

+ +

Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par unittest) (SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne True ou False, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (setUp) et/ou un comportement de fin (tearDown) définis dans la classe, comme indiqué ci-dessous.

+ +
class YourTestClass(TestCase):
+    def setUp(self):
+        # Setup run before every test method.
+        pass
+
+    def tearDown(self):
+        # Clean up run after every test method.
+        pass
+
+    def test_something_that_will_pass(self):
+        self.assertFalse(False)
+
+    def test_something_that_will_fail(self):
+        self.assertTrue(False)
+
+ +

La meilleure classe de base pour la plupart des tests est django.test.TestCase. Cette classe de test crée une base de données vide avant que ses tests ne soient lancés, et lance toutes les fonctions de test dans sa propre transaction. La classe possède aussi un Client de test, que vous pouvez utiliser pour simuler l'interaction entre un utilisateur et le code au niveau de la vue. Dans les sections suivantes, nous allons nous concentrer sur les tests unitaires, créés en utilisant la classe de base TestCase.

+ +
+

Note : La classe django.test.TestCase est très commode, mais peut avoir pour effet de ralentir certains tests plus que nécessaire (tous les tests n'ont pas besoin de créer leur propre base de données ni de simuler une interaction au niveau de la vue). Une fois que vous serez familiarisé avec ce que vous pouvez faire avec cette classe, vous voudrez sans doute remplacer certains de vos tests avec d'autres classes plus simples parmi celles qui sont disponibles.

+
+ +

Que faut-il tester ?

+ +

Vous pouvez tester tous les aspects de votre code, mais non les librairies ou fonctionnalités faisant partie de Python ou de Django.

+ +

Ainsi par exemple, considérez le modèle Author défini ci-dessous. Vous n'avez pas besoin de tester explicitement que first_name et last_name ont été stockés correctement comme CharField dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que date_of_birth a été validé comme champ date, car, encore une fois, cela est implémenté par Django.

+ +

En revanche, vous pouvez tester que les textes utilisés pour les labels (First name, Last name, Date of birth, Died), ainsi que le respect de la taille allouée au champ texte (100 caractères), car c'est là une partie de votre propre design et quelque chose qui pourrait être cassé/modifié dans le futur.

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)
+ +

De même, vous pouvez tester que les méthodes personnalisées get_absolute_url() et __str__() se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de get_absolute_url(), vous pouvez supposer que la méthode Django reverse() a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie.

+ +
+

Note : Les lecteurs attentifs auront noté que nous pourrions aussi vouloir limiter les dates de naissance et de décès à des valeurs sensibles, et vérifier que le décès intervient après la naissance. En Django, cette contrainte est ajoutée à vos classes de formulaires (bien que vous puissiez définir des validateurs pour les champs du modèle et des validateurs de modèles, ceux-ci ne sont utilisés qu'au niveau du formulaire s'ils sont appelés par la méthode clean() du modèle. Cela requière un ModelForm ou bien la méthode clean() du modèle a besoin d'être appelée explicitement.)

+
+ +

Avec cela en tête, commençons à voir comment définir et lancer des tests.

+ +

Vue d'ensemble de la structure de test

+ +

Avant d'entrer dans le détail de "que tester", voyons d'abord brièvement où et comment les tests sont définis.

+ +

Django utilise le built-in test discovery du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern test*.py. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple :

+ +
catalog/
+  /tests/
+    __init__.py
+    test_models.py
+    test_forms.py
+    test_views.py
+
+ +

Créez une structure de fichier comme montré ci-dessus, dans votre projet LocalLibrary. Le ficheir __init__.py doit être vide (il dit simplement à Python que ce répertoire est un package). Vous pouvez créer les trois fichiers de test en copiant et renommant le fichier de test du squelette /catalog/tests.py.

+ +
+

Note : le fichier de test du squelette /catalog/tests.py a été créé automatiquement quand nous avons construit le squelette du site web Django. Il est parfaitement "légal" de mettre tous vos tests dedans, mais si vous testez correctement, vous allez rapidement vous retrouver avec un fichier de test énorme et impossible à gérer.

+ +

Supprimez le fichier de squelette, car nous n'en aurons plus besoin.

+
+ +

Ouvrez le fichier /catalog/tests/test_models.py. Ce fichier doit importer django.test.TestCase, comme indiqué ci-après :

+ +

Open /catalog/tests/test_models.py. The file should import django.test.TestCase, as shown:

+ +
from django.test import TestCase
+
+# Create your tests here.
+
+ +

Souvent vous voudrez ajouter une classe de test pour chaque modèle/vue/form que vous voulez tester, avec des méthodes individuelles pour tester une fonctionnalité spécifique. Dans d'autres cas vous pourriez souhaiter avoir une class séparée pour tester un cas d'utilisation spécifique, avec des fonctions de test individuelles pour tester les aspects de ce cas d'utilisation (par exemple, une classe pour tester que tel champ d'un modèle est validé correctement, avec des fonctions pour tester chaque possibilité d'échec). Encore une fois, c'est à vous de décider de la structure à adopter, mais elle sera meilleure si vous êtes cohérent.

+ +

Ajoutez la classe de test ci-dessous à la fin du fichier. La classe montre comment construire une classe de test de cas dérivant de TestCase.

+ +
class YourTestClass(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        print("setUpTestData: Run once to set up non-modified data for all class methods.")
+        pass
+
+    def setUp(self):
+        print("setUp: Run once for every test method to setup clean data.")
+        pass
+
+    def test_false_is_false(self):
+        print("Method: test_false_is_false.")
+        self.assertFalse(False)
+
+    def test_false_is_true(self):
+        print("Method: test_false_is_true.")
+        self.assertTrue(False)
+
+    def test_one_plus_one_equals_two(self):
+        print("Method: test_one_plus_one_equals_two.")
+        self.assertEqual(1 + 1, 2)
+ +

La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une configuration pré-test (par exemple, pour créer des modèles ou d'autres objets dont vous aurez besoin pour les tests) :

+ + + +
+

Note : Les classes de test ont aussi une méthode tearDown(), que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base TestCase prend soin pour vous de supprimer la base de données utilisées pour les tests.

+
+ +

En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions Assert, pour tester si certaines conditions sont vraies, fausses ou égales (AssertTrue, AssertFalse, AssertEqual). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console.

+ +

Les méthodes AssertTrue, AssertFalse et AssertEqual sont des assertions standard fournies par unittest. Il y a d'autres assertions standard dans le framework, et aussi des assertions spécifiques à Django, pour tester si une vue redirige (assertRedirects), pour tester si tel template a été utilisé (assertTemplateUsed), etc.

+ +
+

Note : Normallement vous ne devriez pas inclure de fonctions print() dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées.

+
+ +

Comment lancer les tests

+ +

La manière la plus facile pour lancer tous les tests est d'utiliser la commande :

+ +
python3 manage.py test
+ +

Cette commande va lancer la recherche de tous les fichiers ayant la forme test*.py sous le répertoire courant, et lancer tous les tests définis, en utilisant les classes de base appropriées (ici nous avons un certain nombre de fichiers de test, mais pour le moment seul /catalog/tests/test_models.py contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test.

+ +
+

Note : Si vous obtenez des erreurs telles que : ValueError: Missing staticfiles manifest entry ..., cela peut être dû au fait que le test ne lance pas collectstatic par défaut, et que votre application utilise une classe de storage qui le requiert (voyez manifest_strict pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement collectstatic avant de lancer les tests :

+ +
python3 manage.py collectstatic
+
+
+ +

Lancez les tests dans le répertoire racine de LocalLibrary. Vous devriez voir une sortie semblable à celle ci-dessous.

+ +
> python3 manage.py test
+
+Creating test database for alias 'default'...
+setUpTestData: Run once to set up non-modified data for all class methods.
+setUp: Run once for every test method to setup clean data.
+Method: test_false_is_false.
+setUp: Run once for every test method to setup clean data.
+Method: test_false_is_true.
+setUp: Run once for every test method to setup clean data.
+Method: test_one_plus_one_equals_two.
+.
+======================================================================
+FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
+    self.assertTrue(False)
+AssertionError: False is not true
+
+----------------------------------------------------------------------
+Ran 3 tests in 0.075s
+
+FAILED (failures=1)
+Destroying test database for alias 'default'...
+ +

Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car False n'est pas True !).

+ +
+

Note : La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes.

+
+ +

Le texte en gras ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions print() dans nos tests). Cela montre comment la méthode setUpTestData() est appelée une fois pour l'ensemble de classe, tandis que setUp() est appelée avant chaque méthode.

+ +

La section suivante mnotre comment vous pouvez lancer des test spécifiques, et comment contrôler la quantité d'information fournie par les tests.

+ +

Montrer plus d'informations à propos du test

+ +

Si vous souhaitez obtenir plus d'informations à propos du test lancé, vous pouvez changer sa verbosité. Par exemple, pour faire la liste de ce qui a fonctionné dans le test, comme de ce qui a échoué (ainsi que tout un tas d'informations sur la manière dont la base de données à été initialisée), vous pouvez mettre la verbosité à "2", comme indiqué ci-dessous :

+ +
python3 manage.py test --verbosity 2
+ +

Les niveaux de verbosité sont 0, 1, 2 et 3, avec "1" comme valeur par défaut.

+ +

Lancer des tests spécifiques

+ +

Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de TestCase ou méthode :

+ +
# Run the specified module
+python3 manage.py test catalog.tests
+
+# Run the specified module
+python3 manage.py test catalog.tests.test_models
+
+# Run the specified class
+python3 manage.py test catalog.tests.test_models.YourTestClass
+
+# Run the specified method
+python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two
+
+ +

Tests de LocalLibrary

+ +

Maintenant que nous savons comment lancer nos tests et quel genre de choses nous avons besoin de tester, regardons quelques exemples pratiques.

+ +
+

Note : Nous n'allons pas écrire tous les tests possibles, mais ce qui suit devrait vous donner une idée sur le fonctionnement des tests, et ce que vous pouvez faire ensuite.

+
+ +

Modèles

+ +

Comme nous l'avons dit ci-dessus, nous devrions tester tout ce qui relève de notre design, ou tout ce qui est défini par du code que nous avons écrit nous-mêmes, mais pas les bibliothèques ou le code qui est déjà testé par Django ou par l'équipe qui développe Python.

+ +

Par exemple, considérez le modèle Author ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu.

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
+ +

Ouvrez notre /catalog/tests/test_models.py, et remplacez tout le code qui s'y trouve par le code de test ci-après pour le modèle Author.

+ +

Vous voyez que nous importons d'abord TestCase et faisons dériver d'elle notre classe de test (AuthorModelTest) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite setUpTestData() afin de créer un objet author, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests.

+ +
from django.test import TestCase
+
+from catalog.models import Author
+
+class AuthorModelTest(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        # Set up non-modified objects used by all test methods
+        Author.objects.create(first_name='Big', last_name='Bob')
+
+    def test_first_name_label(self):
+        author = Author.objects.get(id=1)
+        field_label = author._meta.get_field('first_name').verbose_name
+        self.assertEquals(field_label, 'first name')
+
+    def test_date_of_death_label(self):
+        author=Author.objects.get(id=1)
+        field_label = author._meta.get_field('date_of_death').verbose_name
+        self.assertEquals(field_label, 'died')
+
+    def test_first_name_max_length(self):
+        author = Author.objects.get(id=1)
+        max_length = author._meta.get_field('first_name').max_length
+        self.assertEquals(max_length, 100)
+
+    def test_object_name_is_last_name_comma_first_name(self):
+        author = Author.objects.get(id=1)
+        expected_object_name = f'{author.last_name}, {author.first_name}'
+        self.assertEquals(expected_object_name, str(author))
+
+    def test_get_absolute_url(self):
+        author = Author.objects.get(id=1)
+        # This will also fail if the urlconf is not defined.
+        self.assertEquals(author.get_absolute_url(), '/catalog/author/1')
+ +

Les tests de champ vérifient que les valeurs des labels de champ (verbose_name) et que la taille des champs de type character sont tels que nous les souhaitons. Ces méthodes ont toutes des noms descriptifs et suivent le même pattern :

+ +
# Get an author object to test
+author = Author.objects.get(id=1)
+
+# Get the metadata for the required field and use it to query the required field data
+field_label = author._meta.get_field('first_name').verbose_name
+
+# Compare the value to the expected result
+self.assertEquals(field_label, 'first name')
+ +

Les choses intéressantes à noter sont :

+ + + +
+

Note : Les tests pour les labels de last_name et date_of_birth, ainsi que le test de la longueur du champ last_name, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus.

+
+ +

Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément Author est telle que nous l'attendons.

+ +
def test_object_name_is_last_name_comma_first_name(self):
+    author = Author.objects.get(id=1)
+    expected_object_name = f'{author.last_name}, {author.first_name}'
+    self.assertEquals(expected_object_name, str(author))
+
+def test_get_absolute_url(self):
+    author = Author.objects.get(id=1)
+    # This will also fail if the urlconf is not defined.
+    self.assertEquals(author.get_absolute_url(), '/catalog/author/1')
+ +

Maintenant lancez les tests. Si vous avez créé le modèle Author comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label date_of_death, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous).

+ +
======================================================================
+FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\...\locallibrary\catalog\tests\test_models.py", line 32, in test_date_of_death_label
+    self.assertEquals(field_label,'died')
+AssertionError: 'Died' != 'died'
+- Died
+? ^
++ died
+? ^
+ +

C'est vraiment un bug mineur, mais il met en lumière comment écrire des test peut vérifier de plus près les hypothèses que vous pourriez avoir supposées vraies.

+ +
+

Note : Changez en "died" le label pour le champ date_of_death (/catalog/models.py) et relancez les tests.

+
+ +

La configuration pour tester les autres modèles est semblable pour tous, aussi nous n'allons pas discuter chacune plus longuement. Sentez-vous libre de créer vos propres tests pour nos autres modèles.

+ +

Les Formulaires

+ +

La philosophie pour tester vos formulaires est la même que pour tester vos modèles: vous avez besoin de tester tout ce que vous avez codé ou les spécificités de votre design, mais non le comportement du framework sous-jacent, ni celui des autres bibliothèques tierces.

+ +

Généralement, cela signifie que vous devriez tester que les formulaires ont bien les champs que vous voulez, et qu'ils sont rendus avec les bons labels et textes d'aide. Vous n'avez pas besoin de vérifier que Django valide correctement les champs selon leurs types (à moins que vous n'ayez créé vos propres champs personnalisés et leurs validations) ; c'est-à-dire que vous n'avez pas besoin de tester qu'un champ email n'accepte que des emails. Cependant vous pouvez avoir besoin de tester toute validation complémentaire que vous vous attendez à voir réalisée sur les champs, et tout message d'erreur généré par votre code.

+ +

Considérez notre formulaire pour renouveler les livres. Il a seulement 1 champ pour la date de renouvellement, qui va avoir un label et un texte d'aide que nous avons besoin de vérifier.

+ +
class RenewBookForm(forms.Form):
+    """Form for a librarian to renew books."""
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        # Check if a date is not in the past.
+        if data < datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        # Check if date is in the allowed range (+4 weeks from today).
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data
+ +

Ouvrez notre fichier /catalog/tests/test_forms.py, et remplacez tout le code qui s'y trouve par le code suivant, qui teste le formulaire RenewBookForm. Nous commençons par importer notre formulaire et des bibliothèques Python et Django pour tester les fonctionnalités liées au temps. Ensuite nous déclarons notre classe de test pour formulaire de la même manière que nous l'avons fait pour les modèles, en utilisant un nom descriptif pour notre classe de test dérivée de TestCase.

+ +
import datetime
+
+from django.test import TestCase
+from django.utils import timezone
+
+from catalog.forms import RenewBookForm
+
+class RenewBookFormTest(TestCase):
+    def test_renew_form_date_field_label(self):
+        form = RenewBookForm()
+        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
+
+    def test_renew_form_date_field_help_text(self):
+        form = RenewBookForm()
+        self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).')
+
+    def test_renew_form_date_in_past(self):
+        date = datetime.date.today() - datetime.timedelta(days=1)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_too_far_in_future(self):
+        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_today(self):
+        date = datetime.date.today()
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertTrue(form.is_valid())
+
+    def test_renew_form_date_max(self):
+        date = timezone.localtime() + datetime.timedelta(weeks=4)
+        form = RenewBookForm(data={'renewal_date': date})
+        self.assertTrue(form.is_valid())
+
+ +

Les deux premières fonctions testent que le label et le help_text du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. form.fields['renewal_date']). Notez bien ici que nous devons aussi tester si la valeur du label est None, car même si Django rend le label correct, il retournera None si la valeur n'est pas définie explicitement.

+ +

Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (datetime.date.today()) en utilisant datetime.timedelta() (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide.

+ +
+

Note : Ici nous n'utilisons pas réellement la base de données ni le client de test. Envisagez de modifier ces tests pour utiliser SimpleTestCase.

+ +

Nous avons aussi besoin de vérifier que les erreurs correctes sont levées si le formulaire est invalide. Cependant cela se fait habituellement dans la partie view, c'est pourquoi nous allons nous y attacher dans la prochaine section.

+
+ +

C'est tout pour les formulaires; nous en avons d'autres, mais ils sont automatiquement créés par nos vues génériques pour édition basées sur des classes, et c'est là qu'elles doivent être testées. Lancez les tests et vérifiez que notre code passe toujours !

+ +

Vues

+ +

Pour valider le comportement de notre vue, nous utilisons le client de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes GET et POST à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu.

+ +

Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL /catalog/authors/ (une URL nommée 'authors' dans la configuration des URL).

+ +
class AuthorListView(generic.ListView):
+    model = Author
+    paginate_by = 10
+
+ +

Comme c'est une vue liste générique, presque tout est fait à notre place par Django. Probablement, si vous faites confiance à Django, la seule chose que vous aurez besoin de tester, c'est que la vue est accessible à l'URL correcte et qu'elle peut être atteinte en utilisant son nom. Cependant, si vous utilisez un processus de développement 'test-driven', vous allez commencer par écrire des tests qui confirmeront que la vue affiche bien tous les auteurs, en les paginant par lots de 10.

+ +

Ouvrez le fichier /catalog/tests/test_views.py, et remplacez tout texte existant par le code de test suivant, pour la vue AuthorListView. Comme auparavant, nous importons notre modèle et quelques classes utiles. Dans la méthode setUpTestData(), nous définissons un certain nombre d'objets Author, de façon à pouvoir tester notre pagination.

+ +
from django.test import TestCase
+from django.urls import reverse
+
+from catalog.models import Author
+
+class AuthorListViewTest(TestCase):
+    @classmethod
+    def setUpTestData(cls):
+        # Create 13 authors for pagination tests
+        number_of_authors = 13
+
+        for author_id in range(number_of_authors):
+            Author.objects.create(
+                first_name=f'Christian {author_id}',
+                last_name=f'Surname {author_id}',
+            )
+
+    def test_view_url_exists_at_desired_location(self):
+        response = self.client.get('/catalog/authors/')
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_url_accessible_by_name(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+
+    def test_view_uses_correct_template(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, 'catalog/author_list.html')
+
+    def test_pagination_is_ten(self):
+        response = self.client.get(reverse('authors'))
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue('is_paginated' in response.context)
+        self.assertTrue(response.context['is_paginated'] == True)
+        self.assertTrue(len(response.context['author_list']) == 10)
+
+    def test_lists_all_authors(self):
+        # Get second page and confirm it has (exactly) remaining 3 items
+        response = self.client.get(reverse('authors')+'?page=2')
+        self.assertEqual(response.status_code, 200)
+        self.assertTrue('is_paginated' in response.context)
+        self.assertTrue(response.context['is_paginated'] == True)
+        self.assertTrue(len(response.context['author_list']) == 3)
+ +

Tous les tests utilisent le client (qui appartient à notre classe dérivée de TestCase), afin de simuler une requête GET et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL.

+ +
response = self.client.get('/catalog/authors/')
+response = self.client.get(reverse('authors'))
+
+ +

Une fois que nous avons la réponse, nous lui demandons son code de statut, le template utilisé, si la réponse est paginée ou non, le nombre d'éléments retournés et le nombre total d'éléments.

+ +
+

Note : Si, dans votre fichier /catalog/views.py, vous mettez la variable paginate_by à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus :

+ +
self.assertTrue(len(response.context['author_list']) == 5)
+
+
+ +

La variable la plus intéressante que nous montrons ci-dessus est response.context, qui est la variable de contexte passée au template par la vue. C'est incroyablement utile pour tester, parce qu'elle nous autorise à confirmer que notre template reçoit bien toutes les données dont il a besoin. En d'autres termes, nous pouvons vérifier que nous utilisons le template prévu, et quelles données le template utilise, ce qui permet dans une large mesure de vérifier que tous les problèmes de 'render' sont seulement dus au template.

+ +

Vues limitées aux utilisateurs connectés

+ +

Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue LoanedBooksByUserListView est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type BookInstance qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'.

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView):
+    """Generic class-based view listing books on loan to current user."""
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
+ +

Ajoutez le code de test suivant à /catalog/tests/test_views.py. Ici nous utilisons d'abord la méthode SetUp() pour créer des logins de comptes d'utilisateurs et des objets de type BookInstance (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé SetUp() plutôt que setUpTestData(), parce que nous allons modifier plus tard certains de ces objets.

+ +
+

Note : Le code de setUp() ci-dessous crée un livre avec un Language spécifique, mais votre code n'inclut peut-être pas le modèle Language, étant donné que celui-ci a été créé lors d'un défi. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section RenewBookInstancesViewTest qui suit.

+
+ +
import datetime
+
+from django.utils import timezone
+from django.contrib.auth.models import User # Required to assign User as a borrower
+
+from catalog.models import BookInstance, Book, Genre, Language
+
+class LoanedBookInstancesByUserListViewTest(TestCase):
+    def setUp(self):
+        # Create two users
+        test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK')
+        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD')
+
+        test_user1.save()
+        test_user2.save()
+
+        # Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(
+            title='Book Title',
+            summary='My book summary',
+            isbn='ABCDEFG',
+            author=test_author,
+            language=test_language,
+        )
+
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        # Create 30 BookInstance objects
+        number_of_book_copies = 30
+        for book_copy in range(number_of_book_copies):
+            return_date = timezone.localtime() + datetime.timedelta(days=book_copy%5)
+            the_borrower = test_user1 if book_copy % 2 else test_user2
+            status = 'm'
+            BookInstance.objects.create(
+                book=test_book,
+                imprint='Unlikely Imprint, 2016',
+                due_back=return_date,
+                borrower=the_borrower,
+                status=status,
+            )
+
+    def test_redirect_if_not_logged_in(self):
+        response = self.client.get(reverse('my-borrowed'))
+        self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/')
+
+    def test_logged_in_uses_correct_template(self):
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Check we used correct template
+        self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html')
+
+ +

Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons assertRedirects, comme montré dans test_redirect_if_not_logged_in(). Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un status_code de 200 (succès).

+ +

Le reste des test vérifie que notre vue ne retourne que les livres qui sont prêtés à notre emprunteur courant. Copiez ce code et collez le à la fin de la classe de test ci-dessus.

+ +
    def test_only_borrowed_books_in_list(self):
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Check that initially we don't have any books in list (none on loan)
+        self.assertTrue('bookinstance_list' in response.context)
+        self.assertEqual(len(response.context['bookinstance_list']), 0)
+
+        # Now change all books to be on loan
+        books = BookInstance.objects.all()[:10]
+
+        for book in books:
+            book.status = 'o'
+            book.save()
+
+        # Check that now we have borrowed books in the list
+        response = self.client.get(reverse('my-borrowed'))
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        self.assertTrue('bookinstance_list' in response.context)
+
+        # Confirm all books belong to testuser1 and are on loan
+        for bookitem in response.context['bookinstance_list']:
+            self.assertEqual(response.context['user'], bookitem.borrower)
+            self.assertEqual('o', bookitem.status)
+
+    def test_pages_ordered_by_due_date(self):
+        # Change all books to be on loan
+        for book in BookInstance.objects.all():
+            book.status='o'
+            book.save()
+
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('my-borrowed'))
+
+        # Check our user is logged in
+        self.assertEqual(str(response.context['user']), 'testuser1')
+        # Check that we got a response "success"
+        self.assertEqual(response.status_code, 200)
+
+        # Confirm that of the items, only 10 are displayed due to pagination.
+        self.assertEqual(len(response.context['bookinstance_list']), 10)
+
+        last_date = 0
+        for book in response.context['bookinstance_list']:
+            if last_date == 0:
+                last_date = book.due_back
+            else:
+                self.assertTrue(last_date <= book.due_back)
+                last_date = book.due_back
+ +

Vous pourriez aussi ajouter les tests de pagination, si vous voulez !

+ +

Tester des vues avec formulaires

+ +

Tester des vues avec formulaires est un peu plus compliqué que dans les cas précédents, car vous devez tester un code qui parcourt plus de chemin : l'affichage initial, l'affichage après que la validation des données a échoué, et l'affichage après que la validation a réussi. La bonne nouvelle, c'est que nous utilisons le client de test presque de la même manière que nous l'avons fait pour des vues qui ne font qu'afficher des données.

+ +

Pour voir cela, écrivons des tests pour la vue utilisée pour renouveler des livres (renew_book_librarian()) :

+ +
from catalog.forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """View function for renewing a specific BookInstance by librarian."""
+    book_instance = get_object_or_404(BookInstance, pk=pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        book_renewal_form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_instance.due_back = form.cleaned_data['renewal_date']
+            book_instance.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed'))
+
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date})
+
+    context = {
+        'book_renewal_form': book_renewal_form,
+        'book_instance': book_instance,
+    }
+
+    return render(request, 'catalog/book_renew_librarian.html', context)
+ +

Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission can_mark_returned, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une BookInstance inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur.

+ +

Ajoutez la première partie de la classe de test ci-dessous à la fin du fichier /catalog/tests/test_views.py. Cela crée deux utilisateurs et deux instances de livres, mais ne donne qu'à un seul utilisateur la permission d'accéder à la vue. Le code pour autoriser les permissions durant les tests est montrée en gras :

+ +
import uuid
+
+from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
+
+class RenewBookInstancesViewTest(TestCase):
+    def setUp(self):
+        # Create a user
+        test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK')
+        test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD')
+
+        test_user1.save()
+        test_user2.save()
+
+        permission = Permission.objects.get(name='Set book as returned')
+        test_user2.user_permissions.add(permission)
+        test_user2.save()
+
+        # Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(
+            title='Book Title',
+            summary='My book summary',
+            isbn='ABCDEFG',
+            author=test_author,
+            language=test_language,
+        )
+
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        # Create a BookInstance object for test_user1
+        return_date = datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance1 = BookInstance.objects.create(
+            book=test_book,
+            imprint='Unlikely Imprint, 2016',
+            due_back=return_date,
+            borrower=test_user1,
+            status='o',
+        )
+
+        # Create a BookInstance object for test_user2
+        return_date = datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance2 = BookInstance.objects.create(
+            book=test_book,
+            imprint='Unlikely Imprint, 2016',
+            due_back=return_date,
+            borrower=test_user2,
+            status='o',
+        )
+ +

Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (testuser2) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une BookInstance inexistante. Nous vérifions aussi que le bon template est utilisé.

+ +
   def test_redirect_if_not_logged_in(self):
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual(response.status_code, 302)
+        self.assertTrue(response.url.startswith('/accounts/login/'))
+
+    def test_redirect_if_logged_in_but_not_correct_permission(self):
+        login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 403)
+
+    def test_logged_in_with_permission_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk}))
+
+        # Check that it lets us login - this is our book and we have the right permissions.
+        self.assertEqual(response.status_code, 200)
+
+    def test_logged_in_with_permission_another_users_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+
+        # Check that it lets us login. We're a librarian, so we can view any users book
+        self.assertEqual(response.status_code, 200)
+
+    def test_HTTP404_for_invalid_book_if_logged_in(self):
+        # unlikely UID to match our bookinstance!
+        test_uid = uuid.uuid4()
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid}))
+        self.assertEqual(response.status_code, 404)
+
+    def test_uses_correct_template(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 200)
+
+        # Check we used correct template
+        self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html')
+
+ +

Ajoutez la méthode de test suivante, comme montré ci-dessous. Elle vérifie que la date initiale pour le formulaire est trois semaines dans le futur. Notez comment nous pouvons accéder à la valeur initiale de ce champ de formulaire (en gras).

+ +
    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}))
+        self.assertEqual(response.status_code, 200)
+
+        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
+        self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future)
+
+ +
+

Attention : Si vous utilisez la class de formulaire RenewBookModelForm(forms.ModelForm) à la place de la classe RenewBookForm(forms.Form), le nom du champ est 'due_back' et non 'renewal_date'.

+
+ +

Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirige vers une liste de tous les livres empruntés si le renouvellement réussit. Ce qui diffère ici est que, pour la première fois, nous montrons comment vous pouvez POSTer des données en utilisant le client. Les données postées forment le second argument de la fonction post, et elles sont spécifiées comme un dictionnaire de clés/valeurs.

+ +
    def test_redirects_to_all_borrowed_book_list_on_success(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future})
+        self.assertRedirects(response, reverse('all-borrowed'))
+
+ +
+

Attention : La vue all-borrowed a été ajoutée comme défi, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression follow=True dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie /catalog/ plutôt que /).

+ +
 response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True )
+ self.assertRedirects(response, '/catalog/')
+
+ +

Copiez les deux dernières fonctions dans la classe, comme indiqué ci-dessous. Elles testent de nouveau des requêtes POST, mais dans ce cas avec des dates de renouvellement invalides. Nous utilisons la méthode assertFormError() pour vérifier que les messages d'erreur sont ceux que nous attendons.

+ +
    def test_form_invalid_renewal_date_past(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past})
+        self.assertEqual(response.status_code, 200)
+        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past')
+
+    def test_form_invalid_renewal_date_future(self):
+        login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD')
+        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
+        response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future})
+        self.assertEqual(response.status_code, 200)
+        self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
+
+ +

Le même genre de technique peut être utilisé pour tester les autres vues.

+ +

Templates

+ +

Django fournit des API de test pour vérifier que le bon template sera appelé par vos vues, et pour vous permettre de vérifier que l'information correcte sera envoyée. Il n'y a cependant pas de support d'API spécifique en Django pour tester que votre sortie HTML a le rendu souhaité.

+ +

Autres outils de test recommandés

+ +

Le framework de test de Django peut vous aider à écrire des tests unitaires et d'intégration efficaces - nous n'avons fait que gratter la surface de ce que peut faire unittest,le framework de test sous-jacent, et plus encore les additions de Django (par exemple, regardez comment vous pouvez utiliser unittest.mock pour patcher les bibliothèques tierces afin de tester plus finement votre propre code).

+ +

Comme il y a un grand nombre d'autres outils de test à votre disposition, nous ne mentionnerons que les deux suivants :

+ + + +

Défi

+ +

Il y a beaucoup d'autres modèles et vues que nous pouvons tester. Comme exercice simple, essayez de créer un cas de test pour la vue AuthorCreate.

+ +
class AuthorCreate(PermissionRequiredMixin, CreateView):
+    model = Author
+    fields = '__all__'
+    initial = {'date_of_death':'12/10/2016'}
+    permission_required = 'catalog.can_mark_returned'
+ +

Souvenez-vous que vous avez besoin de vérifier tout ce que vous avez spécifié ou ce qui fait partie du design. Cela va inclure qui a accès, la date initiale, le template utilisé, et où la vue redirige en cas de succès.

+ +

Résumé

+ +

Écrire un code de test n'est ni très excitant ni très fascinant, et par conséquent ce travail est souvent laissé pour la fin (ou complètement délaissé) par les créateurs de sites web. C'est pourtant un élément essentiel pour vous assurer que, malgré les changements apportés, votre code peut passer à une nouvelle version en toute sécurité, et que sa maintenance est rentable.

+ +

Dans ce tutoriel, nous vous avons montré comment écrire et lancer des tests pour vos modèles, formulaires et vues. Plus important, nous avons fourni un bref résumé de ce que vous devez tester, ce qui est souvent la chose la plus difficile à comprendre quand on commence. Il y a beaucoup de choses à savoir, mais avec ce que vous avez déjà appris, vous devriez être capable de créer des tests unitaires efficaces pour vos sites web.

+ +

Le prochain (et dernier) tutoriel montre comment vous pouvez déployer votre merveilleux (et entièrement testé !) site web Django.

+ +

À voir également

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.html b/files/fr/learn/server-side/django/tutorial_local_library_website/index.html deleted file mode 100644 index 7e085e43b8..0000000000 --- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: 'Django Didactique: Site web "Bibliothèque locale"' -slug: Learn/Server-side/Django/Tutorial_local_library_website -tags: - - Apprentissage - - Article - - Didacticiel - - Débutant - - Guide - - django -translation_of: Learn/Server-side/Django/Tutorial_local_library_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
- -

Le premier article de cette série didactique explique ce que vous apprendrez et donne un aperçu du site Web "Bibliothèque locale", un exemple, qui va être utiliser et évoluer dans les articles suivants.

- -
- - - - - - - - - - - - -
Prérequis:La lecture de l'introduction. Pour les articles suivants avoir mis à jour l'environnement comme décrit précédemment. 
Objectifs:Présenter l'application à venir et les thèmes qui seront abordés dans cette série didactique.
- -

Vue d'ensemble

- -

La série didactique MDN "Bibliothèque locale" va vous permettre de développer un site web destiné à gérer le catalogue d'une bibliothèque.

- -

Dans les articles qui suivent, vous allez apprendre à :

- - - -

Que vous ayez déjà des connaissance sur le sujet ou que vous ayez aborder succinctement ce quadriciel, à la fin de cette série didactique, vous serez suffisamment autonome pour développer vos propres applications avec Django.

- -

Le site web de la "Bibliothèque locale"

- -

La LocalLibrary (Bibliothèque locale) est le nom du site web qui va être créer et qui évoluera tout au long de cette série didatcique. La finalité de ce site web est de diffuser un catalogue des livres en ligne et de permettre aux utilisateurs de le parcourir et de gérer leur propre compte.

- -

Cet exemple a été soigneusement choisi car il permet de progresser en montrant nombre de détails et abordre presque toutes les fonctionnalités de Django. De plus, cet exemple permet d'appréhender progressivement les fonctionnalités les plus importantes du quadriciel :

- - - -

Même s'il s'agit d'un sujet extensible, son sujet de Bibliothèque locale est volontaire. Il s'agit d'aborder rapidement de nombreux sujets de Django en manipulant un minimum d'information. Il s'agit d'enregistrer localement les informations fictives sur les livres, copies, auteurs, etc. Il ne s'agit en aucun cas d'élaborer un produit qui gère, comme pourrait le faire une bibliothèque classique d'autres informations, ni gérer un réseau de bibliothèques comme cela pourrait être le cas avec une grande biblothèque. 

- -

Je suis coincé, où puis-je trouver les sources ?

- -

Au fur et à mesure, les codes et commandes à écrire seront fournis. Ils peuvent être copiés et collés à chaque étapes. Il y aura aussi des codes que vous pourrez compléter avec quelques conseils.

- -

Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur Github (Anglais).

- -

Résumé

- -

Vous en savez plus sur le projet LocalLibrary et ce que vous allez progressivement apprendre, il est désormais temps de créer le squellette du projet qui hébergera la bibliothèque.

- -

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md new file mode 100644 index 0000000000..7e085e43b8 --- /dev/null +++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md @@ -0,0 +1,101 @@ +--- +title: 'Django Didactique: Site web "Bibliothèque locale"' +slug: Learn/Server-side/Django/Tutorial_local_library_website +tags: + - Apprentissage + - Article + - Didacticiel + - Débutant + - Guide + - django +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+ +

Le premier article de cette série didactique explique ce que vous apprendrez et donne un aperçu du site Web "Bibliothèque locale", un exemple, qui va être utiliser et évoluer dans les articles suivants.

+ +
+ + + + + + + + + + + + +
Prérequis:La lecture de l'introduction. Pour les articles suivants avoir mis à jour l'environnement comme décrit précédemment. 
Objectifs:Présenter l'application à venir et les thèmes qui seront abordés dans cette série didactique.
+ +

Vue d'ensemble

+ +

La série didactique MDN "Bibliothèque locale" va vous permettre de développer un site web destiné à gérer le catalogue d'une bibliothèque.

+ +

Dans les articles qui suivent, vous allez apprendre à :

+ + + +

Que vous ayez déjà des connaissance sur le sujet ou que vous ayez aborder succinctement ce quadriciel, à la fin de cette série didactique, vous serez suffisamment autonome pour développer vos propres applications avec Django.

+ +

Le site web de la "Bibliothèque locale"

+ +

La LocalLibrary (Bibliothèque locale) est le nom du site web qui va être créer et qui évoluera tout au long de cette série didatcique. La finalité de ce site web est de diffuser un catalogue des livres en ligne et de permettre aux utilisateurs de le parcourir et de gérer leur propre compte.

+ +

Cet exemple a été soigneusement choisi car il permet de progresser en montrant nombre de détails et abordre presque toutes les fonctionnalités de Django. De plus, cet exemple permet d'appréhender progressivement les fonctionnalités les plus importantes du quadriciel :

+ + + +

Même s'il s'agit d'un sujet extensible, son sujet de Bibliothèque locale est volontaire. Il s'agit d'aborder rapidement de nombreux sujets de Django en manipulant un minimum d'information. Il s'agit d'enregistrer localement les informations fictives sur les livres, copies, auteurs, etc. Il ne s'agit en aucun cas d'élaborer un produit qui gère, comme pourrait le faire une bibliothèque classique d'autres informations, ni gérer un réseau de bibliothèques comme cela pourrait être le cas avec une grande biblothèque. 

+ +

Je suis coincé, où puis-je trouver les sources ?

+ +

Au fur et à mesure, les codes et commandes à écrire seront fournis. Ils peuvent être copiés et collés à chaque étapes. Il y aura aussi des codes que vous pourrez compléter avec quelques conseils.

+ +

Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur Github (Anglais).

+ +

Résumé

+ +

Vous en savez plus sur le projet LocalLibrary et ce que vous allez progressivement apprendre, il est désormais temps de créer le squellette du projet qui hébergera la bibliothèque.

+ +

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/express_nodejs/index.html b/files/fr/learn/server-side/express_nodejs/index.html deleted file mode 100644 index abd2352b57..0000000000 --- a/files/fr/learn/server-side/express_nodejs/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Express Web Framework (Node.js/JavaScript) -slug: Learn/Server-side/Express_Nodejs -tags: - - Beginner - - CodingScripting - - Express - - Express.js - - Intro - - JavaScript - - Learn - - Node - - Server-side programming - - node.js -translation_of: Learn/Server-side/Express_Nodejs ---- -
{{LearnSidebar}}
- -

Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.

- -

Prérequis

- -

Avant d'aller plus loin, vous devrez avoir compris ce qu'est la programmation côté serveur et le concept de "framework", idéalement en ayant lu notre article Premiers pas en programmation côté-serveur. Une connaissance générale des concepts de programmation et du JavaScript est vivement recommandée, sans pour autant être essentielle à la compréhension des concepts fondamentaux.

- -
-

Note : Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du développement côté client : Référence JavaScript, Guide JavaScript, Les bases de JavaScript, Apprendre JavaScript. Le noyau du langage et les principaux concepts de JavaScript sont les mêmes que pour le développement côté serveur sur Node.js, il est donc important d'avoir déjà une bonne compréhension de JavaScript avant de continuer. Node.js offre des API supplémentaires pour supporter des fonctionnalités utiles dans des environnements sans navigateur, par ex. pour créer des serveurs HTTP et accéder au système de fichiers, mais ne prend pas en charge les API JavaScript pour travailler avec le navigateur et le DOM.

- -

Ce guide vous fournira des informations sur l'utilisation de Node.js et Express, et contient de nombreuses références à d'autres excellentes ressources sur Internet et dans des livres — dont des liens depuis How do I get started with Node.js (StackOverflow) et What are the best resources for learning Node.js? (Quora).

-
- -

Guides

- -
-
Introduction à Express/Node
-
Dans ce premier article sur Express nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce qu'Express ? » et donnerons une vue d'ensemble de ce qui rend cette infrastructure d'application Express si spéciale. Nous décrirons les principales fonctionnalités et montrerons quelques-uns des principaux éléments constitutifs d'une application Express (bien qu'à ce stade, vous n'aurez pas encore un environnement de développement dans lequel la tester)
-
Installer un environnement de développement pour Node (Express)
-
Maintenant que nous savons à quoi sert Express, nous allons vous apprendre à installer et tester un environnement de développement Node/Express sur Windows, Linux (Ubuntu), et macOS. Quel que soit votre système d'exploitation, cet article devrait vous fournir le nécessaire pour commencer le développement d'applications Express.
-
Tutoriel Express : le site d'une bibliothèque locale
-
Le premier article de notre série de tutoriels explique ce que vous allez apprendre et fournit l'aperçu d'un exemple de site pour une bibliothèque municipale locale. Nous ferons évoluer cet exemple au fur et à mesure des articles suivants.
-
2e partie du tutoriel Express : création d'un squelette de site web
-
Cet article explique comment vous pouvez créer un « squelette » de projet de site web, que vous pouvez alors étoffer de routes spécifiques, de modèles de vues et de bases de données.
-
3e partie du tutoriel Express : utilisation d'une base de données (avec Mongoose)
-
Cet article introduit brièvement le concept de base de données pour Node/Express. Il se poursuit en décrivant comment on peut utiliser Mongoose pour fournir un accès à la base de données de notre site internet de bibliothèque locale. Il explique comment les schémas de données et les modèles sont déclarées, les types principaux des champs de données, et les validations de base. Il donne aussi un aperçu rapide de quelques moyens d'accéder aux données.
-
4e partie du tutoriel Express : les routes et les contrôleurs
-
Dans ce tutoriel nous programmerons des routes (traitements des URL) avec des fonctions factices de traitement pour tous les points de sortie dont nous pourrions éventuellement avoir besoin pour notre site web de la bibliothèque locale. Nous obtiendrons ainsi une structure modulaire pour notre code de traitement par les routes, que nous pourrons étendre avec de vraies fonctions de traitement dans les articles suivants. Nous acquerrons de cette manière une réelle compréhension de la création modulaire des routes avec Express.
-
5e partie du tutoriel Express : affichage des données de la bibliothèque
-
Nous sommes prêts maintenant à ajouter des pages qui afficheront les livres et autres données de notre bibliothèque locale sur son site internet. Ces pages incluront notamment une page d'accueil qui indiquera le nombre d'enregistrements pour chaque type de modèle de donnée, une liste et des pages de détail pour chacun de ces modèles. Chemin faisant, nous acquerrons de l'expérience dans la récupération des données depuis la base, et l'utilisation des modèles de vue (templates).
-
6e partie du tutoriel Express : travail avec les formulaires
-
Dans ce tutoriel nous verrons comment travailler avec les formulaires HTML dans Express, à l'aide de Pug, et en particulier comment concevoir des formulaires pour créer, actualiser et détruire des documents dans la base de données.
-
7e partie du tutoriel Express : déploiement de l'application en production
-
Maintenant que nous avons créé un fantastique site internet pour notre bibliothèque locale, nous allons vouloir installer le serveur du site public pour qu'il soit accessible par les employés de la bibliothèque et les adhérents depuis n'importe où par le Net. Cet article fournit un aperçu de comment trouver un hébergement pour déployer son site web et ce que vous avez à faire pour préparer votre site à la production.
-
- -

Ajout de tutoriels

- -

Tous les tutoriaux de ce module sont listés ci-avant, si vous souhaitez compléter ce module, vous pouvez contribuer avec d'autres tutoriels, notamment sur :

- - - -

Et bien sûr, il serait excellent d'avoir une évaluation !

\ No newline at end of file diff --git a/files/fr/learn/server-side/express_nodejs/index.md b/files/fr/learn/server-side/express_nodejs/index.md new file mode 100644 index 0000000000..abd2352b57 --- /dev/null +++ b/files/fr/learn/server-side/express_nodejs/index.md @@ -0,0 +1,66 @@ +--- +title: Express Web Framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Beginner + - CodingScripting + - Express + - Express.js + - Intro + - JavaScript + - Learn + - Node + - Server-side programming + - node.js +translation_of: Learn/Server-side/Express_Nodejs +--- +
{{LearnSidebar}}
+ +

Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.

+ +

Prérequis

+ +

Avant d'aller plus loin, vous devrez avoir compris ce qu'est la programmation côté serveur et le concept de "framework", idéalement en ayant lu notre article Premiers pas en programmation côté-serveur. Une connaissance générale des concepts de programmation et du JavaScript est vivement recommandée, sans pour autant être essentielle à la compréhension des concepts fondamentaux.

+ +
+

Note : Le site MDN possède de nombreuses ressources utiles pour apprendre JavaScript dans le contexte du développement côté client : Référence JavaScript, Guide JavaScript, Les bases de JavaScript, Apprendre JavaScript. Le noyau du langage et les principaux concepts de JavaScript sont les mêmes que pour le développement côté serveur sur Node.js, il est donc important d'avoir déjà une bonne compréhension de JavaScript avant de continuer. Node.js offre des API supplémentaires pour supporter des fonctionnalités utiles dans des environnements sans navigateur, par ex. pour créer des serveurs HTTP et accéder au système de fichiers, mais ne prend pas en charge les API JavaScript pour travailler avec le navigateur et le DOM.

+ +

Ce guide vous fournira des informations sur l'utilisation de Node.js et Express, et contient de nombreuses références à d'autres excellentes ressources sur Internet et dans des livres — dont des liens depuis How do I get started with Node.js (StackOverflow) et What are the best resources for learning Node.js? (Quora).

+
+ +

Guides

+ +
+
Introduction à Express/Node
+
Dans ce premier article sur Express nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce qu'Express ? » et donnerons une vue d'ensemble de ce qui rend cette infrastructure d'application Express si spéciale. Nous décrirons les principales fonctionnalités et montrerons quelques-uns des principaux éléments constitutifs d'une application Express (bien qu'à ce stade, vous n'aurez pas encore un environnement de développement dans lequel la tester)
+
Installer un environnement de développement pour Node (Express)
+
Maintenant que nous savons à quoi sert Express, nous allons vous apprendre à installer et tester un environnement de développement Node/Express sur Windows, Linux (Ubuntu), et macOS. Quel que soit votre système d'exploitation, cet article devrait vous fournir le nécessaire pour commencer le développement d'applications Express.
+
Tutoriel Express : le site d'une bibliothèque locale
+
Le premier article de notre série de tutoriels explique ce que vous allez apprendre et fournit l'aperçu d'un exemple de site pour une bibliothèque municipale locale. Nous ferons évoluer cet exemple au fur et à mesure des articles suivants.
+
2e partie du tutoriel Express : création d'un squelette de site web
+
Cet article explique comment vous pouvez créer un « squelette » de projet de site web, que vous pouvez alors étoffer de routes spécifiques, de modèles de vues et de bases de données.
+
3e partie du tutoriel Express : utilisation d'une base de données (avec Mongoose)
+
Cet article introduit brièvement le concept de base de données pour Node/Express. Il se poursuit en décrivant comment on peut utiliser Mongoose pour fournir un accès à la base de données de notre site internet de bibliothèque locale. Il explique comment les schémas de données et les modèles sont déclarées, les types principaux des champs de données, et les validations de base. Il donne aussi un aperçu rapide de quelques moyens d'accéder aux données.
+
4e partie du tutoriel Express : les routes et les contrôleurs
+
Dans ce tutoriel nous programmerons des routes (traitements des URL) avec des fonctions factices de traitement pour tous les points de sortie dont nous pourrions éventuellement avoir besoin pour notre site web de la bibliothèque locale. Nous obtiendrons ainsi une structure modulaire pour notre code de traitement par les routes, que nous pourrons étendre avec de vraies fonctions de traitement dans les articles suivants. Nous acquerrons de cette manière une réelle compréhension de la création modulaire des routes avec Express.
+
5e partie du tutoriel Express : affichage des données de la bibliothèque
+
Nous sommes prêts maintenant à ajouter des pages qui afficheront les livres et autres données de notre bibliothèque locale sur son site internet. Ces pages incluront notamment une page d'accueil qui indiquera le nombre d'enregistrements pour chaque type de modèle de donnée, une liste et des pages de détail pour chacun de ces modèles. Chemin faisant, nous acquerrons de l'expérience dans la récupération des données depuis la base, et l'utilisation des modèles de vue (templates).
+
6e partie du tutoriel Express : travail avec les formulaires
+
Dans ce tutoriel nous verrons comment travailler avec les formulaires HTML dans Express, à l'aide de Pug, et en particulier comment concevoir des formulaires pour créer, actualiser et détruire des documents dans la base de données.
+
7e partie du tutoriel Express : déploiement de l'application en production
+
Maintenant que nous avons créé un fantastique site internet pour notre bibliothèque locale, nous allons vouloir installer le serveur du site public pour qu'il soit accessible par les employés de la bibliothèque et les adhérents depuis n'importe où par le Net. Cet article fournit un aperçu de comment trouver un hébergement pour déployer son site web et ce que vous avez à faire pour préparer votre site à la production.
+
+ +

Ajout de tutoriels

+ +

Tous les tutoriaux de ce module sont listés ci-avant, si vous souhaitez compléter ce module, vous pouvez contribuer avec d'autres tutoriels, notamment sur :

+ + + +

Et bien sûr, il serait excellent d'avoir une évaluation !

\ No newline at end of file diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.html b/files/fr/learn/server-side/express_nodejs/introduction/index.html deleted file mode 100644 index 4f8719e813..0000000000 --- a/files/fr/learn/server-side/express_nodejs/introduction/index.html +++ /dev/null @@ -1,521 +0,0 @@ ---- -title: Introduction à Express/Node -slug: Learn/Server-side/Express_Nodejs/Introduction -tags: - - Beginner - - CodingScripting - - Express - - Learn - - Node - - nodejs - - server-side -translation_of: Learn/Server-side/Express_Nodejs/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
- -

Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).

- - - - - - - - - - - - -
Prérequis :Une culture de base en informatique, une compréhension globale de la programmation côté serveur et, en particulier, les mécanismes d'interactions client-serveur dans un site web.
Objectif :Devenir familier avec ce qu'est Express et comment il s'intègre dans Node, les fonctionnalités qu'il apporte, et les principales étapes pour construire une application Express.
- -

Introduction à Node

- -

Node (ou plus formellement Node.js) est un environnement d'exécution open-source, multi-plateforme, qui permet aux développeuses et développeurs de créer toutes sortes d'applications et d'outils côté serveur en JavaScript. Cet environnement est destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de systèmes de fichier.

- -

Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages :

- - - -

Vous pouvez utiliser Node.js pour créer un simple serveur web en utilisant l'API Node HTTP.

- -

Hello Node.js

- -

L'exemple qui suit crée un serveur web qui écoute toutes sortes de requêtes HTTP sur l'URL https://127.0.0.1:8000/. Quand une requête est reçue, le script répond avec la chaine « Salut tout le monde ». Si vous avez déjà installé Node, suivez les étapes de l'exemple suivant :

- -
    -
  1. Ouvrez un terminal (sur Windows, ouvrez l'invite de commande (cmd)),
    2. -
  2. Créez le dossier où vous voulez sauvegarder le programme, appelez-le par exemple test-node et placez-vous dedans en utilisant la commande suivante dans votre console : - 
    cd test-node
    3. -
  3. Dans votre éditeur de texte favori, créez un fichier nommé "hello.js" et collez ce qui suit dedans : - 
    // Charge le module HTTP
-const http = require("http");
-
-const hostname = "127.0.0.1";
-const port = 8000;
-
-// Crée un serveur HTTP
-const server = http.createServer((req, res) => {
-
-  // Configure l'en-tête de la réponse HTTP
-  // avec le code du statut et le type de contenu
-  res.writeHead(200, {'Content-Type': 'text/plain'});
-
-  // Envoie le corps de la réponse « Salut tout le monde »
-   res.end('Salut tout le monde\n');
-})
-
-// Démarre le serveur à l'adresse 127.0.0.1 sur le port 8000
-// Affiche un message dès que le serveur commence à écouter les requêtes
-server.listen(port, hostname, () => {
-  console.log(`Le serveur tourne à l'adresse https://${hostname}:${port}/`);
-})
    4. -
  4. Sauvegardez le fichier dans le dossier créé plus haut.
    5. -
  5. Retournez au terminal et tapez : - 
    node hello.js
    -
    6. -
- -

Puis saisissez l'URL "https://localhost:8000" dans votre navigateur. Vous devriez alors voir "Salut tout le monde" en haut à gauche d'une page web ne contenant rien d'autre que ce texte.

- -

Les frameworks web

- -

D'autres tâches de développement web ne sont pas directement prises en charge par Node de façon native. Si vous voulez ajouter différentes manipulations pour divers requêtes HTTP (GET, POST, DELETE, etc.), gérer différemment des requêtes vers plusieurs chemins URL ("routes"), servir des pages statiques ou utiliser des modèles pour créer dynamiquement la réponse, alors vous devrez écrire tout le code vous-même ou, pour éviter de réinventer la roue, vous servir des cadres applicatifs web (frameworks).

- -

Introduction à Express

- -

Express est le framework actuellement le plus populaire dans Node et est la bibliothèque sous-jacente pour un grand nombre d'autres cadres applicatifs web pour Node. Il fournit des mécanismes pour :

- - - -

Bien qu'Express soit assez minimaliste, des middlewares (fonctions intermédiaires) compatibles ont été créés pour résoudre quasiment tous les problèmes de développement web. Il existe des bibliothèques pour se servir des cookies, gérer les sessions, la connexion de l'utilisateur, les paramètres de l'URL, les données POST, les entêtes de sécurité et d'autres encore. Vous trouverez une liste des paquets maintenus par l'équipe Express ici : Express Middleware (ainsi que la liste de paquets tiers populaires).

- -
-

Note : Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.

-
- -

D'où viennent Node et Express ?

- -

À ses débuts en 2009, Node a été publié pour Linux uniquement. Le gestionnaire de paquets NPM est sorti en 2010, et le support natif de Windows fut ajouté en 2012. Ceci est un très court aperçu d'une aventure riche en rebondissements. Allez creuser ça sur Wikipédia si vous voulez en savoir plus.

- -

Express est sorti pour la première fois en novembre 2010. Vous pouvez consulter la liste des modifications pour plus d'informations sur la version courante et GitHub pour plus de détails sur l'historique des publications.

- - - -

La popularité d'un framework web est importante car elle conditionne la maintenance dans le temps et les ressources qu'il est raisonnable de mettre à disposition dans la documentation, les bibliothèques d'extensions et le support technique.

- -

Il n'existe pas d'échelle de mesures définitive et fiable pour l'estimation de la popularité des frameworks côté serveur, bien que des sites comme Hot Frameworks essaient d'estimer la popularité par le comptage du nombre de projets GitHub ou StackOverflow. La question est : « Est-ce que Node et Express sont suffisamment populaires pour pouvoir s'affranchir des plateformes non-populaires ? Continuent-ils à évoluer ? Pouvez-vous avoir de l'aide si besoin ? Existe-t-il une opportunité pour vous de gagner de l'argent si vous apprenez Express ? ».

- -

Si on se réfère à la liste des entreprises utilisant Express, la quantité de gens contribuant au code et le nombre de gens fournissant un support payant ou bien gratuit, alors oui, Express est un framework populaire !

- -

Express est-il « dogmatique » ?

- -

Les cadres logiciels web se décrivent souvent comme ayant ou non des opinions données sur tel ou tel sujet au sens où ils sont orientés dans leur usage selon ces choix/opinions. En anglais, on dit d'un framework qu'il est opinionated ou non.

- -

Les frameworks avec une opinion sont ceux qui ont un avis arrêté sur la « bonne manière » de gérer certaines tâches. Ils fournissent souvent un cadre permettant de développer rapidement dans un domaine particulier (résolvant des problèmes d'un type particulier) parce que la bonne manière de faire quoi que ce soit est généralement bien comprise et bien documentée. Toutefois, ils peuvent manquer de flexibilité pour la résolution de problèmes hors de leur portée et tendent à offrir peu de choix concernant les composants et approches qu'ils peuvent utiliser.

- -

Les frameworks sans opinion, par contraste, ont beaucoup moins de restrictions sur la meilleure manière d'assembler des composants ensemble pour atteindre un objectif, ou encore sur les composants que vous devriez utiliser. Ils laissent aux développeurs la possibilité d'utiliser les outils les plus adaptés pour achever une tâche particulière, bien que cela nécessite que vous cherchiez et trouviez ces composants par vous-même.

- -

Express n'est pas particulièrement dogmatique. Vous pouvez intégrer quasiment n'importe quelle fonction intermédiaire compatible voulue dans la pile de gestion des requêtes, dans quasiment n'importe quel ordre. Vous pouvez structurer l'application en un fichier comme en plusieurs, et utiliser n'importe quelle structure de dossiers. Vous pourrez même quelques fois vous sentir perdu⋅e par la liberté que vous avez de vous organiser comme vous le souhaitez !

- -

À quoi ressemble du code Express ?

- -

Dans un site web utilisé pour traiter des données, une application web attend des requêtes HTTP du navigateur web (ou d'un autre client). Quand une requête est reçue, l'application cherche quelle action est requise en fonction du modèle de l'URL et des possibles informations associés contenues dans les données POST ou GET. Selon ce qui est requis, il pourra alors lire ou écrire des informations dans une base de données ou effectuer d'autre tâches pour satisfaire la requête. L'application va alors retourner une réponse au navigateur web, souvent une page HTML créée dynamiquement pour le navigateur, en intégrant les données récupérées dans un modèle HTML.

- -

Express fournit des méthodes pour spécifier quelle fonction est appelée pour une méthode HTTP particulière (GET, POST, SET, etc.) et un modèle d'URL ("Route"), ainsi que des méthodes pour spécifier quel moteur de rendu de vues ("view") est utilisé, où sont les modèles de vues et quel modèle utiliser pour générer une réponse. Vous pouvez utiliser les fonctions intermédiaires d'Express pour prendre en charge les cookies, les sessions, les utilisateurs, obtenir les paramètres POST/GET, etc. Vous pouvez utiliser n'importe que système de base données supporté par Node (Express ne définit aucun comportement relatif aux bases de données).

- -

Les sections suivantes expliquent quelques choses communes que vous verrez en travaillant avec du code Express et Node.

- -

Hello World Express

- -

Tout d'abord intéressons-nous à l'exemple Hello World standard d'Express (nous expliquons chaque partie de cet exemple ci-dessous, et dans les sections suivantes).

- -
-

Note : Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans l'article suivant), vous pouvez enregistrer ce code dans un fichier texte appelé app.js et l'exécuter via un terminal en tapant :

-

node app.js

-
- -
const express = require('express');
-const app = express();
-const port = 3000;
-
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-});
-
-app.listen(port, () => {
-  console.log(`Application exemple à l'écoute sur le port ${port}!`)
-});
-
- -

Les deux premières lignes importent (avec require()) le module express et créent une application express. Cet objet, qui est traditionnellement nommé app, possède des méthodes pour acheminer les requêtes HTTP, configurer les intergiciels, rendre les vues HTML, enregistrer un moteur de modèles et modifier les paramètres de l'application qui contrôlent le comportement de l'application (par exemple, le mode d'environnement, si les définitions de route sont sensibles à la casse, etc.).

- -

La partie centrale du code (les trois lignes commençant par app.get) montre une définition de route. La méthode app.get() spécifie une fonction de rappel qui sera invoquée chaque fois qu'il y aura une requête HTTP GET avec un chemin ('/') relatif à la racine du site. La fonction de rappel prend une requête et un objet réponse comme arguments, et appelle simplement send() sur la réponse pour renvoyer la chaîne de caractères "Hello World!".

- -

Le dernier bloc démarre le serveur sur le port 3000 et affiche un commentaire de journal dans la console. Avec le serveur en cours d'exécution, vous pouvez aller sur localhost:3000 dans votre navigateur pour voir l'exemple de réponse renvoyé.

- -

Créer et importer des modules

- -

Un module est une bibliothèque/fichier JavaScript que vous pouvez importer dans un autre code en utilisant la fonction require() de Node. Express lui-même est un module, tout comme les bibliothèques de middleware et de base de données que nous utilisons dans nos applications Express.

- -

Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework Express comme exemple. Tout d'abord, nous invoquons la fonction require(), en spécifiant le nom du module sous forme de chaîne ('express'), et en appelant l'objet retourné pour créer une applicationExpress. Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.

- -
const express = require('express');
-const app = express();
-
- -

Vous pouvez également créer vos propres modules qui peuvent être importés de la même manière.

- -
-

Note : Vous voudrez créer vos propres modules, car cela vous permet d'organiser votre code en parties maniables — une application monolithique à fichier unique est difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à gérer votre espace de noms, car seules les variables que vous exportez explicitement sont importées lorsque vous utilisez un module.

-
- -

Pour rendre les objets disponibles en dehors d'un module, il suffit de les affecter à l'objet exports. Par exemple, le module square.js ci-dessous est un fichier qui exporte les méthodes area() et perimeter() :

- -
exports.area = function(width) { return width * width; };
-exports.perimeter = function(width) { return 4 * width; };
- -

Nous pouvons importer ce module en utilisant require(), puis appeler la ou les méthodes exportées comme indiqué :

- -
var square = require('./square'); // Ici, nous demandons le nom du fichier sans l'extension de fichier .js (facultative).
-console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + square.area(4));
- -
-

Note : Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement).

-
- -

Si vous souhaitez exporter un objet complet en une seule affectation au lieu de le construire une propriété à la fois, affectez-le à module.exports comme indiqué ci-dessous (vous pouvez également procéder ainsi pour faire de la racine de l'objet exports un constructeur ou une autre fonction) :

- -
module.exports = {
-  area: function(width) {
-    return width * width;
-  },
-
-  perimeter: function(width) {
-    return 4 * width;
-  }
-};
- -
-

Note : L'objet exports peut être vu comme un raccourci vers module.exports au sein d'un module donné. En fait, exports est simplement une variable qui est initialisée avec la valeur de module.exports avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que exports référence le même objet que celui référencé par module.exports. Cela signifie également qu'affecter une autre valeur à exports le détachera complètement de module.exports.

-
- - -

Pour de plus amples informations sur les modules, voir Modules (documentation Node).

- -

Utilisation des API asynchrones

- -

Le code JavaScript utilise fréquemment des API asynchrones plutôt que synchrones pour les opérations qui peuvent prendre un certain temps à se terminer. Une API synchrone est une API dans laquelle chaque opération doit être terminée avant que l'opération suivante puisse commencer. Par exemple, les fonctions d'enregistrement suivantes sont synchrones et impriment le texte dans la console dans l'ordre (Premier, Second).

- -
console.log('Premier');
-console.log('Second');
- -

En revanche, une API asynchrone est une API qui lance une opération et revient immédiatement (avant que l'opération ne soit terminée). Une fois l'opération terminée, l'API utilisera un mécanisme quelconque pour effectuer des opérations supplémentaires. Par exemple, le code ci-dessous imprimera « Second, Premier » car même si la méthode setTimeout() est appelée en premier, et revient immédiatement, l'opération ne se termine pas avant plusieurs secondes.

- -
setTimeout(function() {
-  console.log('Premier');
-}, 3000);
-console.log('Second');
- -

L'utilisation d'API asynchrones non bloquantes est encore plus importante sur Node que dans le navigateur, car Node est un environnement d'exécution événementiel avec un seul thread. Cela signifie que toutes les requêtes adressées au serveur sont exécutées sur le même thread (plutôt que d'être fractionnées en threads distincts). Ce modèle est extrêmement efficace en termes de vitesse et de ressources du serveur, mais il signifie que si l'une de vos fonctions appelle des méthodes synchrones qui prennent beaucoup de temps pour se terminer, elle bloquera non seulement la demande actuelle, mais aussi toutes les autres demandes traitées par votre application Web.

- -

Il existe plusieurs façons pour une API asynchrone d'informer votre application de la fin d'une opération. La méthode la plus courante consiste à enregistrer une fonction de rappel lorsque vous invoquez l'API asynchrone, qui sera rappelée lorsque l'opération sera terminée. C'est l'approche utilisée ci-dessus.

- -
-

Note : L'utilisation des rappels (« callbacks ») peut être assez « désordonnée » si vous avez une séquence d'opérations asynchrones dépendantes qui doivent être exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués. Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut être réduit par de bonnes pratiques de codage dont l'utilisation des promesses ou de async/await.

-
- -
-

Note : Une convention courante pour Node et Express est d'utiliser des callbacks de type error-first. Dans cette convention, la première valeur de vos fonctions de rappel est une valeur d'erreur, tandis que les arguments suivants contiennent des données de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog : The Node.js Way - Comprendre les callbacks de type « Error First ». (fredkschott.com).

-
- -

Créer des gestionnaires de route

- -

Dans notre exemple Hello World d'Express (voir ci-dessus), nous avons défini une fonction de gestion de route (un callback) pour les requêtes HTTP GET vers la racine du site ('/').

- -
app.get('/', (req, res) => {
-  res.send('Hello World!');
-});
- -

La fonction de rappel prend une requête et un objet réponse comme arguments. Dans ce cas, la méthode appelle simplement send() sur la réponse pour renvoyer la chaîne de caractères « Hello World ! ». Il existe un nombre d'autres méthodes de réponse pour terminer le cycle requête/réponse, par exemple vous pourriez appeler res.json() pour envoyer une réponse JSON ou res.sendFile() pour envoyer un fichier.

- -
-

Note : Vous pouvez utiliser les noms d'arguments de votre choix dans les fonctions de rappel ; lorsque le rappel est invoqué, le premier argument sera toujours la requête et le second sera toujours la réponse. Il est judicieux de les nommer de telle sorte que vous puissiez identifier l'objet avec lequel vous travaillez dans le corps du callback.

-
- -

L'objet Express application fournit également des méthodes permettant de définir des gestionnaires de route pour tous les autres verbes HTTP, qui sont pour la plupart utilisés exactement de la même manière :

-

checkout(), copy(), delete(), get(), head(), lock(), merge(), mkactivity(), mkcol(), move(), m-search(), notify(), options(), patch(), post(), purge(), put(), report(), search(), subscribe(), trace(), unlock(), unsubscribe().

- -

Il existe une méthode de routage spéciale, app.all(), qui sera appelée en réponse à toute méthode HTTP. Ceci est utilisé pour charger les fonctions middleware à un chemin particulier pour toutes les méthodes de requête. L'exemple suivant (tiré de la documentation d'Express) montre un gestionnaire qui sera exécuté pour les requêtes vers /secret indépendamment du verbe HTTP utilisé (à condition qu'il soit supporté par le module http).

- -
app.all('/secret', (req, res, next) => {
-  console.log('Accès à la section secrète ...');
-  next(); // passe le contrôle au gestionnaire suivant
-});
- -

Les routes vous permettent de faire correspondre des modèles particuliers de caractères dans une URL, d'extraire certaines valeurs de l'URL et de les transmettre comme paramètres au gestionnaire de la route (en tant qu'attributs de l'objet de la demande transmis comme paramètre).

- -

Il est souvent utile de regrouper les gestionnaires de route pour une partie particulière d'un site et d'y accéder en utilisant un préfixe de route commun (par exemple, un site avec un Wiki pourrait avoir toutes les routes liées au wiki dans un seul fichier et les faire accéder avec un préfixe de route de /wiki/). Dans Express, ceci est réalisé en utilisant l'objet express.Router. Par exemple, nous pouvons créer notre route wiki dans un module nommé wiki.js, puis exporter l'objet Router, comme indiqué ci-dessous :

- -
// wiki.js - Module route du wiki
-
-const express = require('express');
-const router = express.Router();
-
-// Route vers la page d'accueil
-router.get('/', (req, res) => {
-  res.send("Page d'accueil du wiki");
-});
-
-
-// Route vers la page à propos
-router.get('/about', (req, res) => {
-  res.send('À propos de ce wiki');
-});
-
-module.exports = router;
- -
-

Note : L'ajout de routes à l'objet Router est identique à l'ajout de routes à l'objet app (comme indiqué précédemment).

-
- -

Pour utiliser le routeur dans notre fichier d'application principal, nous devrions alors require() le module route (wiki.js), puis appeler use() sur l'application Express pour ajouter le routeur au chemin de manipulation du middleware. Les deux routes seront alors accessibles depuis /wiki/ et /wiki/about/.

- -
const wiki = require('./wiki.js');
-// ...
-app.use('/wiki', wiki);
- -

Nous vous montrerons beaucoup plus en détails comment travailler avec les routes, et en particulier comment utiliser le Router, plus tard dans la section liée Routes et contrôleurs.

- -

Utilisation d'un middleware/intergiciel

- -

L'intergiciel (aussi appelé « middleware ») est largement utilisé dans les applications d'Express, pour des tâches allant du service de fichiers statiques à la gestion des erreurs, en passant par la compression des réponses HTTP. Alors que les fonctions de route terminent le cycle requête-réponse HTTP en renvoyant une réponse au client HTTP, les fonctions d'intergiciel effectuent typiquement une opération sur la demande ou la réponse, puis appellent la fonction suivante dans la « pile », qui peut être un autre intergiciel ou un gestionnaire de route. L'ordre dans lequel les intergiciels sont appelés dépend du code de l'application.

- -
-

Note : L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel code, apporter des modifications à l'objet requête et réponse, et il peut aussi mettre fin au cycle requête-réponse. S'il ne met pas fin au cycle, alors il doit appeler next() pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens).

-
- -

La plupart des apps utiliseront des programmes intermédiaires tiers afin de simplifier les tâches courantes de développement web comme le travail avec les cookies, les sessions, l'authentification des utilisateurs, l'accès aux données POST et JSON des requêtes, la journalisation, etc. Vous pouvez trouver une liste des paquets middleware maintenus par l'équipe Express (qui inclut également d'autres paquets populaires de tiers). D'autres paquets Express sont disponibles sur le gestionnaire de paquets NPM.

- -

Pour utiliser un middleware tiers, vous devez d'abord l'installer dans votre application à l'aide de NPM. Par exemple, pour installer l'intergiciel de journalisation des requêtes HTTP morgan, vous devez procéder comme suit :

- -
npm install morgan
- -

Vous pourriez alors appeler use() sur l'objet Express application pour ajouter l'intergiciel à la pile :

- -
const express = require('express');
-const logger = require('morgan');
-const app = express();
-app.use(logger('dev'));
-...
- -
-

Note : Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas accès aux fonctionnalités ajoutées par votre intergiciel.

-
- -

Vous pouvez écrire vos propres fonctions intergiciels, et vous serez probablement amené à le faire (ne serait-ce que pour créer un code de gestion des erreurs). La seule différence entre une fonction middleware et un callback de gestionnaire de route est que les fonctions middleware ont un troisième argument next, que les fonctions middleware sont censées appeler si elles ne sont pas celle qui termine le cycle de requête (lorsque la fonction middleware est appelée, cela contient la fonction next qui doit être appelée).

- -

Vous pouvez ajouter une fonction d'intergiciel à la chaîne de traitement avec app.use() ou app.add(), selon que vous voulez appliquer l'intergiciel à toutes les réponses ou aux réponses avec un verbe HTTP particulier (GET, POST, etc). Vous spécifiez les routes de la même manière dans les deux cas, bien que la route soit facultative lors de l'appel à app.use().

- -

L'exemple ci-dessous montre comment vous pouvez ajouter la fonction middleware en utilisant les deux méthodes, et avec/sans route.

- -
const express = require('express');
-const app = express();
-
-// Un exemple de fonction middleware
-let a_middleware_function = function(req, res, next) {
-  // ... effectuer certaines opérations
-  next(); // Appelez next() pour qu'Express appelle la fonction middleware suivante dans la chaîne.
-}
-
-// Fonction ajoutée avec use() pour toutes les routes et verbes
-app.use(a_middleware_function);
-
-// Fonction ajoutée avec use() pour une route spécifique
-app.use('/uneroute', a_middleware_function);
-
-// Une fonction middleware ajoutée pour un verbe et une route HTTP spécifiques
-app.get('/', a_middleware_function);
-
-app.listen(3000);
- -
-

Note : Ci-dessus, nous déclarons la fonction middleware séparément, puis nous la définissons comme fonction de rappel. Dans notre précédente fonction de gestion de route, nous avons déclaré la fonction de rappel lorsqu'elle a été utilisée. En JavaScript, les deux approches sont valables.

-
- -

La documentation d'Express contient beaucoup d'autres excellents documents sur l'utilisation et l'écriture d'intergiciels Express.

- -

Servir les fichiers statiques

- -

Vous pouvez utiliser l'intergiciel express.static pour servir des fichiers statiques, notamment vos images, CSS et JavaScript (static() est la seule fonction de l'intergiciel qui fait réellement partie d'Express). Par exemple, vous utiliserez la ligne ci-dessous pour servir des images, des fichiers CSS et des fichiers JavaScript à partir d'un répertoire nommé 'public' au même niveau que celui où vous appelez node :

- -
app.use(express.static('public'));
- -

Tous les fichiers du répertoire public sont servis en ajoutant leur nom de fichier (relatif au répertoire "public" de base) à l'URL de base. Ainsi, par exemple :

- -
https://localhost:3000/images/dog.jpg
-https://localhost:3000/css/style.css
-https://localhost:3000/js/app.js
-https://localhost:3000/about.html
- -

Vous pouvez appeler static() plusieurs fois pour servir plusieurs répertoires. Si un fichier ne peut pas être trouvé par une fonction middleware, alors il sera simplement transmis au middleware suivant (l'ordre dans lequel le middleware est appelé est basé sur votre ordre de déclaration).

- -
app.use(express.static('public'));
-app.use(express.static('media'));
- -

Vous pouvez également créer un préfixe virtuel pour vos URL statiques, plutôt que de voir les fichiers ajoutés à l'URL de base. Par exemple, ici nous spécifions un chemin de montage pour que les fichiers soient chargés avec le préfixe « /media » :

- -
app.use('/media', express.static('public'));
- -

Maintenant, vous pouvez charger les fichiers qui se trouvent dans le répertoire public à partir du préfixe du chemin /media.

- -
https://localhost:3000/media/images/dog.jpg
-https://localhost:3000/media/video/cat.mp4
-https://localhost:3000/media/cry.mp3
- -
-

Note : Voir également Servir des fichiers statiques dans Express.

-
- -

Traitement des erreurs

- -

Les erreurs sont traitées par une ou plusieurs fonctions spéciales du middleware qui ont quatre arguments, au lieu des trois habituels : (err, req, res, next). Par exemple :

- -
app.use(function(err, req, res, next) {
-  console.error(err.stack);
-  res.status(500).send("Quelque chose s'est cassé !");
-});
- -

Ceux-ci peuvent retourner tout contenu nécessaire, mais doivent être appelés après tous les autres app.use() et les appels de routes afin qu'ils soient le dernier middleware dans le processus de traitement des requêtes !

- -

Express est livré avec un gestionnaire d'erreurs intégré, qui prend en charge toutes les erreurs restantes qui pourraient être rencontrées dans l'application. Cette fonction middleware de gestion des erreurs par défaut est ajoutée à la fin de la pile de fonctions middleware. Si vous passez une erreur à next() et que vous ne la gérez pas dans un gestionnaire d'erreurs, elle sera traitée par le gestionnaire d'erreurs intégré ; l'erreur sera écrite au client avec la trace de la pile.

- -
-

Note : La trace de la pile n'est pas incluse dans l'environnement de production. Pour exécuter une application serveur Express, la variable d'environnement NODE_ENV doit être définie avec la valeur production.

-
- -
-

Note : Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction middleware pour le faire. Pour plus d'informations, consultez la FAQ.

-
- -

Pour plus d'informations, voir Gestion des erreurs (docs Express).

- -

Utilisation des bases de données

- -

Les apps Express peuvent utiliser tout mécanisme de base de données pris en charge par Node (Express lui-même ne définit aucun comportements/exigences supplémentaire spécifique pour la gestion des bases de données). Il existe de nombreuses options, notamment PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.

- -

Pour les utiliser, vous devez d'abord installer le pilote de base de données à l'aide de NPM. Par exemple, pour installer le pilote de la populaire base de données NoSQL MongoDB, vous devez utiliser la commande suivante :

- -
$ npm install mongodb
- -

La base de données elle-même peut être installée localement ou sur un serveur en nuage. Dans votre code Express, vous avez besoin du pilote, vous vous connectez à la base de données, puis vous effectuez des opérations de création, lecture, mise à jour et suppression (en anglais, on utilise l'acronyme CRUD qui signifie Create, Read, Update, Delete). L'exemple ci-dessous (tiré de la documentation d'Express) montre comment vous pouvez trouver des enregistrements « mammifères » en utilisant MongoDB.

- -
// cela fonctionne avec les anciennes versions de mongodb version ~ 2.2.33
-const MongoClient = require('mongodb').MongoClient;
-
-MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
-  if (err) throw err;
-
-  db.collection('mammals').find().toArray(function (err, result) {
-    if (err) throw err;
-
-    console.log(result);
-  });
-});
-
-// pour mongodb version 3.0 et supérieure
-const MongoClient = require('mongodb').MongoClient;
-MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){
-   if(err) throw err;
-
-   let db = client.db('animals');
-   db.collection('mammals').find().toArray(function(err, result){
-     if(err) throw err;
-     console.log(result);
-     client.close();
-   });
-});
- -

Une autre approche populaire consiste à accéder à votre base de données de manière indirecte, via un mappeur objet-relationnel (« ORM »). Dans cette approche, vous définissez vos données en tant qu'objets ou modèles et l'ORM les met en correspondance avec le format de base de données sous-jacent. L'avantage de cette approche est qu'en tant que développeur, vous pouvez continuer à penser en termes d'objets JavaScript plutôt qu'en termes de sémantique de base de données, et qu'il existe un endroit évident pour effectuer la validation et la vérification des données entrantes. Nous parlerons davantage des bases de données dans un article ultérieur.

- -

Pour plus d'informations, voir Intégration de base de données (docs Express).

- -

Rendu des données (vues)

- -

Les moteurs de modèles (appelés « moteurs de vue » par Express) vous permettent de spécifier la structure d'un document de sortie dans un modèle, en utilisant des espaces réservés pour les données qui seront remplies lorsqu'une page sera générée. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents. Express prend en charge un certain nombre de moteurs de modèles, et il existe une comparaison utile des moteurs les plus populaires ici : Comparaison des moteurs de création de modèles JavaScript : Jade, Mustache, Dust et plus.

- -

Dans le code des paramètres de votre application, vous définissez le moteur de modèles à utiliser et l'emplacement où Express doit rechercher les modèles à l'aide des paramètres « views » et « view engines », comme indiqué ci-dessous (vous devrez également installer le paquet contenant votre bibliothèque de modèles !)

- -
const express = require('express');
-const path = require('path');
-const app = express();
-
-// Définir le répertoire contenant les modèles ('views')
-app.set('views', path.join(__dirname, 'views'));
-
-// Définir le moteur d'affichage à utiliser, dans ce cas 'some_template_engine_name'.
-app.set('view engine', 'some_template_engine_name');
- -

L'apparence du modèle dépendra du moteur que vous utilisez. En supposant que vous ayez un fichier de modèle nommé « index.<template_extension> » qui contient des espaces réservés pour des variables de données nommées « title » et « message », vous appelleriez Response.render() dans une fonction de gestionnaire de route pour créer et envoyer la réponse HTML :

- -
app.get('/', function(req, res) {
-  res.render('index', { title: 'À propos des poules', message: 'Elles sont où ?' });
-});
- -

Pour plus d'informations, voir Utilisation des moteurs de modèles avec Express (docs Express).

- -

Structure du fichier

- -

Express ne fait aucune supposition en termes de structure ou de composants que vous utilisez. Les routes, les vues, les fichiers statiques et toute autre logique spécifique à l'application peuvent vivre dans un nombre quelconque de fichiers avec n'importe quelle structure de répertoire. Bien qu'il soit parfaitement possible d'avoir l'ensemble de l'application Express dans un seul fichier, il est généralement judicieux de diviser votre application en fichiers basés sur la fonction (par exemple, gestion de compte, blogs, forums de discussion) et le domaine de problème architectural (par exemple, modèle, vue ou contrôleur si vous utilisez une architecture MVC).

- -

Dans une prochaine rubrique, nous utiliserons le Générateur d'applications express, qui crée un squelette d'application modulaire que nous pouvons facilement étendre pour créer des applications web.

- -

Résumé

- -

Félicitations, vous avez terminé la première étape de votre voyage Express/Node ! Vous devriez maintenant comprendre les principaux avantages d'Express et de Node, et savoir à quoi ressemblent les principales parties d'une application Express (routes, intergiciels, gestion des erreurs et code modèle). Vous devez également comprendre qu'Express étant un framework non autonome, la manière dont vous assemblez ces éléments et les bibliothèques que vous utilisez dépendent largement de vous !

- -

Bien sûr, Express est délibérément un cadre d'application web très léger, et une grande partie de ses avantages et de son potentiel provient de bibliothèques et de fonctionnalités tierces. Nous les examinerons plus en détail dans les articles suivants. Dans notre prochain article, nous nous pencherons sur la configuration d'un environnement de développement Node, afin que vous puissiez commencer à voir du code Express en action.

- -

Voir aussi

- - - -
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.md b/files/fr/learn/server-side/express_nodejs/introduction/index.md new file mode 100644 index 0000000000..4f8719e813 --- /dev/null +++ b/files/fr/learn/server-side/express_nodejs/introduction/index.md @@ -0,0 +1,521 @@ +--- +title: Introduction à Express/Node +slug: Learn/Server-side/Express_Nodejs/Introduction +tags: + - Beginner + - CodingScripting + - Express + - Learn + - Node + - nodejs + - server-side +translation_of: Learn/Server-side/Express_Nodejs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+ +

Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester).

+ + + + + + + + + + + + +
Prérequis :Une culture de base en informatique, une compréhension globale de la programmation côté serveur et, en particulier, les mécanismes d'interactions client-serveur dans un site web.
Objectif :Devenir familier avec ce qu'est Express et comment il s'intègre dans Node, les fonctionnalités qu'il apporte, et les principales étapes pour construire une application Express.
+ +

Introduction à Node

+ +

Node (ou plus formellement Node.js) est un environnement d'exécution open-source, multi-plateforme, qui permet aux développeuses et développeurs de créer toutes sortes d'applications et d'outils côté serveur en JavaScript. Cet environnement est destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de systèmes de fichier.

+ +

Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages :

+ + + +

Vous pouvez utiliser Node.js pour créer un simple serveur web en utilisant l'API Node HTTP.

+ +

Hello Node.js

+ +

L'exemple qui suit crée un serveur web qui écoute toutes sortes de requêtes HTTP sur l'URL https://127.0.0.1:8000/. Quand une requête est reçue, le script répond avec la chaine « Salut tout le monde ». Si vous avez déjà installé Node, suivez les étapes de l'exemple suivant :

+ +
    +
  1. Ouvrez un terminal (sur Windows, ouvrez l'invite de commande (cmd)),
    2. +
  2. Créez le dossier où vous voulez sauvegarder le programme, appelez-le par exemple test-node et placez-vous dedans en utilisant la commande suivante dans votre console : + 
    cd test-node
    3. +
  3. Dans votre éditeur de texte favori, créez un fichier nommé "hello.js" et collez ce qui suit dedans : + 
    // Charge le module HTTP
+const http = require("http");
+
+const hostname = "127.0.0.1";
+const port = 8000;
+
+// Crée un serveur HTTP
+const server = http.createServer((req, res) => {
+
+  // Configure l'en-tête de la réponse HTTP
+  // avec le code du statut et le type de contenu
+  res.writeHead(200, {'Content-Type': 'text/plain'});
+
+  // Envoie le corps de la réponse « Salut tout le monde »
+   res.end('Salut tout le monde\n');
+})
+
+// Démarre le serveur à l'adresse 127.0.0.1 sur le port 8000
+// Affiche un message dès que le serveur commence à écouter les requêtes
+server.listen(port, hostname, () => {
+  console.log(`Le serveur tourne à l'adresse https://${hostname}:${port}/`);
+})
    4. +
  4. Sauvegardez le fichier dans le dossier créé plus haut.
    5. +
  5. Retournez au terminal et tapez : + 
    node hello.js
    +
    6. +
+ +

Puis saisissez l'URL "https://localhost:8000" dans votre navigateur. Vous devriez alors voir "Salut tout le monde" en haut à gauche d'une page web ne contenant rien d'autre que ce texte.

+ +

Les frameworks web

+ +

D'autres tâches de développement web ne sont pas directement prises en charge par Node de façon native. Si vous voulez ajouter différentes manipulations pour divers requêtes HTTP (GET, POST, DELETE, etc.), gérer différemment des requêtes vers plusieurs chemins URL ("routes"), servir des pages statiques ou utiliser des modèles pour créer dynamiquement la réponse, alors vous devrez écrire tout le code vous-même ou, pour éviter de réinventer la roue, vous servir des cadres applicatifs web (frameworks).

+ +

Introduction à Express

+ +

Express est le framework actuellement le plus populaire dans Node et est la bibliothèque sous-jacente pour un grand nombre d'autres cadres applicatifs web pour Node. Il fournit des mécanismes pour :

+ + + +

Bien qu'Express soit assez minimaliste, des middlewares (fonctions intermédiaires) compatibles ont été créés pour résoudre quasiment tous les problèmes de développement web. Il existe des bibliothèques pour se servir des cookies, gérer les sessions, la connexion de l'utilisateur, les paramètres de l'URL, les données POST, les entêtes de sécurité et d'autres encore. Vous trouverez une liste des paquets maintenus par l'équipe Express ici : Express Middleware (ainsi que la liste de paquets tiers populaires).

+ +
+

Note : Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web.

+
+ +

D'où viennent Node et Express ?

+ +

À ses débuts en 2009, Node a été publié pour Linux uniquement. Le gestionnaire de paquets NPM est sorti en 2010, et le support natif de Windows fut ajouté en 2012. Ceci est un très court aperçu d'une aventure riche en rebondissements. Allez creuser ça sur Wikipédia si vous voulez en savoir plus.

+ +

Express est sorti pour la première fois en novembre 2010. Vous pouvez consulter la liste des modifications pour plus d'informations sur la version courante et GitHub pour plus de détails sur l'historique des publications.

+ + + +

La popularité d'un framework web est importante car elle conditionne la maintenance dans le temps et les ressources qu'il est raisonnable de mettre à disposition dans la documentation, les bibliothèques d'extensions et le support technique.

+ +

Il n'existe pas d'échelle de mesures définitive et fiable pour l'estimation de la popularité des frameworks côté serveur, bien que des sites comme Hot Frameworks essaient d'estimer la popularité par le comptage du nombre de projets GitHub ou StackOverflow. La question est : « Est-ce que Node et Express sont suffisamment populaires pour pouvoir s'affranchir des plateformes non-populaires ? Continuent-ils à évoluer ? Pouvez-vous avoir de l'aide si besoin ? Existe-t-il une opportunité pour vous de gagner de l'argent si vous apprenez Express ? ».

+ +

Si on se réfère à la liste des entreprises utilisant Express, la quantité de gens contribuant au code et le nombre de gens fournissant un support payant ou bien gratuit, alors oui, Express est un framework populaire !

+ +

Express est-il « dogmatique » ?

+ +

Les cadres logiciels web se décrivent souvent comme ayant ou non des opinions données sur tel ou tel sujet au sens où ils sont orientés dans leur usage selon ces choix/opinions. En anglais, on dit d'un framework qu'il est opinionated ou non.

+ +

Les frameworks avec une opinion sont ceux qui ont un avis arrêté sur la « bonne manière » de gérer certaines tâches. Ils fournissent souvent un cadre permettant de développer rapidement dans un domaine particulier (résolvant des problèmes d'un type particulier) parce que la bonne manière de faire quoi que ce soit est généralement bien comprise et bien documentée. Toutefois, ils peuvent manquer de flexibilité pour la résolution de problèmes hors de leur portée et tendent à offrir peu de choix concernant les composants et approches qu'ils peuvent utiliser.

+ +

Les frameworks sans opinion, par contraste, ont beaucoup moins de restrictions sur la meilleure manière d'assembler des composants ensemble pour atteindre un objectif, ou encore sur les composants que vous devriez utiliser. Ils laissent aux développeurs la possibilité d'utiliser les outils les plus adaptés pour achever une tâche particulière, bien que cela nécessite que vous cherchiez et trouviez ces composants par vous-même.

+ +

Express n'est pas particulièrement dogmatique. Vous pouvez intégrer quasiment n'importe quelle fonction intermédiaire compatible voulue dans la pile de gestion des requêtes, dans quasiment n'importe quel ordre. Vous pouvez structurer l'application en un fichier comme en plusieurs, et utiliser n'importe quelle structure de dossiers. Vous pourrez même quelques fois vous sentir perdu⋅e par la liberté que vous avez de vous organiser comme vous le souhaitez !

+ +

À quoi ressemble du code Express ?

+ +

Dans un site web utilisé pour traiter des données, une application web attend des requêtes HTTP du navigateur web (ou d'un autre client). Quand une requête est reçue, l'application cherche quelle action est requise en fonction du modèle de l'URL et des possibles informations associés contenues dans les données POST ou GET. Selon ce qui est requis, il pourra alors lire ou écrire des informations dans une base de données ou effectuer d'autre tâches pour satisfaire la requête. L'application va alors retourner une réponse au navigateur web, souvent une page HTML créée dynamiquement pour le navigateur, en intégrant les données récupérées dans un modèle HTML.

+ +

Express fournit des méthodes pour spécifier quelle fonction est appelée pour une méthode HTTP particulière (GET, POST, SET, etc.) et un modèle d'URL ("Route"), ainsi que des méthodes pour spécifier quel moteur de rendu de vues ("view") est utilisé, où sont les modèles de vues et quel modèle utiliser pour générer une réponse. Vous pouvez utiliser les fonctions intermédiaires d'Express pour prendre en charge les cookies, les sessions, les utilisateurs, obtenir les paramètres POST/GET, etc. Vous pouvez utiliser n'importe que système de base données supporté par Node (Express ne définit aucun comportement relatif aux bases de données).

+ +

Les sections suivantes expliquent quelques choses communes que vous verrez en travaillant avec du code Express et Node.

+ +

Hello World Express

+ +

Tout d'abord intéressons-nous à l'exemple Hello World standard d'Express (nous expliquons chaque partie de cet exemple ci-dessous, et dans les sections suivantes).

+ +
+

Note : Si vous avez déjà installé Node et Express (ou si vous les installez comme montré dans l'article suivant), vous pouvez enregistrer ce code dans un fichier texte appelé app.js et l'exécuter via un terminal en tapant :

+

node app.js

+
+ +
const express = require('express');
+const app = express();
+const port = 3000;
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+});
+
+app.listen(port, () => {
+  console.log(`Application exemple à l'écoute sur le port ${port}!`)
+});
+
+ +

Les deux premières lignes importent (avec require()) le module express et créent une application express. Cet objet, qui est traditionnellement nommé app, possède des méthodes pour acheminer les requêtes HTTP, configurer les intergiciels, rendre les vues HTML, enregistrer un moteur de modèles et modifier les paramètres de l'application qui contrôlent le comportement de l'application (par exemple, le mode d'environnement, si les définitions de route sont sensibles à la casse, etc.).

+ +

La partie centrale du code (les trois lignes commençant par app.get) montre une définition de route. La méthode app.get() spécifie une fonction de rappel qui sera invoquée chaque fois qu'il y aura une requête HTTP GET avec un chemin ('/') relatif à la racine du site. La fonction de rappel prend une requête et un objet réponse comme arguments, et appelle simplement send() sur la réponse pour renvoyer la chaîne de caractères "Hello World!".

+ +

Le dernier bloc démarre le serveur sur le port 3000 et affiche un commentaire de journal dans la console. Avec le serveur en cours d'exécution, vous pouvez aller sur localhost:3000 dans votre navigateur pour voir l'exemple de réponse renvoyé.

+ +

Créer et importer des modules

+ +

Un module est une bibliothèque/fichier JavaScript que vous pouvez importer dans un autre code en utilisant la fonction require() de Node. Express lui-même est un module, tout comme les bibliothèques de middleware et de base de données que nous utilisons dans nos applications Express.

+ +

Le code ci-dessous montre comment nous importons un module par son nom, en utilisant le framework Express comme exemple. Tout d'abord, nous invoquons la fonction require(), en spécifiant le nom du module sous forme de chaîne ('express'), et en appelant l'objet retourné pour créer une applicationExpress. Nous pouvons alors accéder aux propriétés et fonctions de l'objet application.

+ +
const express = require('express');
+const app = express();
+
+ +

Vous pouvez également créer vos propres modules qui peuvent être importés de la même manière.

+ +
+

Note : Vous voudrez créer vos propres modules, car cela vous permet d'organiser votre code en parties maniables — une application monolithique à fichier unique est difficile à comprendre et à maintenir. L'utilisation de modules vous aide également à gérer votre espace de noms, car seules les variables que vous exportez explicitement sont importées lorsque vous utilisez un module.

+
+ +

Pour rendre les objets disponibles en dehors d'un module, il suffit de les affecter à l'objet exports. Par exemple, le module square.js ci-dessous est un fichier qui exporte les méthodes area() et perimeter() :

+ +
exports.area = function(width) { return width * width; };
+exports.perimeter = function(width) { return 4 * width; };
+ +

Nous pouvons importer ce module en utilisant require(), puis appeler la ou les méthodes exportées comme indiqué :

+ +
var square = require('./square'); // Ici, nous demandons le nom du fichier sans l'extension de fichier .js (facultative).
+console.log("L'aire d'un carré dont la largeur est de 4 est la suivante " + square.area(4));
+ +
+

Note : Vous pouvez également spécifier un chemin absolu vers le module (ou un nom, comme nous l'avons fait initialement).

+
+ +

Si vous souhaitez exporter un objet complet en une seule affectation au lieu de le construire une propriété à la fois, affectez-le à module.exports comme indiqué ci-dessous (vous pouvez également procéder ainsi pour faire de la racine de l'objet exports un constructeur ou une autre fonction) :

+ +
module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+ +
+

Note : L'objet exports peut être vu comme un raccourci vers module.exports au sein d'un module donné. En fait, exports est simplement une variable qui est initialisée avec la valeur de module.exports avant que le module soit évalué. Cette valeur est une référence vers un objet. Cela signifie que exports référence le même objet que celui référencé par module.exports. Cela signifie également qu'affecter une autre valeur à exports le détachera complètement de module.exports.

+
+ + +

Pour de plus amples informations sur les modules, voir Modules (documentation Node).

+ +

Utilisation des API asynchrones

+ +

Le code JavaScript utilise fréquemment des API asynchrones plutôt que synchrones pour les opérations qui peuvent prendre un certain temps à se terminer. Une API synchrone est une API dans laquelle chaque opération doit être terminée avant que l'opération suivante puisse commencer. Par exemple, les fonctions d'enregistrement suivantes sont synchrones et impriment le texte dans la console dans l'ordre (Premier, Second).

+ +
console.log('Premier');
+console.log('Second');
+ +

En revanche, une API asynchrone est une API qui lance une opération et revient immédiatement (avant que l'opération ne soit terminée). Une fois l'opération terminée, l'API utilisera un mécanisme quelconque pour effectuer des opérations supplémentaires. Par exemple, le code ci-dessous imprimera « Second, Premier » car même si la méthode setTimeout() est appelée en premier, et revient immédiatement, l'opération ne se termine pas avant plusieurs secondes.

+ +
setTimeout(function() {
+  console.log('Premier');
+}, 3000);
+console.log('Second');
+ +

L'utilisation d'API asynchrones non bloquantes est encore plus importante sur Node que dans le navigateur, car Node est un environnement d'exécution événementiel avec un seul thread. Cela signifie que toutes les requêtes adressées au serveur sont exécutées sur le même thread (plutôt que d'être fractionnées en threads distincts). Ce modèle est extrêmement efficace en termes de vitesse et de ressources du serveur, mais il signifie que si l'une de vos fonctions appelle des méthodes synchrones qui prennent beaucoup de temps pour se terminer, elle bloquera non seulement la demande actuelle, mais aussi toutes les autres demandes traitées par votre application Web.

+ +

Il existe plusieurs façons pour une API asynchrone d'informer votre application de la fin d'une opération. La méthode la plus courante consiste à enregistrer une fonction de rappel lorsque vous invoquez l'API asynchrone, qui sera rappelée lorsque l'opération sera terminée. C'est l'approche utilisée ci-dessus.

+ +
+

Note : L'utilisation des rappels (« callbacks ») peut être assez « désordonnée » si vous avez une séquence d'opérations asynchrones dépendantes qui doivent être exécutées dans l'ordre, car cela entraîne de multiples niveaux de rappels imbriqués. Ce problème est communément appelé « l'enfer des callbacks ». Ce problème peut être réduit par de bonnes pratiques de codage dont l'utilisation des promesses ou de async/await.

+
+ +
+

Note : Une convention courante pour Node et Express est d'utiliser des callbacks de type error-first. Dans cette convention, la première valeur de vos fonctions de rappel est une valeur d'erreur, tandis que les arguments suivants contiennent des données de succès. Il y a une bonne explication de l'utilité de cette approche dans ce blog : The Node.js Way - Comprendre les callbacks de type « Error First ». (fredkschott.com).

+
+ +

Créer des gestionnaires de route

+ +

Dans notre exemple Hello World d'Express (voir ci-dessus), nous avons défini une fonction de gestion de route (un callback) pour les requêtes HTTP GET vers la racine du site ('/').

+ +
app.get('/', (req, res) => {
+  res.send('Hello World!');
+});
+ +

La fonction de rappel prend une requête et un objet réponse comme arguments. Dans ce cas, la méthode appelle simplement send() sur la réponse pour renvoyer la chaîne de caractères « Hello World ! ». Il existe un nombre d'autres méthodes de réponse pour terminer le cycle requête/réponse, par exemple vous pourriez appeler res.json() pour envoyer une réponse JSON ou res.sendFile() pour envoyer un fichier.

+ +
+

Note : Vous pouvez utiliser les noms d'arguments de votre choix dans les fonctions de rappel ; lorsque le rappel est invoqué, le premier argument sera toujours la requête et le second sera toujours la réponse. Il est judicieux de les nommer de telle sorte que vous puissiez identifier l'objet avec lequel vous travaillez dans le corps du callback.

+
+ +

L'objet Express application fournit également des méthodes permettant de définir des gestionnaires de route pour tous les autres verbes HTTP, qui sont pour la plupart utilisés exactement de la même manière :

+

checkout(), copy(), delete(), get(), head(), lock(), merge(), mkactivity(), mkcol(), move(), m-search(), notify(), options(), patch(), post(), purge(), put(), report(), search(), subscribe(), trace(), unlock(), unsubscribe().

+ +

Il existe une méthode de routage spéciale, app.all(), qui sera appelée en réponse à toute méthode HTTP. Ceci est utilisé pour charger les fonctions middleware à un chemin particulier pour toutes les méthodes de requête. L'exemple suivant (tiré de la documentation d'Express) montre un gestionnaire qui sera exécuté pour les requêtes vers /secret indépendamment du verbe HTTP utilisé (à condition qu'il soit supporté par le module http).

+ +
app.all('/secret', (req, res, next) => {
+  console.log('Accès à la section secrète ...');
+  next(); // passe le contrôle au gestionnaire suivant
+});
+ +

Les routes vous permettent de faire correspondre des modèles particuliers de caractères dans une URL, d'extraire certaines valeurs de l'URL et de les transmettre comme paramètres au gestionnaire de la route (en tant qu'attributs de l'objet de la demande transmis comme paramètre).

+ +

Il est souvent utile de regrouper les gestionnaires de route pour une partie particulière d'un site et d'y accéder en utilisant un préfixe de route commun (par exemple, un site avec un Wiki pourrait avoir toutes les routes liées au wiki dans un seul fichier et les faire accéder avec un préfixe de route de /wiki/). Dans Express, ceci est réalisé en utilisant l'objet express.Router. Par exemple, nous pouvons créer notre route wiki dans un module nommé wiki.js, puis exporter l'objet Router, comme indiqué ci-dessous :

+ +
// wiki.js - Module route du wiki
+
+const express = require('express');
+const router = express.Router();
+
+// Route vers la page d'accueil
+router.get('/', (req, res) => {
+  res.send("Page d'accueil du wiki");
+});
+
+
+// Route vers la page à propos
+router.get('/about', (req, res) => {
+  res.send('À propos de ce wiki');
+});
+
+module.exports = router;
+ +
+

Note : L'ajout de routes à l'objet Router est identique à l'ajout de routes à l'objet app (comme indiqué précédemment).

+
+ +

Pour utiliser le routeur dans notre fichier d'application principal, nous devrions alors require() le module route (wiki.js), puis appeler use() sur l'application Express pour ajouter le routeur au chemin de manipulation du middleware. Les deux routes seront alors accessibles depuis /wiki/ et /wiki/about/.

+ +
const wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);
+ +

Nous vous montrerons beaucoup plus en détails comment travailler avec les routes, et en particulier comment utiliser le Router, plus tard dans la section liée Routes et contrôleurs.

+ +

Utilisation d'un middleware/intergiciel

+ +

L'intergiciel (aussi appelé « middleware ») est largement utilisé dans les applications d'Express, pour des tâches allant du service de fichiers statiques à la gestion des erreurs, en passant par la compression des réponses HTTP. Alors que les fonctions de route terminent le cycle requête-réponse HTTP en renvoyant une réponse au client HTTP, les fonctions d'intergiciel effectuent typiquement une opération sur la demande ou la réponse, puis appellent la fonction suivante dans la « pile », qui peut être un autre intergiciel ou un gestionnaire de route. L'ordre dans lequel les intergiciels sont appelés dépend du code de l'application.

+ +
+

Note : L'intergiciel peut effectuer n'importe quelle opération, exécuter n'importe quel code, apporter des modifications à l'objet requête et réponse, et il peut aussi mettre fin au cycle requête-réponse. S'il ne met pas fin au cycle, alors il doit appeler next() pour passer le contrôle à la fonction suivante de l'intergiciel (ou la requête sera laissée en suspens).

+
+ +

La plupart des apps utiliseront des programmes intermédiaires tiers afin de simplifier les tâches courantes de développement web comme le travail avec les cookies, les sessions, l'authentification des utilisateurs, l'accès aux données POST et JSON des requêtes, la journalisation, etc. Vous pouvez trouver une liste des paquets middleware maintenus par l'équipe Express (qui inclut également d'autres paquets populaires de tiers). D'autres paquets Express sont disponibles sur le gestionnaire de paquets NPM.

+ +

Pour utiliser un middleware tiers, vous devez d'abord l'installer dans votre application à l'aide de NPM. Par exemple, pour installer l'intergiciel de journalisation des requêtes HTTP morgan, vous devez procéder comme suit :

+ +
npm install morgan
+ +

Vous pourriez alors appeler use() sur l'objet Express application pour ajouter l'intergiciel à la pile :

+ +
const express = require('express');
+const logger = require('morgan');
+const app = express();
+app.use(logger('dev'));
+...
+ +
+

Note : Les fonctions d'intergiciel et de routage sont appelées dans l'ordre où elles sont déclarées. Pour certains intergiciels, l'ordre est important (par exemple, si l'intergiciel de session dépend de l'intergiciel de cookie, alors le gestionnaire de cookie doit être ajouté en premier). Il est presque toujours nécessaire d'appeler l'intergiciel avant de définir les routes, sinon vos gestionnaires de routes n'auront pas accès aux fonctionnalités ajoutées par votre intergiciel.

+
+ +

Vous pouvez écrire vos propres fonctions intergiciels, et vous serez probablement amené à le faire (ne serait-ce que pour créer un code de gestion des erreurs). La seule différence entre une fonction middleware et un callback de gestionnaire de route est que les fonctions middleware ont un troisième argument next, que les fonctions middleware sont censées appeler si elles ne sont pas celle qui termine le cycle de requête (lorsque la fonction middleware est appelée, cela contient la fonction next qui doit être appelée).

+ +

Vous pouvez ajouter une fonction d'intergiciel à la chaîne de traitement avec app.use() ou app.add(), selon que vous voulez appliquer l'intergiciel à toutes les réponses ou aux réponses avec un verbe HTTP particulier (GET, POST, etc). Vous spécifiez les routes de la même manière dans les deux cas, bien que la route soit facultative lors de l'appel à app.use().

+ +

L'exemple ci-dessous montre comment vous pouvez ajouter la fonction middleware en utilisant les deux méthodes, et avec/sans route.

+ +
const express = require('express');
+const app = express();
+
+// Un exemple de fonction middleware
+let a_middleware_function = function(req, res, next) {
+  // ... effectuer certaines opérations
+  next(); // Appelez next() pour qu'Express appelle la fonction middleware suivante dans la chaîne.
+}
+
+// Fonction ajoutée avec use() pour toutes les routes et verbes
+app.use(a_middleware_function);
+
+// Fonction ajoutée avec use() pour une route spécifique
+app.use('/uneroute', a_middleware_function);
+
+// Une fonction middleware ajoutée pour un verbe et une route HTTP spécifiques
+app.get('/', a_middleware_function);
+
+app.listen(3000);
+ +
+

Note : Ci-dessus, nous déclarons la fonction middleware séparément, puis nous la définissons comme fonction de rappel. Dans notre précédente fonction de gestion de route, nous avons déclaré la fonction de rappel lorsqu'elle a été utilisée. En JavaScript, les deux approches sont valables.

+
+ +

La documentation d'Express contient beaucoup d'autres excellents documents sur l'utilisation et l'écriture d'intergiciels Express.

+ +

Servir les fichiers statiques

+ +

Vous pouvez utiliser l'intergiciel express.static pour servir des fichiers statiques, notamment vos images, CSS et JavaScript (static() est la seule fonction de l'intergiciel qui fait réellement partie d'Express). Par exemple, vous utiliserez la ligne ci-dessous pour servir des images, des fichiers CSS et des fichiers JavaScript à partir d'un répertoire nommé 'public' au même niveau que celui où vous appelez node :

+ +
app.use(express.static('public'));
+ +

Tous les fichiers du répertoire public sont servis en ajoutant leur nom de fichier (relatif au répertoire "public" de base) à l'URL de base. Ainsi, par exemple :

+ +
https://localhost:3000/images/dog.jpg
+https://localhost:3000/css/style.css
+https://localhost:3000/js/app.js
+https://localhost:3000/about.html
+ +

Vous pouvez appeler static() plusieurs fois pour servir plusieurs répertoires. Si un fichier ne peut pas être trouvé par une fonction middleware, alors il sera simplement transmis au middleware suivant (l'ordre dans lequel le middleware est appelé est basé sur votre ordre de déclaration).

+ +
app.use(express.static('public'));
+app.use(express.static('media'));
+ +

Vous pouvez également créer un préfixe virtuel pour vos URL statiques, plutôt que de voir les fichiers ajoutés à l'URL de base. Par exemple, ici nous spécifions un chemin de montage pour que les fichiers soient chargés avec le préfixe « /media » :

+ +
app.use('/media', express.static('public'));
+ +

Maintenant, vous pouvez charger les fichiers qui se trouvent dans le répertoire public à partir du préfixe du chemin /media.

+ +
https://localhost:3000/media/images/dog.jpg
+https://localhost:3000/media/video/cat.mp4
+https://localhost:3000/media/cry.mp3
+ +
+

Note : Voir également Servir des fichiers statiques dans Express.

+
+ +

Traitement des erreurs

+ +

Les erreurs sont traitées par une ou plusieurs fonctions spéciales du middleware qui ont quatre arguments, au lieu des trois habituels : (err, req, res, next). Par exemple :

+ +
app.use(function(err, req, res, next) {
+  console.error(err.stack);
+  res.status(500).send("Quelque chose s'est cassé !");
+});
+ +

Ceux-ci peuvent retourner tout contenu nécessaire, mais doivent être appelés après tous les autres app.use() et les appels de routes afin qu'ils soient le dernier middleware dans le processus de traitement des requêtes !

+ +

Express est livré avec un gestionnaire d'erreurs intégré, qui prend en charge toutes les erreurs restantes qui pourraient être rencontrées dans l'application. Cette fonction middleware de gestion des erreurs par défaut est ajoutée à la fin de la pile de fonctions middleware. Si vous passez une erreur à next() et que vous ne la gérez pas dans un gestionnaire d'erreurs, elle sera traitée par le gestionnaire d'erreurs intégré ; l'erreur sera écrite au client avec la trace de la pile.

+ +
+

Note : La trace de la pile n'est pas incluse dans l'environnement de production. Pour exécuter une application serveur Express, la variable d'environnement NODE_ENV doit être définie avec la valeur production.

+
+ +
+

Note : Les codes d'état HTTP 404 et autres « erreurs » ne sont pas traités comme des erreurs. Si vous voulez les gérer, vous pouvez ajouter une fonction middleware pour le faire. Pour plus d'informations, consultez la FAQ.

+
+ +

Pour plus d'informations, voir Gestion des erreurs (docs Express).

+ +

Utilisation des bases de données

+ +

Les apps Express peuvent utiliser tout mécanisme de base de données pris en charge par Node (Express lui-même ne définit aucun comportements/exigences supplémentaire spécifique pour la gestion des bases de données). Il existe de nombreuses options, notamment PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.

+ +

Pour les utiliser, vous devez d'abord installer le pilote de base de données à l'aide de NPM. Par exemple, pour installer le pilote de la populaire base de données NoSQL MongoDB, vous devez utiliser la commande suivante :

+ +
$ npm install mongodb
+ +

La base de données elle-même peut être installée localement ou sur un serveur en nuage. Dans votre code Express, vous avez besoin du pilote, vous vous connectez à la base de données, puis vous effectuez des opérations de création, lecture, mise à jour et suppression (en anglais, on utilise l'acronyme CRUD qui signifie Create, Read, Update, Delete). L'exemple ci-dessous (tiré de la documentation d'Express) montre comment vous pouvez trouver des enregistrements « mammifères » en utilisant MongoDB.

+ +
// cela fonctionne avec les anciennes versions de mongodb version ~ 2.2.33
+const MongoClient = require('mongodb').MongoClient;
+
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
+  if (err) throw err;
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err;
+
+    console.log(result);
+  });
+});
+
+// pour mongodb version 3.0 et supérieure
+const MongoClient = require('mongodb').MongoClient;
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){
+   if(err) throw err;
+
+   let db = client.db('animals');
+   db.collection('mammals').find().toArray(function(err, result){
+     if(err) throw err;
+     console.log(result);
+     client.close();
+   });
+});
+ +

Une autre approche populaire consiste à accéder à votre base de données de manière indirecte, via un mappeur objet-relationnel (« ORM »). Dans cette approche, vous définissez vos données en tant qu'objets ou modèles et l'ORM les met en correspondance avec le format de base de données sous-jacent. L'avantage de cette approche est qu'en tant que développeur, vous pouvez continuer à penser en termes d'objets JavaScript plutôt qu'en termes de sémantique de base de données, et qu'il existe un endroit évident pour effectuer la validation et la vérification des données entrantes. Nous parlerons davantage des bases de données dans un article ultérieur.

+ +

Pour plus d'informations, voir Intégration de base de données (docs Express).

+ +

Rendu des données (vues)

+ +

Les moteurs de modèles (appelés « moteurs de vue » par Express) vous permettent de spécifier la structure d'un document de sortie dans un modèle, en utilisant des espaces réservés pour les données qui seront remplies lorsqu'une page sera générée. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents. Express prend en charge un certain nombre de moteurs de modèles, et il existe une comparaison utile des moteurs les plus populaires ici : Comparaison des moteurs de création de modèles JavaScript : Jade, Mustache, Dust et plus.

+ +

Dans le code des paramètres de votre application, vous définissez le moteur de modèles à utiliser et l'emplacement où Express doit rechercher les modèles à l'aide des paramètres « views » et « view engines », comme indiqué ci-dessous (vous devrez également installer le paquet contenant votre bibliothèque de modèles !)

+ +
const express = require('express');
+const path = require('path');
+const app = express();
+
+// Définir le répertoire contenant les modèles ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Définir le moteur d'affichage à utiliser, dans ce cas 'some_template_engine_name'.
+app.set('view engine', 'some_template_engine_name');
+ +

L'apparence du modèle dépendra du moteur que vous utilisez. En supposant que vous ayez un fichier de modèle nommé « index.<template_extension> » qui contient des espaces réservés pour des variables de données nommées « title » et « message », vous appelleriez Response.render() dans une fonction de gestionnaire de route pour créer et envoyer la réponse HTML :

+ +
app.get('/', function(req, res) {
+  res.render('index', { title: 'À propos des poules', message: 'Elles sont où ?' });
+});
+ +

Pour plus d'informations, voir Utilisation des moteurs de modèles avec Express (docs Express).

+ +

Structure du fichier

+ +

Express ne fait aucune supposition en termes de structure ou de composants que vous utilisez. Les routes, les vues, les fichiers statiques et toute autre logique spécifique à l'application peuvent vivre dans un nombre quelconque de fichiers avec n'importe quelle structure de répertoire. Bien qu'il soit parfaitement possible d'avoir l'ensemble de l'application Express dans un seul fichier, il est généralement judicieux de diviser votre application en fichiers basés sur la fonction (par exemple, gestion de compte, blogs, forums de discussion) et le domaine de problème architectural (par exemple, modèle, vue ou contrôleur si vous utilisez une architecture MVC).

+ +

Dans une prochaine rubrique, nous utiliserons le Générateur d'applications express, qui crée un squelette d'application modulaire que nous pouvons facilement étendre pour créer des applications web.

+ +

Résumé

+ +

Félicitations, vous avez terminé la première étape de votre voyage Express/Node ! Vous devriez maintenant comprendre les principaux avantages d'Express et de Node, et savoir à quoi ressemblent les principales parties d'une application Express (routes, intergiciels, gestion des erreurs et code modèle). Vous devez également comprendre qu'Express étant un framework non autonome, la manière dont vous assemblez ces éléments et les bibliothèques que vous utilisez dépendent largement de vous !

+ +

Bien sûr, Express est délibérément un cadre d'application web très léger, et une grande partie de ses avantages et de son potentiel provient de bibliothèques et de fonctionnalités tierces. Nous les examinerons plus en détail dans les articles suivants. Dans notre prochain article, nous nous pencherons sur la configuration d'un environnement de développement Node, afin que vous puissiez commencer à voir du code Express en action.

+ +

Voir aussi

+ + + +
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.html b/files/fr/learn/server-side/first_steps/client-server_overview/index.html deleted file mode 100644 index 9323086beb..0000000000 --- a/files/fr/learn/server-side/first_steps/client-server_overview/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: La relation Client-Serveur -slug: Learn/Server-side/First_steps/Client-Server_overview -translation_of: Learn/Server-side/First_steps/Client-Server_overview -original_slug: Learn/Server-side/Premiers_pas/Client-Serveur ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
- -

Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.

- - - - - - - - - - - - -
Prérequis :Compréhension basique des notions informatiques et de ce qu'est un serveur web.
Objectif :Comprendre les interactions client-serveur sur un site dynamique et particulièrement quelles opérations devront être effectuées par le code côté serveur.
- -

Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...)   de quel langage de programmation ou framework vous vous servez.

- -

Serveurs Web et HTTP (un avant-goût)

- -

Les navigateurs web communiquent avec les serveurs web avec le protocole HTTP : HyperTextTransfer Protocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (HTTP Request) au serveur.

- -

Cette requête inclut :

- - - -

Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut HTTP Response indiquant si, oui ou non, la requête a abouti. (ex : "200 OK" pour un succés, "404 Not Found" si la ressource ne peut être trouvée, "403 Forbidden" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  GET contiendrait la ressource demandée.

- -

Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.

- -

Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication.

- -

Exemple de requête/réponse GET 

- -

Vous faites une simple requête GET en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.

- -
-

Note : Le format des messsages HTTP est défini par un standard web  (RFC7230). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !

-
- -

La requête

- -

Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( header) et contient beaucoup de données utiles. De la même manière qu'un HTML head contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :

- -
GET https://developer.mozilla.org/en-US/search?q=la+relation+Client+-+serveur&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
-
- -

Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment :

- - - -

La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session :    (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

- -

Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci :

- - - -

Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide.

- -

La réponse

- -

La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes :

- - - -

À la fin du message nous avons le contenu du corps  — lequel contient le "vrai" HTML demandé par la requête.

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

Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( X-Frame-Options: DENY cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une  {{htmlelement("iframe")}} dans un autre site).

- -

Exemple de requête/réponse POST

- -

Un POST HTTP est effectué lorsque vous soumettez un formulaire contenant des données à sauvegarder sur le serveur.

- -

La requête

- -

Le texte ci-dessous montre une requête HTTP faite quand un utlisateur soumet un nouveaux profil sur ce site. Le format de la requête est presque le même que celui de la requête GET vue précédemment, bien que la première ligne identifie cette requête comme un 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 principale différence est que l'URL ne comporte pas de paramètres.  Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec  &user-fullname=Hamish+Willee).

- -

La réponse

- -

La réponse à la requête est expliquée dessous. Le statut "302 Found" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ  Location. L'information est donc en cela similaire à une réponse de requête 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
-
- -
-

Note : Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application Fiddler , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. Websniffer, Wireshark) ou des extensions de navigateur comme  HttpFox. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le Network Monitor dans Firefox).

-
- -

Les sites statiques

- -

Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  /static/myproduct1.html, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : myproduct2.html) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..

- -
-

Note : Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.

-
- -

Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.

- -

A simplified diagram of a static web server.

- -

Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP GET spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  HTTP Response status code ( statut codé de la réponse HTTP) qui est  "200 OK" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "404 Not Found"  si le fichier est absent sur le serveur , ou bien "301 Moved Permanently" si le fichier existe mais a été déplacé vers une nouvelle localisation.

- -

Le serveur d'un site statique n'aura à faire face qu'à des requêtes  GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). 

- -

Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière.

- -

Les sites dynamiques

- -

Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière).  Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP GET pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :

- -

Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée.

- -

Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.

- -

Anatomie d'un requête dynamique

- -

Cette section présente une vue d'ensemble du cycle dynamique HTTP de requête/réponse, construit avec ce que nous avons vu précédemment avec de plus amples détails. Toujours dans l'optique de "faire les choses en réel" nous utiliserons le contexte du site d'une équipe de sport où l'entraîneur peut sélectionner le nom de l'équipe et le nombre de joueurs dans un formulaire HTML et avoir en retour une suggestion "Meilleure composition" pour le prochain match.

- -

Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.

- -

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

- -

Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:

- -
    -
  1. Le navigateur Web crée une requête HTTP GET au serveur en utilisant l’URL de base de la ressource (/ best) et en codant l’équipe et le numéro du joueur sous forme de paramètres d’URL (par exemple / best? team=my_team_name&show = 11) ou dans le cadre de l’URL modèle (par exemple / best / my_team_name / 11 /). Une requête GET est utilisée car la requête extrait uniquement des données (sans les modifier).
    2. -
  2. Le serveur Web détecte que la demande est "dynamique" et la transmet à l'application Web pour traitement (le serveur Web détermine comment gérer différentes URL en fonction des règles de correspondance de modèle définies dans sa configuration).
    3. -
  3. L'application Web identifie l'objectif de la demande d'obtenir la "meilleure liste d'équipes" en fonction de l'URL (/ best /) et recherche le nom d'équipe requis et le nombre de joueurs à partir de l'URL. L'application Web obtient alors les informations requises de la base de données (en utilisant des paramètres "internes" supplémentaires pour définir quels joueurs sont les "meilleurs", et éventuellement en obtenant également l'identité de l'entraîneur connecté à partir d'un cookie côté client).
    4. -
  4. L'application Web crée dynamiquement une page HTML en plaçant les données (de la base de données) dans des espaces réservés dans un modèle HTML.
    5. -
  5. L'application Web renvoie le code HTML généré au navigateur Web (via le serveur Web), ainsi qu'un code d'état HTTP de 200 ("success"). Si quoi que ce soit empêche le code HTML d'être renvoyé, l'application Web renvoie un autre code, par exemple "404" pour indiquer que l'équipe n'existe pas.
    6. -
  6. Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).
    7. -
  7. Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).
    8. -
- -

Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.

- -

que faire d'autre?

- -

Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations.

- -

Renvoyer autre chose que  du HTML

- -

Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.).

- -

Les frameworks Web simplifient la programmation Web côté serveur

- -

Les infrastructures Web côté serveur facilitent beaucoup la rédaction de code permettant de gérer les opérations décrites ci-dessus.L’une des opérations les plus importantes qu’ils effectuent consiste à fournir des mécanismes simples pour mapper les URL de différentes ressources / pages à des fonctions de gestionnaire spécifiques. Cela facilite la séparation du code associé à chaque type de ressource. Cela présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière à un endroit, sans avoir à changer la fonction de gestionnaire.Par exemple, considérons le code Django (Python) suivant qui mappe deux modèles d'URL à deux fonctions d'affichage. Le premier modèle garantit qu'une requête HTTP avec une URL de ressource / best sera transmise à une fonction nommée index () dans le module views. Une demande qui a pour motif "/ best / junior" sera plutôt transmise à la fonction d'affichage 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),
-]
- -
-

Note : Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".

-
- -
L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.
- -
L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du  double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.
- -
- -
#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)
-
- -

Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article.

- -

Summary

- -

À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela.

- -

Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.

- -

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.md b/files/fr/learn/server-side/first_steps/client-server_overview/index.md new file mode 100644 index 0000000000..9323086beb --- /dev/null +++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.md @@ -0,0 +1,317 @@ +--- +title: La relation Client-Serveur +slug: Learn/Server-side/First_steps/Client-Server_overview +translation_of: Learn/Server-side/First_steps/Client-Server_overview +original_slug: Learn/Server-side/Premiers_pas/Client-Serveur +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.

+ + + + + + + + + + + + +
Prérequis :Compréhension basique des notions informatiques et de ce qu'est un serveur web.
Objectif :Comprendre les interactions client-serveur sur un site dynamique et particulièrement quelles opérations devront être effectuées par le code côté serveur.
+ +

Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...)   de quel langage de programmation ou framework vous vous servez.

+ +

Serveurs Web et HTTP (un avant-goût)

+ +

Les navigateurs web communiquent avec les serveurs web avec le protocole HTTP : HyperTextTransfer Protocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (HTTP Request) au serveur.

+ +

Cette requête inclut :

+ + + +

Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut HTTP Response indiquant si, oui ou non, la requête a abouti. (ex : "200 OK" pour un succés, "404 Not Found" si la ressource ne peut être trouvée, "403 Forbidden" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  GET contiendrait la ressource demandée.

+ +

Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.

+ +

Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication.

+ +

Exemple de requête/réponse GET 

+ +

Vous faites une simple requête GET en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.

+ +
+

Note : Le format des messsages HTTP est défini par un standard web  (RFC7230). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !

+
+ +

La requête

+ +

Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( header) et contient beaucoup de données utiles. De la même manière qu'un HTML head contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :

+ +
GET https://developer.mozilla.org/en-US/search?q=la+relation+Client+-+serveur&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
+
+ +

Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment :

+ + + +

La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session :    (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

+ +

Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci :

+ + + +

Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide.

+ +

La réponse

+ +

La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes :

+ + + +

À la fin du message nous avons le contenu du corps  — lequel contient le "vrai" HTML demandé par la requête.

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

Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( X-Frame-Options: DENY cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une  {{htmlelement("iframe")}} dans un autre site).

+ +

Exemple de requête/réponse POST

+ +

Un POST HTTP est effectué lorsque vous soumettez un formulaire contenant des données à sauvegarder sur le serveur.

+ +

La requête

+ +

Le texte ci-dessous montre une requête HTTP faite quand un utlisateur soumet un nouveaux profil sur ce site. Le format de la requête est presque le même que celui de la requête GET vue précédemment, bien que la première ligne identifie cette requête comme un 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 principale différence est que l'URL ne comporte pas de paramètres.  Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec  &user-fullname=Hamish+Willee).

+ +

La réponse

+ +

La réponse à la requête est expliquée dessous. Le statut "302 Found" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ  Location. L'information est donc en cela similaire à une réponse de requête 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
+
+ +
+

Note : Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application Fiddler , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. Websniffer, Wireshark) ou des extensions de navigateur comme  HttpFox. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le Network Monitor dans Firefox).

+
+ +

Les sites statiques

+ +

Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  /static/myproduct1.html, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : myproduct2.html) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..

+ +
+

Note : Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.

+
+ +

Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.

+ +

A simplified diagram of a static web server.

+ +

Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP GET spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  HTTP Response status code ( statut codé de la réponse HTTP) qui est  "200 OK" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "404 Not Found"  si le fichier est absent sur le serveur , ou bien "301 Moved Permanently" si le fichier existe mais a été déplacé vers une nouvelle localisation.

+ +

Le serveur d'un site statique n'aura à faire face qu'à des requêtes  GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). 

+ +

Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière.

+ +

Les sites dynamiques

+ +

Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière).  Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP GET pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :

+ +

Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée.

+ +

Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.

+ +

Anatomie d'un requête dynamique

+ +

Cette section présente une vue d'ensemble du cycle dynamique HTTP de requête/réponse, construit avec ce que nous avons vu précédemment avec de plus amples détails. Toujours dans l'optique de "faire les choses en réel" nous utiliserons le contexte du site d'une équipe de sport où l'entraîneur peut sélectionner le nom de l'équipe et le nombre de joueurs dans un formulaire HTML et avoir en retour une suggestion "Meilleure composition" pour le prochain match.

+ +

Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.

+ +

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

+ +

Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:

+ +
    +
  1. Le navigateur Web crée une requête HTTP GET au serveur en utilisant l’URL de base de la ressource (/ best) et en codant l’équipe et le numéro du joueur sous forme de paramètres d’URL (par exemple / best? team=my_team_name&show = 11) ou dans le cadre de l’URL modèle (par exemple / best / my_team_name / 11 /). Une requête GET est utilisée car la requête extrait uniquement des données (sans les modifier).
    2. +
  2. Le serveur Web détecte que la demande est "dynamique" et la transmet à l'application Web pour traitement (le serveur Web détermine comment gérer différentes URL en fonction des règles de correspondance de modèle définies dans sa configuration).
    3. +
  3. L'application Web identifie l'objectif de la demande d'obtenir la "meilleure liste d'équipes" en fonction de l'URL (/ best /) et recherche le nom d'équipe requis et le nombre de joueurs à partir de l'URL. L'application Web obtient alors les informations requises de la base de données (en utilisant des paramètres "internes" supplémentaires pour définir quels joueurs sont les "meilleurs", et éventuellement en obtenant également l'identité de l'entraîneur connecté à partir d'un cookie côté client).
    4. +
  4. L'application Web crée dynamiquement une page HTML en plaçant les données (de la base de données) dans des espaces réservés dans un modèle HTML.
    5. +
  5. L'application Web renvoie le code HTML généré au navigateur Web (via le serveur Web), ainsi qu'un code d'état HTTP de 200 ("success"). Si quoi que ce soit empêche le code HTML d'être renvoyé, l'application Web renvoie un autre code, par exemple "404" pour indiquer que l'équipe n'existe pas.
    6. +
  6. Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).
    7. +
  7. Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).
    8. +
+ +

Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.

+ +

que faire d'autre?

+ +

Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations.

+ +

Renvoyer autre chose que  du HTML

+ +

Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.).

+ +

Les frameworks Web simplifient la programmation Web côté serveur

+ +

Les infrastructures Web côté serveur facilitent beaucoup la rédaction de code permettant de gérer les opérations décrites ci-dessus.L’une des opérations les plus importantes qu’ils effectuent consiste à fournir des mécanismes simples pour mapper les URL de différentes ressources / pages à des fonctions de gestionnaire spécifiques. Cela facilite la séparation du code associé à chaque type de ressource. Cela présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière à un endroit, sans avoir à changer la fonction de gestionnaire.Par exemple, considérons le code Django (Python) suivant qui mappe deux modèles d'URL à deux fonctions d'affichage. Le premier modèle garantit qu'une requête HTTP avec une URL de ressource / best sera transmise à une fonction nommée index () dans le module views. Une demande qui a pour motif "/ best / junior" sera plutôt transmise à la fonction d'affichage 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),
+]
+ +
+

Note : Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".

+
+ +
L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.
+ +
L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du  double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.
+ +
+ +
#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)
+
+ +

Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article.

+ +

Summary

+ +

À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela.

+ +

Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/first_steps/index.html b/files/fr/learn/server-side/first_steps/index.html deleted file mode 100644 index cb79ff0b9a..0000000000 --- a/files/fr/learn/server-side/first_steps/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Premiers pas dans la programmation d'un site côté serveur -slug: Learn/Server-side/First_steps -tags: - - Débutant - - Encodage - - Guide - - Intro - - Programmation côté serveur -translation_of: Learn/Server-side/First_steps -original_slug: Learn/Server-side/Premiers_pas ---- -
{{LearnSidebar}}
- -

Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.   

- -

Prérequis

- -

Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.

- -

Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :

- - - -

Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.

- -

Guides

- -
-
Introduction au côté serveur
-
Bienvenue au cours de programmation débutant de MDN ! Dans ce premier article, nous examinerons la programmation côté serveur, répondant à des questions comme «En quoi consiste-t-elle ?», «En quoi diffère-t-elle de la programmation côté client ?» et «Pourquoi est-ce si utile ?». Après avoir lu cet article, vous comprendrez comment la programmation côté serveur donne aux sites web toute leur puissance.
-
Présentation client-serveur
-
Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.
-
Frameworks web côté serveur
-
Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
-
Sécurité de votre site web
-
La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
-
- -

Évaluations

- -

Ce module "aperçu" n'a aucune évaluation car nous ne vous avons pas encore montré de code. Nous espérons à ce stade que vous avez une bonne compréhension des types de fonctionnalités que vous pouvez fournir en utilisant la programmation côté serveur et que vous avez pris une décision quant à l'infrastructure web côté serveur que vous utiliserez pour créer votre premier site web.

diff --git a/files/fr/learn/server-side/first_steps/index.md b/files/fr/learn/server-side/first_steps/index.md new file mode 100644 index 0000000000..cb79ff0b9a --- /dev/null +++ b/files/fr/learn/server-side/first_steps/index.md @@ -0,0 +1,46 @@ +--- +title: Premiers pas dans la programmation d'un site côté serveur +slug: Learn/Server-side/First_steps +tags: + - Débutant + - Encodage + - Guide + - Intro + - Programmation côté serveur +translation_of: Learn/Server-side/First_steps +original_slug: Learn/Server-side/Premiers_pas +--- +
{{LearnSidebar}}
+ +

Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.   

+ +

Prérequis

+ +

Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.

+ +

Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :

+ + + +

Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.

+ +

Guides

+ +
+
Introduction au côté serveur
+
Bienvenue au cours de programmation débutant de MDN ! Dans ce premier article, nous examinerons la programmation côté serveur, répondant à des questions comme «En quoi consiste-t-elle ?», «En quoi diffère-t-elle de la programmation côté client ?» et «Pourquoi est-ce si utile ?». Après avoir lu cet article, vous comprendrez comment la programmation côté serveur donne aux sites web toute leur puissance.
+
Présentation client-serveur
+
Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.
+
Frameworks web côté serveur
+
Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
+
Sécurité de votre site web
+
La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
+
+ +

Évaluations

+ +

Ce module "aperçu" n'a aucune évaluation car nous ne vous avons pas encore montré de code. Nous espérons à ce stade que vous avez une bonne compréhension des types de fonctionnalités que vous pouvez fournir en utilisant la programmation côté serveur et que vous avez pris une décision quant à l'infrastructure web côté serveur que vous utiliserez pour créer votre premier site web.

diff --git a/files/fr/learn/server-side/first_steps/introduction/index.html b/files/fr/learn/server-side/first_steps/introduction/index.html deleted file mode 100644 index 8a3337f276..0000000000 --- a/files/fr/learn/server-side/first_steps/introduction/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Présentation du côté serveur -slug: Learn/Server-side/First_steps/Introduction -tags: - - Apprendre - - Débutant - - Guide - - Intro - - Programmation côté serveur - - Serveur -translation_of: Learn/Server-side/First_steps/Introduction -original_slug: Learn/Server-side/Premiers_pas/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
- -

Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique. Une compréhension de base de ce qu'est un serveur web.
Objectif:Se familiariser avec la programmation côté serveur, ce qu'elle peut faire, et en quoi elle diffère de la programmation côté client.
- -

La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). 

- -

L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.

- -

Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur.

- -

Dans le monde moderne du développement web, apprendre le développement côté serveur est fortement recommandé.

- -

Qu'est-ce que la programmation côté serveur?

- -

Les navigateurs web communiquent avec les serveurs web en utilisant le protocole {{glossary("HTTP")}} (HyperText Transfer Protocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une requête HTTP est envoyée du navigateur au serveur cible.

- -

Une requête inclut une URL pour identifier la ressource demandée, une méthode pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans les paramètres de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — query string en anglais), les données POST (données envoyées par la méthode HTTP POST), ou les {{glossary("Cookie", "cookies associés")}}.

- -

Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une réponse HTTP. La réponse contient un statut qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). 

- -

Le corps de la réponse, si la requête réussit, contient alors la ressource demandée (comme une page HTML, une image, etc...), que le navigateur web peut alors afficher.

- -

Sites statiques

- -

Le diagramme ci-dessous montre l'architecture d'un serveur web basique pour un site statique (un site statique est un site qui renvoie du contenu codé en dur, c'est à dire le contenu d'un fichier, quand une ressource donnée est demandée). Quand un utilisateur veut naviguer sur une page, le navigateur envoie une requête HTTP "GET" spécifiant son URL.

- -

Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le statut de la réponse (habituellement, 200 OK). Si le fichier ne peut pas être recupéré pour une raison x ou y, le statut d'erreur est retourné (voir réponses d'erreur client et réponse d'erreur serveur).

- -

A simplified diagram of a static web server.

- -

Sites dynamiques

- -

Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées dynamiquement, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). 

- -

Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.

- -

La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "programmation côté serveur" (ou parfois "codage back-end").

- -

Le diagramme ci-dessous montre une architecture simple pour un site web dynamique. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées.

- -

Les requêtes pour les ressources statiques sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF 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.

- -

Les requêtes pour les ressources dynamiques, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme Web Application). Le serveur interprète la requête, lit les informations correspondantes dans la base de données (3), combine les données récupérées avec les templates HTML (4), et renvoie la réponse avec le HTML généré (5,6). 

- -
-

La programmation côté serveur c'est pareil que côté client?

-
- -

Voyons maintenant le code impliqué dans la programmation côté serveur et côté client. Dans chaque cas, le code est significativement différent :

- - - -

Le code exécuté par le navigateur est connu sous le nom de code côté client (ou front-end) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.

- -

Le code client est écrit en HTML, CSS, et JavaScript — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).

- -

Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web  — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.

- -

Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.

- -

Typiquement, les développeurs écrivent leur code en utilisant des frameworks web. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier.

- -

Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).

- -
-

Note : Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.

- -

En revanche, vous ne penseriez presque jamais à écrire les composants côté serveur d'une application web sans framework — implémenter des fonctionnalités vitales comme un serveur HTTP est très difficile à faire à partir de rien, comme disons en Python, alors que les frameworks web Python comme Django le fournissent tout prêt à l'emploi, accompagné d'autres outils très utiles.

-
- -
-

Que peut-on faire côté serveur?

- -

La programmation côté serveur est très utile parce qu'elle nous permet de délivrer efficacement de l'information taillée sur mesure pour l'utilisateur et ainsi créer une bien meilleure expérience utilisateur.

-
- -

Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc.

- -

Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.

- -

Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements :

- -

Stockage et distribution de l'information plus efficaces

- -

Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.

- -

La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).

- -

Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit.

- -

Comme les informations se trouvent dans une base de données, elles peuvent également être partagées et mises à jour plus facilement avec d'autres systèmes (par exemple, quand des produits sont vendus en ligne ou dans un magasin, le magasin peut mettre à jour son inventaire).

- -
-

Note : Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:

- -
    -
  1. Allez sur Amazon ou tout autre site e-commerce.
    2. -
  2. Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. 
    3. -
  3. Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données.
    4. -
- -

Pour un terme de recherche courant  ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.

-
- -

Expérience utilisateur personnalisée

- -

Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.

- -

Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.

- -
-

Note : Google Maps sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.

- -

Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.

- -
    -
  1.  Allez sur Google.
    2. -
  2.  Recherchez "football".
    3. -
  3.  Maintenant tapez "favoris" dans la barre de recherche et regardez les prédictions de recherche de l'autocomplete.
    4. -
- -

Coïncidence ? Nada!

-
- -

Accès contrôlé au contenu

- -

La programmation côté serveur permet aux sites de restreindre l'accès aux utilisateurs autorisés et de ne servir que les informations qu'un utilisateur à la permission de voir.

- -

Quelques exemples du monde réel incluent :

- - - -
-

Note : Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?

-
- -

Stocker les informations de session/d'état

- -

La programmation côté serveur permet aux développeurs d'utiliser des sessions — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.

- -

Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.

- -
-

Note : Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple The Age). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.

-
- -

Notifications et communication

- -

Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.

- -

Quelques exemples incluent :

- - - -
-

Note : Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.

-
- -

Analyse des données

- -

Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données.

- -

Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.

- -
-

Note : Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.

- -

Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !

-
- -

Sommaire

- -

Félicitations, vous avez atteint la fin du premier article sur la programmation côté serveur. 

- -

Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler quelle information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur).

- -

Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information efficacement, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.

- -

Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.

- -

Dans un futur article,  nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.

- -

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/first_steps/introduction/index.md b/files/fr/learn/server-side/first_steps/introduction/index.md new file mode 100644 index 0000000000..8a3337f276 --- /dev/null +++ b/files/fr/learn/server-side/first_steps/introduction/index.md @@ -0,0 +1,235 @@ +--- +title: Présentation du côté serveur +slug: Learn/Server-side/First_steps/Introduction +tags: + - Apprendre + - Débutant + - Guide + - Intro + - Programmation côté serveur + - Serveur +translation_of: Learn/Server-side/First_steps/Introduction +original_slug: Learn/Server-side/Premiers_pas/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique. Une compréhension de base de ce qu'est un serveur web.
Objectif:Se familiariser avec la programmation côté serveur, ce qu'elle peut faire, et en quoi elle diffère de la programmation côté client.
+ +

La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). 

+ +

L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.

+ +

Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur.

+ +

Dans le monde moderne du développement web, apprendre le développement côté serveur est fortement recommandé.

+ +

Qu'est-ce que la programmation côté serveur?

+ +

Les navigateurs web communiquent avec les serveurs web en utilisant le protocole {{glossary("HTTP")}} (HyperText Transfer Protocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une requête HTTP est envoyée du navigateur au serveur cible.

+ +

Une requête inclut une URL pour identifier la ressource demandée, une méthode pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans les paramètres de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — query string en anglais), les données POST (données envoyées par la méthode HTTP POST), ou les {{glossary("Cookie", "cookies associés")}}.

+ +

Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une réponse HTTP. La réponse contient un statut qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). 

+ +

Le corps de la réponse, si la requête réussit, contient alors la ressource demandée (comme une page HTML, une image, etc...), que le navigateur web peut alors afficher.

+ +

Sites statiques

+ +

Le diagramme ci-dessous montre l'architecture d'un serveur web basique pour un site statique (un site statique est un site qui renvoie du contenu codé en dur, c'est à dire le contenu d'un fichier, quand une ressource donnée est demandée). Quand un utilisateur veut naviguer sur une page, le navigateur envoie une requête HTTP "GET" spécifiant son URL.

+ +

Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le statut de la réponse (habituellement, 200 OK). Si le fichier ne peut pas être recupéré pour une raison x ou y, le statut d'erreur est retourné (voir réponses d'erreur client et réponse d'erreur serveur).

+ +

A simplified diagram of a static web server.

+ +

Sites dynamiques

+ +

Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées dynamiquement, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). 

+ +

Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.

+ +

La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "programmation côté serveur" (ou parfois "codage back-end").

+ +

Le diagramme ci-dessous montre une architecture simple pour un site web dynamique. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées.

+ +

Les requêtes pour les ressources statiques sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF 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.

+ +

Les requêtes pour les ressources dynamiques, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme Web Application). Le serveur interprète la requête, lit les informations correspondantes dans la base de données (3), combine les données récupérées avec les templates HTML (4), et renvoie la réponse avec le HTML généré (5,6). 

+ +
+

La programmation côté serveur c'est pareil que côté client?

+
+ +

Voyons maintenant le code impliqué dans la programmation côté serveur et côté client. Dans chaque cas, le code est significativement différent :

+ + + +

Le code exécuté par le navigateur est connu sous le nom de code côté client (ou front-end) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.

+ +

Le code client est écrit en HTML, CSS, et JavaScript — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).

+ +

Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web  — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.

+ +

Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.

+ +

Typiquement, les développeurs écrivent leur code en utilisant des frameworks web. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier.

+ +

Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).

+ +
+

Note : Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.

+ +

En revanche, vous ne penseriez presque jamais à écrire les composants côté serveur d'une application web sans framework — implémenter des fonctionnalités vitales comme un serveur HTTP est très difficile à faire à partir de rien, comme disons en Python, alors que les frameworks web Python comme Django le fournissent tout prêt à l'emploi, accompagné d'autres outils très utiles.

+
+ +
+

Que peut-on faire côté serveur?

+ +

La programmation côté serveur est très utile parce qu'elle nous permet de délivrer efficacement de l'information taillée sur mesure pour l'utilisateur et ainsi créer une bien meilleure expérience utilisateur.

+
+ +

Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc.

+ +

Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.

+ +

Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements :

+ +

Stockage et distribution de l'information plus efficaces

+ +

Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.

+ +

La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).

+ +

Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit.

+ +

Comme les informations se trouvent dans une base de données, elles peuvent également être partagées et mises à jour plus facilement avec d'autres systèmes (par exemple, quand des produits sont vendus en ligne ou dans un magasin, le magasin peut mettre à jour son inventaire).

+ +
+

Note : Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:

+ +
    +
  1. Allez sur Amazon ou tout autre site e-commerce.
    2. +
  2. Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. 
    3. +
  3. Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données.
    4. +
+ +

Pour un terme de recherche courant  ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.

+
+ +

Expérience utilisateur personnalisée

+ +

Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.

+ +

Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.

+ +
+

Note : Google Maps sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.

+ +

Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.

+ +
    +
  1.  Allez sur Google.
    2. +
  2.  Recherchez "football".
    3. +
  3.  Maintenant tapez "favoris" dans la barre de recherche et regardez les prédictions de recherche de l'autocomplete.
    4. +
+ +

Coïncidence ? Nada!

+
+ +

Accès contrôlé au contenu

+ +

La programmation côté serveur permet aux sites de restreindre l'accès aux utilisateurs autorisés et de ne servir que les informations qu'un utilisateur à la permission de voir.

+ +

Quelques exemples du monde réel incluent :

+ + + +
+

Note : Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?

+
+ +

Stocker les informations de session/d'état

+ +

La programmation côté serveur permet aux développeurs d'utiliser des sessions — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.

+ +

Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.

+ +
+

Note : Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple The Age). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.

+
+ +

Notifications et communication

+ +

Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.

+ +

Quelques exemples incluent :

+ + + +
+

Note : Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.

+
+ +

Analyse des données

+ +

Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données.

+ +

Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.

+ +
+

Note : Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.

+ +

Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !

+
+ +

Sommaire

+ +

Félicitations, vous avez atteint la fin du premier article sur la programmation côté serveur. 

+ +

Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler quelle information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur).

+ +

Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information efficacement, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.

+ +

Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.

+ +

Dans un futur article,  nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.html b/files/fr/learn/server-side/first_steps/web_frameworks/index.html deleted file mode 100644 index ca3f14e2ff..0000000000 --- a/files/fr/learn/server-side/first_steps/web_frameworks/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Les frameworks web côté serveur -slug: Learn/Server-side/First_steps/Web_frameworks -tags: - - Débutant - - Guide - - Server - - Web -translation_of: Learn/Server-side/First_steps/Web_frameworks -original_slug: Learn/Server-side/Premiers_pas/Web_frameworks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
- -

L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.

- - - - - - - - - - - - -
Prérequis :Connaissance informatique de base.
Objectif :Comprendre comment les frameworks simplifient le développement/la maintenance du code côté serveur et vous faire réfléchir à propos de la sélection d'un framework pour votre propre développement.
- -

Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.

- -

Vue d'ensemble

- -

Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.

- -

Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.

- -

Que peut faire un framework web pour vous ?

- -

Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.

- -

Travailler directement avec les requêtes et les réponses HTTP

- -

Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.

- -

L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne).

- -
# 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')
-
- -

Acheminer les requettes au gestionnaire approprié

- -

La plupart des sites fournissent un certain nombre de ressources différentes, accessibles via des URL distinctes. Il est difficile de gérer toutes ces fonctions en une seule fois. Par conséquent, les infrastructures web fournissent des mécanismes simples pour mapper les modèles d'URL vers des fonctions de gestionnaire spécifiques. Cette approche présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière sans avoir à modifier le code sous-jacent.

- -

Différents frameworks utilisent différents mécanismes pour la cartographie. Par exemple, l'infrastructure web Flask (Python) ajoute des itinéraires pour afficher les fonctions à l'aide d'un décorateur.

- -
@app.route("/")
-def hello():
-    return "Hello World!"
- -

Alors que Django attend des développeurs qu'ils définissent une liste de mappages d'URL entre un modèle d'URL et une fonction d'affichage.

- -
urlpatterns = [
-    url(r'^$', views.index),
-    # example: /best/myteamname/5/
-    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
-]
-
- -

Faciliter l'accès aux données via la requête

- -

Les données peuvent être encodées dans une requête HTTP de différentes manières. Une demande HTTP GET pour obtenir des fichiers ou des données du serveur peut coder les données requises dans les paramètres d'URL ou dans la structure d'URL. Une demande HTTP POST de mise à jour une ressource sur le serveur inclura plutôt les informations de mise à jour en tant que "données POST" dans le corps de la demande. La requête HTTP peut également inclure des informations sur la session ou l'utilisateur en cours dans un cookie côté client. Les frameworks web fournissent des mécanismes appropriés au langage de programmation pour accéder à ces informations. Par exemple, l'objet HttpRequest que Django transmet à chaque fonction d'affichage contient des méthodes et des propriétés permettant d'accéder à l'URL cible, le type de demande (par exemple, un HTTP GET), les paramètres GET ou POST, les données de cookie et de session, etc. Django peut également transmettre informations codées dans la structure de l'URL en définissant des "modèles de capture" dans le mappeur d'URL (voir le dernier fragment de code dans la section ci-dessus).

- -

extraction et simplification de l’accès à la base de données

- -

Les sites web utilisent des bases de données pour stocker des informations à partager avec les utilisateurs et sur les utilisateurs. Les infrastructures web fournissent souvent une couche de base de données qui extrait les opérations de lecture, d'écriture, de requête et de suppression de base de données. Cette couche d'extraction est appelée ORM (Object-Relational Mapper).

- -

L'utilisation d'un ORM présente deux avantages :   

- -
    -
  1. Vous pouvez remplacer la base de données sous-jacente sans avoir nécessairement besoin de changer le code qui l'utilise. Cela permet aux développeurs d’optimiser les caractéristiques des différentes bases de données en fonction de leur utilisation.   
    2. -
  2. La validation de base des données peut être mise en œuvre avec le framework. Il est ainsi plus facile et plus sûr de vérifier que les données sont stockées dans le type de champ de base de données approprié, qu’elles ont le format correct (par exemple une adresse électronique) et qu’elles ne sont en aucun cas malveillantes (les pirates peuvent utiliser certains modèles de code pour agir mal, telles que la suppression des enregistrements de la base de données).
    3. -
- -

Par exemple, le framework web Django fournit un ORM et fait référence à l'objet utilisé pour définir la structure d'un enregistrement en tant que modèle. Le modèle spécifie les types de champs à stocker, ce qui peut fournir une validation au niveau du champ sur les informations pouvant être stockées (par exemple, un champ de courrier électronique autoriserait uniquement les adresses de courrier électronique valides). Les définitions de champ peuvent également spécifier leur taille maximale, leurs valeurs par défaut, leurs options de liste de sélection, leur aide pour la documentation, leur libellé pour les formulaires, etc. Le modèle ne spécifie aucune information sur la base de données sous-jacente, il s'agit d'un paramètre de configuration susceptible d'être modifié séparément de notre code.

- -

Le premier extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. Ceci stocke le nom et le niveau de l'équipe en tant que champs de caractères et spécifie un nombre maximal de caractères à stocker pour chaque enregistrement. Team_level étant un champ de choix, nous fournissons également un mappage entre les choix à afficher et les données à stocker, ainsi qu'une valeur par défaut.

- -
#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')
-
- -

Le modèle Django fournit une API de requête simple pour la recherche dans la base de données. Cela peut correspondre à plusieurs champs à la fois en utilisant différents critères (par exemple, exact, insensible à la casse, supérieur à, etc.), et peut prendre en charge des instructions complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'equipe (team name) qui commence par "Fr" ou se termine par "al").

- -

Le deuxième extrait de code montre une fonction d'affichage (gestionnaire de ressources) permettant d'afficher toutes nos équipes U09. Dans ce cas, nous spécifions que nous voulons filtrer tous les enregistrements où le champ team_level a exactement le texte 'U09' (notez dans l exemple ci dessous comment ce critère est transmis à la fonction filter () sous forme d'argument avec le nom du champ et le type de correspondance séparés par un double. underscores: 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)
-
- -
-
- -

Rendering data

- -

Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous permettent de spécifier la structure d'un document de sortie, en utilisant des espaces réservés pour les données qui seront ajoutées lors de la génération d'une page. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents.

- -

Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}.

- -

Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,{{ variable_name }} ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:{% expression %} ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.

- -
-

Note : Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.

-
- -

L'extrait de code ci-dessous montre comment cela fonctionne. En reprenant l'exemple "youngest_teams" de la section précédente, le modèle HTML se voit transmettre par la vue une variable de liste nommée youngest_teams. Dans le squelette HTML, nous avons une expression qui vérifie d'abord si la variable youngest_teams existe, puis itère dans une boucle for. À chaque itération, le modèle affiche la valeur team_name de l'équipe dans un élément de liste.

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

Comment choisir un framework web

- -

Il existe de nombreux frameworks web pour presque tous les langages de programmation que vous souhaitez utiliser (nous énumérons quelques-uns des frameworks les plus populaires dans la section suivante). Avec autant de choix, il peut devenir difficile de déterminer quel framework constitue le meilleur point de départ pour votre nouvelle application web.

- -

Certains des facteurs qui peuvent affecter votre décision sont les suivants:

- - - -

Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc.

- -

Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.

- -
-

Note : Let's go to the main websites for Django (Python) and Express (Node/JavaScript) and check out their documentation and community.

- -
    -
  1. Navigate to the main sites (linked above) -
      -
    • Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started".
      • -
    • Can you see topics showing how to set up URL routing, templates, and databases/models?
      • -
    • Are the documents clear?
      • -
    -
    2. -
  2. Navigate to mailing lists for each site (accessible from Community links). -
      -
    • How many questions have been posted in the last few days
      • -
    • How many have responses?
      • -
    • Do they have an active community?
      • -
    -
    3. -
-
- -

A few good web frameworks?

- -

Let's now move on, and discuss a few specific server-side web frameworks.

- -

The server-side frameworks below represent a few of the most popular available at the time of writing. All of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. There are many other great server-side frameworks that you can discover using a basic internet search.

- -
-

Note : Descriptions come (partially) from the framework websites!

-
- -

Django (Python)

- -

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

- -

Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.

- -

Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

- -

Flask (Python)

- -

Flask is a microframework for Python.

- -

While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for Jinja2 templating, secure cookies, unit testing, and RESTful request dispatching. It has good documentation and an active community.

- -

Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a Raspberry Pi, Drone controllers, etc.)

- -

Express (Node.js/JavaScript)

- -

Express is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and middleware.

- -

Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request).

- -

Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose!

- -

Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN, and Sails.

- -

A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided here).

- -

Ruby on Rails (Ruby)

- -

Rails (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language.

- -

Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others.

- -

There are of course many differences due to specific design decisions and the nature of the languages.

- -

Rails has been used for high profile sites, including: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

- -

Laravel (PHP)

- -

Laravel is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as:

- - - -

Laravel is accessible, yet powerful, providing tools needed for large, robust applications.

- -

ASP.NET

- -

ASP.NET is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications.

- -

One of the differentiators for ASP.NET is that it is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.

- -

ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others.

- -

Mojolicious (Perl)

- -

Mojolicious is a next generation web framework for the Perl programming language.

- -

Back in the early days of the web, many people learned Perl because of a wonderful Perl library called CGI. It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies.

- -

Some of the features provided by Mojolicious are: Real-time web framework, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/PSGI detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source.

- -

Summary

- -

This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.

- -

For the next article in this module we'll change direction slightly and consider web security.

- -

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.md b/files/fr/learn/server-side/first_steps/web_frameworks/index.md new file mode 100644 index 0000000000..ca3f14e2ff --- /dev/null +++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.md @@ -0,0 +1,307 @@ +--- +title: Les frameworks web côté serveur +slug: Learn/Server-side/First_steps/Web_frameworks +tags: + - Débutant + - Guide + - Server + - Web +translation_of: Learn/Server-side/First_steps/Web_frameworks +original_slug: Learn/Server-side/Premiers_pas/Web_frameworks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
+ +

L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.

+ + + + + + + + + + + + +
Prérequis :Connaissance informatique de base.
Objectif :Comprendre comment les frameworks simplifient le développement/la maintenance du code côté serveur et vous faire réfléchir à propos de la sélection d'un framework pour votre propre développement.
+ +

Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.

+ +

Vue d'ensemble

+ +

Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.

+ +

Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.

+ +

Que peut faire un framework web pour vous ?

+ +

Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.

+ +

Travailler directement avec les requêtes et les réponses HTTP

+ +

Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.

+ +

L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne).

+ +
# 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')
+
+ +

Acheminer les requettes au gestionnaire approprié

+ +

La plupart des sites fournissent un certain nombre de ressources différentes, accessibles via des URL distinctes. Il est difficile de gérer toutes ces fonctions en une seule fois. Par conséquent, les infrastructures web fournissent des mécanismes simples pour mapper les modèles d'URL vers des fonctions de gestionnaire spécifiques. Cette approche présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière sans avoir à modifier le code sous-jacent.

+ +

Différents frameworks utilisent différents mécanismes pour la cartographie. Par exemple, l'infrastructure web Flask (Python) ajoute des itinéraires pour afficher les fonctions à l'aide d'un décorateur.

+ +
@app.route("/")
+def hello():
+    return "Hello World!"
+ +

Alors que Django attend des développeurs qu'ils définissent une liste de mappages d'URL entre un modèle d'URL et une fonction d'affichage.

+ +
urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
+]
+
+ +

Faciliter l'accès aux données via la requête

+ +

Les données peuvent être encodées dans une requête HTTP de différentes manières. Une demande HTTP GET pour obtenir des fichiers ou des données du serveur peut coder les données requises dans les paramètres d'URL ou dans la structure d'URL. Une demande HTTP POST de mise à jour une ressource sur le serveur inclura plutôt les informations de mise à jour en tant que "données POST" dans le corps de la demande. La requête HTTP peut également inclure des informations sur la session ou l'utilisateur en cours dans un cookie côté client. Les frameworks web fournissent des mécanismes appropriés au langage de programmation pour accéder à ces informations. Par exemple, l'objet HttpRequest que Django transmet à chaque fonction d'affichage contient des méthodes et des propriétés permettant d'accéder à l'URL cible, le type de demande (par exemple, un HTTP GET), les paramètres GET ou POST, les données de cookie et de session, etc. Django peut également transmettre informations codées dans la structure de l'URL en définissant des "modèles de capture" dans le mappeur d'URL (voir le dernier fragment de code dans la section ci-dessus).

+ +

extraction et simplification de l’accès à la base de données

+ +

Les sites web utilisent des bases de données pour stocker des informations à partager avec les utilisateurs et sur les utilisateurs. Les infrastructures web fournissent souvent une couche de base de données qui extrait les opérations de lecture, d'écriture, de requête et de suppression de base de données. Cette couche d'extraction est appelée ORM (Object-Relational Mapper).

+ +

L'utilisation d'un ORM présente deux avantages :   

+ +
    +
  1. Vous pouvez remplacer la base de données sous-jacente sans avoir nécessairement besoin de changer le code qui l'utilise. Cela permet aux développeurs d’optimiser les caractéristiques des différentes bases de données en fonction de leur utilisation.   
    2. +
  2. La validation de base des données peut être mise en œuvre avec le framework. Il est ainsi plus facile et plus sûr de vérifier que les données sont stockées dans le type de champ de base de données approprié, qu’elles ont le format correct (par exemple une adresse électronique) et qu’elles ne sont en aucun cas malveillantes (les pirates peuvent utiliser certains modèles de code pour agir mal, telles que la suppression des enregistrements de la base de données).
    3. +
+ +

Par exemple, le framework web Django fournit un ORM et fait référence à l'objet utilisé pour définir la structure d'un enregistrement en tant que modèle. Le modèle spécifie les types de champs à stocker, ce qui peut fournir une validation au niveau du champ sur les informations pouvant être stockées (par exemple, un champ de courrier électronique autoriserait uniquement les adresses de courrier électronique valides). Les définitions de champ peuvent également spécifier leur taille maximale, leurs valeurs par défaut, leurs options de liste de sélection, leur aide pour la documentation, leur libellé pour les formulaires, etc. Le modèle ne spécifie aucune information sur la base de données sous-jacente, il s'agit d'un paramètre de configuration susceptible d'être modifié séparément de notre code.

+ +

Le premier extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. Ceci stocke le nom et le niveau de l'équipe en tant que champs de caractères et spécifie un nombre maximal de caractères à stocker pour chaque enregistrement. Team_level étant un champ de choix, nous fournissons également un mappage entre les choix à afficher et les données à stocker, ainsi qu'une valeur par défaut.

+ +
#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')
+
+ +

Le modèle Django fournit une API de requête simple pour la recherche dans la base de données. Cela peut correspondre à plusieurs champs à la fois en utilisant différents critères (par exemple, exact, insensible à la casse, supérieur à, etc.), et peut prendre en charge des instructions complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'equipe (team name) qui commence par "Fr" ou se termine par "al").

+ +

Le deuxième extrait de code montre une fonction d'affichage (gestionnaire de ressources) permettant d'afficher toutes nos équipes U09. Dans ce cas, nous spécifions que nous voulons filtrer tous les enregistrements où le champ team_level a exactement le texte 'U09' (notez dans l exemple ci dessous comment ce critère est transmis à la fonction filter () sous forme d'argument avec le nom du champ et le type de correspondance séparés par un double. underscores: 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)
+
+ +
+
+ +

Rendering data

+ +

Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous permettent de spécifier la structure d'un document de sortie, en utilisant des espaces réservés pour les données qui seront ajoutées lors de la génération d'une page. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents.

+ +

Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}.

+ +

Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,{{ variable_name }} ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:{% expression %} ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.

+ +
+

Note : Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.

+
+ +

L'extrait de code ci-dessous montre comment cela fonctionne. En reprenant l'exemple "youngest_teams" de la section précédente, le modèle HTML se voit transmettre par la vue une variable de liste nommée youngest_teams. Dans le squelette HTML, nous avons une expression qui vérifie d'abord si la variable youngest_teams existe, puis itère dans une boucle for. À chaque itération, le modèle affiche la valeur team_name de l'équipe dans un élément de liste.

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

Comment choisir un framework web

+ +

Il existe de nombreux frameworks web pour presque tous les langages de programmation que vous souhaitez utiliser (nous énumérons quelques-uns des frameworks les plus populaires dans la section suivante). Avec autant de choix, il peut devenir difficile de déterminer quel framework constitue le meilleur point de départ pour votre nouvelle application web.

+ +

Certains des facteurs qui peuvent affecter votre décision sont les suivants:

+ + + +

Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc.

+ +

Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.

+ +
+

Note : Let's go to the main websites for Django (Python) and Express (Node/JavaScript) and check out their documentation and community.

+ +
    +
  1. Navigate to the main sites (linked above) +
      +
    • Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started".
      • +
    • Can you see topics showing how to set up URL routing, templates, and databases/models?
      • +
    • Are the documents clear?
      • +
    +
    2. +
  2. Navigate to mailing lists for each site (accessible from Community links). +
      +
    • How many questions have been posted in the last few days
      • +
    • How many have responses?
      • +
    • Do they have an active community?
      • +
    +
    3. +
+
+ +

A few good web frameworks?

+ +

Let's now move on, and discuss a few specific server-side web frameworks.

+ +

The server-side frameworks below represent a few of the most popular available at the time of writing. All of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. There are many other great server-side frameworks that you can discover using a basic internet search.

+ +
+

Note : Descriptions come (partially) from the framework websites!

+
+ +

Django (Python)

+ +

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

+ +

Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.

+ +

Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

+ +

Flask (Python)

+ +

Flask is a microframework for Python.

+ +

While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for Jinja2 templating, secure cookies, unit testing, and RESTful request dispatching. It has good documentation and an active community.

+ +

Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a Raspberry Pi, Drone controllers, etc.)

+ +

Express (Node.js/JavaScript)

+ +

Express is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and middleware.

+ +

Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request).

+ +

Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose!

+ +

Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN, and Sails.

+ +

A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided here).

+ +

Ruby on Rails (Ruby)

+ +

Rails (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language.

+ +

Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others.

+ +

There are of course many differences due to specific design decisions and the nature of the languages.

+ +

Rails has been used for high profile sites, including: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

+ +

Laravel (PHP)

+ +

Laravel is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as:

+ + + +

Laravel is accessible, yet powerful, providing tools needed for large, robust applications.

+ +

ASP.NET

+ +

ASP.NET is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications.

+ +

One of the differentiators for ASP.NET is that it is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.

+ +

ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others.

+ +

Mojolicious (Perl)

+ +

Mojolicious is a next generation web framework for the Perl programming language.

+ +

Back in the early days of the web, many people learned Perl because of a wonderful Perl library called CGI. It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies.

+ +

Some of the features provided by Mojolicious are: Real-time web framework, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/PSGI detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source.

+ +

Summary

+ +

This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.

+ +

For the next article in this module we'll change direction slightly and consider web security.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/first_steps/website_security/index.html b/files/fr/learn/server-side/first_steps/website_security/index.html deleted file mode 100644 index 4b90e6303a..0000000000 --- a/files/fr/learn/server-side/first_steps/website_security/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: La sécurité d'un site Web -slug: Learn/Server-side/First_steps/Website_security -tags: - - Débutant - - Guide - - Sécurité - - Sécurité Web -translation_of: Learn/Server-side/First_steps/Website_security -original_slug: Learn/Server-side/Premiers_pas/Website_security ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}
- -

La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.

- - - - - - - - - - - - -
Pré-requis :Connaissances de base en informatique.
Objectif :Comprendre les menaces les plus courantes à la sécurité des applications web et ce que vous pouvez faire pour réduire le risque de piratage de votre site.
- -

Qu'est-ce que la sécurité d'un site web?

- -

Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières.

- -

L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.

- -

La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.

- -

Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.

- -
-

Note : ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.

-
- -

Menaces visant la sécurité des sites web

- -

Cette section n'énumère que quelques-unes des menaces les plus courantes visant les sites web et la façon dont elles sont tenues à distance. À mesure que vous lisez, notez comment les menaces apparaissent lorsque l'application web fait confiance ou n'est pas assez méfiante vis-à-vis des données provenant du navigateur !

- -

Cross-Site Scripting (XSS)

- -

XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'attaquant d'injecter des scripts, exécutés côté-client, au travers du site web pour viser le navigateur web des autres utilisateurs. Comme le code injecté provient du site web le navigateur web le considère comme sûr, il peut de ce fait faire des choses comme transmettre le cookie d'authentification de l'utilisateur à l'attaquant. Une fois que l'attaquant obtient ce cookie il peut se connecter sur le site comme si il était l'utilisateur attaqué et peut faire tout ce que l'utilisateur pourrait faire. En fonction du site sur lequel l'attaque se produit, cela peut inclure l'accès aux détails de carte bancaire, les informations des contacts, la modification du mot de passe, etc.

- -
-

Note : les vulnérabilités XSS ont historiquement été les plus courantes.

-
- -

Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS réfléchie et persistante.

- - - -

La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme <script>, <object>, <embed>, et <link>.

- -
-

Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé input sanitization en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.

-
- -

Injection SQL

- -

L'injection SQL est une vulnérabilité qui permet à un attaquant d'exécuter du code SQL frauduleux sur une base de données, permettant l'accès, la modification ou la suppression des données quelque soit le droit de l'utilisateur. Une attaque par injection réussie peut permettre l'usurpation d'un compte, la création d'un compte avec les droits administrateur, l'accès à toute les données du serveur, ou la modification / destruction des données pour le rendre inutilisable.

- -

Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmise à une requête SQL sous-jacente qui peut modifier le sens de la requête. Par exemple, dans le code ci-dessous qui devrait lister l'ensemble des utilisateurs avec un nom particulier (userName) et qui provient d'un formulaire HTML:

- -
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
- -

Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, en gras ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table users et sélectionner toute les données de la table userinfo (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  ('a';) qui va complèter la requête d'origine (' est le symbole pour délimiter une chaine de texte en SQL).

- -
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
-
- -

Le moyen pour éviter ce type d'attaque est de s'assurer que toute saisie de l'utilisateur transmise à une requête SQL ne peut pas changer la nature de cette requête. Un moyen de faire cela est d'échapper tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL.

- -
-

Note : la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.

-
- -

Dans la requête ci-dessous nous avons échappé le caractère '. Le SQL va donc interpréter la chaine complète (en gras) comme un nom (un nom étrange en effet, mais pas nuisible).

- -
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
-
-
- -

Les frameworks web se chargent bien souvent d'échapper ces caractères à votre place. Django, par exemple, s'assure que toute saisie d'un utilisateur transmise au modèle est bien échappée.

- -
-

Note : Cette section s'inspire beaucoup des informations de Wikipedia ici.

-
- -

Falsification de requête inter-sites (CSRF)

- -

Les attaques CSRF permettent à un utilisateur malveillant d'éxécuter des actions à l'a ide des identifiants d'un autre utilisateur sans que cet utilisateur ne soit informé ou consentant.

- -

Ce type d'attaque s'explique mieux avec un exemple. John est l'utilisateur malveillant qui sait qu'un site particulier permet à des utilisateurs authentifiés d'envoyer de l'argent vers un compte particulier en utilisant des requêtes HTTP POST qui incluent le numéro de compte et le montant. John construit un formulaire qui inclut son numéro de compte et un montant dans des champs cachés (invisibles) et le transmet à un autre utilisateur du site (avec le bouton de validation déguisé en un lien vers un site "pour devenir riche".

- -

Si un utilisateur clique sur le bouton de validation, une requête HTTP POST, contenant les informations de transaction, va être transmise au serveur ainsi que le cookie que le navigateur web associe au site (l'ajout à la requête du cookie associé au site est le comportement normal du navigateur). Le serveur va vérifier le cookie d'authentification, et l'utiliser pour déterminer si l'utilisateur est ou n'est pas connecté et donc permet ou non la transaction.

- -

Au final tout utilisateur qui va cliquer sur le bouton de validation, alors qu'il sera connecté sur le site d'échange d'argent, va autoriser la transaction. John va devenir riche !

- -
-

Note : l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.

-
- -

Un moyen de prévenir ce type d'attaque est que le serveur demande que chaque requête POST possède un secret généré par le serveur et spécifique à l'utilisateur (le secret serait transmis par le serveur lors de l'envoi du formulaire de transaction). Cette approche empêche John de créer son propre formulaire car il n'est pas capable de connaitre le secret que le serveur founit à l'utilisateur. Même si il venait à trouver ce secret et créer un formulaire pour un utilisateur particulier, il ne pourrait pas utiliser ce formulaire pour attaquer d'autres utilisateurs

- -

Les framework web incluent souvent des mécanismes afin de prévenir les attaques CSRF.

- -

Autre menaces

- -

Les autres attaques et vulnérabilités courantes incluent:

- - - -

Il y en a beaucoup d'autres. Pour une liste plus exhaustive vous pouvez consulter la catégorie failles de sécurité Web (Wikipedia) et la catégorie Attaques (du projet OWASP).

- -

Quelques messages clés

- -

La majorité des attaques citées précédement réusissent lorsque l'application web fait confiance aux données provenant du navigateur web. Quoique vous fassiez d'autre pour améliorer la sécurité de votre site web, vous devez désinfecter toutes les saisies des utilisateurs avant de les afficher, de les utiliser dans les requêtes SQL ou de les transmettre dans les appels du système ou du système de fichier.

- -
-

Attention : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne jamais faire confiance aux données du navigateur web. Cela comprend les requêtes GET avec la présence des paramètres dans l'URL, les données envoyées avec les POST, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.

-
- -

Quelques autres points que vous pouvez mettre en place :

- - - -

Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.

- -

Résumé

- -

Cet article a présenté le concept de sécurité web et quelques-unes des menaces courantes vis-à-vis desquelles il faut se protéger. Le plus important à comprendre est qu'une application web ne peut pas faire confiance aux données provenant du navigateur ! Les données des utilisateurs doivent toutes être nettoyées avant d'être affichées ou utilisées dans les requêtes SQL ou dans les appels systèmes.

- -

C'est la fin de ce module, couvrant vos premiers pas dans le développement d'un site web côté serveur. Nous espérons que vous avez apprécié apprendre les concepts fondamentaux. Vous êtes désormais apte à choisir un framework web et à commencer à programmer.

- -

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

diff --git a/files/fr/learn/server-side/first_steps/website_security/index.md b/files/fr/learn/server-side/first_steps/website_security/index.md new file mode 100644 index 0000000000..4b90e6303a --- /dev/null +++ b/files/fr/learn/server-side/first_steps/website_security/index.md @@ -0,0 +1,163 @@ +--- +title: La sécurité d'un site Web +slug: Learn/Server-side/First_steps/Website_security +tags: + - Débutant + - Guide + - Sécurité + - Sécurité Web +translation_of: Learn/Server-side/First_steps/Website_security +original_slug: Learn/Server-side/Premiers_pas/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}
+ +

La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.

+ + + + + + + + + + + + +
Pré-requis :Connaissances de base en informatique.
Objectif :Comprendre les menaces les plus courantes à la sécurité des applications web et ce que vous pouvez faire pour réduire le risque de piratage de votre site.
+ +

Qu'est-ce que la sécurité d'un site web?

+ +

Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières.

+ +

L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.

+ +

La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.

+ +

Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.

+ +
+

Note : ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.

+
+ +

Menaces visant la sécurité des sites web

+ +

Cette section n'énumère que quelques-unes des menaces les plus courantes visant les sites web et la façon dont elles sont tenues à distance. À mesure que vous lisez, notez comment les menaces apparaissent lorsque l'application web fait confiance ou n'est pas assez méfiante vis-à-vis des données provenant du navigateur !

+ +

Cross-Site Scripting (XSS)

+ +

XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'attaquant d'injecter des scripts, exécutés côté-client, au travers du site web pour viser le navigateur web des autres utilisateurs. Comme le code injecté provient du site web le navigateur web le considère comme sûr, il peut de ce fait faire des choses comme transmettre le cookie d'authentification de l'utilisateur à l'attaquant. Une fois que l'attaquant obtient ce cookie il peut se connecter sur le site comme si il était l'utilisateur attaqué et peut faire tout ce que l'utilisateur pourrait faire. En fonction du site sur lequel l'attaque se produit, cela peut inclure l'accès aux détails de carte bancaire, les informations des contacts, la modification du mot de passe, etc.

+ +
+

Note : les vulnérabilités XSS ont historiquement été les plus courantes.

+
+ +

Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS réfléchie et persistante.

+ + + +

La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme <script>, <object>, <embed>, et <link>.

+ +
+

Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé input sanitization en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.

+
+ +

Injection SQL

+ +

L'injection SQL est une vulnérabilité qui permet à un attaquant d'exécuter du code SQL frauduleux sur une base de données, permettant l'accès, la modification ou la suppression des données quelque soit le droit de l'utilisateur. Une attaque par injection réussie peut permettre l'usurpation d'un compte, la création d'un compte avec les droits administrateur, l'accès à toute les données du serveur, ou la modification / destruction des données pour le rendre inutilisable.

+ +

Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmise à une requête SQL sous-jacente qui peut modifier le sens de la requête. Par exemple, dans le code ci-dessous qui devrait lister l'ensemble des utilisateurs avec un nom particulier (userName) et qui provient d'un formulaire HTML:

+ +
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+ +

Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, en gras ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table users et sélectionner toute les données de la table userinfo (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  ('a';) qui va complèter la requête d'origine (' est le symbole pour délimiter une chaine de texte en SQL).

+ +
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

Le moyen pour éviter ce type d'attaque est de s'assurer que toute saisie de l'utilisateur transmise à une requête SQL ne peut pas changer la nature de cette requête. Un moyen de faire cela est d'échapper tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL.

+ +
+

Note : la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.

+
+ +

Dans la requête ci-dessous nous avons échappé le caractère '. Le SQL va donc interpréter la chaine complète (en gras) comme un nom (un nom étrange en effet, mais pas nuisible).

+ +
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Les frameworks web se chargent bien souvent d'échapper ces caractères à votre place. Django, par exemple, s'assure que toute saisie d'un utilisateur transmise au modèle est bien échappée.

+ +
+

Note : Cette section s'inspire beaucoup des informations de Wikipedia ici.

+
+ +

Falsification de requête inter-sites (CSRF)

+ +

Les attaques CSRF permettent à un utilisateur malveillant d'éxécuter des actions à l'a ide des identifiants d'un autre utilisateur sans que cet utilisateur ne soit informé ou consentant.

+ +

Ce type d'attaque s'explique mieux avec un exemple. John est l'utilisateur malveillant qui sait qu'un site particulier permet à des utilisateurs authentifiés d'envoyer de l'argent vers un compte particulier en utilisant des requêtes HTTP POST qui incluent le numéro de compte et le montant. John construit un formulaire qui inclut son numéro de compte et un montant dans des champs cachés (invisibles) et le transmet à un autre utilisateur du site (avec le bouton de validation déguisé en un lien vers un site "pour devenir riche".

+ +

Si un utilisateur clique sur le bouton de validation, une requête HTTP POST, contenant les informations de transaction, va être transmise au serveur ainsi que le cookie que le navigateur web associe au site (l'ajout à la requête du cookie associé au site est le comportement normal du navigateur). Le serveur va vérifier le cookie d'authentification, et l'utiliser pour déterminer si l'utilisateur est ou n'est pas connecté et donc permet ou non la transaction.

+ +

Au final tout utilisateur qui va cliquer sur le bouton de validation, alors qu'il sera connecté sur le site d'échange d'argent, va autoriser la transaction. John va devenir riche !

+ +
+

Note : l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.

+
+ +

Un moyen de prévenir ce type d'attaque est que le serveur demande que chaque requête POST possède un secret généré par le serveur et spécifique à l'utilisateur (le secret serait transmis par le serveur lors de l'envoi du formulaire de transaction). Cette approche empêche John de créer son propre formulaire car il n'est pas capable de connaitre le secret que le serveur founit à l'utilisateur. Même si il venait à trouver ce secret et créer un formulaire pour un utilisateur particulier, il ne pourrait pas utiliser ce formulaire pour attaquer d'autres utilisateurs

+ +

Les framework web incluent souvent des mécanismes afin de prévenir les attaques CSRF.

+ +

Autre menaces

+ +

Les autres attaques et vulnérabilités courantes incluent:

+ + + +

Il y en a beaucoup d'autres. Pour une liste plus exhaustive vous pouvez consulter la catégorie failles de sécurité Web (Wikipedia) et la catégorie Attaques (du projet OWASP).

+ +

Quelques messages clés

+ +

La majorité des attaques citées précédement réusissent lorsque l'application web fait confiance aux données provenant du navigateur web. Quoique vous fassiez d'autre pour améliorer la sécurité de votre site web, vous devez désinfecter toutes les saisies des utilisateurs avant de les afficher, de les utiliser dans les requêtes SQL ou de les transmettre dans les appels du système ou du système de fichier.

+ +
+

Attention : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne jamais faire confiance aux données du navigateur web. Cela comprend les requêtes GET avec la présence des paramètres dans l'URL, les données envoyées avec les POST, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.

+
+ +

Quelques autres points que vous pouvez mettre en place :

+ + + +

Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.

+ +

Résumé

+ +

Cet article a présenté le concept de sécurité web et quelques-unes des menaces courantes vis-à-vis desquelles il faut se protéger. Le plus important à comprendre est qu'une application web ne peut pas faire confiance aux données provenant du navigateur ! Les données des utilisateurs doivent toutes être nettoyées avant d'être affichées ou utilisées dans les requêtes SQL ou dans les appels systèmes.

+ +

C'est la fin de ce module, couvrant vos premiers pas dans le développement d'un site web côté serveur. Nous espérons que vous avez apprécié apprendre les concepts fondamentaux. Vous êtes désormais apte à choisir un framework web et à commencer à programmer.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

diff --git a/files/fr/learn/server-side/index.html b/files/fr/learn/server-side/index.html deleted file mode 100644 index 64bc78289b..0000000000 --- a/files/fr/learn/server-side/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Programmation de Sites Web côté serveur -slug: Learn/Server-side -tags: - - Beginner - - CodingScripting - - Intro - - Landing - - Learn - - Server - - Server-side programming - - Topic - - TopicStub -translation_of: Learn/Server-side ---- -
{{LearnSidebar}}
- -

Le sujet abordant les sites web dynamiques / la programmation coté serveur est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.

- -

La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le HTML, le CSS et le JavaScript dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).

- -

De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable.

- -

L'apprentissage

- -

Se lancer dans la programmation côté serveur est souvent plus facile que de se lancer dans la programmation côté client, parce que les sites dynamiques ont tendance à faire toujours la même chose (recevoir des données d'une base de données, et l'afficher dans une page, valider les entrées de l'utilisateur et les sauvegarder dans la base de données, vérifier les permissions utilisateur ainsi que les connections etc.), et sont en général construits autour d'un framework web rendant les opérations assez faciles.

- -

Des connaissances minimales en concepts de programmation pourront être utiles, mais pas essentielles. Les connaissances en développement côté client sont également utiles mais pas indispensables, considérez néamoins que cela vous aiderai à mieux travailler avec des développeurs qui créeront la partie côté client du site aussi appelé "front-end".

- -

Vous allez avoir besoin de comprendre "comment le fonctionne le Web". Nous vous recommandons premièremement de lire les sujets suivants :

- - - -

Ces articles vous donnerons les outils nécessaires afin de travailler avec les modules de cette section.

- -

Modules

- -

Ce sujet contient les modules suivants. Vous feriez mieux de commencer par le premier module, pour ensuite faire les autres qui vous montrerons comment travailler à l'aide des 2 languages de programmation côté serveur les plus populaire en utilisant les frameworks web appropriés.

- -
-
Les premiers pas en programmation de site web côté serveur
-
Ce module fournit les informations de base sur la programmation de site web côté serveur en répondant à des questions telles que "Qu'est-ce que c'est ?", "En quoi est-ce différent de la prgrammation côté client ?" ou encore "Pourquoi est-ce si utile ?" ainsi qu'un aperçu de quelques frameworks côté serveur et comment choisir le vôtre en fonction de vos besoin ou des besoins de votre site web. Finalement nous allons vous présenter les principes de sécurité en serveur web.
-
Le framework Web Django (Python)
-
Django est une infrastructure d'application (framework) côté serveur extrêmement populaire et dotée de son lot de fonctionnalités, écrite en Python. Ce module vous expliquera pourquoi Django fait un si bon framework pour serveurs, comment l'installer et s'en servir.
-
Express Web Framework (Node.js/JavaScript)
-
Express est une infrastructure d'application (framework) assez populaire, écrite en JavaScript et fonctionnant à l'aide de Node.js. Ce module explique les avantages dont bénéficie ce framework, comment l'installer ainsi que comment s'en servir.
-
- -

Voir aussi

- -
-
Serveur Node sans infrastucture d'application (framework)
-
Cet article comprend un serveur statique réalisé avec Node.js seul, pour ceux qui ne veulent pas utiliser de frameworks.
-
diff --git a/files/fr/learn/server-side/index.md b/files/fr/learn/server-side/index.md new file mode 100644 index 0000000000..64bc78289b --- /dev/null +++ b/files/fr/learn/server-side/index.md @@ -0,0 +1,58 @@ +--- +title: Programmation de Sites Web côté serveur +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

Le sujet abordant les sites web dynamiques / la programmation coté serveur est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.

+ +

La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le HTML, le CSS et le JavaScript dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).

+ +

De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable.

+ +

L'apprentissage

+ +

Se lancer dans la programmation côté serveur est souvent plus facile que de se lancer dans la programmation côté client, parce que les sites dynamiques ont tendance à faire toujours la même chose (recevoir des données d'une base de données, et l'afficher dans une page, valider les entrées de l'utilisateur et les sauvegarder dans la base de données, vérifier les permissions utilisateur ainsi que les connections etc.), et sont en général construits autour d'un framework web rendant les opérations assez faciles.

+ +

Des connaissances minimales en concepts de programmation pourront être utiles, mais pas essentielles. Les connaissances en développement côté client sont également utiles mais pas indispensables, considérez néamoins que cela vous aiderai à mieux travailler avec des développeurs qui créeront la partie côté client du site aussi appelé "front-end".

+ +

Vous allez avoir besoin de comprendre "comment le fonctionne le Web". Nous vous recommandons premièremement de lire les sujets suivants :

+ + + +

Ces articles vous donnerons les outils nécessaires afin de travailler avec les modules de cette section.

+ +

Modules

+ +

Ce sujet contient les modules suivants. Vous feriez mieux de commencer par le premier module, pour ensuite faire les autres qui vous montrerons comment travailler à l'aide des 2 languages de programmation côté serveur les plus populaire en utilisant les frameworks web appropriés.

+ +
+
Les premiers pas en programmation de site web côté serveur
+
Ce module fournit les informations de base sur la programmation de site web côté serveur en répondant à des questions telles que "Qu'est-ce que c'est ?", "En quoi est-ce différent de la prgrammation côté client ?" ou encore "Pourquoi est-ce si utile ?" ainsi qu'un aperçu de quelques frameworks côté serveur et comment choisir le vôtre en fonction de vos besoin ou des besoins de votre site web. Finalement nous allons vous présenter les principes de sécurité en serveur web.
+
Le framework Web Django (Python)
+
Django est une infrastructure d'application (framework) côté serveur extrêmement populaire et dotée de son lot de fonctionnalités, écrite en Python. Ce module vous expliquera pourquoi Django fait un si bon framework pour serveurs, comment l'installer et s'en servir.
+
Express Web Framework (Node.js/JavaScript)
+
Express est une infrastructure d'application (framework) assez populaire, écrite en JavaScript et fonctionnant à l'aide de Node.js. Ce module explique les avantages dont bénéficie ce framework, comment l'installer ainsi que comment s'en servir.
+
+ +

Voir aussi

+ +
+
Serveur Node sans infrastucture d'application (framework)
+
Cet article comprend un serveur statique réalisé avec Node.js seul, pour ceux qui ne veulent pas utiliser de frameworks.
+
diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html deleted file mode 100644 index fd3e443982..0000000000 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Comprendre les frameworks JavaScript côté client -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks -tags: - - Beginner - - Frameworks - - JavaScript - - Learn - - TopicStub - - client-side -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -
{{LearnSidebar}}
- -

Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.

- -

En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.

- -

Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :

- - - -

Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.

- -

Commencez dès maintenant, avec "Introduction aux frameworks côté client"

- -

Prérequis

- -

Vous devez vraiment connaitre les bases des principaux langages du web (HTML, CSS, et particulièrement JavaScript) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.

- -

Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient.

- -

Vous voulez devenir développeur web front-end ?

- -

Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

- -

Commencer

- -

Guides d'introduction

- -
-
1. Introduction aux frameworks côté client
-
Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client.
-
2. Principales caractéristiques du Framework
-
Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.
-
- -

Tutoriels sur React

- -
-

Note : Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.

- -

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre todo-react repository. Pour une version exécutable en direct, voir https://mdn.github.io/todo-react-build/.

-
- -
-
1. Premier pas avec React
-
Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.
-
2. Début de notre liste de tâches React
-
Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard.
-
3. Diviser notre application React en composants
-
À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.
-
4. Interactivité de React: évènements et états
-
Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.
-
5. Interactivité de React: modification, filtrage, rendu conditionné
-
Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.
-
6. Accessibilité dans React
-
Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.
-
7. Ressources sur React
-
Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.
-
- -

Tutoriels sur Ember

- -
-

Note : Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.

- -

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the ember-todomvc-tutorial repository. Pour une version exécutable en direct, voir https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel).

-
- -
-
1. Premiers pas avec Ember
-
Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement.
-
2. Structure et composant de l'application Ember
-
Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants.
-
3. Interactivité Ember : évènements, classes et états
-
À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application.
-
4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné
-
Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles.
-
5. Routage dans Ember
-
Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé".
-
6. Ressources sur Ember et dépannage
-
Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations.
-
- -

Tutoriels sur Vue

- -
-

Note : Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.

- -

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple de code d'application Vue dans notre todo-vue repository. Pour une version exécutable en direct, voir https://mdn.github.io/todo-vue/dist/.

-
- -
-
1. Premiers pas avec Vue
-
Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple.
-
2. Création de notre premier composant Vue
-
Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données.
-
3. Rendu d'une liste de composants Vue
-
À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants ToDoItem à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant App.vue que nous allons ensuite parcourir et afficher à l'intérieur des composants ToDoItem à l'aide de la directive v-for.
-
4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue
-
Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un ToDoItem dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte <input>, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article.
-
5. Styliser les composants Vue avec CSS
-
Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS.
-
6. Utilisation des propriétés calculées de Vue
-
Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change.
-
7. Rendu conditionnel Vue : éditer les todos existants
-
Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir v-if et v-else — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo.
-
8. Gestion de la mise au poinr avec les références de Vue
-
Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant.
-
9. Ressources Vue
-
Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles.
-
- -

Tutoriels sur Svelte

- -
-

Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.

- -

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt mdn-svelte-tutorial. Pour une version exécutable en direct, voir https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

-
- -
-
1. Premiers pas avec Svelte
-
Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production.
-
- -
-
2. Commencer notre application todolist avec Svelte
-
Maintenant que nous avons compris les bases du fonctionnement  de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants.
-
3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés
-
Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état.
-
4. Diviser notre application Svelte en composants
-
L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants.
-
5. Svelte avancé : réactivité, cycle de vie et accessibilité
-
Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore.
-
6. Travailler avec le stockage de Svelte
-
Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent.
-
7. Support de TypeScript avec Svelte
-
Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript.
-
8. Déploiement et étapes suivantes
-
Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte.
-
- -

Quels frameworks avons-nous choisis ?

- -

Nous publions notre première série d'articles accompagné de guides axés sur quatre frameworks. Trois d'entre eux sont très populaires et bien établis (React/ReactDOM, Ember et Vue) tandis que Svelte est un nouveau prometteur et qui a déjà gagné beaucoup en popularité dernièrement.

- -

Il existe plusieurs raisons à ceci :

- - - -

Disons-le franchement : nous n'avons pas choisi les frameworks sur lesquels nous nous concentrons parce que nous pensons qu'ils sont les meilleurs ou parce que nous les soutenons de quelque manière que ce soit. Nous pensons seulement qu'ils correspondent le mieux aux critères établis ci-avant.

- -

Notez que nous espérions avoir plus de frameworks inclus lors de la publication initiale, mais nous avons décidé de publier le contenu, puis d'ajouter plus de guides de framework plus tard plutôt que de le retarder l'édition. Si votre framework préféré n'est pas représenté dans ce contenu et que vous souhaitez faire changer cela, n'hésitez pas à en discuter avec nous ! Contactez-nous via Matrix, ou Discourse, ou envoyez-nous un mail sur la liste mdn-admins.

diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md new file mode 100644 index 0000000000..fd3e443982 --- /dev/null +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md @@ -0,0 +1,175 @@ +--- +title: Comprendre les frameworks JavaScript côté client +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +tags: + - Beginner + - Frameworks + - JavaScript + - Learn + - TopicStub + - client-side +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +
{{LearnSidebar}}
+ +

Les frameworks JavaScript sont une partie essentielle du développement web front-end moderne, fournissant aux développeurs des outils éprouvés pour construire des applications web évolutives et interactives. De nombreuses entreprises modernes utilisent des frameworks comme un élément normé de leur outillage, de sorte que de nombreux emplois de développement front-end requièrent désormais une expérience avec ces frameworks.

+ +

En tant que futur développeur front-end, il peut être difficile de savoir par où commencer lors de l'apprentissage des frameworks – il y a tant de frameworks si différents les uns des autres et de nouveaux qui apparaissent sans cesse, ils fonctionnent généralement de manière similaire mais font certaines choses différemment, et il y a certaines choses spécifiques à avoir en tête lors de leur utilisation.

+ +

Dans cet ensemble d'articles, nous chercherons à vous donner un point de départ confortable pour vous aider à commencer votre apprentissage des frameworks. Nous ne visons pas à vous enseigner exhaustivement tout ce que vous devez savoir sur React / ReactDOM, Vue ou quelque autre framework particulier ; les documentations fournises par les équipes de développement des frameworks font déjà ce travail. Nous souhaitons plutôt faire simple et répondre d'abord à des questions plus fondamentales telles que :

+ + + +

Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité.

+ +

Commencez dès maintenant, avec "Introduction aux frameworks côté client"

+ +

Prérequis

+ +

Vous devez vraiment connaitre les bases des principaux langages du web (HTML, CSS, et particulièrement JavaScript) avant d'essayer de vous lancer dans l'apprentissage des frameworks côté client.

+ +

Votre code n'en sera que plus qualitatif et plus professionnel, et vous serez en mesure de résoudre vos problèmes avec plus de confiance si vous comprenez les fonctionnalités fondamentales du web sur lesquelles les frameworks s'appuient.

+ +

Vous voulez devenir développeur web front-end ?

+ +

Nous avons créé un cours qui inclut toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+ +

Commencer

+ +

Guides d'introduction

+ +
+
1. Introduction aux frameworks côté client
+
Nous commençons notre aperçu des frameworks par un tour d'horizon général du domaine, notamment en regardant un bref historique de JavaScript et des frameworks, la raison pour laquelle les frameworks existent et ce qu'ils nous proposent, comment commencer à réfléchir au choix d'un framework à apprendre et quelles alternatives il y a aux frameworks côté client.
+
2. Principales caractéristiques du Framework
+
Chaque framework JavaScript majeur a une approche différente de la mise à jour du DOM, de la gestion des évènements du navigateur et de la manière dont rendre l'expérience de développement agréable. Cet article explorera les principales caractéristiques des 4 grands frameworks, en examinant comment les frameworks ont tendance à fonctionner à un haut niveau et les différences entre eux.
+
+ +

Tutoriels sur React

+ +
+

Note : Les tutoriels sur React ont été essayés pour la dernière fois en mai 2020, avec React/ReactDOM 16.13.1 et create-react-app 3.4.1.

+ +

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application React dans notre todo-react repository. Pour une version exécutable en direct, voir https://mdn.github.io/todo-react-build/.

+
+ +
+
1. Premier pas avec React
+
Dans cet article, nous dirons bonjour à React. Nous découvrirons les prémices de son fonctionnement et de ses cas d'utilisation, configurerons une chaine d'outils React de base sur notre ordinateur local et créerons et jouerons avec une application de démarrage simple, en apprenant un peu plus sur le fonctionnement de React dans le processus.
+
2. Début de notre liste de tâches React
+
Supposons que nous ayons été chargés de créer une preuve de concept dans React – une application qui permet aux utilisateurs d'ajouter, de modifier et de supprimer les tâches sur lesquelles ils souhaitent travailler, ainsi que de marquer les tâches comme terminées sans les supprimer. Cet article vous guidera tout au long de la mise en place de la structure et du style des composants de base de l'application, prêts pour la définition et l'interactivité des composants individuels, que nous ajouterons plus tard.
+
3. Diviser notre application React en composants
+
À ce stade, notre application est un monolithe. Avant de pouvoir lui faire faire des choses, nous devons le diviser en composants descriptifs gérables. React n'a pas de règles strictes pour ce qui est et n'est pas un composant - c'est à vous de décider ! Dans cet article, nous allons vous montrer un moyen judicieux de diviser notre application en composants.
+
4. Interactivité de React: évènements et états
+
Une fois notre plan de composants élaboré, il est maintenant temps de commencer à faire évoluer notre application d'une interface utilisateur complètement statique vers une interface qui nous permet réellement d'interagir et de modifier des choses. Dans cet article, nous allons le faire, en explorant les évènements et les états en cours de route.
+
5. Interactivité de React: modification, filtrage, rendu conditionné
+
Alors que nous approchons de la fin de notre voyage React (pour l'instant du moins), nous ajouterons la touche finale aux principaux domaines de fonctionnalités de notre application de liste de tâches. Cela comprend la possibilité de modifier les tâches existantes et de filtrer la liste des tâches entre toutes les tâches, terminées et incomplètes. Nous examinerons le rendu conditionné de l'interface utilisateur en cours de route.
+
6. Accessibilité dans React
+
Dans notre avant-dernier article du tutoriel, nous nous concentrerons sur l'accessibilité, y compris la gestion de la mise au point dans React, ce qui peut améliorer la convivialité et réduire la confusion pour les utilisateurs de clavier uniquement et de lecteur d'écran.
+
7. Ressources sur React
+
Notre dernier article vous fournit une liste de ressources sur React que vous pouvez utiliser pour aller plus loin dans votre apprentissage.
+
+ +

Tutoriels sur Ember

+ +
+

Note : Les tutoriels Ember ont été essayés pour la dernière fois en Mai 2020, avec Ember/Ember CLI version 3.18.0.

+ +

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version finale de l'exemple de code d'application Ember dans le Ember app code in the ember-todomvc-tutorial repository. Pour une version exécutable en direct, voir https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (cela inclut également quelques fonctionnalités supplémentaires non couvertes dans le tutoriel).

+
+ +
+
1. Premiers pas avec Ember
+
Dans notre premier article sur Ember, nous verrons comment fonctionne Ember et ce à quoi il sert, installerons la chaine d'outils d'Ember localement, créerons un exemple d'application, puis effectuerons une configuration initiale pour la préparer au développement.
+
2. Structure et composant de l'application Ember
+
Dans cet article, nous commencerons à planifier la structure de notre application TodoMVC Ember, à ajouter du code HTML correspondant, puis nous diviserons cette structure HTML en composants.
+
3. Interactivité Ember : évènements, classes et états
+
À ce stade, nous allons commencer à ajouter de l'interactivité à notre application, offrant la possibilité d'ajouter et d'afficher de nouveaux éléments à notre liste. En cours de route, nous examinerons l'utilisation d'évènements dans Ember, la création de classes de composants pour contenir du code JavaScript pour contrôler les fonctionnalités interactives et la configuration d'un service pour suivre l'état des données de notre application.
+
4. Interactivité Ember : fonctionnalité du Footer, rendu conditionné
+
Il est maintenant temps de commencer à aborder la fonctionnalité de footer dans notre application. Ici, nous allons mettre à jour le compteur de tâches pour afficher le nombre correct de tâches à compléter et appliquer correctement le style aux tâches terminées (c'est-à-dire là dont la case a été cochée). Nous allons également câbler notre bouton "Effacer terminé". En cours de route, nous découvrirons comment utiliser le rendu conditionné dans nos modèles.
+
5. Routage dans Ember
+
Dans cet article, nous apprendrons les bases du routage avec Ember. Nous l'utiliserons pour fournir une URL unique pour chacune des trois vues à faire : "Tous", "Actif", et "Terminé".
+
6. Ressources sur Ember et dépannage
+
Notre dernier article sur Ember vous fournit une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que des dépannages utiles et d'autres informations.
+
+ +

Tutoriels sur Vue

+ +
+

Note : Les tutoriels sur Vue ont été essayés pour la dernière fois en mai 2020, avec Vue 2.6.11.

+ +

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple de code d'application Vue dans notre todo-vue repository. Pour une version exécutable en direct, voir https://mdn.github.io/todo-vue/dist/.

+
+ +
+
1. Premiers pas avec Vue
+
Maintenant, introduisons Vue, le troisième de nos frameworks. Dans cet article, nous allons examiner un peu le contexte de Vue, apprendre à l'installer et créer un nouveau projet, étudier la structure de haut niveau de l'ensemble du projet et d'un composant individuel, voir comment exécuter le projet localement, et préparez-le à commencer à construire notre exemple.
+
2. Création de notre premier composant Vue
+
Il est maintenant temps de plonger plus profondément dans Vue et de créer notre propre composant personnalisé (nous commencerons par créer un composant pour représenter chaque élément de la liste de tâches). En cours de route, nous découvrirons quelques concepts importants tels que l'appel de composants à l'intérieur d'autres composants, leur transmission de données via des accessoires et l'enregistrement de l'état des données.
+
3. Rendu d'une liste de composants Vue
+
À ce stade, nous avons un composant entièrement fonctionnel ; nous sommes maintenant prêts à ajouter plusieurs composants ToDoItem à notre application. Dans cet article, nous examinerons l'ajout d'un ensemble de données d'élément todo à notre composant App.vue que nous allons ensuite parcourir et afficher à l'intérieur des composants ToDoItem à l'aide de la directive v-for.
+
4. Ajout d'un nouveau formulaire todo: évènements, méthodes, et modèles Vue
+
Nous avons maintenant des exemples de données en place et une boucle qui prend chaque bit de données et le rend dans un ToDoItem dans notre application. Ce dont nous avons vraiment besoin ensuite, c'est la possibilité de permettre à nos utilisateurs de saisir leurs propres éléments à faire dans l'application, et pour cela, nous aurons besoin d'un texte <input>, un évènement à déclencher lorsque les données sont soumises, une méthode de déclenchement lors de la soumission pour ajouter les données et relancer la liste, et un modèle pour contrôler les données. C'est ce que nous allons couvrir dans cet article.
+
5. Styliser les composants Vue avec CSS
+
Le moment est enfin venu de rendre notre application un peu plus jolie. Dans cet article, nous explorerons les différentes façons de styliser les composants Vue avec CSS.
+
6. Utilisation des propriétés calculées de Vue
+
Dans cet article, nous allons ajouter un compteur qui affiche le nombre d'éléments à faire terminés, en utilisant une fonctionnalité de Vue appelée propriétés calculées. Celles-ci fonctionnent de la même manière que les méthodes, mais ne sont réexécutées que lorsque l'une de leurs dépendances change.
+
7. Rendu conditionnel Vue : éditer les todos existants
+
Il est maintenant temps d'ajouter l'un des éléments majeurs de la fonctionnalité qui nous manque toujours: la possibilité de modifier les éléments todos existants. Pour ce faire, nous profiterons des capacités de rendu conditionnel de Vue — à savoir v-if et v-else — pour nous permettre de basculer entre la vue d'élément todo existante et une vue d'édition où vous pouvez mettre à jour les étiquettes d'élément todo. Nous examinerons également l'ajout de fonctionnalités pour supprimer les éléments todo.
+
8. Gestion de la mise au poinr avec les références de Vue
+
Nous en avons presque terminé avec Vue. La dernière fonctionnalité à implanter est la gestion de la mise au point, ou en d'autres termes, la façon dont nous pouvons améliorer l'accessibilité du clavier de notre application. Nous allons examiner l'utilisation des références de Vue pour gérer cela, une fonctionnalité avancée qui vous permet d'avoir un accès direct aux nœuds DOM sous-jacents sous le DOM virtuel, ou un accès direct d'un composant à la structure DOM interne d'un composant enfant.
+
9. Ressources Vue
+
Nous allons maintenant terminer notre étude de Vue en vous donnant une liste de ressources que vous pouvez utiliser pour aller plus loin dans votre apprentissage, ainsi que d'autres conseils utiles.
+
+ +

Tutoriels sur Svelte

+ +
+

Note : Les tutoriels sur Svelte ont été essayés pour la dernière fois en aout 2020, avec Svelte 3.24.1.

+ +

Si vous avez besoin de vérifier votre code par rapport à notre version, vous pouvez trouver une version terminée de l'exemple eu code de l'application Svelte (tel qu'il est après chaque chapitre) dans le dépôt mdn-svelte-tutorial. Pour une version exécutable en direct, voir https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

+
+ +
+
1. Premiers pas avec Svelte
+
Dans cet articles, nous vous proposerons une brève introduction au framework Svelte. Nous verrons comment Svelte fonctionne et qu'est-ce qui le rend si différent des autrse frameworks et outils que nous avons vus jusqu'à présent. Ensuite, nous apprendronds à mettre en place notre environnement de développement, créerons une application démonstrative, appréhenderons la structure du projet et nous verrons comment la mettre en oeuvre localement puis la compiler pour la mettre en production.
+
+ +
+
2. Commencer notre application todolist avec Svelte
+
Maintenant que nous avons compris les bases du fonctionnement  de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants.
+
3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés
+
Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état.
+
4. Diviser notre application Svelte en composants
+
L'objectif principal de cet article est de voir comment nous pouvons diviser notre application en composants gérables et partager l'information entre eux. Nous décomposerons notre application puis y ajouterons plus de fonctionnalités pour permettre aux utilisateurs de modifier des composants existants.
+
5. Svelte avancé : réactivité, cycle de vie et accessibilité
+
Dans cet articles, nous ajouterons les dernières fonctionnalités de l'application et nous pousserons la décomposition de notre application encore plus loin. Nous apprendrons comment résoudre des problèmes de réactivité liés à la mise à jour d'objets et de tableaux. Pour éviter les erreurs communes, nous devrons nous explorer plus profondément le système de réactivité de Svelte. nous verrons aussi comment résoudre certaines problèmes de mise au point pour l'accessibilité et plus encore.
+
6. Travailler avec le stockage de Svelte
+
Dans cet article, nous vous montrerons une autre manière de gérer les états avec Svelte : les stockages Stores. Les Stores sont des répertoires de données globaux qui contiennent des valeurs. Les composants peuvent s'abonner aux stockages et recevoir des notifications que leurs valeurs changent.
+
7. Support de TypeScript avec Svelte
+
Nous allons maintenant apprendre à utiliser TypeScript dans nos applications Svelte. D'abord, nous apprendrons ce qu'est TypeScript et quels bénéfices il peut nous apporter, puis nous verrons ensemble comment configurer notre projet pour travailler avec des fichiers TypeScript. Enfin, nous parcourerons notre application pour voir ce que nous pouvons y changer pour tirer pleinement parti des fonctionnalités de TypeScript.
+
8. Déploiement et étapes suivantes
+
Dans ce dernier article, nous verrons comment déployer votre application et la mettre en ligne et nous vous partagerons quelques-unes des ressources auxquelles vous devriez jeter un oeil pour poursuivre votre apprentissage de Svelte.
+
+ +

Quels frameworks avons-nous choisis ?

+ +

Nous publions notre première série d'articles accompagné de guides axés sur quatre frameworks. Trois d'entre eux sont très populaires et bien établis (React/ReactDOM, Ember et Vue) tandis que Svelte est un nouveau prometteur et qui a déjà gagné beaucoup en popularité dernièrement.

+ +

Il existe plusieurs raisons à ceci :

+ + + +

Disons-le franchement : nous n'avons pas choisi les frameworks sur lesquels nous nous concentrons parce que nous pensons qu'ils sont les meilleurs ou parce que nous les soutenons de quelque manière que ce soit. Nous pensons seulement qu'ils correspondent le mieux aux critères établis ci-avant.

+ +

Notez que nous espérions avoir plus de frameworks inclus lors de la publication initiale, mais nous avons décidé de publier le contenu, puis d'ajouter plus de guides de framework plus tard plutôt que de le retarder l'édition. Si votre framework préféré n'est pas représenté dans ce contenu et que vous souhaitez faire changer cela, n'hésitez pas à en discuter avec nous ! Contactez-nous via Matrix, ou Discourse, ou envoyez-nous un mail sur la liste mdn-admins.

diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html deleted file mode 100644 index d222a30518..0000000000 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.html +++ /dev/null @@ -1,405 +0,0 @@ ---- -title: Introduction aux frameworks côté client -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.

- - - - - - - - - - - - -
Prerequisites:Familiarity with the core HTML, CSS, and JavaScript languages.
Objective:To understand how client-side JavaScript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one.
- -

A brief history

- -

When JavaScript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. The web became not just a place to read things, but to do things. JavaScript’s popularity steadily increased. Developers who worked with JavaScript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others. This shared ecosystem of libraries helped shape the growth of the web.

- -

Now, JavaScript is an essential part of the web, used on 95% of all websites, and the web is an essential part of modern life. Users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. The web allows us to do things that used to be possible only in native applications installed on our computers. These modern, complex, interactive websites are often referred to as web applications.

- -

The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications. A framework is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software.

- -

JavaScript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. MDN Web Docs, which you are currently reading this on, uses the React/ReactDOM framework to power its front end.

- -

What frameworks are out there?

- -

There are many frameworks out there, but currently the "big four" are considered to be the following.

- -

Ember

- -

Ember was initially released in December 2011 as a continuation of work that started in the SproutCore project. It is an older framework that has less users than more modern alternatives  such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.

- -

Start learning Ember

- -

Angular

- -

Angular is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built AngularJS. Angular was officially released on the 14th of September 2016.

- -

Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses TypeScript, a superset of JavaScript that we’ll look at in a little more detail in the next chapter.

- -

Vue

- -

Evan You first released Vue in 2014, after working on and learning from the original AngularJS project. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.

- -

Vue, like AngularJS, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.

- -

Start learning Vue

- -

React

- -

Facebook released React in 2013. By this point, it had already been using React to solve many of its problems internally. React itself is not technically a framework; it's a library for rendering UI components. React is used in combination with other libraries to make applications — React and React Native enable developers to make mobile applications; React and ReactDOM enable them to make web applications, etc.

- -

Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.

- -

React extends JavaScript with HTML-like syntax, known as JSX.

- -

Start learning React

- -

Why do frameworks exist?

- -

We've discussed the environment that inspired the creation of frameworks, but not really why developers felt the need to make them. Exploring the why requires first examining the challenges of software development.

- -

Consider a common kind of application: A to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. This application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. In software development, this underlying data is known as state.

- -

Each of our goals is theoretically simple in isolation. We can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. When we remember that the application has to let the user to do all of these things through the browser, however, some cracks start to show. The real problem is this: every time we change our application’s state, we need to update the UI to match.

- -

We can examine the difficulty of this problem by looking at just one feature of our todo list app: rendering a list of tasks.

- -

The verbosity of DOM changes

- -

Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:

- -
const state = [
-  {
-    id: 'todo-0',
-    name: 'Learn some frameworks!'
-  }
-]
- -

How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <li> element inside of an unordered list element (a <ul>). How do we make it? That could look something like this:

- -
function buildTodoItemEl(id, name) {
-  const item = document.createElement('li');
-  const span = document.createElement('span');
-  const textContent = document.createTextNode(name);
-
-  span.appendChild(textContent);
-
-  item.id = id;
-  item.appendChild(span);
-  item.appendChild(buildDeleteButtonEl(id));
-
-  return item;
-}
- -

Here, we use the document.createElement() method to make our <li>, and several more lines of code to create the properties and children it needs.

- -

The tenth line of this snippet references another build function: buildDeleteButtonEl(). It follows a similar pattern to the one we used to build a list item element:

- -
function buildDeleteButtonEl(id) {
-  const button = document.createElement('button');
-  const textContent = document.createTextNode('Delete');
-
-  button.setAttribute('type', 'button');
-  button.appendChild(textContent);
-
-  return button;
-}
- -

This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:

- -
function renderTodoList() {
-  const frag = document.createDocumentFragment();
-  state.tasks.forEach(task => {
-    const item = buildTodoItemEl(task.id, task.name);
-    frag.appendChild(item);
-  });
-
-  while (todoListEl.firstChild) {
-    todoListEl.removeChild(todoListEl.firstChild);
-  }
-  todoListEl.appendChild(frag);
-}
- -

We've now got well over thirty lines of code dedicated just to the UI – just to the step of rendering something in the DOM – and at no point do we add classes that we could use later to style our list-items!

- -

Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI in the right time and in the right way.

- -

JavaScript frameworks were created to make this kind of work a little easier — they exist to provide a better developer experience. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.

- -

If you want to see code samples from this section in action, you can check out a working version of the app on CodePen, which also allows users to add and delete new tasks.

- -

Read more about the JavaScript used in this section:

- - - -

Another way to build UIs

- -

Every JavaScript framework offers a way to write user interfaces more declaratively. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.

- -

The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:

- -
<ul>
-  <li v-for="task in tasks" v-bind:key="task.id">
-    <span>\{{task.name\}}</span>
-    <button type="button">Delete</button>
-  </li>
-</ul>
- -

That's it. This snippet reduces approximately thirty-two lines of code down to six lines. If the curly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.

- -

Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can join our project and quickly work out what is going on. Vue is not alone in this: using a framework improves team as well as individual efficiency.

- -

It's possible to do things similar to this in vanilla JavaScript. Template literal strings make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.

- -

Other things frameworks give us

- -

Let's look at some of the other advantages conferred upon us by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.

- -

Tooling

- -

Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that Improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).

- -
-

Note : If you want to find out more details about web tooling concepts, have a read of our Client-side tooling overview.

-
- -

Compartmentalization

- -

Most major frameworks encourage developers to abstract the different parts of their user interfaces into components — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files), so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.

- -

Routing

- -

The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called server-side routing.

- -

Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as single page apps, or SPAs) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a view, and by default, no routing is done.

- -

When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called client-side routing.

- -

It's possible to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.

- -

Things to consider when using frameworks

- -

Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.

- -

Familiarity with the tool

- -

Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.

- -

Overengineering

- -

If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not a monolith, and some of them are better-suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how Vue can replace jQuery as a tool for making small portions of a webpage interactive.

- -

Larger code base and abstraction

- -

Frameworks allow you to write more declarative code – and sometimes less code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.

- -

Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.

- -

The abstraction of frameworks affects not only your JavaScript, but your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.

- -

Frameworks are not the source of our problems. With the wrong priorities, it's possible for any application to be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.

- -

Accessibility on a framework-driven web

- -

Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA live regions or focus management.

- -

In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.

- -

With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.

- -

With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.

- -

The upshot is that you should consider accessibility from the very start of every web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.

- -

How to choose a framework

- -

Each of the frameworks discussed in this module take different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:

- -
    -
  1. What browsers does the framework support?
    2. -
  2. What domain-specific languages does the framework utilize?
    3. -
  3. Does the framework have a strong community and good docs (and other support) available?
    4. -
- -

The table in this section provides a glanceable summary of the current browser support offered by each framework, as well as the domain-specific languages with which it can be used.

- -

Broadly, domain-specific languages (DSLs) are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks require a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework’s preferred DSL will mean you miss out on features that would otherwise improve your developer experience.

- -

You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FrameworkBrowser supportPreferred DSLSupported DSLs
AngularIE9+TypeScriptHTML-based; TypeScript
ReactModern (IE9+ with Polyfills)JSXJSX; TypeScript
VueIE9+HTML-basedHTML-based, JSX, Pug
EmberModern (IE9+ in Ember version 2.18)HandlebarsHandlebars, TypeScript
- -
-

Note :: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.

-
- -

Citations for this table:

- - - -

Does the framework have a strong community?

- -

This is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is.

- -

Opinions on the web

- -

Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a request for comments (RFC) on framework adoption. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.

- -

The State of JavaScript survey is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.

- -

The Vue team has exhaustively compared Vue to other popular frameworks. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.

- -

Alternatives to client-side frameworks

- -

If you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:

- - - -

Content management systems

- -

Content-management systems (CMSes) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.

- -

Popular examples include Wordpress, Joomla, and Drupal.

- -

Server-side rendering

- -

Server-side rendering (SSR) is an application architecture in which it is the server's job to render a single-page application. This is the opposite of client-side rendering, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device, because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.

- -

All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out Next.js for React, Nuxt.js for Vue (yes it is confusing, and no, these projects are not related!), FastBoot for Ember, and Angular Universal for Angular.

- -
-

Note : Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.

-
- -

Static site generators

- -

Static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not dependent upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.

- -

Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called templates. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.

- -

Static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. A handful of powerful options are now available, such as Hugo, Jekyll, Eleventy, and Gatsby.

- -

If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's Beginner's guide to Eleventy. In the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content.

- -

Summary

- -

And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!

- -

Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do.

- -

{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md new file mode 100644 index 0000000000..d222a30518 --- /dev/null +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md @@ -0,0 +1,405 @@ +--- +title: Introduction aux frameworks côté client +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.

+ + + + + + + + + + + + +
Prerequisites:Familiarity with the core HTML, CSS, and JavaScript languages.
Objective:To understand how client-side JavaScript frameworks came to exist, what problems they solve, what alternatives there are, and how to go about choosing one.
+ +

A brief history

+ +

When JavaScript debuted in 1996, it added occasional interactivity and excitement to a web that was, up until then, composed of static documents. The web became not just a place to read things, but to do things. JavaScript’s popularity steadily increased. Developers who worked with JavaScript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others. This shared ecosystem of libraries helped shape the growth of the web.

+ +

Now, JavaScript is an essential part of the web, used on 95% of all websites, and the web is an essential part of modern life. Users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. The web allows us to do things that used to be possible only in native applications installed on our computers. These modern, complex, interactive websites are often referred to as web applications.

+ +

The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications. A framework is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software.

+ +

JavaScript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. MDN Web Docs, which you are currently reading this on, uses the React/ReactDOM framework to power its front end.

+ +

What frameworks are out there?

+ +

There are many frameworks out there, but currently the "big four" are considered to be the following.

+ +

Ember

+ +

Ember was initially released in December 2011 as a continuation of work that started in the SproutCore project. It is an older framework that has less users than more modern alternatives  such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles.

+ +

Start learning Ember

+ +

Angular

+ +

Angular is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built AngularJS. Angular was officially released on the 14th of September 2016.

+ +

Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses TypeScript, a superset of JavaScript that we’ll look at in a little more detail in the next chapter.

+ +

Vue

+ +

Evan You first released Vue in 2014, after working on and learning from the original AngularJS project. Vue is the youngest of the big four, but has enjoyed a recent uptick in popularity.

+ +

Vue, like AngularJS, extends HTML with some of its own code. Apart from that, it mainly relies on modern, standard JavaScript.

+ +

Start learning Vue

+ +

React

+ +

Facebook released React in 2013. By this point, it had already been using React to solve many of its problems internally. React itself is not technically a framework; it's a library for rendering UI components. React is used in combination with other libraries to make applications — React and React Native enable developers to make mobile applications; React and ReactDOM enable them to make web applications, etc.

+ +

Because React and ReactDOM are so often used together, React is colloquially understood as a JavaScript framework. As you read through this module, we will be working with that colloquial understanding.

+ +

React extends JavaScript with HTML-like syntax, known as JSX.

+ +

Start learning React

+ +

Why do frameworks exist?

+ +

We've discussed the environment that inspired the creation of frameworks, but not really why developers felt the need to make them. Exploring the why requires first examining the challenges of software development.

+ +

Consider a common kind of application: A to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters. This application should allow users to do things like render a list of tasks, add a new task, and delete a task; and it must do this while reliably tracking and updating the data underlying the application. In software development, this underlying data is known as state.

+ +

Each of our goals is theoretically simple in isolation. We can iterate over the data to render it; we can add to an object to make a new task; we can use an identifier to find, edit, or delete a task. When we remember that the application has to let the user to do all of these things through the browser, however, some cracks start to show. The real problem is this: every time we change our application’s state, we need to update the UI to match.

+ +

We can examine the difficulty of this problem by looking at just one feature of our todo list app: rendering a list of tasks.

+ +

The verbosity of DOM changes

+ +

Building HTML elements and rendering them in the browser at the appropriate time takes a surprising amount of code. Let's say that our state is an array of objects structured like this:

+ +
const state = [
+  {
+    id: 'todo-0',
+    name: 'Learn some frameworks!'
+  }
+]
+ +

How do we show one of those tasks to our user? We want to represent each task as a list item – an HTML <li> element inside of an unordered list element (a <ul>). How do we make it? That could look something like this:

+ +
function buildTodoItemEl(id, name) {
+  const item = document.createElement('li');
+  const span = document.createElement('span');
+  const textContent = document.createTextNode(name);
+
+  span.appendChild(textContent);
+
+  item.id = id;
+  item.appendChild(span);
+  item.appendChild(buildDeleteButtonEl(id));
+
+  return item;
+}
+ +

Here, we use the document.createElement() method to make our <li>, and several more lines of code to create the properties and children it needs.

+ +

The tenth line of this snippet references another build function: buildDeleteButtonEl(). It follows a similar pattern to the one we used to build a list item element:

+ +
function buildDeleteButtonEl(id) {
+  const button = document.createElement('button');
+  const textContent = document.createTextNode('Delete');
+
+  button.setAttribute('type', 'button');
+  button.appendChild(textContent);
+
+  return button;
+}
+ +

This button doesn't do anything yet, but it will later once we decide to implement our delete feature. The code that will render our items on the page might read something like this:

+ +
function renderTodoList() {
+  const frag = document.createDocumentFragment();
+  state.tasks.forEach(task => {
+    const item = buildTodoItemEl(task.id, task.name);
+    frag.appendChild(item);
+  });
+
+  while (todoListEl.firstChild) {
+    todoListEl.removeChild(todoListEl.firstChild);
+  }
+  todoListEl.appendChild(frag);
+}
+ +

We've now got well over thirty lines of code dedicated just to the UI – just to the step of rendering something in the DOM – and at no point do we add classes that we could use later to style our list-items!

+ +

Working directly with the DOM, as in this example, requires understanding many things about how the DOM works: how to make elements; how to change their properties; how to put elements inside of each other; how to get them on the page. None of this code actually handles user interactions, or addresses adding or deleting a task. If we add those features, we have to remember to update our UI in the right time and in the right way.

+ +

JavaScript frameworks were created to make this kind of work a little easier — they exist to provide a better developer experience. They don't bring brand-new powers to JavaScript; they give you easier access to JavaScript's powers so you can build for today's web.

+ +

If you want to see code samples from this section in action, you can check out a working version of the app on CodePen, which also allows users to add and delete new tasks.

+ +

Read more about the JavaScript used in this section:

+ + + +

Another way to build UIs

+ +

Every JavaScript framework offers a way to write user interfaces more declaratively. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes.

+ +

The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance.  By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks:

+ +
<ul>
+  <li v-for="task in tasks" v-bind:key="task.id">
+    <span>\{{task.name\}}</span>
+    <button type="button">Delete</button>
+  </li>
+</ul>
+ +

That's it. This snippet reduces approximately thirty-two lines of code down to six lines. If the curly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about Vue-specific syntax later on in the module. The thing to take away here is that this code looks like the UI it represents, whereas the vanilla JavaScript code does not.

+ +

Thanks to Vue, we didn't have to write our own functions for building the UI; the framework will handle that for us in an optimized, efficient way. Our only role here was to describe to Vue what each item should look like. Developers who are familiar with Vue can join our project and quickly work out what is going on. Vue is not alone in this: using a framework improves team as well as individual efficiency.

+ +

It's possible to do things similar to this in vanilla JavaScript. Template literal strings make it easy to write strings of HTML that represent what the final element would look like. That might be a useful idea for something as simple as our to-do list application, but it's not maintainable for large applications that manage thousands of records of data, and could render just as many unique elements in a user interface.

+ +

Other things frameworks give us

+ +

Let's look at some of the other advantages conferred upon us by frameworks. As we've alluded to before, the advantages of frameworks are achievable in vanilla JavaScript, but using a framework takes away all of the cognitive load of having to solve these problems yourself.

+ +

Tooling

+ +

Because each of the frameworks in this module have a large, active community, each framework's ecosystem provides tooling that Improves the developer experience. These tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent).

+ +
+

Note : If you want to find out more details about web tooling concepts, have a read of our Client-side tooling overview.

+
+ +

Compartmentalization

+ +

Most major frameworks encourage developers to abstract the different parts of their user interfaces into components — maintainable, reusable chunks of code that can communicate with one another. All the code related to a given component can live in one file (or a couple of specific files), so that you as a developer know exactly where to go to make changes to that component. In a vanilla JavaScript app, you'd have to create your own set of conventions to achieve this in an efficient, scalable way. Many JavaScript developers, if left to their own devices, could end up with all the code related to one part of the UI being spread out all over a file — or in another file altogether.

+ +

Routing

+ +

The most essential feature of the web is that it allows users to navigate from one page to another – it is, after all, a network of interlinked documents. When you follow a link on this very website, your browser communicates with a server and fetches new content to display for you. As it does so, the URL in your address bar changes. You can save this new URL and come back to the page later on, or share it with others so they can easily find the same page. Your browser remembers your navigation history and allows you to navigate back and forth, too. This is called server-side routing.

+ +

Modern web applications typically do not fetch and render new HTML files — they load a single HTML shell, and continually update the DOM inside it (referred to as single page apps, or SPAs) without navigating users to new addresses on the web. Each new pseudo-webpage is usually called a view, and by default, no routing is done.

+ +

When an SPA is complex enough, and renders enough unique views, it's important to bring routing functionality into your application. People are used to being able to link to specific pages in an application, travel forward and backward in their navigation history, etc., and their experience suffers when these standard web features are broken. When routing is handled by a client application in this fashion, it is aptly called client-side routing.

+ +

It's possible to make a router using the native capabilities of JavaScript and the browser, but popular, actively developed frameworks have companion libraries that make routing a more intuitive part of the development process.

+ +

Things to consider when using frameworks

+ +

Being an effective web developer means using the most appropriate tools for the job. JavaScript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. This section talks about some of the things you should consider when using frameworks. Bear in mind that you might not need a framework at all — beware that you don't end up using a framework just for the sake of it.

+ +

Familiarity with the tool

+ +

Just like vanilla JavaScript, frameworks take time to learn and have their quirks. Before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well.

+ +

Overengineering

+ +

If your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its JavaScript) may not be necessary at all. That said, frameworks are not a monolith, and some of them are better-suited to small projects than others. In an article for Smashing Magazine, Sarah Drasner writes about how Vue can replace jQuery as a tool for making small portions of a webpage interactive.

+ +

Larger code base and abstraction

+ +

Frameworks allow you to write more declarative code – and sometimes less code overall – by dealing with the DOM interactions for you, behind the scenes. This abstraction is great for your experience as a developer, but it isn't free. In order to translate what you write into DOM changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate.

+ +

Some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones.

+ +

The abstraction of frameworks affects not only your JavaScript, but your relationship with the very nature of the web. No matter how you build for the web, the end result, the layer that your users ultimately interact with, is HTML. Writing your whole application in JavaScript can make you lose sight of HTML and the purpose of its various tags, and lead you to produce an HTML document that is un-semantic and inaccessible. In fact, it's possible to write a fragile application that depends entirely on JavaScript and will not function without it.

+ +

Frameworks are not the source of our problems. With the wrong priorities, it's possible for any application to be fragile, bloated, and inaccessible. Frameworks do, however, amplify our priorities as developers. If your priority is to make a complex web app, it's easy to do that. However, if your priorities don't carefully guard performance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility. Modern developer priorities, amplified by frameworks, have inverted the structure of the web in many places. Instead of a robust, content-first network of documents, the web now often puts JavaScript first and user experience last.

+ +

Accessibility on a framework-driven web

+ +

Let's build on what we said in the previous section, and talk a bit more about accessibility. Making user interfaces accessible always requires some thought and effort, and frameworks can complicate that process. You often have to employ advanced framework APIs to access native browser features like ARIA live regions or focus management.

+ +

In some cases, framework applications create accessibility barriers that do not exist for traditional websites. The biggest example of this is in client-side routing, as mentioned earlier.

+ +

With traditional (server-side) routing, navigating the web has predictable results. The browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. These things happen every time you navigate to a new page.

+ +

With client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. Framework authors have devoted immense time and labor to writing JavaScript that recreates these features, and even then, no framework has done so perfectly.

+ +

The upshot is that you should consider accessibility from the very start of every web project, but bear in mind that abstracted codebases that use frameworks are more likely to suffer from major accessibility issues if you don't.

+ +

How to choose a framework

+ +

Each of the frameworks discussed in this module take different approaches to web application development. Each is regularly improving or changing, and each has its pros and cons. Choosing the right framework is a team- and project-dependent process, and you should do your own research to uncover what suits your needs. That said, we've identified a few questions you can ask in order to research your options more effectively:

+ +
    +
  1. What browsers does the framework support?
    2. +
  2. What domain-specific languages does the framework utilize?
    3. +
  3. Does the framework have a strong community and good docs (and other support) available?
    4. +
+ +

The table in this section provides a glanceable summary of the current browser support offered by each framework, as well as the domain-specific languages with which it can be used.

+ +

Broadly, domain-specific languages (DSLs) are programming languages relevant in specific areas of software development. In the context of frameworks, DSLs are variations on JavaScript or HTML that make it easier to develop with that framework. Crucially, none of the frameworks require a developer to use a specific DSL, but they have almost all been designed with a specific DSL in mind. Choosing not to employ a framework’s preferred DSL will mean you miss out on features that would otherwise improve your developer experience.

+ +

You should seriously consider the support matrix and DSLs of a framework when making a choice for any new project. Mismatched browser support can be a barrier to your users; mismatched DSL support can be a barrier to you and your teammates.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FrameworkBrowser supportPreferred DSLSupported DSLs
AngularIE9+TypeScriptHTML-based; TypeScript
ReactModern (IE9+ with Polyfills)JSXJSX; TypeScript
VueIE9+HTML-basedHTML-based, JSX, Pug
EmberModern (IE9+ in Ember version 2.18)HandlebarsHandlebars, TypeScript
+ +
+

Note :: DSLs we've described as "HTML-based" do not have official names. They are not really true DSLs, but they are non-standard HTML, so we believe they are worth highlighting.

+
+ +

Citations for this table:

+ + + +

Does the framework have a strong community?

+ +

This is perhaps the hardest metric to measure, because community size does not correlate directly to easy-to-access numbers. You can check a project's number of GitHub stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. It is not just about the community's size, but also how welcoming and inclusive it is, and how good available documentation is.

+ +

Opinions on the web

+ +

Don't just take our word on this matter — there are discussions all over the web. The Wikimedia Foundation recently chose to use Vue for its front-end, and posted a request for comments (RFC) on framework adoption. Eric Gardner, the author of the RFC, took time to outline the needs of the Wikimedia project and why certain frameworks were good choices for the team. This RFC serves as a great example of the kind of research you should do for yourself when planning to use a front-end framework.

+ +

The State of JavaScript survey is a helpful collection of feedback from JavaScript developers. It covers many topics related to JavaScript, including data about both the use of frameworks and developer sentiment toward them. Currently, there are several years of data available, allowing you to get a sense of a framework's popularity.

+ +

The Vue team has exhaustively compared Vue to other popular frameworks. There may be some bias in this comparison (which they note), but it's a valuable resource nonetheless.

+ +

Alternatives to client-side frameworks

+ +

If you’re looking for tools to expedite the web development process, and you know your project isn’t going to require intensive client-side JavaScript, you could reach for one of a handful of other solutions for building the web:

+ + + +

Content management systems

+ +

Content-management systems (CMSes) are any tools that allow a user to create content for the web without directly writing code themselves. They're a good solution for large projects, especially projects that require input from content writers who have limited coding ability, or for programmers who want to save time. They do, however, require a significant amount of time to set up, and utilizing a CMS means that you surrender at least some measure of control over the final output of your website. For example: if your chosen CMS doesn't author accessible content by default, it's often difficult to improve this.

+ +

Popular examples include Wordpress, Joomla, and Drupal.

+ +

Server-side rendering

+ +

Server-side rendering (SSR) is an application architecture in which it is the server's job to render a single-page application. This is the opposite of client-side rendering, which is the most common and most straightforward way to build a JavaScript application. Server-side rendering is easier on the client's device, because you're only sending a rendered HTML file to them, but it can be difficult to set up compared to a client-side-rendered application.

+ +

All of the frameworks covered in this module support server-side rendering as well as client-side rendering. Check out Next.js for React, Nuxt.js for Vue (yes it is confusing, and no, these projects are not related!), FastBoot for Ember, and Angular Universal for Angular.

+ +
+

Note : Some SSR solutions are written and maintained by the community, whereas some are "official" solutions provided by the framework's maintainer.

+
+ +

Static site generators

+ +

Static site generators are programs that dynamically generate all the webpages of a multi-page website — including any relevant CSS or JavaScript — so that they can be published in any number of places. The publishing host could be a GitHub pages branch, a Netlify instance, or any private server of your choosing, for example. There are a number of advantages of this approach, mostly around performance (your user's device isn’t building the page with JavaScript; it's already complete) and security (static pages have fewer attack vectors). These sites can still utilize JavaScript where they need to, but they are not dependent upon it. Static site generators take time to learn, just like any other tool, which can be a barrier to your development process.

+ +

Static sites can have as few or as many unique pages as you want. Just as frameworks empower you to quickly write client-side JavaScript applications, static site generators allow you a way to quickly create HTML files you would otherwise have written individually. Like frameworks, static site generators allow developers to write components that define common pieces of your web pages, and to compose those components together to create a final page. In the context of static site generators, these components are called templates. Web pages built by static site generators can even be home to framework applications: if you want one specific page of your statically-generated website to boot up a React application when your user visits it for example, you can do that.

+ +

Static site generators have been around for quite a long time, but they have seen a bit of a revival in the recent history of the web. A handful of powerful options are now available, such as Hugo, Jekyll, Eleventy, and Gatsby.

+ +

If you'd like to learn more about static site generators on the whole, check out Tatiana Mac's Beginner's guide to Eleventy. In the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content.

+ +

Summary

+ +

And that brings us to the end of our introduction to frameworks — we’ve not taught you any code yet, but hopefully we've given you a useful background on why you'd use frameworks in the first place and how to go about choosing one, and made you excited to learn more and get stuck in!

+ +

Our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do.

+ +

{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html deleted file mode 100644 index 4b4edd429a..0000000000 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.html +++ /dev/null @@ -1,354 +0,0 @@ ---- -title: Fonctionnalités principales des framework -slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.

- - - - - - - - - - - - -
Prerequisites:Familiarity with the core HTML, CSS, and JavaScript languages.
Objective:To understand the main code features of frameworks.
- -

Domain-specific languages

- -

All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of JSX for writing its components, while Ember utilizes Handlebars. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.

- -

Angular apps often make heavy use of TypeScript. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.

- -

DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. Transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.

- -

JSX

- -

JSX, which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.

- -

The following shows a simple JSX example:

- -
const subject = "World";
-const header = (
-  <header>
-    <h1>Hello, {subject}!</h1>
-  </header>
-);
- -

This expression represents an HTML <header> element with a <h1> element inside. The curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.

- -

When used with React, the JSX from the previous snippet would be compiled into this:

- -
var subject = "World";
-var header = React.createElement("header", null,
-  React.createElement("h1", null, "Hello, ", subject, "!")
-);
- -

When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:

- -
<header>
-  <h1>Hello, World!</h1>
-</header>
- -

Handlebars

- -

The Handlebars templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.

- -

Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.

- -

Given this Handlebars template:

- -
<header>
-  <h1>Hello, \{{subject}}!</h1>
-</header>
- -

And this data:

- -
{
-  subject: "World"
-}
- -

Handlebars will build HTML like this:

- -
<header>
-  <h1>Hello, World!</h1>
-</header>
- -

TypeScript

- -

TypeScript is a superset of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function add(), which takes integers a and b and returns their sum.

- -

In JavaScript, that function could be written like this:

- -
function add(a, b) {
-  return a + b;
-}
- -

This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:

- -
function add(a: number, b: number) {
-  return a + b;
-}
- -

The : number written after each parameter here tells TypeScript that both a and b must be numbers. If we were to use this function and pass '2' into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.

- -

Writing components

- -

As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.

- -

Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.

- -

The code snippets in the rest of this section will use React as an example, and are written with JSX.

- -

Properties

- -

Properties, or props, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an AuthorCredit component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, AuthorCredit needs to accept some props.

- -

A React representation of this AuthorCredit component might look something like this:

- -
function AuthorCredit(props) {
-  return (
-    <figure>
-      <img src={props.src} alt={props.alt} />
-      <figcaption>{props.byline}</figcaption>
-    </figure>
-  );
-}
- -

{props.src}, {props.alt}, and {props.byline} represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):

- -
<AuthorCredit
-  src="./assets/zelda.png"
-  alt="Portrait of Zelda Schiff"
-  byline="Zelda Schiff is editor-in-chief of the Library Times."
-/>
- -

This will ultimately render the following <figure> element in the browser, with its structure as defined in the AuthorCredit component, and its content as defined in the props included on the AuthorCredit component call:

- -
<figure>
-  <img
-    src="assets/zelda.png"
-    alt="Portrait of Zelda Schiff"
-  >
-  <figcaption>
-    Zelda Schiff is editor-in-chief of the Library Times.
-  </figcaption>
-</figure>
- -

State

- -

We talked about the concept of state in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.

- -

As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own count state, and could be written like this:

- -
function CounterButton() {
-  const [count] = useState(0);
-  return (
-    <button>Clicked {count} times</button>
-  );
-}
- -

useState() is a React hook which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:

- -
<button>Clicked 0 times</button>
- -

The useState() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself.

- -

Events

- -

In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.

- -

In React, listening for the click event requires a special property, onClick. Let’s update our CounterButton code from above to allow it to count clicks:

- -
function CounterButton() {
-  const [count, setCount] = useState(0);
-  return (
-    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
-  );
-}
- -

In this version we are using additional useState() functionality to create a special setCount() function, which we can invoke to update the value of count. We call this function on line 4, and set count to whatever its current value is, plus one.

- -

Styling components

- -

Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in Sass or Less, or transpile your CSS stylesheets with PostCSS.

- -

Handling dependencies

- -

All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard JavaScript module syntax, or at least something similar.

- -

Components in components

- -

One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.

- -

For example, our AuthorCredit React component might be utilized inside an Article component. That means that Article would need to import AuthorCredit.

- -
import AuthorCredit from "./components/AuthorCredit";
- -

Once that’s done, AuthorCredit could be used inside the Article component like this:

- -
  ...
-
-<AuthorCredit />
-
-  ...
- -

Dependency injection

- -

Real-world applications can often involve component structures with multiple levels of nesting. An AuthorCredit component nested many levels deep might, for some reason, need data from the very root level of our application.

- -

Let's say that the magazine site we're building is structured like this:

- -
<App>
-  <Home>
-    <Article>
-      <AuthorCredit {/* props */} />
-    </Article>
-  </Home>
-</App>
- -

Our App component has data that our AuthorCredit component needs. We could rewrite Home and Article so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: Home and Article don’t actually make use of the author's portrait or byline, but if we want to get that information into the AuthorCredit, we will need to change Home and Author to accommodate it.

- -

The problem of passing data through many layers of components is called prop drilling, and it’s not ideal for large applications.

- -

To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.

- -

Angular calls this process dependency injection; Vue has provide() and inject() component methods; React has a Context API; Ember shares state through services.

- -

Lifecycle

- -

In the context of a framework, a component’s lifecycle is a collection of phases a component goes through from the time it is rendered by the browser (often called mounting) to the time that it is removed from the DOM (often called unmounting). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component mounts, when it renders, when it unmounts, and at many phases in between these.

- -

The render phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what’s there.

- -

This diagram of a React component's lifecycle offers a general overview of the concept.

- -

Rendering elements

- -

Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they’re known for.

- -

The Virtual DOM is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.

- -

You can read more about the Virtual DOM in the React docs.

- -

The Incremental DOM is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.

- -

You can read more about the Incremental DOM on the Auth0 blog.

- -

The Glimmer VM is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript.

- -

Routing

- -

As mentioned in the previous chapter, routing is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.

- -

Testing

- -

All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.

- -

Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.

- -

Testing Library is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular.  The Ember docs cover the testing of Ember apps.

- -

Here’s a quick test for our CounterButton written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:

- -
import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom/extend-expect";
-
-import CounterButton from "./CounterButton";
-
-it("renders a semantic with an initial state of 0", () => {
-  const { getByRole } = render(<CounterButton />);
-  const btn = getByRole("button");
-
-  expect(btn).toBeInTheDocument();
-  expect(btn).toHaveTextContent("Clicked 0 times");
-});
-
-it("Increments the count when clicked", () => {
-  const { getByRole } = render(<CounterButton />);
-  const btn = getByRole("button");
-
-  fireEvent.click(btn);
-  expect(btn).toHaveTextContent("Clicked 1 times");
-
-  fireEvent.click(btn);
-  expect(btn).toHaveTextContent("Clicked 2 times");
-});
- -

Summary

- -

At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:

- - - -
-

Note : We only have three framework tutorial series available now, but we hope to have more available in the future.

-
- -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md new file mode 100644 index 0000000000..4b4edd429a --- /dev/null +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md @@ -0,0 +1,354 @@ +--- +title: Fonctionnalités principales des framework +slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.

+ + + + + + + + + + + + +
Prerequisites:Familiarity with the core HTML, CSS, and JavaScript languages.
Objective:To understand the main code features of frameworks.
+ +

Domain-specific languages

+ +

All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of JSX for writing its components, while Ember utilizes Handlebars. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.

+ +

Angular apps often make heavy use of TypeScript. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.

+ +

DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. Transformation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.

+ +

JSX

+ +

JSX, which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.

+ +

The following shows a simple JSX example:

+ +
const subject = "World";
+const header = (
+  <header>
+    <h1>Hello, {subject}!</h1>
+  </header>
+);
+ +

This expression represents an HTML <header> element with a <h1> element inside. The curly braces around subject on line 4 tell the application to read the value of the subject constant and insert it into our <h1>.

+ +

When used with React, the JSX from the previous snippet would be compiled into this:

+ +
var subject = "World";
+var header = React.createElement("header", null,
+  React.createElement("h1", null, "Hello, ", subject, "!")
+);
+ +

When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:

+ +
<header>
+  <h1>Hello, World!</h1>
+</header>
+ +

Handlebars

+ +

The Handlebars templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.

+ +

Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.

+ +

Given this Handlebars template:

+ +
<header>
+  <h1>Hello, \{{subject}}!</h1>
+</header>
+ +

And this data:

+ +
{
+  subject: "World"
+}
+ +

Handlebars will build HTML like this:

+ +
<header>
+  <h1>Hello, World!</h1>
+</header>
+ +

TypeScript

+ +

TypeScript is a superset of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function add(), which takes integers a and b and returns their sum.

+ +

In JavaScript, that function could be written like this:

+ +
function add(a, b) {
+  return a + b;
+}
+ +

This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:

+ +
function add(a: number, b: number) {
+  return a + b;
+}
+ +

The : number written after each parameter here tells TypeScript that both a and b must be numbers. If we were to use this function and pass '2' into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.

+ +

Writing components

+ +

As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.

+ +

Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.

+ +

The code snippets in the rest of this section will use React as an example, and are written with JSX.

+ +

Properties

+ +

Properties, or props, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an AuthorCredit component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, AuthorCredit needs to accept some props.

+ +

A React representation of this AuthorCredit component might look something like this:

+ +
function AuthorCredit(props) {
+  return (
+    <figure>
+      <img src={props.src} alt={props.alt} />
+      <figcaption>{props.byline}</figcaption>
+    </figure>
+  );
+}
+ +

{props.src}, {props.alt}, and {props.byline} represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):

+ +
<AuthorCredit
+  src="./assets/zelda.png"
+  alt="Portrait of Zelda Schiff"
+  byline="Zelda Schiff is editor-in-chief of the Library Times."
+/>
+ +

This will ultimately render the following <figure> element in the browser, with its structure as defined in the AuthorCredit component, and its content as defined in the props included on the AuthorCredit component call:

+ +
<figure>
+  <img
+    src="assets/zelda.png"
+    alt="Portrait of Zelda Schiff"
+  >
+  <figcaption>
+    Zelda Schiff is editor-in-chief of the Library Times.
+  </figcaption>
+</figure>
+ +

State

+ +

We talked about the concept of state in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.

+ +

As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own count state, and could be written like this:

+ +
function CounterButton() {
+  const [count] = useState(0);
+  return (
+    <button>Clicked {count} times</button>
+  );
+}
+ +

useState() is a React hook which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:

+ +
<button>Clicked 0 times</button>
+ +

The useState() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself.

+ +

Events

+ +

In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.

+ +

In React, listening for the click event requires a special property, onClick. Let’s update our CounterButton code from above to allow it to count clicks:

+ +
function CounterButton() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
+  );
+}
+ +

In this version we are using additional useState() functionality to create a special setCount() function, which we can invoke to update the value of count. We call this function on line 4, and set count to whatever its current value is, plus one.

+ +

Styling components

+ +

Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework’s approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in Sass or Less, or transpile your CSS stylesheets with PostCSS.

+ +

Handling dependencies

+ +

All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard JavaScript module syntax, or at least something similar.

+ +

Components in components

+ +

One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.

+ +

For example, our AuthorCredit React component might be utilized inside an Article component. That means that Article would need to import AuthorCredit.

+ +
import AuthorCredit from "./components/AuthorCredit";
+ +

Once that’s done, AuthorCredit could be used inside the Article component like this:

+ +
  ...
+
+<AuthorCredit />
+
+  ...
+ +

Dependency injection

+ +

Real-world applications can often involve component structures with multiple levels of nesting. An AuthorCredit component nested many levels deep might, for some reason, need data from the very root level of our application.

+ +

Let's say that the magazine site we're building is structured like this:

+ +
<App>
+  <Home>
+    <Article>
+      <AuthorCredit {/* props */} />
+    </Article>
+  </Home>
+</App>
+ +

Our App component has data that our AuthorCredit component needs. We could rewrite Home and Article so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: Home and Article don’t actually make use of the author's portrait or byline, but if we want to get that information into the AuthorCredit, we will need to change Home and Author to accommodate it.

+ +

The problem of passing data through many layers of components is called prop drilling, and it’s not ideal for large applications.

+ +

To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.

+ +

Angular calls this process dependency injection; Vue has provide() and inject() component methods; React has a Context API; Ember shares state through services.

+ +

Lifecycle

+ +

In the context of a framework, a component’s lifecycle is a collection of phases a component goes through from the time it is rendered by the browser (often called mounting) to the time that it is removed from the DOM (often called unmounting). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component mounts, when it renders, when it unmounts, and at many phases in between these.

+ +

The render phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what’s there.

+ +

This diagram of a React component's lifecycle offers a general overview of the concept.

+ +

Rendering elements

+ +

Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they’re known for.

+ +

The Virtual DOM is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.

+ +

You can read more about the Virtual DOM in the React docs.

+ +

The Incremental DOM is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.

+ +

You can read more about the Incremental DOM on the Auth0 blog.

+ +

The Glimmer VM is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript.

+ +

Routing

+ +

As mentioned in the previous chapter, routing is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.

+ +

Testing

+ +

All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.

+ +

Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.

+ +

Testing Library is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular.  The Ember docs cover the testing of Ember apps.

+ +

Here’s a quick test for our CounterButton written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:

+ +
import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+
+import CounterButton from "./CounterButton";
+
+it("renders a semantic with an initial state of 0", () => {
+  const { getByRole } = render(<CounterButton />);
+  const btn = getByRole("button");
+
+  expect(btn).toBeInTheDocument();
+  expect(btn).toHaveTextContent("Clicked 0 times");
+});
+
+it("Increments the count when clicked", () => {
+  const { getByRole } = render(<CounterButton />);
+  const btn = getByRole("button");
+
+  fireEvent.click(btn);
+  expect(btn).toHaveTextContent("Clicked 1 times");
+
+  fireEvent.click(btn);
+  expect(btn).toHaveTextContent("Clicked 2 times");
+});
+ +

Summary

+ +

At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you’re enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:

+ + + +
+

Note : We only have three framework tutorial series available now, but we hope to have more available in the future.

+
+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html deleted file mode 100644 index ff22108290..0000000000 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ /dev/null @@ -1,468 +0,0 @@ ---- -title: Démarrer avec React -slug: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started -tags: - - Apprendre - - Débutant - - Frameworks - - JavaScript - - React - - jsx - - props -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")}}
- -

In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.

- - - - - - - - - - - - -
Prerequisites: -

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.

- -

React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.

-
Objective:To setup a local React development environment, create a start app, and understand the basics of how it works
- -

Hello React

- -

As its official tagline states, React is a library for building user interfaces. React is not a framework – it's not even exclusive to the web. It's used with other libraries to render to certain environments. For instance, React Native can be used to build mobile applications; React 360 can be used to build virtual reality applications; and there are other possibilities besides.

- -

To build for the web, developers use React in tandem with ReactDOM. React and ReactDOM are often discussed in the same spaces as, and utilized to solve the same problems as, other true web development frameworks. When we refer to React as a "framework", we’re working with that colloquial understanding.

- -

React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.

- -

Use cases

- -

Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app's entire user interface.

- -

While React can be used for small pieces of an interface, it's not as easy to "drop into" an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.

- -

In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learnt.

- -

This article is going to focus on the use case of using React to render the entire user interface of an application, using tooling provided by Facebook’s own create-react-app tool.

- -

How does React use JavaScript?

- -

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:

- -
const heading = <h1>Mozilla Developer Network</h1>;
- -

This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.

- -

Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

- -
const header = (
-  <header>
-    <h1>Mozilla Developer Network</h1>
-  </header>
-);
- -
-

Note : The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:

- -
const header = <header>
-    <h1>Mozilla Developer Network</h1>
-</header>
- -

However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.

-
- -

Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:

- -
const header = React.createElement("header", null,
-  React.createElement("h1", null, "Mozilla Developer Network")
-);
- -

It's possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.

- -

Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.

- -

To read more about JSX, check out the React team's JSX In Depth article.

- -

Setting up your first React app

- -

There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.

- -

It's possible to add React to a website without create-react-app by copying some <script> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.

- -

Requirements

- -

In order to use create-react-app, you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).

- -

You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

- -

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.

- -

Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.

- -

Also see the following for more information:

- - - -

Initializing your app

- -

create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you cd to the place you'd like your app to live on your hard drive, then run the following in your terminal:

- -
npx create-react-app moz-todo-react
- -

This creates a moz-todo-react directory, and does several things inside it:

- - - -
-

Note : if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:

- -
npx create-react-app moz-todo-react --use-npm
-
- -

create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.

- -

When the process is complete, cd into the moz-todo-react directory and run the command npm start. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:

- -

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

- -

Application structure

- -

create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:

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

The src directory is where we'll spend most of our time, as it's where the source code for our application lives.

- -

The public directory contains files that will be read by your browser while you're developing the app; the most important of these is index.html. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!

- -

The public directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our Deploying our app tutorial.

- -

The package.json file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read What is the file `package.json`? on NodeJS.org; we also talk about it in our Package management basics tutorial.

- -

Exploring our first React component — <App/>

- -

In React, a component is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.

- -

Let's open src/App.js, since our browser is prompting us to edit it. This file contains our first component, App, and a few other lines of code:

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

The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.

- -

Import statements

- -

The import statements at the top of the file allow App.js to use code that has been defined elsewhere. Let's look at these statements more closely.

- -
import React from 'react';
-import logo from './logo.svg';
-import './App.css';
- -

The first statement imports the React library itself. Because React turns the JSX we write into React.createElement(), all React components must import the React module. If you skip this step, your application will produce an error.

- -

The second statement imports a logo from './logo.svg'. Note the ./ at the beginning of the path, and the .svg extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the logo.svg file lives in our source directory.

- -

We don't write a path or extension when importing the React module — this is not a local file; instead, it is listed as a dependency in our package.json file. Be careful of this distinction as you work through this lesson!

- -

The third statement imports the CSS related to our App component. Note that there is no variable name and no from directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.

- -

The App component

- -

After the imports, we have a function named App. Whereas most of the JavaScript community prefers camel-case names like helloWorld, React components use pascal-case variable names, like HelloWorld, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the App function to app, your browser would show you an error.

- -

Let's look at App more closely.

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

The App function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.

- -

Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> tag has a className attribute. This is the same as the class attribute in HTML, but because JSX is JavaScript, we can't use the word class – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.

- -

Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.

- -

Your App component should now look like this:

- -
function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Hello, World!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Export statements

- -

At the very bottom of the App.js file, the statement export default App makes our App component available to other modules.

- -

Interrogating the index

- -

Let’s open src/index.js, because that's where the App component is being used. This file is the entry point for our app, and it initially looks like this:

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

As with App.js, the file starts by importing all the JS modules and other assets it needs to run. src/index.css holds global styles that are applied to our whole app. We can also see our App component imported here; it is made available for import thanks to the export statement at the bottom of App.js.

- -

Line 7 calls React’s ReactDOM.render() function with two arguments:

- - - -

All of this tells React that we want to render our React application with the App component as the root, or first component.

- -
-

Note :: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.

-
- -

Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.

- -

Your final index.js file should look like this:

- -
import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
- -

Variables and props

- -

Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).

- -

Variables in JSX

- -

Back in App.js, let’s focus on line 9:

- -
<img src={logo} className="App-logo" alt="logo" />
- -

Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.

- -

Let's try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:

- -
function App() {
-  const subject = "React";
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Hello, World!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

Change line 8 to use our subject variable instead of the word "world", like this:

- -
function App() {
-  const subject = "React";
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Hello, {subject}!
-        </p>
-      </header>
-    </div>
-  );
-}
- -

When you save, your browser should display "Hello, React!" instead of "Hello, world!"

- -

Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.

- -

Component props

- -

A prop is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — prop="value". Let’s open index.js and give our <App/> call its first prop.

- -

Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:

- -
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
- -

Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):

- -
function App() {
-  const subject = "React";
-  return (
-    // return statement
-  );
-}
- -

Change the signature of the App function so that it accepts props as a parameter, and delete the subject const. Just like any other function parameter, you can put props in a console.log() to print it to your browser's console. Go ahead and do that before the return statement, like so:

- -
function App(props) {
-  console.log(props);
-  return (
-    // return statement
-  );
-}
- -

Save your file and check your browser's JavaScript console. You should see something like this logged:

- -
Object { subject: "Clarice" }
- -

The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.

- -

Now that subject is one of our props, let's utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. You can also delete your console.log() if you want.

- -
function App(props) {
-  const subject = props.subject;
-  return (
-    // return statement
-  );
-}
- -

When you save, the the app should now greet you with "Hello, Clarice!". If you return to index.js, edit the value of subject, and save, your text will change.

- -

Summary

- -

This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.

- -

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

- -

In this module

- - diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md new file mode 100644 index 0000000000..ff22108290 --- /dev/null +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -0,0 +1,468 @@ +--- +title: Démarrer avec React +slug: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +tags: + - Apprendre + - Débutant + - Frameworks + - JavaScript + - React + - jsx + - props +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")}}
+ +

In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.

+ + + + + + + + + + + + +
Prerequisites: +

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.

+ +

React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in your application are related to JavaScript or to the more specific domain of React.

+
Objective:To setup a local React development environment, create a start app, and understand the basics of how it works
+ +

Hello React

+ +

As its official tagline states, React is a library for building user interfaces. React is not a framework – it's not even exclusive to the web. It's used with other libraries to render to certain environments. For instance, React Native can be used to build mobile applications; React 360 can be used to build virtual reality applications; and there are other possibilities besides.

+ +

To build for the web, developers use React in tandem with ReactDOM. React and ReactDOM are often discussed in the same spaces as, and utilized to solve the same problems as, other true web development frameworks. When we refer to React as a "framework", we’re working with that colloquial understanding.

+ +

React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.

+ +

Use cases

+ +

Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app's entire user interface.

+ +

While React can be used for small pieces of an interface, it's not as easy to "drop into" an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.

+ +

In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learnt.

+ +

This article is going to focus on the use case of using React to render the entire user interface of an application, using tooling provided by Facebook’s own create-react-app tool.

+ +

How does React use JavaScript?

+ +

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:

+ +
const heading = <h1>Mozilla Developer Network</h1>;
+ +

This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.

+ +

Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

+ +
const header = (
+  <header>
+    <h1>Mozilla Developer Network</h1>
+  </header>
+);
+ +
+

Note : The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:

+ +
const header = <header>
+    <h1>Mozilla Developer Network</h1>
+</header>
+ +

However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.

+
+ +

Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:

+ +
const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);
+ +

It's possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.

+ +

Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.

+ +

To read more about JSX, check out the React team's JSX In Depth article.

+ +

Setting up your first React app

+ +

There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.

+ +

It's possible to add React to a website without create-react-app by copying some <script> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.

+ +

Requirements

+ +

In order to use create-react-app, you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).

+ +

You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

+ +

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.

+ +

Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.

+ +

Also see the following for more information:

+ + + +

Initializing your app

+ +

create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you cd to the place you'd like your app to live on your hard drive, then run the following in your terminal:

+ +
npx create-react-app moz-todo-react
+ +

This creates a moz-todo-react directory, and does several things inside it:

+ + + +
+

Note : if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:

+ +
npx create-react-app moz-todo-react --use-npm
+
+ +

create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.

+ +

When the process is complete, cd into the moz-todo-react directory and run the command npm start. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:

+ +

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

+ +

Application structure

+ +

create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:

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

The src directory is where we'll spend most of our time, as it's where the source code for our application lives.

+ +

The public directory contains files that will be read by your browser while you're developing the app; the most important of these is index.html. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!

+ +

The public directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our Deploying our app tutorial.

+ +

The package.json file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read What is the file `package.json`? on NodeJS.org; we also talk about it in our Package management basics tutorial.

+ +

Exploring our first React component — <App/>

+ +

In React, a component is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.

+ +

Let's open src/App.js, since our browser is prompting us to edit it. This file contains our first component, App, and a few other lines of code:

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

The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.

+ +

Import statements

+ +

The import statements at the top of the file allow App.js to use code that has been defined elsewhere. Let's look at these statements more closely.

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+ +

The first statement imports the React library itself. Because React turns the JSX we write into React.createElement(), all React components must import the React module. If you skip this step, your application will produce an error.

+ +

The second statement imports a logo from './logo.svg'. Note the ./ at the beginning of the path, and the .svg extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the logo.svg file lives in our source directory.

+ +

We don't write a path or extension when importing the React module — this is not a local file; instead, it is listed as a dependency in our package.json file. Be careful of this distinction as you work through this lesson!

+ +

The third statement imports the CSS related to our App component. Note that there is no variable name and no from directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.

+ +

The App component

+ +

After the imports, we have a function named App. Whereas most of the JavaScript community prefers camel-case names like helloWorld, React components use pascal-case variable names, like HelloWorld, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the App function to app, your browser would show you an error.

+ +

Let's look at App more closely.

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

The App function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.

+ +

Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> tag has a className attribute. This is the same as the class attribute in HTML, but because JSX is JavaScript, we can't use the word class – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.

+ +

Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.

+ +

Your App component should now look like this:

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Hello, World!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Export statements

+ +

At the very bottom of the App.js file, the statement export default App makes our App component available to other modules.

+ +

Interrogating the index

+ +

Let’s open src/index.js, because that's where the App component is being used. This file is the entry point for our app, and it initially looks like this:

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

As with App.js, the file starts by importing all the JS modules and other assets it needs to run. src/index.css holds global styles that are applied to our whole app. We can also see our App component imported here; it is made available for import thanks to the export statement at the bottom of App.js.

+ +

Line 7 calls React’s ReactDOM.render() function with two arguments:

+ + + +

All of this tells React that we want to render our React application with the App component as the root, or first component.

+ +
+

Note :: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.

+
+ +

Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.

+ +

Your final index.js file should look like this:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+ +

Variables and props

+ +

Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).

+ +

Variables in JSX

+ +

Back in App.js, let’s focus on line 9:

+ +
<img src={logo} className="App-logo" alt="logo" />
+ +

Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.

+ +

Let's try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Hello, World!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Change line 8 to use our subject variable instead of the word "world", like this:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Hello, {subject}!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

When you save, your browser should display "Hello, React!" instead of "Hello, world!"

+ +

Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.

+ +

Component props

+ +

A prop is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — prop="value". Let’s open index.js and give our <App/> call its first prop.

+ +

Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:

+ +
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
+ +

Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):

+ +
function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}
+ +

Change the signature of the App function so that it accepts props as a parameter, and delete the subject const. Just like any other function parameter, you can put props in a console.log() to print it to your browser's console. Go ahead and do that before the return statement, like so:

+ +
function App(props) {
+  console.log(props);
+  return (
+    // return statement
+  );
+}
+ +

Save your file and check your browser's JavaScript console. You should see something like this logged:

+ +
Object { subject: "Clarice" }
+ +

The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.

+ +

Now that subject is one of our props, let's utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. You can also delete your console.log() if you want.

+ +
function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}
+ +

When you save, the the app should now greet you with "Hello, Clarice!". If you return to index.js, edit the value of subject, and save, your text will change.

+ +

Summary

+ +

This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.

+ +

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

+ +

In this module

+ + diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html deleted file mode 100644 index 0ea2852a83..0000000000 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.html +++ /dev/null @@ -1,603 +0,0 @@ ---- -title: Débuter notre React todo list -slug: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning -tags: - - React -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.

- -
-

Note : If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

-
- - - - - - - - - - - - -
Prerequisites: -

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.

-
Objective:To introduce our todo list case study, and get the basic App structure and styling in place.
- -

Our app's user stories

- -

In software development, a user story is an actionable goal from the perspective of the user. Defining user stories before we begin our work will help us focus our work. Our app should fulfill the following stories:

- -

As a user, I can

- - - -

We'll tackle these stories one-by-one.

- -

Pre-project housekeeping

- -

create-react-app has made a few files we won't be using at all for our project.

- - - -

Then, copy and paste the following commands into your terminal to delete some unneeded files. Make sure you’re starting in the app's root directory!

- -
# Move into the src directory of your project
-cd src
-# Delete a few files
-rm -- App.test.js App.css logo.svg serviceWorker.js setupTests.js
-# Move back up to the root of the project
-cd ..
- -

Notes:

- - - -

Project starter code

- -

As a starting point for this project, we're going to provide two things: An App() function to replace the one you have now, and some CSS to style your app.

- -

The JSX

- -

Copy the following snippet to your clipboard, then paste it into App.js so that it replaces the existing App() function:

- -
function App(props) {
-  return (
-    <div className="todoapp stack-large">
-      <h1>TodoMatic</h1>
-      <form>
-        <h2 className="label-wrapper">
-          <label htmlFor="new-todo-input" className="label__lg">
-            What needs to be done?
-          </label>
-        </h2>
-        <input
-          type="text"
-          id="new-todo-input"
-          className="input input__lg"
-          name="text"
-          autoComplete="off"
-        />
-        <button type="submit" className="btn btn__primary btn__lg">
-          Add
-        </button>
-      </form>
-      <div className="filters btn-group stack-exception">
-        <button type="button" className="btn toggle-btn" aria-pressed="true">
-          <span className="visually-hidden">Show </span>
-          <span>all</span>
-          <span className="visually-hidden"> tasks</span>
-        </button>
-        <button type="button" className="btn toggle-btn" aria-pressed="false">
-          <span className="visually-hidden">Show </span>
-          <span>Active</span>
-          <span className="visually-hidden"> tasks</span>
-        </button>
-        <button type="button" className="btn toggle-btn" aria-pressed="false">
-          <span className="visually-hidden">Show </span>
-          <span>Completed</span>
-          <span className="visually-hidden"> tasks</span>
-        </button>
-      </div>
-      <h2 id="list-heading">
-        3 tasks remaining
-      </h2>
-      <ul
-        role="list"
-        className="todo-list stack-large stack-exception"
-        aria-labelledby="list-heading"
-      >
-        <li className="todo stack-small">
-          <div className="c-cb">
-            <input id="todo-0" type="checkbox" defaultChecked={true} />
-            <label className="todo-label" htmlFor="todo-0">
-              Eat
-            </label>
-          </div>
-          <div className="btn-group">
-            <button type="button" className="btn">
-              Edit <span className="visually-hidden">Eat</span>
-            </button>
-            <button type="button" className="btn btn__danger">
-              Delete <span className="visually-hidden">Eat</span>
-            </button>
-          </div>
-        </li>
-        <li className="todo stack-small">
-          <div className="c-cb">
-            <input id="todo-1" type="checkbox" />
-            <label className="todo-label" htmlFor="todo-1">
-              Sleep
-            </label>
-          </div>
-          <div className="btn-group">
-            <button type="button" className="btn">
-              Edit <span className="visually-hidden">Sleep</span>
-            </button>
-            <button type="button" className="btn btn__danger">
-              Delete <span className="visually-hidden">Sleep</span>
-            </button>
-          </div>
-        </li>
-        <li className="todo stack-small">
-          <div className="c-cb">
-            <input id="todo-2" type="checkbox" />
-            <label className="todo-label" htmlFor="todo-2">
-              Repeat
-            </label>
-          </div>
-          <div className="btn-group">
-            <button type="button" className="btn">
-              Edit <span className="visually-hidden">Repeat</span>
-            </button>
-            <button type="button" className="btn btn__danger">
-              Delete <span className="visually-hidden">Repeat</span>
-            </button>
-          </div>
-        </li>
-      </ul>
-    </div>
-  );
-}
- -

Now open public/index.html and change the <title> element’s text to TodoMatic. This way, it will match the <h1> at the top of our app.

- -
<title>TodoMatic</title>
- -

When your browser refreshes, you should see something like this:

- -

todo-matic app, unstyled, showing a jumbled mess of labels, inputs, and buttons

- -

It's ugly, and doesn’t function yet, but that's okay — we'll style it in a moment. First, consider the JSX we have, and how it corresponds to our user stories:

- - - -

The form will allow us to make tasks; the buttons will let us filter them; the heading and list are our way to read them. The UI for editing a task is conspicuously absent for now. That's okay – we'll write that later.

- -

Accessibility features

- -

You may notice some unusual attributes here. For example:

- -
<button type="button" className="btn toggle-btn" aria-pressed="true">
-  <span className="visually-hidden">Show </span>
-  <span>all</span>
-  <span className="visually-hidden"> tasks</span>
-</button>
- -

Here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed. Think of these as analogs for on and off. Setting a value of true means that the button is pressed by default.

- -

The class visually-hidden has no effect yet, because we have not included any CSS. Once we have put our styles in place, though, any element with this class will be hidden from sighted users and still available to screen reader users — this is because these words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them.

- -

Further down, you can find our <ul> element:

- -
<ul
-  role="list"
-  className="todo-list stack-large stack-exception"
-  aria-labelledby="list-heading"
->
- -

The role attribute helps assistive technology explain what kind of element a tag represents. A <ul> is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the <ul>  element. If you want to learn more about why this is necessary, you can check out Scott O'Hara’s article, “Fixing Lists”.

- -

The aria-labelledby attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it.

- -

Finally, the labels and inputs in our list items have some attributes unique to JSX:

- -
<input id="todo-0" type="checkbox" defaultChecked={true} />
-<label className="todo-label" htmlFor="todo-0">
-  Eat
-</label>
- -

The defaultChecked attribute in the <input/ >  tag tells React to check this checkbox initially. If we were to use checked, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.

- -

The htmlFor attribute corresponds to the for attribute used in HTML. We cannot use for as an attribute in JSX because for is a reserved word, so  React uses htmlFor instead.

- -

Notes:

- - - -

Implementing our styles

- -

Paste the following CSS code into src/index.css so that it replaces what's currently there:

- -
/* RESETS */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-*:focus {
-  outline: 3px dashed #228bec;
-  outline-offset: 0;
-}
-html {
-  font: 62.5% / 1.15 sans-serif;
-}
-h1,
-h2 {
-  margin-bottom: 0;
-}
-ul {
-  list-style: none;
-  padding: 0;
-}
-button {
-  border: none;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-}
-button::-moz-focus-inner {
-  border: 0;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-button,
-input {
-  overflow: visible;
-}
-input[type="text"] {
-  border-radius: 0;
-}
-body {
-  width: 100%;
-  max-width: 68rem;
-  margin: 0 auto;
-  font: 1.6rem/1.25 Arial, sans-serif;
-  background-color: #f5f5f5;
-  color: #4d4d4d;
-}
-@media screen and (min-width: 620px) {
-  body {
-    font-size: 1.9rem;
-    line-height: 1.31579;
-  }
-}
-/*END RESETS*/
-/* GLOBAL STYLES */
-.form-group > input[type="text"] {
-  display: inline-block;
-  margin-top: 0.4rem;
-}
-.btn {
-  padding: 0.8rem 1rem 0.7rem;
-  border: 0.2rem solid #4d4d4d;
-  cursor: pointer;
-  text-transform: capitalize;
-}
-.btn.toggle-btn {
-  border-width: 1px;
-  border-color: #d3d3d3;
-}
-.btn.toggle-btn[aria-pressed="true"] {
-  text-decoration: underline;
-  border-color: #4d4d4d;
-}
-.btn__danger {
-  color: #fff;
-  background-color: #ca3c3c;
-  border-color: #bd2130;
-}
-.btn__filter {
-  border-color: lightgrey;
-}
-.btn__primary {
-  color: #fff;
-  background-color: #000;
-}
-.btn-group {
-  display: flex;
-  justify-content: space-between;
-}
-.btn-group > * {
-  flex: 1 1 49%;
-}
-.btn-group > * + * {
-  margin-left: 0.8rem;
-}
-.label-wrapper {
-  margin: 0;
-  flex: 0 0 100%;
-  text-align: center;
-}
-.visually-hidden {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
-  clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap;
-}
-[class*="stack"] > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.stack-small > * + * {
-  margin-top: 1.25rem;
-}
-.stack-large > * + * {
-  margin-top: 2.5rem;
-}
-@media screen and (min-width: 550px) {
-  .stack-small > * + * {
-    margin-top: 1.4rem;
-  }
-  .stack-large > * + * {
-    margin-top: 2.8rem;
-  }
-}
-.stack-exception {
-  margin-top: 1.2rem;
-}
-/* END GLOBAL STYLES */
-.todoapp {
-  background: #fff;
-  margin: 2rem 0 4rem 0;
-  padding: 1rem;
-  position: relative;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
-}
-@media screen and (min-width: 550px) {
-  .todoapp {
-    padding: 4rem;
-  }
-}
-.todoapp > * {
-  max-width: 50rem;
-  margin-left: auto;
-  margin-right: auto;
-}
-.todoapp > form {
-  max-width: 100%;
-}
-.todoapp > h1 {
-  display: block;
-  max-width: 100%;
-  text-align: center;
-  margin: 0;
-  margin-bottom: 1rem;
-}
-.label__lg {
-  line-height: 1.01567;
-  font-weight: 300;
-  padding: 0.8rem;
-  margin-bottom: 1rem;
-  text-align: center;
-}
-.input__lg {
-  padding: 2rem;
-  border: 2px solid #000;
-}
-.input__lg:focus {
-  border-color: #4d4d4d;
-  box-shadow: inset 0 0 0 2px;
-}
-[class*="__lg"] {
-  display: inline-block;
-  width: 100%;
-  font-size: 1.9rem;
-}
-[class*="__lg"]:not(:last-child) {
-  margin-bottom: 1rem;
-}
-@media screen and (min-width: 620px) {
-  [class*="__lg"] {
-    font-size: 2.4rem;
-  }
-}
-.filters {
-  width: 100%;
-  margin: unset auto;
-}
-/* Todo item styles */
-.todo {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.todo > * {
-  flex: 0 0 100%;
-}
-.todo-text {
-  width: 100%;
-  min-height: 4.4rem;
-  padding: 0.4rem 0.8rem;
-  border: 2px solid #565656;
-}
-.todo-text:focus {
-  box-shadow: inset 0 0 0 2px;
-}
-/* CHECKBOX STYLES */
-.c-cb {
-  box-sizing: border-box;
-  font-family: Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  font-weight: 400;
-  font-size: 1.6rem;
-  line-height: 1.25;
-  display: block;
-  position: relative;
-  min-height: 44px;
-  padding-left: 40px;
-  clear: left;
-}
-.c-cb > label::before,
-.c-cb > input[type="checkbox"] {
-  box-sizing: border-box;
-  top: -2px;
-  left: -2px;
-  width: 44px;
-  height: 44px;
-}
-.c-cb > input[type="checkbox"] {
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-  margin: 0;
-  opacity: 0;
-}
-.c-cb > label {
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  display: inline-block;
-  margin-bottom: 0;
-  padding: 8px 15px 5px;
-  cursor: pointer;
-  touch-action: manipulation;
-}
-.c-cb > label::before {
-  content: "";
-  position: absolute;
-  border: 2px solid currentColor;
-  background: transparent;
-}
-.c-cb > input[type="checkbox"]:focus + label::before {
-  border-width: 4px;
-  outline: 3px dashed #228bec;
-}
-.c-cb > label::after {
-  box-sizing: content-box;
-  content: "";
-  position: absolute;
-  top: 11px;
-  left: 9px;
-  width: 18px;
-  height: 7px;
-  transform: rotate(-45deg);
-  border: solid;
-  border-width: 0 0 5px 5px;
-  border-top-color: transparent;
-  opacity: 0;
-  background: transparent;
-}
-.c-cb > input[type="checkbox"]:checked + label::after {
-  opacity: 1;
-}
- -

Save and look back at your browser, and your app should now have reasonable styling.

- -

Summary

- -

Now our todo list app actually looks a bit more like a real app! The problem is: it doesn’t actually do anything. We’ll start fixing that in the next chapter!

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md new file mode 100644 index 0000000000..0ea2852a83 --- /dev/null +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md @@ -0,0 +1,603 @@ +--- +title: Débuter notre React todo list +slug: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning +tags: + - React +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.

+ +
+

Note : If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

+
+ + + + + + + + + + + + +
Prerequisites: +

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line.

+
Objective:To introduce our todo list case study, and get the basic App structure and styling in place.
+ +

Our app's user stories

+ +

In software development, a user story is an actionable goal from the perspective of the user. Defining user stories before we begin our work will help us focus our work. Our app should fulfill the following stories:

+ +

As a user, I can

+ + + +

We'll tackle these stories one-by-one.

+ +

Pre-project housekeeping

+ +

create-react-app has made a few files we won't be using at all for our project.

+ + + +

Then, copy and paste the following commands into your terminal to delete some unneeded files. Make sure you’re starting in the app's root directory!

+ +
# Move into the src directory of your project
+cd src
+# Delete a few files
+rm -- App.test.js App.css logo.svg serviceWorker.js setupTests.js
+# Move back up to the root of the project
+cd ..
+ +

Notes:

+ + + +

Project starter code

+ +

As a starting point for this project, we're going to provide two things: An App() function to replace the one you have now, and some CSS to style your app.

+ +

The JSX

+ +

Copy the following snippet to your clipboard, then paste it into App.js so that it replaces the existing App() function:

+ +
function App(props) {
+  return (
+    <div className="todoapp stack-large">
+      <h1>TodoMatic</h1>
+      <form>
+        <h2 className="label-wrapper">
+          <label htmlFor="new-todo-input" className="label__lg">
+            What needs to be done?
+          </label>
+        </h2>
+        <input
+          type="text"
+          id="new-todo-input"
+          className="input input__lg"
+          name="text"
+          autoComplete="off"
+        />
+        <button type="submit" className="btn btn__primary btn__lg">
+          Add
+        </button>
+      </form>
+      <div className="filters btn-group stack-exception">
+        <button type="button" className="btn toggle-btn" aria-pressed="true">
+          <span className="visually-hidden">Show </span>
+          <span>all</span>
+          <span className="visually-hidden"> tasks</span>
+        </button>
+        <button type="button" className="btn toggle-btn" aria-pressed="false">
+          <span className="visually-hidden">Show </span>
+          <span>Active</span>
+          <span className="visually-hidden"> tasks</span>
+        </button>
+        <button type="button" className="btn toggle-btn" aria-pressed="false">
+          <span className="visually-hidden">Show </span>
+          <span>Completed</span>
+          <span className="visually-hidden"> tasks</span>
+        </button>
+      </div>
+      <h2 id="list-heading">
+        3 tasks remaining
+      </h2>
+      <ul
+        role="list"
+        className="todo-list stack-large stack-exception"
+        aria-labelledby="list-heading"
+      >
+        <li className="todo stack-small">
+          <div className="c-cb">
+            <input id="todo-0" type="checkbox" defaultChecked={true} />
+            <label className="todo-label" htmlFor="todo-0">
+              Eat
+            </label>
+          </div>
+          <div className="btn-group">
+            <button type="button" className="btn">
+              Edit <span className="visually-hidden">Eat</span>
+            </button>
+            <button type="button" className="btn btn__danger">
+              Delete <span className="visually-hidden">Eat</span>
+            </button>
+          </div>
+        </li>
+        <li className="todo stack-small">
+          <div className="c-cb">
+            <input id="todo-1" type="checkbox" />
+            <label className="todo-label" htmlFor="todo-1">
+              Sleep
+            </label>
+          </div>
+          <div className="btn-group">
+            <button type="button" className="btn">
+              Edit <span className="visually-hidden">Sleep</span>
+            </button>
+            <button type="button" className="btn btn__danger">
+              Delete <span className="visually-hidden">Sleep</span>
+            </button>
+          </div>
+        </li>
+        <li className="todo stack-small">
+          <div className="c-cb">
+            <input id="todo-2" type="checkbox" />
+            <label className="todo-label" htmlFor="todo-2">
+              Repeat
+            </label>
+          </div>
+          <div className="btn-group">
+            <button type="button" className="btn">
+              Edit <span className="visually-hidden">Repeat</span>
+            </button>
+            <button type="button" className="btn btn__danger">
+              Delete <span className="visually-hidden">Repeat</span>
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+}
+ +

Now open public/index.html and change the <title> element’s text to TodoMatic. This way, it will match the <h1> at the top of our app.

+ +
<title>TodoMatic</title>
+ +

When your browser refreshes, you should see something like this:

+ +

todo-matic app, unstyled, showing a jumbled mess of labels, inputs, and buttons

+ +

It's ugly, and doesn’t function yet, but that's okay — we'll style it in a moment. First, consider the JSX we have, and how it corresponds to our user stories:

+ + + +

The form will allow us to make tasks; the buttons will let us filter them; the heading and list are our way to read them. The UI for editing a task is conspicuously absent for now. That's okay – we'll write that later.

+ +

Accessibility features

+ +

You may notice some unusual attributes here. For example:

+ +
<button type="button" className="btn toggle-btn" aria-pressed="true">
+  <span className="visually-hidden">Show </span>
+  <span>all</span>
+  <span className="visually-hidden"> tasks</span>
+</button>
+ +

Here, aria-pressed tells assistive technology (like screen readers) that the button can be in one of two states: pressed or unpressed. Think of these as analogs for on and off. Setting a value of true means that the button is pressed by default.

+ +

The class visually-hidden has no effect yet, because we have not included any CSS. Once we have put our styles in place, though, any element with this class will be hidden from sighted users and still available to screen reader users — this is because these words are not needed by sighted users; they are there to provide more information about what the button does for screenreader users that do not have the extra visual context to help them.

+ +

Further down, you can find our <ul> element:

+ +
<ul
+  role="list"
+  className="todo-list stack-large stack-exception"
+  aria-labelledby="list-heading"
+>
+ +

The role attribute helps assistive technology explain what kind of element a tag represents. A <ul> is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the <ul>  element. If you want to learn more about why this is necessary, you can check out Scott O'Hara’s article, “Fixing Lists”.

+ +

The aria-labelledby attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it.

+ +

Finally, the labels and inputs in our list items have some attributes unique to JSX:

+ +
<input id="todo-0" type="checkbox" defaultChecked={true} />
+<label className="todo-label" htmlFor="todo-0">
+  Eat
+</label>
+ +

The defaultChecked attribute in the <input/ >  tag tells React to check this checkbox initially. If we were to use checked, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events.

+ +

The htmlFor attribute corresponds to the for attribute used in HTML. We cannot use for as an attribute in JSX because for is a reserved word, so  React uses htmlFor instead.

+ +

Notes:

+ + + +

Implementing our styles

+ +

Paste the following CSS code into src/index.css so that it replaces what's currently there:

+ +
/* RESETS */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+*:focus {
+  outline: 3px dashed #228bec;
+  outline-offset: 0;
+}
+html {
+  font: 62.5% / 1.15 sans-serif;
+}
+h1,
+h2 {
+  margin-bottom: 0;
+}
+ul {
+  list-style: none;
+  padding: 0;
+}
+button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+button,
+input {
+  overflow: visible;
+}
+input[type="text"] {
+  border-radius: 0;
+}
+body {
+  width: 100%;
+  max-width: 68rem;
+  margin: 0 auto;
+  font: 1.6rem/1.25 Arial, sans-serif;
+  background-color: #f5f5f5;
+  color: #4d4d4d;
+}
+@media screen and (min-width: 620px) {
+  body {
+    font-size: 1.9rem;
+    line-height: 1.31579;
+  }
+}
+/*END RESETS*/
+/* GLOBAL STYLES */
+.form-group > input[type="text"] {
+  display: inline-block;
+  margin-top: 0.4rem;
+}
+.btn {
+  padding: 0.8rem 1rem 0.7rem;
+  border: 0.2rem solid #4d4d4d;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.btn.toggle-btn {
+  border-width: 1px;
+  border-color: #d3d3d3;
+}
+.btn.toggle-btn[aria-pressed="true"] {
+  text-decoration: underline;
+  border-color: #4d4d4d;
+}
+.btn__danger {
+  color: #fff;
+  background-color: #ca3c3c;
+  border-color: #bd2130;
+}
+.btn__filter {
+  border-color: lightgrey;
+}
+.btn__primary {
+  color: #fff;
+  background-color: #000;
+}
+.btn-group {
+  display: flex;
+  justify-content: space-between;
+}
+.btn-group > * {
+  flex: 1 1 49%;
+}
+.btn-group > * + * {
+  margin-left: 0.8rem;
+}
+.label-wrapper {
+  margin: 0;
+  flex: 0 0 100%;
+  text-align: center;
+}
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+[class*="stack"] > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.stack-small > * + * {
+  margin-top: 1.25rem;
+}
+.stack-large > * + * {
+  margin-top: 2.5rem;
+}
+@media screen and (min-width: 550px) {
+  .stack-small > * + * {
+    margin-top: 1.4rem;
+  }
+  .stack-large > * + * {
+    margin-top: 2.8rem;
+  }
+}
+.stack-exception {
+  margin-top: 1.2rem;
+}
+/* END GLOBAL STYLES */
+.todoapp {
+  background: #fff;
+  margin: 2rem 0 4rem 0;
+  padding: 1rem;
+  position: relative;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
+}
+@media screen and (min-width: 550px) {
+  .todoapp {
+    padding: 4rem;
+  }
+}
+.todoapp > * {
+  max-width: 50rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.todoapp > form {
+  max-width: 100%;
+}
+.todoapp > h1 {
+  display: block;
+  max-width: 100%;
+  text-align: center;
+  margin: 0;
+  margin-bottom: 1rem;
+}
+.label__lg {
+  line-height: 1.01567;
+  font-weight: 300;
+  padding: 0.8rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+.input__lg {
+  padding: 2rem;
+  border: 2px solid #000;
+}
+.input__lg:focus {
+  border-color: #4d4d4d;
+  box-shadow: inset 0 0 0 2px;
+}
+[class*="__lg"] {
+  display: inline-block;
+  width: 100%;
+  font-size: 1.9rem;
+}
+[class*="__lg"]:not(:last-child) {
+  margin-bottom: 1rem;
+}
+@media screen and (min-width: 620px) {
+  [class*="__lg"] {
+    font-size: 2.4rem;
+  }
+}
+.filters {
+  width: 100%;
+  margin: unset auto;
+}
+/* Todo item styles */
+.todo {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.todo > * {
+  flex: 0 0 100%;
+}
+.todo-text {
+  width: 100%;
+  min-height: 4.4rem;
+  padding: 0.4rem 0.8rem;
+  border: 2px solid #565656;
+}
+.todo-text:focus {
+  box-shadow: inset 0 0 0 2px;
+}
+/* CHECKBOX STYLES */
+.c-cb {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-size: 1.6rem;
+  line-height: 1.25;
+  display: block;
+  position: relative;
+  min-height: 44px;
+  padding-left: 40px;
+  clear: left;
+}
+.c-cb > label::before,
+.c-cb > input[type="checkbox"] {
+  box-sizing: border-box;
+  top: -2px;
+  left: -2px;
+  width: 44px;
+  height: 44px;
+}
+.c-cb > input[type="checkbox"] {
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+  position: absolute;
+  z-index: 1;
+  margin: 0;
+  opacity: 0;
+}
+.c-cb > label {
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+  display: inline-block;
+  margin-bottom: 0;
+  padding: 8px 15px 5px;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.c-cb > label::before {
+  content: "";
+  position: absolute;
+  border: 2px solid currentColor;
+  background: transparent;
+}
+.c-cb > input[type="checkbox"]:focus + label::before {
+  border-width: 4px;
+  outline: 3px dashed #228bec;
+}
+.c-cb > label::after {
+  box-sizing: content-box;
+  content: "";
+  position: absolute;
+  top: 11px;
+  left: 9px;
+  width: 18px;
+  height: 7px;
+  transform: rotate(-45deg);
+  border: solid;
+  border-width: 0 0 5px 5px;
+  border-top-color: transparent;
+  opacity: 0;
+  background: transparent;
+}
+.c-cb > input[type="checkbox"]:checked + label::after {
+  opacity: 1;
+}
+ +

Save and look back at your browser, and your app should now have reasonable styling.

+ +

Summary

+ +

Now our todo list app actually looks a bit more like a real app! The problem is: it doesn’t actually do anything. We’ll start fixing that in the next chapter!

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html deleted file mode 100644 index b2b0040f91..0000000000 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Prise en main de Vue -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 ---- -
{{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")}}

-
- -

Présentons Maintenant Vue, le troisième de nos cadres. Dans cet article, nous allons examiner un peu de fond Vue, apprendre à l’installer et créer un nouveau projet, étudier la structure de haut niveau de l’ensemble du projet et un composant individuel, voir comment exécuter le projet localement, et le préparer à commencer à construire notre exemple.

- - - - - - - - - - - - -
Conditions préalables: -

Familiarité avec les langages HTML, CSSet JavaScript, connaissance de la ligne terminal/commande.

- -

Les composants Vue sont écrits sous la forme d’une combinaison d’objets JavaScript qui gèrent les données de l’application et d’une syntaxe de modèle html qui cartographie la structure DOM sous-jacente. Pour l’installation et pour utiliser certaines des fonctionnalités les plus avancées de Vue (comme les composants de fichier unique ou les fonctions de rendu), vous aurez besoin d’un terminal avec nœud + npm installé.

-
Objectif:Pour configurer un environnement de développement Vue local, créez une application de démarrage et comprenez les bases de son fonctionnement.
- -

Une Vue plus claire

- -

Vue est un cadre JavaScript moderne qui fournit des installations utiles pour une amélioration progressive - contrairement à beaucoup d’autres cadres, vous pouvez utiliser Vue pour améliorer html existant. Cela vous permet d’utiliser Vue comme un remplacement de drop-in pour une bibliothèque comme JQuery.

- -

Cela étant dit, vous pouvez également utiliser Vue pour écrire des applications à page unique entières (SPA). Cela vous permet de créer un balisage géré entièrement par Vue, ce qui peut améliorer l’expérience et les performances des développeurs lors de la gestion d’applications complexes. Il vous permet également de profiter des bibliothèques pour le routage côté client et la gestion de l’État lorsque vous en avez besoin. En outre, Vue adopte une approche « intermédiaire » pour l’outillage comme le routage côté client et la gestion de l’État. Bien que l’équipe de base de Vue gère des bibliothèques suggérées pour ces fonctions, elles ne sont pas directement regroupées dans Vue. Cela vous permet de sélectionner une bibliothèque de routage/gestion d’état différente si elle correspond mieux à votre application.

- -

En plus de vous permettre d’intégrer progressivement Vue dans vos applications, Vue propose également une approche progressive du balisage de l’écriture. Comme la plupart des cadres, Vue vous permet de créer des blocs réutilisables de balisage via des composants. La plupart du temps, les composants Vue sont écrits à l’aide d’une syntaxe de modèle HTML spéciale. Lorsque vous avez besoin de plus de contrôle que ne le permet la syntaxe HTML, vous pouvez écrire des fonctions JSX ou JavaScript simples pour définir vos composants.

- -

Au fur et à mesure que vous travaillez sur ce didacticiel, vous pouvez garder le guide Vue et la documentation API ouverts dans d’autres onglets, de sorte que vous pouvez vous référer à eux si vous voulez plus d’informations sur n’importe quel sous-sujet.
- Pour une bonne comparaison (mais potentiellement biaisée) entre Vue et plusieurs des autres cadres, voir Vue Docs: Comparison with Other Frameworks.

- -

Installation

- -

Pour utiliser Vue dans un site existant, vous pouvez déposer l’un des éléments suivants sur une page. Cela vous permet de commencer à utiliser Vue sur les sites existants, c’est pourquoi Vue se targue d’être un cadre progressif. Il s’agit d’une excellente option lors de la migration d’un projet existant à l’aide d’une bibliothèque comme JQuery à Vue. Avec cette méthode, vous pouvez utiliser un grand nombre des fonctionnalités de base de Vue, telles que les attributs, les composants personnalisés et la gestion des données.<script>

- - - -

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 . 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.vue create <project-name>

- -

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, to where you'd like to create your sample app, then run .cdvue create moz-todo-vue
    2. -
  2. Use the arrow keys and to select the "Manually select features" option.Enter
    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 to proceed.Enter
    4. -
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit again. This will help us catch common errors, but not be overly opinionated.Enter
    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 to continue.Enter
    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 file. Select "In dedicated config files" and push .package.jsonEnter
    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 , otherwise type .yn
    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 , when you run .  So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .--packageManager=<package-manager>vue createmoz-todo-vuevue 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 directory).views

-
- -

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

- -

As a bonus, projects created with the Vue CLI are configured to use files with Webpack out of the box. In fact, if you look inside the folder in the project we created with the CLI, you'll see your first file: ..vuesrc.vueApp.vue

- -

Let's explore this now.

- -

App.vue

- -

Open your file — you’ll see that it has three parts: , , and , which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.App.vue<template><script><style>

- -

<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 attribute on the tag, you can use Pug template syntax instead of standard HTML — . We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.lang<template><template lang="pug">

-
- -

<script> contains all of the non-display logic of your component. Most importantly, your 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 function.<script>render()

- -

In the case of , our default export sets the name of the component to and registers the component by adding it into the 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.App.vueappHelloWorldcomponents

- -
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 attribute on the tag to signify to the compiler that you're using TypeScript — .lang<script><script lang="ts">

-
- -

<style> is where you write your CSS for the component. If you add a attribute — — 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.scoped<style scoped>

- -
-

Note : If you select a CSS pre-processor when creating the project via the CLI, you can add a attribute to the tag so that the contents can be processed by Webpack at build time. For example, will allow you to use SCSS syntax in your styling information.lang<style><style lang="scss">

-
- -

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 command to the project’s file as an npm script, so you can easily run it.servepackage.json

- -

In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:npm run serveyarn serve

- -
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 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.http://localhost:8080

- -

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 file, and delete the element from the template section:App.vue<img>

- -
<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 component from our template.HelloWorld

- -

First of all delete this line:

- -
<HelloWorld msg="Welcome to Your Vue.js App"/>
- -

If you save your 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 element that import and register the component:App.vue<script>

- -

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 inside . 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:<h1><div id="app">

- -
<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/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md new file mode 100644 index 0000000000..b2b0040f91 --- /dev/null +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md @@ -0,0 +1,296 @@ +--- +title: Prise en main de Vue +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 +--- +
{{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")}}

+
+ +

Présentons Maintenant Vue, le troisième de nos cadres. Dans cet article, nous allons examiner un peu de fond Vue, apprendre à l’installer et créer un nouveau projet, étudier la structure de haut niveau de l’ensemble du projet et un composant individuel, voir comment exécuter le projet localement, et le préparer à commencer à construire notre exemple.

+ + + + + + + + + + + + +
Conditions préalables: +

Familiarité avec les langages HTML, CSSet JavaScript, connaissance de la ligne terminal/commande.

+ +

Les composants Vue sont écrits sous la forme d’une combinaison d’objets JavaScript qui gèrent les données de l’application et d’une syntaxe de modèle html qui cartographie la structure DOM sous-jacente. Pour l’installation et pour utiliser certaines des fonctionnalités les plus avancées de Vue (comme les composants de fichier unique ou les fonctions de rendu), vous aurez besoin d’un terminal avec nœud + npm installé.

+
Objectif:Pour configurer un environnement de développement Vue local, créez une application de démarrage et comprenez les bases de son fonctionnement.
+ +

Une Vue plus claire

+ +

Vue est un cadre JavaScript moderne qui fournit des installations utiles pour une amélioration progressive - contrairement à beaucoup d’autres cadres, vous pouvez utiliser Vue pour améliorer html existant. Cela vous permet d’utiliser Vue comme un remplacement de drop-in pour une bibliothèque comme JQuery.

+ +

Cela étant dit, vous pouvez également utiliser Vue pour écrire des applications à page unique entières (SPA). Cela vous permet de créer un balisage géré entièrement par Vue, ce qui peut améliorer l’expérience et les performances des développeurs lors de la gestion d’applications complexes. Il vous permet également de profiter des bibliothèques pour le routage côté client et la gestion de l’État lorsque vous en avez besoin. En outre, Vue adopte une approche « intermédiaire » pour l’outillage comme le routage côté client et la gestion de l’État. Bien que l’équipe de base de Vue gère des bibliothèques suggérées pour ces fonctions, elles ne sont pas directement regroupées dans Vue. Cela vous permet de sélectionner une bibliothèque de routage/gestion d’état différente si elle correspond mieux à votre application.

+ +

En plus de vous permettre d’intégrer progressivement Vue dans vos applications, Vue propose également une approche progressive du balisage de l’écriture. Comme la plupart des cadres, Vue vous permet de créer des blocs réutilisables de balisage via des composants. La plupart du temps, les composants Vue sont écrits à l’aide d’une syntaxe de modèle HTML spéciale. Lorsque vous avez besoin de plus de contrôle que ne le permet la syntaxe HTML, vous pouvez écrire des fonctions JSX ou JavaScript simples pour définir vos composants.

+ +

Au fur et à mesure que vous travaillez sur ce didacticiel, vous pouvez garder le guide Vue et la documentation API ouverts dans d’autres onglets, de sorte que vous pouvez vous référer à eux si vous voulez plus d’informations sur n’importe quel sous-sujet.
+ Pour une bonne comparaison (mais potentiellement biaisée) entre Vue et plusieurs des autres cadres, voir Vue Docs: Comparison with Other Frameworks.

+ +

Installation

+ +

Pour utiliser Vue dans un site existant, vous pouvez déposer l’un des éléments suivants sur une page. Cela vous permet de commencer à utiliser Vue sur les sites existants, c’est pourquoi Vue se targue d’être un cadre progressif. Il s’agit d’une excellente option lors de la migration d’un projet existant à l’aide d’une bibliothèque comme JQuery à Vue. Avec cette méthode, vous pouvez utiliser un grand nombre des fonctionnalités de base de Vue, telles que les attributs, les composants personnalisés et la gestion des données.<script>

+ + + +

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 . 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.vue create <project-name>

+ +

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, to where you'd like to create your sample app, then run .cdvue create moz-todo-vue
    2. +
  2. Use the arrow keys and to select the "Manually select features" option.Enter
    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 to proceed.Enter
    4. +
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit again. This will help us catch common errors, but not be overly opinionated.Enter
    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 to continue.Enter
    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 file. Select "In dedicated config files" and push .package.jsonEnter
    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 , otherwise type .yn
    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 , when you run .  So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .--packageManager=<package-manager>vue createmoz-todo-vuevue 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 directory).views

+
+ +

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

+ +

As a bonus, projects created with the Vue CLI are configured to use files with Webpack out of the box. In fact, if you look inside the folder in the project we created with the CLI, you'll see your first file: ..vuesrc.vueApp.vue

+ +

Let's explore this now.

+ +

App.vue

+ +

Open your file — you’ll see that it has three parts: , , and , which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.App.vue<template><script><style>

+ +

<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 attribute on the tag, you can use Pug template syntax instead of standard HTML — . We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.lang<template><template lang="pug">

+
+ +

<script> contains all of the non-display logic of your component. Most importantly, your 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 function.<script>render()

+ +

In the case of , our default export sets the name of the component to and registers the component by adding it into the 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.App.vueappHelloWorldcomponents

+ +
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 attribute on the tag to signify to the compiler that you're using TypeScript — .lang<script><script lang="ts">

+
+ +

<style> is where you write your CSS for the component. If you add a attribute — — 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.scoped<style scoped>

+ +
+

Note : If you select a CSS pre-processor when creating the project via the CLI, you can add a attribute to the tag so that the contents can be processed by Webpack at build time. For example, will allow you to use SCSS syntax in your styling information.lang<style><style lang="scss">

+
+ +

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 command to the project’s file as an npm script, so you can easily run it.servepackage.json

+ +

In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:npm run serveyarn serve

+ +
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 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.http://localhost:8080

+ +

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 file, and delete the element from the template section:App.vue<img>

+ +
<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 component from our template.HelloWorld

+ +

First of all delete this line:

+ +
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ +

If you save your 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 element that import and register the component:App.vue<script>

+ +

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 inside . 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:<h1><div id="app">

+ +
<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/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html deleted file mode 100644 index 9ed0cc97e7..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html +++ /dev/null @@ -1,685 +0,0 @@ ---- -title: Gérer les problèmes courants d'accessibilité -slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility -tags: - - Accessibilité - - Apprentissage - - Article - - CSS - - Clavier - - Débutant - - HTML - - JavaScript - - Outils - - navigateur croisé - - test -translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility -original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.

- - - - - - - - - - - - -
Prérequis : -

Connaissances avec le noyau des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

-
Objectif : -

Être capable de diagnostiquer les problèmes courants d'Accessibilité, et utiliser les outils et techniques appropriés pour les résoudre.

-
- -

Qu'est-ce que l'accessibilité ?

- -

Quand on parle d'accessibilité dans le contexte de la technologie web, la plupart des gens pense directement au fait de s'assurer que les sites web/apps sont utilisables par les personnes avec des handicap, par exemple :

- - - -

Toutefois, ce serait faux de réduire l'accessibilité uniquement aux handicaps. Le vrai but de l'accessibilité est de faire en sorte que vos sites web/applis soient utilisables par le plus grand nombre de personnes dans le plus grand nombre de contextes possibles, pas uniquement ces utilisateurs qui utilisant des ordinateurs de bureau puissants. Les exemples extrêmes pourraient inclure :

- - - -

D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. Qu'est-ce que l'accessibilité ? décrit plus largement et précisément l'accessibilité que cet article ne le fait.

- -

Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le responsive design et la performance à d'autres endroits dans ce module.

- -
-

Note : Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.

-
- -

Problèmes d'accessibilité courants

- -

Dans cette section nous détaillerons certains des problèmes principaux qui se manifestent autour de l'accessibilité, liée à des technologies spécifiques, avec les bonnes pratiques à adopter, et quelques tests rapides que vous pouvez faire pour voir si vos sites vont dans le bon sens.

- -
-

Note : L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez Accessibility guidlines and the law.

-
- -

HTML

- -

La sémantique HTML (où les éléments sont utilisés à leur fin prévues) est accessible sans aucune modification — les contenus sont lisibles par les spectateurs voyants (à condition que vous n'ayez rien fait d'absurde comme rendre le texte bien trop petit ou ne l'ayez caché en utilisant du CSS), mais il sera aussi utilisable par des technologies d'assistance comme les lecteurs d'écran (applis qui lisent littéralement une page à leurs utilisateurs), et apporte également d'autres avantages.

- -

La structure sémantique

- -

Le quick win le plus important en sémantique HTML et d'utiliser une structure de rubriques et de paragraphes pour votre contenu ; parce que les utilisateurs de lecteurs d'écran ont tendance à utiliser les rubriques d'un document comme indications pour trouver le contenu qu'il recherche plus rapidement. Si votre contenu n'a pas de rubriques, tout ce qu'ils auraient c'est un énorme mur de texte sans aucune indication pour trouver quelque chose. Exemples de bon et de mauvais HTML :

- -
<font size="7">My heading</font>
-<br><br>
-This is the first section of my document.
-<br><br>
-I'll add another paragraph here too.
-<br><br>
-<font size="5">My subheading</font>
-<br><br>
-This is the first subsection of my document. I'd love people to be able to find this content!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-This is the second subsection of my content. I think is more interesting than the last one.
- -
<h1>My heading</h1>
-
-<p>This is the first section of my document.</p>
-
-<p>I'll add another paragraph here too.</p>
-
-<h2>My subheading</h2>
-
-<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
-
-<h2>My 2nd subheading</h2>
-
-<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
- -

De plus, votre contenu doit avoir un sens logique dans son code source — vous pourrez toujours le placer où vous voulez en utilisant du CSS plus tard, mais vous devez avoir un bon code source avec lequel commencer.

- -

Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il est compréhensible sans ce dernier. Vous pouvez le faire manuellement juste en retirant le CSS de votre code, mais la façon la plus simple reste d'utiliser les fonctionnalités du navigateur, par exemple :

- - - -

Utiliser l'accessibilité native du clavier

- -

Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}.

- -

Vous pouvez essayer ceci en utilisant notre exemple native-keyboard-accessibility.html (voir le code source) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.

- -

- -

Vous pouvez ensuite presser Entrée/Retour pour accéder à un lien focalisé ou presser un bouton (nous avons inclus un peu de JavaScript pour que les boutons renvoies un message d'alerte), ou commencer à taper pour entrer du texte dans un des input texte (d'autres éléments de formulaire ont différents contrôles, par exemple l'élément {{htmlelement("select")}} peut avoir ses options affichées et navigable en utilisant les touches haut et bas).

- -

Notez que différents navigateurs peuvent avoir différentes options de contrôle par clavier disponibles. La plupart des navigateurs modernes respectent le modèle de tab écrit plus haut (vous pouvez aussi faire une Shift + Tab pour reculer entre les éléments focalisables), mais certains navigateurs ont leurs propres particularités :

- - - -
-

Attention : Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.

-
- -

Cet exemple souligne l'importance de l'utilisation de la sémantique correcte d'élément pour le travail correct. C'est possible de styler n'importe quel élément pour qu'il ressemble à un lien ou un bouton avec le CSS, et de le faire se comporter comme un lien ou un bouton avec JavaScript, mais ils ne seront toujours pas des liens ou des boutons, et vous perdrez beaucoup de l'accessibilité que ces éléments vous fournissent pour rien. Donc ne le faîte pas si vous pouvez l'éviter.

- -

Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class :focus. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :

- -
a:hover, input:hover, button:hover, select:hover,
-a:focus, input:focus, button:focus, select:focus {
-  font-weight: bold;
-}
- -
-

Note : Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.

-
- -

Intégrer l'accessibilité clavier

- -

Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des <div>s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément <video> avec les contrôles par défaut du navigateur). Vous avez quelques options ici :

- -
    -
  1. Créer des contrôles personnalisés en utilisant les éléments <button> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir Creating a cross-browser video player.
    2. -
  2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir Desktop mouse and keyboard controls pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
    3. -
  3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple fake-div-buttons.html (voir le code source). Nous donnons à nos faux boutons <div> la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut tabindex="0" (voir l'article tabindex de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
    4. -
  4. - 
    document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-};
    - Ici nous ajoutons un listener à l'objet document pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet keyCode ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le onclick du bouton en utilisant document.activeElement.onclick(). activeElement nous donne l'élément courant qui est focalisé sur la page.
    5. -
- -
-

Note : Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. onclick). addEventListener ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.

-
- -

Les textes alternatifs

- -

Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut alt, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.

- -
-

Note : Pour plus d'informations, lisez Text alternatives.

-
- -

L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.

- -

Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format WebVTT (voir Ajouter des légendes et des sous-titres à des vidéos HTML5 pour un tutoriel détaillé). La compatibilité entre navigateur pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.

- -

Relations et contexte entre élément

- -

Il y a certaines caractéristiques et pratiques optimales en HTML conçues pour apporter du contexte et des relations entre des éléments lorsqu'aucune n'aurait autrement existé. Les trois exemples les plus courants sont les liens, les libellés de formulaire et les tableau de données.

- -

La solution pour les textes de type lien c'est que les personnes utilisant des lecteurs d'écran vont souvent utiliser une fonctionnalité commune avec laquelle ils vont récupérer une liste de tous les liens sur la page. Par exemple, une liste de lien libellés "cliquez ici", "cliquez ici", etc. est vraiment mauvaise pour l'accessibilité. Il est préférable pour les textes de type lien d'avoir du sens en contexte et hors contexte.

- -

Le suivant sur notre liste, l'élément de formulaire {{htmlelement("label")}} est une des fonctionnalités centrales qui nous permet de rendre les formulaires accessibles. Le problème avec les formulaires c'est que vous avez besoin de libellés pour dire quelle donnée doit être entrée dans chaque champs du formulaire. Chaque libellé doit être inclus dans un {{htmlelement("label")}} pour le relier clairement à son champs partenaire (chaque valeur de l'attribut for de <label> doit aller avec la valeur de l'id de l'élément du formulaire), et cela aura du sens même si le code source n'est pas totalement logique (ce qui pour être tout à fait juste devrait être fait).

- -
-

Note : Lisez Meaningful text labels, pour plus d'information à propos des textes de type lien et les libellés des formulaires.

-
- -

Pour terminer, un mot rapide sur les tableaux de données. Un tableau de données basique peut être écrit avec des indications très simples (voir bad-table.html en direct, et la source), mais il y a des problèmes — il n'y a aucun moyen pour un utilisateur de lecteur d'écran d'associer des lignes ou des colonnes ensembles comme un groupe de données — pour faire cela vous devez connaître les lignes d'en-têtes, et si elles se dirigent en lignes, colonnes, etc. Cela ne peut être fait qu'en visuel pour un tel tableau.

- -

Si vous regardez plutôt notre exemple punk-band-complete.html (direct, source), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs scope), l'élément {{htmlelement("caption")}}, etc.

- -
-

Note : Lisez Accessible data tables, pour plus d'information à propos des tableaux accessibles.

-
- -

CSS

- -

Le CSS tend à fournir beaucoup moins de caractéristiques fondamentales d'accessibilité que le HTML, mais il peut aussi faire beaucoup de dommage à l'accessibilité s'il est mal utilisé. Nous avons déjà mentionné quelques conseils sur l'accessibilité incluant le CSS :

- - - -

Il y a quelques autres considérations que vous devriez prendre en compte.

- -

Couleur et contraste

- -

Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le Color Contrast Checker de WebAIM si votre palette contraste suffisamment.

- -

Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.

- -
-

Note : un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.

-
- -

Cacher du contenu

- -

Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre Exemple de boîte d'info avec onglets (voir le code source) nous avons trois panneau d'information, mais nous les positionnons les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).

- -

- -

Les utilisateurs de lecteur d'écran ne se soucient pas vraiment de cela — ils sont satisfaits tant que le contenu a du sens dans le code source, et qu'ils peuvent entièrement y accéder. Le positionnement absolute (comme utilisé dans cet exemple) est souvent vu comme l'un des meilleur mécanismes pour cacher du contenu pour des effets visuels, parce que ça n'empêche pas les lecteur d'écran d'y accéder.

- -

D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, parce qu'il cache le contenu aux lecteurs d'écran. A moins que, bien entendu, il y est une bonne raison qui justifie que ce contenu soit caché aux lecteurs d'écran.

- -
-

Note : Invisible Content Just for Screen Reader Users vous décrira beaucoup de détails utilesà propos de ce sujet.

-
- -

JavaScript

- -

Le JavaScript a le même type de problèmes que le CSS concernant l'accessibilité — cela peut être désastreux pour l'accessibilité si mal utilisé, ou trop utilisé. Nous avions déjà abordé quelques problèmes d'accessibilité en rapport avec le JavaScript, principalement dans le champ de la sémantique HTML — vous devez toujours utiliser une sémantique HTML appropriée pour implémenter une fonctionnalité qu'importe où elle est disponible, par exemple utiliser des liens et des boutons de façon appropriée. N'utilisez pas les éléments <div> avec du code JavaScript pour simuler une fonctionnalité si c'est possible — c'est une source d'erreur, et ça fonctionne mieux d'utiliser les fonctionnalités disponibles qu'HTML vous fournit.

- -

Fonctionnalité simple

- -

Normalement, une fonctionnalité simple doit marcher uniquement avec le HTML en place — le JavaScript ne doit pas être utilisé que pour améliorer la fonctionnalité, par pour la construire en entier. Les bons usages de JavaScript incluent :

- - - -
-

Note : Accessible JavaScript de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.

-
- -

Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec WebGL accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des contrôles clavier pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.

- -

Fonctionnalité complexe

- -

L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.

- -

Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <div>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. Bootstrap à l'air d'être assez bon pour l'accessibilité, par exemple, bien que Making Bootstrap a Little More Accessible de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.

- -

Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant XMLHttpRequest ou Fetch, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.

- -

WAI-ARIA

- -

Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser WAI-ARIA (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.

- -

Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme roles pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), aria-disabled pour dire si un contrôle est désactivé ou pas, etc.

- -

Pour traiter avec les zones de contenu qui sont régulièrement mises à jour, vous pouvez utiliser l'attribut aria-live, qui identifie une zone mise à jour. Sa valeur indique avec quelle urgence le lecteur d'écran doit faire la lecture :

- - - -

Voici un exemple :

- -
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
- -

Vous pouvez voir un exemple en action sur l'exemple ARIA (Accessible Rich Internet Applications) Live Regions de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. ARIA Live Regions - Atomic apporte un autre exemple utile.

- -

Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur WAI-ARIA basics.

- -

Les outils d'accessibilité

- -

Maintenant que nous avons couvers les considérations de l'accessibilité pour les différentes technologies web, incluant quelques techniques de test (comme la navigation au clavier et le vérificateur de contraste de couleur), tournons-nous maintenant vers d'autres outils que vous pouvez utiliser pour faire des tests d'accessibilité.

- -

Les outils d'audit

- -

Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple :

- - - -

Observons un exemple, en utilisant Tenon.

- -
    -
  1. Aller sur la page d'accueil de Tenon.
    2. -
  2. Entrez l'URL de notre exemple de bad-semantics.html dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur Analyse your Webpage.
    3. -
  3. Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.
    4. -
- -

- -

Il y a également des options que vous pouvez examiner (voir le lien Show Options vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme.

- -
-

Note : De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.

-
- -

Les outils d'automatisation

- -

Deque's aXe tool va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :

- - - -

Cela ajoute un onglet accessibilité aux outils de développeur du navigateur, nous avons installé la version pour Firefox, puis nous l'avons utilisé pour auditer notre exemple bad-table.html. Nous obtenons les résultats suivants :

- -

- -

aXe est également installable en utilisant npm, et peut-être intégré avec des exécuteurs de tâche comme Grunt et Gulp, des frameworks d'automatisation comme Selenium et Cucumber, des framework de test unitaire comme Jasmin, et d'autres encore (une fois encore, voir la page principale d'aXe pour plus de détails).

- -

Les lecteurs d'écran

- -

Il faut définitivement tester avec un lecteur d'écran pour s'habituer à comment les personnes malvoyantes utilisent le Web. Il y a plusieurs lecteurs d'écran disponible : 

- - - -

La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'exécutent sur le système d'exploitation hôte et peuvent lire des pages web, mais aussi du texte dans d'autres appli. Ce n'est pas toujours le cas (ChromeVox est une extension navigateur), mais ça l'est souvent. Les lecteurs d'écran ont tendance à agir de manière légèrement différente et ont des contrôles différents, donc vous devrez consulter la documentation pour le lecteur d'écran que vous avez choisi pour obtenir tous les détails — cela dit, il fonctionne tous à peu près de la même manière.

- -

Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.

- -
-

Note : Designing for Screen Reader Compatibility de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir Screen Reader User Survey #6 Results pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.

-
- -

VoiceOver

- -

VoiceOver (VO) est gratuit avec votre Mac/iPhone/iPad, donc c'est utile pour tester sur votre ordinateur/mobile si vous utilisez des produits Apple. Nous le testerons sur Mac OS X sur un MacBook Pro.

- -

Pour le démarrer, pressez Cmd + Fn + F5. Si vous n'avez jamais utilisé VO auparavant, vous obtiendrez un écran de bienvenue où vous pouvez choisir de démarrer VO ou de ne pas le démarrer, et vous parcourrez un tutoriel utile pour apprendre à comment l'utiliser. Pour l'arrêter, pressez Cmd + Fn + F5 à nouveau.

- -
-

Note : Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.

-
- -

Lorsque VO est démarré, l'affichage ressemblera à peu près à cela, mais vous verrez une boîte noire en bas à gauche de l'écran qui contient l'information sur quoi est-ce que VO est actuellement sélectionné. La sélection courante sera également mise en avant, avec une bordure noire — cette mise en avant est connue comme le curseur VO.

- -

- -

Pour utiliser VO, vous aller beaucoup utiliser le "modificateur VO" — c'est une touche ou une combinaison de touches que vous devez presser en plus de l'actuel raccourci VO pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leur propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de VO, le modificateur peut aussi être VerrMaj, ou Ctrl + Option.

- -

VO a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "VO" veut dire "le modificateur VoiceOver".

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

Les raccourcis clavier VoiceOver les plus communs

-
Raccourci clavierDescription
VO + Touches du curseurDéplace le curseur VO vers le haut, la droite, le bas, la gauche.
VO + Barre espace -

Sélectionne/active les éléments mis en avant par le curseur VO. Cela inclut les items sélectionnés dans le Rotor (voir plus bas).

-
VO + Shift + curseur bas -

Se déplacer dans un groupe d'éléments (comme un tableau HTML, ou un formulaire, etc.) Une fois dans un groupe vous pouvez vous déplacer et sélectionner les éléments à l'intérieur de ce groupe en utilisant les commandes ci-dessus normalement.

-
VO + Shift + curseur hautSortir d'un groupe.
VO + C -

(à l'intérieur d'un tableau) lire l'entête de la colonne courante.

-
VO + R(à l'intérieur d'un tableau) lire l'entête de la ligne courante.
VO + C + C (deux C d'affilé)(à l'intérieur d'un tableau) lire toute la colonne courante, incluant l'entête.
VO + R + R (deux R d'affilé) -

(à l'intérieur d'un tableau) lire toute la ligne courante, incluant les entêtes qui correspondent à chacune des cellules.

-
VO + curseur gauche, VO + curseur droit(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Se déplacer entre les options
VO + curseur haut, VO + curseur bas(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Modifier l'option courante.
VO + U -

Utiliser le rotor, qui affiche des listes de rubriques, de liens, de contrôles de formulaires, etc. pour une navigation simplifiée.

-
VO + curseur gauche, VO + curseur droit -

(à l'intérieur du Rotor) Se déplacer ente les différentes listes disponibles dans le Rotor.

-
VO + curseur haut, VO + curseur bas -

(à l'intérieur du Rotor) Se déplacer entre les différents éléments dans la liste courante du Rotor.

-
Esc(à l'intérieur du Rotor) Sortir du Rotor.
Ctrl(Lorsque VO parle) Arrêter/Reprendre l'allocution.
VO + ZRelance la dernière partie de l'allocution.
VO + D -

Aller dans le Dock du Mac, pour que vous puissiez sélectionner des applis à exécuter.

-
- -

Cela peut paraître comme beaucoup de commandes, mais pas tant que ça que vous vous y habituez, et VO vous rappelle régulièrement quels commandes utiliser dans quels cas. Essayer de tester VO maintenant ; vous pouvez dorénavant essayer de tester certains de nos exemples dans la section {{anch("Screenreader testing")}}.

- -

NVDA

- -

NVDA est exclusif à Windows, et vous allez devoir l'installer.

- -
    -
  1. Téléchargez-le depuis nvaccess.org. Vous pouvez choisir si vous voulez faire une donation ou le télécharger gratuitement ; vous devrez également leur donner votre adresse e-mail avant de pouvoir le télécharger.
    2. -
  2. Une fois téléchargé, installez-le — double cliquez sur l'installeur, acceptez la licence et suivez les instructions.
    3. -
  3. Pour lancer NVDA, double cliquez sur fichier/raccourci du programme, ou utilisez le raccourci clavier Ctrl + Alt + N. Vous verrez la boîte de dialogue de bienvenue de NVDA lorsque vous le démarrez. Vous pouvez choisir ici différentes options, puis appuyez sur OK pour continuer.
    4. -
- -

NVDA sera maintenant actif sur votre ordinateur.

- -

Pour utiliser NVDA, vous aller beaucoup utiliser le "modificateur NVDA" — c'est une touche que vous devez presser en plus de l'actuel raccourci NVDA pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leurs propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de NVDA, le modificateur peut aussi être Insert (par défaut), ou VerrMaj (peut être choisi en cochant la première case à cocher dans la boîte de dialogue de bienvenue avant d'appuyer sur OK).

- -
-

Note : NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.

-
- -

NVDA a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "NVDA" veut dire "le modificateur NVDA".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Les raccourcis clavier NVDA les plus communs
Raccourci clavierDescription
NVDA + Q -

Arrête NVDA après que vous l'ayez démarré.

-
NVDA + curseur hautLit la ligne courante.
NVDA + curseur basCommence à lire à la position courante.
curseur haut ou curseur bas, ou Shift + Tab et Tab -

Se déplace à l'élément suivant/précédent de la page et le lit.

-
curseur gauche et curseur droit -

Se déplace au caractère suivant/précédent dans l'élément courant et le lit.

-
Shift + H et H -

Se déplace au titre suivante/précédente et le lit.

-
Shift + K et K -

Se déplace au lien suivant/précédent et le lit.

-
Shift + D et D -

Se déplace au repère de document (par ex. <nav>) suivant/précédent et le lit.

-
Shift + 1–6 et 1–6 -

Se déplace au titre (niveau 1 à 6) suivant/précédent et le lit.

-
Shift + F et F -

Se déplace à l'entrée de formulaire suivante/précédente et se focalise dessus.

-
Shift + T et T -

Se déplace sur la donnée de tableau suivante/précédente et se focalise dessus.

-
Shift + B et B -

Se déplace sur le bouton suivant/précédent et lit son libellé.

-
Shift + L et L -

Se déplace à la liste suivante/précédente et lit son premier item de liste.

-
Shift + I et I -

Se déplace à l'item de liste suivant/précédent et le lit.

-
Entrée/Retour -

(quand un lien/bouton ou autre élément activable est sélectionné) Active l'élément.

-
NVDA + Barre espace -

(quand un formulaire est sélectionné) Entre dans le formulaire pour que les éléments puissent être sélectionnés individuellement, ou quitter le formulaire si vous êtes déjà dedans.

-
Shift Tab et Tab -

(à l'intérieur d'un formulaire) Se déplacer entre les entrées de formulaire.

-
Curseur haut et curseur bas -

(à l'intérieur d'un formulaire) Modifier les valeurs d'une entrée de formulaire (dans les cas comme les listes déroulantes)

-
Barre espace -

(à l'intérieur d'un formulaire) Sélectionner la valeur choisie.

-
Ctrl + Alt + touches fléchées(à l'intérieur d'un tableau) Se déplacer entre les cellules du tableau.
- -

Test avec lecteur d'écran

- -

Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous aimerions que vous vous habituiez à faire quelques tests d'accessibilité rapides, pour vous faire une idée de comment les lecteurs d'écran se débrouillent avec les bonnes et mauvaises caractéristiques d'une page web :

- - - -

Test utilisateur

- -

Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section Test Utilisateur plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.

- -

Checklist de tests d'accessibilité

- -

La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet :

- -
    -
  1. Assurez-vous que votre HTML est sémantiquement correct au possible. Le valider est un bon début, comme utiliser un outil d'Audit.
    2. -
  2. Vérifiez que votre contenu a du sens lorsque le CSS est désactivé.
    3. -
  3. Assurez-vous que votre fonctionnalité est accessible au clavier. Testez en utilisant Tab, Retour/Entrée, etc.
    4. -
  4. Assurez-vous que votre contenu non-textuel a un texte alternatif. Un Outil d'audit est bien pour repérer ce type de problèmes.
    5. -
  5. Assurez-vous que votre contraste de couleurs est acceptable, en utilisant un outil de vérification approprié.
    6. -
  6. Assurez-vous que le contenu caché est visible par les lecteurs d'écran.
    7. -
  7. Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible.
    8. -
  8. Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié.
    9. -
  9. Exécutez votre site dans un Outil d'audit.
    10. -
  10. Testez avec un lecteur d'écran.
    11. -
  11. Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait.
    12. -
- -

Trouver de l'aide

- -

Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article la section Trouver de l'aide de l'article sur le HTML et le CSS pour des bonnes directions.

- -

Résumé

- -

Espérons que cet article vous aura donné des bonnes connaissances concernant les problèmes principaux d'accessibilité que vous pourrez rencontrer, et comment les tester et les surmonter.

- -

Dans le prochain article nous nous tournerons vers la fonctionnalité de détection dans plus de détail.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md new file mode 100644 index 0000000000..9ed0cc97e7 --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md @@ -0,0 +1,685 @@ +--- +title: Gérer les problèmes courants d'accessibilité +slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +tags: + - Accessibilité + - Apprentissage + - Article + - CSS + - Clavier + - Débutant + - HTML + - JavaScript + - Outils + - navigateur croisé + - test +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +original_slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.

+ + + + + + + + + + + + +
Prérequis : +

Connaissances avec le noyau des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

+
Objectif : +

Être capable de diagnostiquer les problèmes courants d'Accessibilité, et utiliser les outils et techniques appropriés pour les résoudre.

+
+ +

Qu'est-ce que l'accessibilité ?

+ +

Quand on parle d'accessibilité dans le contexte de la technologie web, la plupart des gens pense directement au fait de s'assurer que les sites web/apps sont utilisables par les personnes avec des handicap, par exemple :

+ + + +

Toutefois, ce serait faux de réduire l'accessibilité uniquement aux handicaps. Le vrai but de l'accessibilité est de faire en sorte que vos sites web/applis soient utilisables par le plus grand nombre de personnes dans le plus grand nombre de contextes possibles, pas uniquement ces utilisateurs qui utilisant des ordinateurs de bureau puissants. Les exemples extrêmes pourraient inclure :

+ + + +

D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. Qu'est-ce que l'accessibilité ? décrit plus largement et précisément l'accessibilité que cet article ne le fait.

+ +

Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le responsive design et la performance à d'autres endroits dans ce module.

+ +
+

Note : Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.

+
+ +

Problèmes d'accessibilité courants

+ +

Dans cette section nous détaillerons certains des problèmes principaux qui se manifestent autour de l'accessibilité, liée à des technologies spécifiques, avec les bonnes pratiques à adopter, et quelques tests rapides que vous pouvez faire pour voir si vos sites vont dans le bon sens.

+ +
+

Note : L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez Accessibility guidlines and the law.

+
+ +

HTML

+ +

La sémantique HTML (où les éléments sont utilisés à leur fin prévues) est accessible sans aucune modification — les contenus sont lisibles par les spectateurs voyants (à condition que vous n'ayez rien fait d'absurde comme rendre le texte bien trop petit ou ne l'ayez caché en utilisant du CSS), mais il sera aussi utilisable par des technologies d'assistance comme les lecteurs d'écran (applis qui lisent littéralement une page à leurs utilisateurs), et apporte également d'autres avantages.

+ +

La structure sémantique

+ +

Le quick win le plus important en sémantique HTML et d'utiliser une structure de rubriques et de paragraphes pour votre contenu ; parce que les utilisateurs de lecteurs d'écran ont tendance à utiliser les rubriques d'un document comme indications pour trouver le contenu qu'il recherche plus rapidement. Si votre contenu n'a pas de rubriques, tout ce qu'ils auraient c'est un énorme mur de texte sans aucune indication pour trouver quelque chose. Exemples de bon et de mauvais HTML :

+ +
<font size="7">My heading</font>
+<br><br>
+This is the first section of my document.
+<br><br>
+I'll add another paragraph here too.
+<br><br>
+<font size="5">My subheading</font>
+<br><br>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+This is the second subsection of my content. I think is more interesting than the last one.
+ +
<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<h2>My subheading</h2>
+
+<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
+ +

De plus, votre contenu doit avoir un sens logique dans son code source — vous pourrez toujours le placer où vous voulez en utilisant du CSS plus tard, mais vous devez avoir un bon code source avec lequel commencer.

+ +

Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il est compréhensible sans ce dernier. Vous pouvez le faire manuellement juste en retirant le CSS de votre code, mais la façon la plus simple reste d'utiliser les fonctionnalités du navigateur, par exemple :

+ + + +

Utiliser l'accessibilité native du clavier

+ +

Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}.

+ +

Vous pouvez essayer ceci en utilisant notre exemple native-keyboard-accessibility.html (voir le code source) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.

+ +

+ +

Vous pouvez ensuite presser Entrée/Retour pour accéder à un lien focalisé ou presser un bouton (nous avons inclus un peu de JavaScript pour que les boutons renvoies un message d'alerte), ou commencer à taper pour entrer du texte dans un des input texte (d'autres éléments de formulaire ont différents contrôles, par exemple l'élément {{htmlelement("select")}} peut avoir ses options affichées et navigable en utilisant les touches haut et bas).

+ +

Notez que différents navigateurs peuvent avoir différentes options de contrôle par clavier disponibles. La plupart des navigateurs modernes respectent le modèle de tab écrit plus haut (vous pouvez aussi faire une Shift + Tab pour reculer entre les éléments focalisables), mais certains navigateurs ont leurs propres particularités :

+ + + +
+

Attention : Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.

+
+ +

Cet exemple souligne l'importance de l'utilisation de la sémantique correcte d'élément pour le travail correct. C'est possible de styler n'importe quel élément pour qu'il ressemble à un lien ou un bouton avec le CSS, et de le faire se comporter comme un lien ou un bouton avec JavaScript, mais ils ne seront toujours pas des liens ou des boutons, et vous perdrez beaucoup de l'accessibilité que ces éléments vous fournissent pour rien. Donc ne le faîte pas si vous pouvez l'éviter.

+ +

Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class :focus. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :

+ +
a:hover, input:hover, button:hover, select:hover,
+a:focus, input:focus, button:focus, select:focus {
+  font-weight: bold;
+}
+ +
+

Note : Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.

+
+ +

Intégrer l'accessibilité clavier

+ +

Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des <div>s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément <video> avec les contrôles par défaut du navigateur). Vous avez quelques options ici :

+ +
    +
  1. Créer des contrôles personnalisés en utilisant les éléments <button> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir Creating a cross-browser video player.
    2. +
  2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir Desktop mouse and keyboard controls pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
    3. +
  3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple fake-div-buttons.html (voir le code source). Nous donnons à nos faux boutons <div> la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut tabindex="0" (voir l'article tabindex de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
    4. +
  4. + 
    document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+};
    + Ici nous ajoutons un listener à l'objet document pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet keyCode ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le onclick du bouton en utilisant document.activeElement.onclick(). activeElement nous donne l'élément courant qui est focalisé sur la page.
    5. +
+ +
+

Note : Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. onclick). addEventListener ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.

+
+ +

Les textes alternatifs

+ +

Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut alt, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.

+ +
+

Note : Pour plus d'informations, lisez Text alternatives.

+
+ +

L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.

+ +

Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format WebVTT (voir Ajouter des légendes et des sous-titres à des vidéos HTML5 pour un tutoriel détaillé). La compatibilité entre navigateur pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.

+ +

Relations et contexte entre élément

+ +

Il y a certaines caractéristiques et pratiques optimales en HTML conçues pour apporter du contexte et des relations entre des éléments lorsqu'aucune n'aurait autrement existé. Les trois exemples les plus courants sont les liens, les libellés de formulaire et les tableau de données.

+ +

La solution pour les textes de type lien c'est que les personnes utilisant des lecteurs d'écran vont souvent utiliser une fonctionnalité commune avec laquelle ils vont récupérer une liste de tous les liens sur la page. Par exemple, une liste de lien libellés "cliquez ici", "cliquez ici", etc. est vraiment mauvaise pour l'accessibilité. Il est préférable pour les textes de type lien d'avoir du sens en contexte et hors contexte.

+ +

Le suivant sur notre liste, l'élément de formulaire {{htmlelement("label")}} est une des fonctionnalités centrales qui nous permet de rendre les formulaires accessibles. Le problème avec les formulaires c'est que vous avez besoin de libellés pour dire quelle donnée doit être entrée dans chaque champs du formulaire. Chaque libellé doit être inclus dans un {{htmlelement("label")}} pour le relier clairement à son champs partenaire (chaque valeur de l'attribut for de <label> doit aller avec la valeur de l'id de l'élément du formulaire), et cela aura du sens même si le code source n'est pas totalement logique (ce qui pour être tout à fait juste devrait être fait).

+ +
+

Note : Lisez Meaningful text labels, pour plus d'information à propos des textes de type lien et les libellés des formulaires.

+
+ +

Pour terminer, un mot rapide sur les tableaux de données. Un tableau de données basique peut être écrit avec des indications très simples (voir bad-table.html en direct, et la source), mais il y a des problèmes — il n'y a aucun moyen pour un utilisateur de lecteur d'écran d'associer des lignes ou des colonnes ensembles comme un groupe de données — pour faire cela vous devez connaître les lignes d'en-têtes, et si elles se dirigent en lignes, colonnes, etc. Cela ne peut être fait qu'en visuel pour un tel tableau.

+ +

Si vous regardez plutôt notre exemple punk-band-complete.html (direct, source), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs scope), l'élément {{htmlelement("caption")}}, etc.

+ +
+

Note : Lisez Accessible data tables, pour plus d'information à propos des tableaux accessibles.

+
+ +

CSS

+ +

Le CSS tend à fournir beaucoup moins de caractéristiques fondamentales d'accessibilité que le HTML, mais il peut aussi faire beaucoup de dommage à l'accessibilité s'il est mal utilisé. Nous avons déjà mentionné quelques conseils sur l'accessibilité incluant le CSS :

+ + + +

Il y a quelques autres considérations que vous devriez prendre en compte.

+ +

Couleur et contraste

+ +

Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le Color Contrast Checker de WebAIM si votre palette contraste suffisamment.

+ +

Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.

+ +
+

Note : un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.

+
+ +

Cacher du contenu

+ +

Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre Exemple de boîte d'info avec onglets (voir le code source) nous avons trois panneau d'information, mais nous les positionnons les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).

+ +

+ +

Les utilisateurs de lecteur d'écran ne se soucient pas vraiment de cela — ils sont satisfaits tant que le contenu a du sens dans le code source, et qu'ils peuvent entièrement y accéder. Le positionnement absolute (comme utilisé dans cet exemple) est souvent vu comme l'un des meilleur mécanismes pour cacher du contenu pour des effets visuels, parce que ça n'empêche pas les lecteur d'écran d'y accéder.

+ +

D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, parce qu'il cache le contenu aux lecteurs d'écran. A moins que, bien entendu, il y est une bonne raison qui justifie que ce contenu soit caché aux lecteurs d'écran.

+ +
+

Note : Invisible Content Just for Screen Reader Users vous décrira beaucoup de détails utilesà propos de ce sujet.

+
+ +

JavaScript

+ +

Le JavaScript a le même type de problèmes que le CSS concernant l'accessibilité — cela peut être désastreux pour l'accessibilité si mal utilisé, ou trop utilisé. Nous avions déjà abordé quelques problèmes d'accessibilité en rapport avec le JavaScript, principalement dans le champ de la sémantique HTML — vous devez toujours utiliser une sémantique HTML appropriée pour implémenter une fonctionnalité qu'importe où elle est disponible, par exemple utiliser des liens et des boutons de façon appropriée. N'utilisez pas les éléments <div> avec du code JavaScript pour simuler une fonctionnalité si c'est possible — c'est une source d'erreur, et ça fonctionne mieux d'utiliser les fonctionnalités disponibles qu'HTML vous fournit.

+ +

Fonctionnalité simple

+ +

Normalement, une fonctionnalité simple doit marcher uniquement avec le HTML en place — le JavaScript ne doit pas être utilisé que pour améliorer la fonctionnalité, par pour la construire en entier. Les bons usages de JavaScript incluent :

+ + + +
+

Note : Accessible JavaScript de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.

+
+ +

Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec WebGL accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des contrôles clavier pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.

+ +

Fonctionnalité complexe

+ +

L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.

+ +

Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <div>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. Bootstrap à l'air d'être assez bon pour l'accessibilité, par exemple, bien que Making Bootstrap a Little More Accessible de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.

+ +

Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant XMLHttpRequest ou Fetch, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.

+ +

WAI-ARIA

+ +

Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser WAI-ARIA (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.

+ +

Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme roles pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), aria-disabled pour dire si un contrôle est désactivé ou pas, etc.

+ +

Pour traiter avec les zones de contenu qui sont régulièrement mises à jour, vous pouvez utiliser l'attribut aria-live, qui identifie une zone mise à jour. Sa valeur indique avec quelle urgence le lecteur d'écran doit faire la lecture :

+ + + +

Voici un exemple :

+ +
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
+ +

Vous pouvez voir un exemple en action sur l'exemple ARIA (Accessible Rich Internet Applications) Live Regions de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. ARIA Live Regions - Atomic apporte un autre exemple utile.

+ +

Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur WAI-ARIA basics.

+ +

Les outils d'accessibilité

+ +

Maintenant que nous avons couvers les considérations de l'accessibilité pour les différentes technologies web, incluant quelques techniques de test (comme la navigation au clavier et le vérificateur de contraste de couleur), tournons-nous maintenant vers d'autres outils que vous pouvez utiliser pour faire des tests d'accessibilité.

+ +

Les outils d'audit

+ +

Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple :

+ + + +

Observons un exemple, en utilisant Tenon.

+ +
    +
  1. Aller sur la page d'accueil de Tenon.
    2. +
  2. Entrez l'URL de notre exemple de bad-semantics.html dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur Analyse your Webpage.
    3. +
  3. Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.
    4. +
+ +

+ +

Il y a également des options que vous pouvez examiner (voir le lien Show Options vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme.

+ +
+

Note : De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.

+
+ +

Les outils d'automatisation

+ +

Deque's aXe tool va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :

+ + + +

Cela ajoute un onglet accessibilité aux outils de développeur du navigateur, nous avons installé la version pour Firefox, puis nous l'avons utilisé pour auditer notre exemple bad-table.html. Nous obtenons les résultats suivants :

+ +

+ +

aXe est également installable en utilisant npm, et peut-être intégré avec des exécuteurs de tâche comme Grunt et Gulp, des frameworks d'automatisation comme Selenium et Cucumber, des framework de test unitaire comme Jasmin, et d'autres encore (une fois encore, voir la page principale d'aXe pour plus de détails).

+ +

Les lecteurs d'écran

+ +

Il faut définitivement tester avec un lecteur d'écran pour s'habituer à comment les personnes malvoyantes utilisent le Web. Il y a plusieurs lecteurs d'écran disponible : 

+ + + +

La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'exécutent sur le système d'exploitation hôte et peuvent lire des pages web, mais aussi du texte dans d'autres appli. Ce n'est pas toujours le cas (ChromeVox est une extension navigateur), mais ça l'est souvent. Les lecteurs d'écran ont tendance à agir de manière légèrement différente et ont des contrôles différents, donc vous devrez consulter la documentation pour le lecteur d'écran que vous avez choisi pour obtenir tous les détails — cela dit, il fonctionne tous à peu près de la même manière.

+ +

Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.

+ +
+

Note : Designing for Screen Reader Compatibility de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir Screen Reader User Survey #6 Results pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.

+
+ +

VoiceOver

+ +

VoiceOver (VO) est gratuit avec votre Mac/iPhone/iPad, donc c'est utile pour tester sur votre ordinateur/mobile si vous utilisez des produits Apple. Nous le testerons sur Mac OS X sur un MacBook Pro.

+ +

Pour le démarrer, pressez Cmd + Fn + F5. Si vous n'avez jamais utilisé VO auparavant, vous obtiendrez un écran de bienvenue où vous pouvez choisir de démarrer VO ou de ne pas le démarrer, et vous parcourrez un tutoriel utile pour apprendre à comment l'utiliser. Pour l'arrêter, pressez Cmd + Fn + F5 à nouveau.

+ +
+

Note : Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.

+
+ +

Lorsque VO est démarré, l'affichage ressemblera à peu près à cela, mais vous verrez une boîte noire en bas à gauche de l'écran qui contient l'information sur quoi est-ce que VO est actuellement sélectionné. La sélection courante sera également mise en avant, avec une bordure noire — cette mise en avant est connue comme le curseur VO.

+ +

+ +

Pour utiliser VO, vous aller beaucoup utiliser le "modificateur VO" — c'est une touche ou une combinaison de touches que vous devez presser en plus de l'actuel raccourci VO pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leur propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de VO, le modificateur peut aussi être VerrMaj, ou Ctrl + Option.

+ +

VO a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "VO" veut dire "le modificateur VoiceOver".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Les raccourcis clavier VoiceOver les plus communs

+
Raccourci clavierDescription
VO + Touches du curseurDéplace le curseur VO vers le haut, la droite, le bas, la gauche.
VO + Barre espace +

Sélectionne/active les éléments mis en avant par le curseur VO. Cela inclut les items sélectionnés dans le Rotor (voir plus bas).

+
VO + Shift + curseur bas +

Se déplacer dans un groupe d'éléments (comme un tableau HTML, ou un formulaire, etc.) Une fois dans un groupe vous pouvez vous déplacer et sélectionner les éléments à l'intérieur de ce groupe en utilisant les commandes ci-dessus normalement.

+
VO + Shift + curseur hautSortir d'un groupe.
VO + C +

(à l'intérieur d'un tableau) lire l'entête de la colonne courante.

+
VO + R(à l'intérieur d'un tableau) lire l'entête de la ligne courante.
VO + C + C (deux C d'affilé)(à l'intérieur d'un tableau) lire toute la colonne courante, incluant l'entête.
VO + R + R (deux R d'affilé) +

(à l'intérieur d'un tableau) lire toute la ligne courante, incluant les entêtes qui correspondent à chacune des cellules.

+
VO + curseur gauche, VO + curseur droit(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Se déplacer entre les options
VO + curseur haut, VO + curseur bas(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Modifier l'option courante.
VO + U +

Utiliser le rotor, qui affiche des listes de rubriques, de liens, de contrôles de formulaires, etc. pour une navigation simplifiée.

+
VO + curseur gauche, VO + curseur droit +

(à l'intérieur du Rotor) Se déplacer ente les différentes listes disponibles dans le Rotor.

+
VO + curseur haut, VO + curseur bas +

(à l'intérieur du Rotor) Se déplacer entre les différents éléments dans la liste courante du Rotor.

+
Esc(à l'intérieur du Rotor) Sortir du Rotor.
Ctrl(Lorsque VO parle) Arrêter/Reprendre l'allocution.
VO + ZRelance la dernière partie de l'allocution.
VO + D +

Aller dans le Dock du Mac, pour que vous puissiez sélectionner des applis à exécuter.

+
+ +

Cela peut paraître comme beaucoup de commandes, mais pas tant que ça que vous vous y habituez, et VO vous rappelle régulièrement quels commandes utiliser dans quels cas. Essayer de tester VO maintenant ; vous pouvez dorénavant essayer de tester certains de nos exemples dans la section {{anch("Screenreader testing")}}.

+ +

NVDA

+ +

NVDA est exclusif à Windows, et vous allez devoir l'installer.

+ +
    +
  1. Téléchargez-le depuis nvaccess.org. Vous pouvez choisir si vous voulez faire une donation ou le télécharger gratuitement ; vous devrez également leur donner votre adresse e-mail avant de pouvoir le télécharger.
    2. +
  2. Une fois téléchargé, installez-le — double cliquez sur l'installeur, acceptez la licence et suivez les instructions.
    3. +
  3. Pour lancer NVDA, double cliquez sur fichier/raccourci du programme, ou utilisez le raccourci clavier Ctrl + Alt + N. Vous verrez la boîte de dialogue de bienvenue de NVDA lorsque vous le démarrez. Vous pouvez choisir ici différentes options, puis appuyez sur OK pour continuer.
    4. +
+ +

NVDA sera maintenant actif sur votre ordinateur.

+ +

Pour utiliser NVDA, vous aller beaucoup utiliser le "modificateur NVDA" — c'est une touche que vous devez presser en plus de l'actuel raccourci NVDA pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leurs propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de NVDA, le modificateur peut aussi être Insert (par défaut), ou VerrMaj (peut être choisi en cochant la première case à cocher dans la boîte de dialogue de bienvenue avant d'appuyer sur OK).

+ +
+

Note : NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.

+
+ +

NVDA a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "NVDA" veut dire "le modificateur NVDA".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Les raccourcis clavier NVDA les plus communs
Raccourci clavierDescription
NVDA + Q +

Arrête NVDA après que vous l'ayez démarré.

+
NVDA + curseur hautLit la ligne courante.
NVDA + curseur basCommence à lire à la position courante.
curseur haut ou curseur bas, ou Shift + Tab et Tab +

Se déplace à l'élément suivant/précédent de la page et le lit.

+
curseur gauche et curseur droit +

Se déplace au caractère suivant/précédent dans l'élément courant et le lit.

+
Shift + H et H +

Se déplace au titre suivante/précédente et le lit.

+
Shift + K et K +

Se déplace au lien suivant/précédent et le lit.

+
Shift + D et D +

Se déplace au repère de document (par ex. <nav>) suivant/précédent et le lit.

+
Shift + 1–6 et 1–6 +

Se déplace au titre (niveau 1 à 6) suivant/précédent et le lit.

+
Shift + F et F +

Se déplace à l'entrée de formulaire suivante/précédente et se focalise dessus.

+
Shift + T et T +

Se déplace sur la donnée de tableau suivante/précédente et se focalise dessus.

+
Shift + B et B +

Se déplace sur le bouton suivant/précédent et lit son libellé.

+
Shift + L et L +

Se déplace à la liste suivante/précédente et lit son premier item de liste.

+
Shift + I et I +

Se déplace à l'item de liste suivant/précédent et le lit.

+
Entrée/Retour +

(quand un lien/bouton ou autre élément activable est sélectionné) Active l'élément.

+
NVDA + Barre espace +

(quand un formulaire est sélectionné) Entre dans le formulaire pour que les éléments puissent être sélectionnés individuellement, ou quitter le formulaire si vous êtes déjà dedans.

+
Shift Tab et Tab +

(à l'intérieur d'un formulaire) Se déplacer entre les entrées de formulaire.

+
Curseur haut et curseur bas +

(à l'intérieur d'un formulaire) Modifier les valeurs d'une entrée de formulaire (dans les cas comme les listes déroulantes)

+
Barre espace +

(à l'intérieur d'un formulaire) Sélectionner la valeur choisie.

+
Ctrl + Alt + touches fléchées(à l'intérieur d'un tableau) Se déplacer entre les cellules du tableau.
+ +

Test avec lecteur d'écran

+ +

Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous aimerions que vous vous habituiez à faire quelques tests d'accessibilité rapides, pour vous faire une idée de comment les lecteurs d'écran se débrouillent avec les bonnes et mauvaises caractéristiques d'une page web :

+ + + +

Test utilisateur

+ +

Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section Test Utilisateur plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.

+ +

Checklist de tests d'accessibilité

+ +

La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet :

+ +
    +
  1. Assurez-vous que votre HTML est sémantiquement correct au possible. Le valider est un bon début, comme utiliser un outil d'Audit.
    2. +
  2. Vérifiez que votre contenu a du sens lorsque le CSS est désactivé.
    3. +
  3. Assurez-vous que votre fonctionnalité est accessible au clavier. Testez en utilisant Tab, Retour/Entrée, etc.
    4. +
  4. Assurez-vous que votre contenu non-textuel a un texte alternatif. Un Outil d'audit est bien pour repérer ce type de problèmes.
    5. +
  5. Assurez-vous que votre contraste de couleurs est acceptable, en utilisant un outil de vérification approprié.
    6. +
  6. Assurez-vous que le contenu caché est visible par les lecteurs d'écran.
    7. +
  7. Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible.
    8. +
  8. Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié.
    9. +
  9. Exécutez votre site dans un Outil d'audit.
    10. +
  10. Testez avec un lecteur d'écran.
    11. +
  11. Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait.
    12. +
+ +

Trouver de l'aide

+ +

Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article la section Trouver de l'aide de l'article sur le HTML et le CSS pour des bonnes directions.

+ +

Résumé

+ +

Espérons que cet article vous aura donné des bonnes connaissances concernant les problèmes principaux d'accessibilité que vous pourrez rencontrer, et comment les tester et les surmonter.

+ +

Dans le prochain article nous nous tournerons vers la fonctionnalité de détection dans plus de détail.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html deleted file mode 100644 index 1b55de47f6..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html +++ /dev/null @@ -1,507 +0,0 @@ ---- -title: Gérer les problèmes courants en HTML et CSS -slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS -tags: - - Apprentissage - - CSS - - Débutant - - HTML - - Sélecteurs - - linting - - navigateur croisé - - test -translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS -original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.

- - - - - - - - - - - - -
Prérequis : -

Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

-
Objectif : -

Etre capable de diagnostiquer des problèmes courants de CSS et de HTML en navigateur croisé, et utiliser les techniques et outils appropriés pour les réparer.

-
- -

Les difficultés avec HTML et CSS

- -

Certains des problèmes avec le HTML et le CSS viennent du fait qu'ils sont tous les deux des langages qui sont assez simples, et souvent les développeurs ne les considèrent pas sérieusement, en termes de s'assurer que le code est bien conçu, efficace, et qu'il décrit sémantiquement les but de la fonctionnalité sur la page. Dans les pires des cas, Javascript est utilisé pour générer tout le contenu et le style d'une page web, ce qui rend vos pages inaccessibles, et moins performantes (générer des éléments de DOM est coûteux). Dans d'autres cas, des fonctionnalités naissantes ne sont pas supportées constamment par tous les navigateurs, ce qui peut empêcher certaines fonctionnalités et styles de fonctionner pour certains utilisateurs. Les problèmes de responsive design sont également courant — un site qui paraît bien sur le navigateur d'un ordinateur de bureau pourra fournir une expérience horrible sur un appareil mobile, à cause du contenu qui est trop petit pour être lu, ou peut-être que le site sera lent à cause de animations coûteuses.

- -

Commençons et regardons comment nous pouvons réduire les erreurs en navigateur croisé issues du HTML/CSS.

- -

Commençons par le commencement : résoudre les problèmes généraux

- -

Nous disions dans le premier article de cette série que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.

- -

Dans nos articles Debugging HTML et Debugging CSS, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.

- -

Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.

- -
-

Note : Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "espace de noms" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple .audio-player ul a.

-
- -

La validation

- -

Pour le HTML, la validation implique de s'assurer que toutes vos balises sont correctement fermées et imbriquées, que vous utilisez un DOCTYPE, et que vous utilisez les balises à leur fin prévue. Une bonne stratégie est de valider régulièrement votre code. On service qui peut le faire est le W3C Markup Validation Service, qui vous permet de montrer votre code, et retourne une liste d'erreurs :

- -

The HTML validator homepage

- -

Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un CSS Validator également disponible à cet effet.

- -

Les linters

- -

Une autre bonne option à envisager est ce qu'on appelle les applications Linter, qui ne font pas que souligner les erreurs, mais peuvent aussi mettre en évidence des avertissements à propos des mauvaises pratiques dans votre CSS, et encore d'autres points. Les linters peuvent pour la plupart être configurés pour être plus strictes ou plus coulants dans leur rapport d'erreur/avertissement.

- -

Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement Dirty Markup (HTML, CSS, JavaScript), et CSS Lint (seulement CSS). Elles vous permettent de coller votre code dans une fenêtre, et mettront en évidence toutes les erreurs avec des croix, qui peuvent être survolées pour obtenir un message d'erreur décrivant le problème. Dirty Markup vous permet également de faire des fixs dans votre code en utilisant le bouton Clean.

- -

- -

Néanmoins, ce n'est pas très pratique de devoir copier et coller votre code dans une page web pour vérifier sa validité plusieurs fois. Ce dont vous avez vraiment besoin c'est d'un linter qui s'installera dans votre espace de travail standard avec le minimum de prise de tête.

- - - -

La plupart des éditeurs de code ont leur plugins linter. Par exemple, l'éditeur de code Atom de Github possède un riche écosystème de plugins disponibles, avec beaucoup d'options de linting. Voici un exemple pour vous montrer comment un plugin marche généralement :

- -
    -
  1. Installer Atom (si vous n'avez pas déjà une version à jour installée) — télécharger-le depuis la page Atom indiquée plus haut.
    2. -
  2. Aller dans la boîte de dialogue Préférences... d'Atom (par ex. en sélectionnant Atom > Préférences... sur Mac, ou Fichier > Préférences... sur Windows/Linux) et choisissez l'option Installer dans le menu gauche.
    3. -
  3. Dans le champs texte Rechercher des packages, taper "lint" et presser Entrer/Envoyer pour rechercher des packages liés au linting.
    4. -
  4. Vous devriez voir un package appelé lint dans le haut de la liste. Installez celui-ci en premier (en utilisant le bouton Installer), comme les autres linters lui font appel pour fonctionner. Ensuite, installer le plugin linter-csslint pour le linting CSS, et le plugin linter-tidy pour le linting HTML.
    5. -
  5. Une fois que les packages ont fini de s'installer, essayer de charger un fichier HTML et un fichier CSS : vous verrez plusieurs zones soulignées en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de ligne, et un panneau séparé en bas qui affiche les numéros de ligne, les messages d'erreur, et parfois qui vous suggère des valeur par défaut ou d'autres solutions.
    6. -
- - - -

- -

D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :

- - - -

Les outils de développement des navigateurs

- -

Les outils de développement inclus dans la plupart des navigateurs fournissent également des outils pour traquer les erreurs, en particulier pour le CSS.

- -
-

Note : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.

-
- -

As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:

- -

- -

Les outils de dev des autres navigateurs ont des fonctionnalités semblables.

- -

Problèmes fréquents en navigateur croisé

- -

Attaquons-nous maintenant à certains des problèmes HTML et CSS les plus courants en navigateur croisé. Les sujets principaux que nous allons aborder sont l'absence de support pour les fonctionnalités modernes, et les problèmes de mise en page.

- -

Les vieux navigateurs ne supportant pas les fonctionnalités récentes

- -

C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme Flexbox, ou HTML5 video/audio, ou encore plus récent, CSS Grids ou -webkit-background-clip: text.

- -

Une fois que vous avez identifié une liste des potentielles technologies à problèmes que vous allez utiliser, c'est une bonne initiative des rechercher sur quels navigateurs elles sont supportées, et quelles techniques associées sont utiles. Voir {{anch("Finding help")}} plus bas.

- -

Comportement naturel du HTML

- -

Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.

- -

Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer display: block; sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.

- -
-

Note : Voir {{anch("IE conditional comments")}} pour une application efficace.

-
- - - -

Des éléments HTML plus complexes comme <video>, <audio>, et <canvas> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.

- -

Par exemple :

- -
<video id="video" controls preload="metadata" poster="img/poster.jpg">
-  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
-  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
-  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
-  <!-- Flash fallback -->
-  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
-     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-     <param name="allowfullscreen" value="true" />
-     <param name="wmode" value="transparent" />
-     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
-  </object>
-  <!-- Offer download -->
-  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
-</video>
- -

Cette exemple (issu de Creating a cross-browser video player) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.

- -
-

Note : les librairies tierces comme Video.js et JW Player utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.

-
- -

Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<input> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.

- -

L'exemple suivant montre des inputs date et time :

- -
<form>
-  <div>
-    <label for="date">Enter a date:</label>
-    <input id="date" type="date">
-  </div>
-  <div>
-    <label for="time">Enter a time:</label>
-    <input id="time" type="time">
-  </div>
-</form>
- -
Résultat
- -

Le résultat de ce code est le suivant :

- - - - - - - -

{{ EmbedLiveSample('Résultat', '100%', 150) }}

- -
-

Note : Vous pouvez également le voir exécuté en direct depuis forms-test.html sur GitHub (voir aussi le code source).

-
- -

Si vous consultez l'exemple sur un navigateur qui supporte les technologies récentes comme Android Chrome ou iOS Safari, vous verrez le widget/fonctionnalité spécial en action quand vous essaierai de saisir des données. Sur des plateformes non compatibles comme Firefox ou Internet Explorer, les inputs vont juste recourir à un input texte normal, finalement l'utilisateur peut toujours entrer des informations.

- -

Note : Bien entendu, cela n'est pas une solution viable pour les besoins de votre projet — la différence dans une présentation visuelle n'est pas désirée, de plus c'est compliqué de garantir que la donnée qui a été inscrite est dans le format que vous voulez qu'elle soit. Pour les formulaires en navigateur croisé, il est préférable de se référer aux simples éléments de formulaire, ou utiliser les éléments avancés de formulaire de manière sélective uniquement sur les navigateurs qui les supportent, ou utiliser une librairie qui fournit des widget décents en navigateur croisé, comme jQuery UI ou Bootstrap datepicker.

- -

Comportement naturel du CSS

- - -

Le CSS est sans doute meilleur en solution de recours que le HTML. Si un navigateur rencontre une déclaration ou une règle qu'il ne comprend pas, il la passe complètement sans l'appliquer ou provoquer une erreur. Cela peut être frustrant pour vous et vos utilisateurs si de telles erreurs se glissent à travers le code en production, mais au moins cela veut dire que l'ensemble du site ne va pas crasher à cause d'une erreur, et si utilisé intelligemment vous pouvez vous en servir à votre avantage.

- -

Observons un exemple — une simple boîte stylée avec du CSS, qui a certains styles apportés par différentes caractéristiques CSS3 :

- -

- -
-

Note : Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme button-with-fallback.html (voir aussi le code source).

-
- -

Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :

- -
button {
-  ...
-
-  background-color: #ff0000;
-  background-color: rgba(255,0,0,1);
-  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
-              inset -1px -1px 3px rgba(0,0,0,0.4);
-}
-
-button:hover {
-  background-color: rgba(255,0,0,0.5);
-}
-
-button:active {
-  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
-              inset -1px -1px 3px rgba(255,255,255,0.4);
-}
- -

Ici on fournit un {{cssxref("background-color")}} RGBA qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !

- -

- -

Pour résoudre ce problème, nous avons ajouté une deuxième déclaration background-color, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur background-color ; lorsqu'il sélectionne la deuxième déclaration background-color, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.

- -
-

Note : Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs media queries, @font-face et @supports — s'ils ne sont pas supportés, le navigateur va juste les ignorer.

-
- -

Les commentaires conditionnels d'IE

- -

Les commentaires conditionnels d'IE sont une propriété modifiée de la syntaxe des commentaires HTML, qui peuvent être utilisés pour appliquer du code HTML de manière sélective à différentes versions d'IE. Cela s'est avéré être un mécanisme très efficace pour résoudre les bugs en navigateur croisé. La syntaxe ressemble à ça :

- -
<!--[if lte IE 8]>
-  <script src="ie-fix.js"></script>
-  <link href="ie-fix.css" rel="stylesheet" type="text/css">
-<![endif]-->
- -

Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. lte veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, ! pour NOT, et d'autre syntaxe logique.

- -
-

Note : L'article Internet Explorer Conditional Comments de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.

-
- -

Comme vous pouvez le voir, c'est particulièrement utile pour appliquer des fixes aux vieilles versions d'IE. Le cas d'usage que nous avons mentionné plus tôt (rendre les éléments sémantiques modernes stylables sur les vieilles versions d'IE) peut être atteint facilement en utilisant des commentaires conditionnels, par exemple vous pouvez mettre quelque chose comme ça dans votre feuille de style IE :

- -
aside, main, article, section, nav, figure, figcaption {
-  display: block;
-}
- -

Ce n'est cependant pas aussi simple — vous devez également créer une copie de chacun des éléments que vous voulez styler dans le DOM via Javascript, pour les rendre stylable ; c'est un peu bizarre, et nous ne vous ennuierons pas avec les détails ici. Par exemple :

- -
var asideElem = document.createElement('aside');
- ...
- -

Cela paraît assez compliqué à gérer, mais heureusement il y a un {{glossary("polyfill")}} disponible qui fait les fixs nécessaires pour vous, et plus encore — voir HTML5Shiv pour tous les détails (voir manual installation pour les usages les plus simples).

- -

Support de sélecteur

- -

Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons sélecteurs pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.

- -

Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :

- -

- -

Si pour cet exemple vous essayez d'utiliser ce sélecteur, vous vous rendrez compte qu'il ne sélectionnera pas l'élément input comme désiré :

- -
form > #date
- -

(L'input date du formulaire n'est pas directement dans le <form> ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).

- -

Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme :nth-of-type, :not, ::selection, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie Selectivizr de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  jQuery ou MooTools.

- -
    -
  1. Afin de tester cet exemple, faites une copie locale de selectivizr-example-start.html. Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec p:first-child, qui ne fonctionne pas sur les anciennes versions d'IE.
    2. -
  2. Maintenant télécharger MooTools et Selectivizr, et placez-les dans le même répertoire que votre fichier HTML.
    3. -
  3. Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante <style> : - 
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
-    <!--[if (gte IE 6)&(lte IE 8)]>
-      <script type="text/javascript" src="selectivizr-min.js"></script>
-    <![endif]-->
    -
    4. -
- -

Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.

- -

- -

Gestion des préfixes CSS

- -

Une autre source de problèmes arrive avec les préfixes CSS — ceux sont des mécanismes utilisés à la base pour permettre au navigateur d'implémenter leur propre version d'une fonctionnalité CSS (ou Javascript) tant que la technologie est en stade expérimentale, donc ils peuvent jouer avec et la finaliser sans entrer en conflit avec les implémentations des autres navigateurs, ou la dernière implémentation non-préfixée. Voici par exemple :

- - - -

Voici quelques exemples :

- -
-webkit-transform: rotate(90deg);
-
-background-image: -moz-linear-gradient(left,green,yellow);
-background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
-background-image: linear-gradient(to right,green,yellow);
-
- -

La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe -webkit- — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).

- -

Les trois dernières images montrent trois versions différentes de la fonction linear-gradient(), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :

- -
    -
  1. La première a un préfixe -moz-, et montre une version plutôt ancienne de la syntaxe (Firefox)
    2. -
  2. La seconde a un préfixe -webkit-, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit)
    3. -
  3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans  CSS Image Values and Replaced Content Module Level 3 spec, qui définit cette fonctionnalité).
    4. -
- -

Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version -webkit- d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées -webkit- de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention.

- -

Si vous persistez a utiliser des fonctionnalités préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez vérifier quels navigateurs ont besoin de préfixes sur les pages de référence MDN, et des sites comme caniuse.com. Si vous doutez, vous pouvez aussi vérifier en faisant des tests directement sur les navigateurs.

- -

Essayez cet exemple simple :

- -
    -
  1. Ouvrez google.com, ou un autre site qui a un en-tête proéminent ou un niveau de bloc d'élément.
    2. -
  2. Clic droit sur l'élément en question et choisir Inspecter/Inspecter l'élément (ou qu'importe l'option de votre navigateur) — cela devrait ouvrir les outils de dev dans votre navigateur, avec l'élément mis en valeur dans l'inspecteur du DOM.
    3. -
  3. Chercher une fonctionnalité que vous pouvez utiliser pour sélectionner cet élément. Par exemple, au moment de la rédaction, le logo principal de Google a un ID hplogo.
    4. -
  4. Entreposer une référence à cet élément dans une variable, par exemple : - 
    var test = document.getElementById('hplogo');
    -
    5. -
  5. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété style de l'élément, par exemple essayez de taper ça dans votre console Javascript :
    6. -
  6. - 
    test.style.transform = 'rotate(90deg)'
-test.style.webkitTransform = 'rotate(90deg)'
    -
    7. -
- -

Quand vous commencez à taper la transcription du nom de la propriété après le deuxième point (notez qu'en Javascript, les noms des propriétés CSS sont écrites en lower camel case, sans trait d'union), la console Javascript devrait commencer à saisir automatiquement les noms des propriétés qui existent dans le navigateur et qui correspondent au mieux avec ce que vous écrivez. C'est utile pour trouver quelles versions de la propriété est implémentée dans ce navigateur.

- -

A l'heure où ces lignes sont écrites, Firefox et Chrome ont implémenté tous les deux les versions préfixées -webkit- et non préfixées de {{cssxref("transform")}} !

- -

Une fois que vous avez trouvé quels préfixes vous avez besoin de supporter, vous devriez tous les inscrire dans votre CSS, par exemple :

- -
-ms-transform: rotate(90deg);
--webkit-transform: rotate(90deg);
-transform: rotate(90deg);
- -

Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle des formes de la propriété ci-dessus pourront faire marcher la fonctionnalité. Il convient de placer la version non préfixée en dernier, parce qu'elle sera la version la plus récente, que vous voulez que les navigateurs utilisent si c'est possible. Si par exemple un navigateur implémente la version -webkit- et la version non préfixée, il va en premier temps appliquer la version -webkit-, puis la remplacer par la version non préfixée. Vous voulez que cela se produise dans ce sens, et non dans l'autre.

- -

Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent :

- -

La prefix-free JavaScript library peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.

- -

Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme Autoprefixer et PostCSS. Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une version en ligne qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans Autoprefixer options ; pour plus de détails, voir aussi Browserslist queries, qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.

- -
last 2 versions, ie > 9
- - - -

Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir Autoprefixer usage. Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).

- -

Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom :

- -
    -
  1. Vous pouvez l'installer en allant dans Préférences > Installer, chercher Autoprefixer, puis cliquer sur installer.
    2. -
  2. Vous pouvez configurer une requête navigateur en appuyant sur le bouton Settings d'Autoprefixer et entrer la requête dans le champs texte de la section Setting de la page.
    3. -
  3. Dans votre code, vous pouvez sélectionner des sections de CSS auxquelles vous voulez ajouter des préfixes, ouvrez la palette de commande (Cmd/Ctrl + Shift + P), puis tapez Autoprefixer dedans et sélectionnez le résultat Autoprefixer qui auto complète.
    4. -
- -

En tant qu'exemple, nous avons entré le code suivant :

- -
body {
-  display: flex;
-}
- -

Nous l'avons sélectionné et exécuté la commande Autoprefixer, et il l'a remplacé par ça :

- -
body {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

Les problèmes de mise en page

- -

Un autre problème qui peut survenir est la différence de mise en page entre les navigateurs. Historiquement c'était traité comme bien plus qu'un problème, mais ces derniers temps, avec les navigateurs modernes qui ont tendance à supporter le CSS plus systématiquement, les problèmes de mise en page ont plus tendance à être couramment associés avec :

- - - -
-

Note : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le normalize.css, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.

-
- -
-

Note : Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir Debug your CSS with outline visualizations pour plus de détails...

-
- -

Support pour les nouvelles caractéristiques de disposition

- -

La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les floats — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir Why Flexbox?)

- -

Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme Flexbox et CSS Grids, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :

- - - -

Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).

- -

Par exemple, vous pourriez appliquer une disposition flexbox sur les navigateurs modernes, et aussi appliquer une disposition en float pour les plus vieux navigateurs qui ne supportent pas flexbox.

- -
-

Note : Il y a une fonctionnalité assez récente en CSS appelé @supports, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.

-
- -

Les problèmes de responsive design

- -

Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les media queries, et assurez-vous qu'il est appliqué correctement en utilisant viewport. Vous pouvez trouver un bilan précis de telles pratiques dans The building blocks of responsive design.

- -

La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples mobile first media queries, aux plus complexes responsive image techniques.

- -

Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme css3-mediaqueries-js ou Respond.js.

- -

Trouver de l'aide

- -

Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne.

- -

Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), stackoverflow.com et caniuse.com.

- -

Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :

- - - -

caniuse.com fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir http://caniuse.com/#search=video (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)

- -

stackoverflow.com (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution HTML5 Video with full cross browser compatibility est remontée.

- -

Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous

- -

Résumé

- -

Vous devriez maintenant être familier avec les problèmes principaux en navigateur croisé avec HTML et CSS que vous rencontrerez en développement web, et comment faire pour les résoudre.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md new file mode 100644 index 0000000000..1b55de47f6 --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md @@ -0,0 +1,507 @@ +--- +title: Gérer les problèmes courants en HTML et CSS +slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS +tags: + - Apprentissage + - CSS + - Débutant + - HTML + - Sélecteurs + - linting + - navigateur croisé + - test +translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS +original_slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.

+ + + + + + + + + + + + +
Prérequis : +

Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

+
Objectif : +

Etre capable de diagnostiquer des problèmes courants de CSS et de HTML en navigateur croisé, et utiliser les techniques et outils appropriés pour les réparer.

+
+ +

Les difficultés avec HTML et CSS

+ +

Certains des problèmes avec le HTML et le CSS viennent du fait qu'ils sont tous les deux des langages qui sont assez simples, et souvent les développeurs ne les considèrent pas sérieusement, en termes de s'assurer que le code est bien conçu, efficace, et qu'il décrit sémantiquement les but de la fonctionnalité sur la page. Dans les pires des cas, Javascript est utilisé pour générer tout le contenu et le style d'une page web, ce qui rend vos pages inaccessibles, et moins performantes (générer des éléments de DOM est coûteux). Dans d'autres cas, des fonctionnalités naissantes ne sont pas supportées constamment par tous les navigateurs, ce qui peut empêcher certaines fonctionnalités et styles de fonctionner pour certains utilisateurs. Les problèmes de responsive design sont également courant — un site qui paraît bien sur le navigateur d'un ordinateur de bureau pourra fournir une expérience horrible sur un appareil mobile, à cause du contenu qui est trop petit pour être lu, ou peut-être que le site sera lent à cause de animations coûteuses.

+ +

Commençons et regardons comment nous pouvons réduire les erreurs en navigateur croisé issues du HTML/CSS.

+ +

Commençons par le commencement : résoudre les problèmes généraux

+ +

Nous disions dans le premier article de cette série que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.

+ +

Dans nos articles Debugging HTML et Debugging CSS, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.

+ +

Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.

+ +
+

Note : Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "espace de noms" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple .audio-player ul a.

+
+ +

La validation

+ +

Pour le HTML, la validation implique de s'assurer que toutes vos balises sont correctement fermées et imbriquées, que vous utilisez un DOCTYPE, et que vous utilisez les balises à leur fin prévue. Une bonne stratégie est de valider régulièrement votre code. On service qui peut le faire est le W3C Markup Validation Service, qui vous permet de montrer votre code, et retourne une liste d'erreurs :

+ +

The HTML validator homepage

+ +

Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un CSS Validator également disponible à cet effet.

+ +

Les linters

+ +

Une autre bonne option à envisager est ce qu'on appelle les applications Linter, qui ne font pas que souligner les erreurs, mais peuvent aussi mettre en évidence des avertissements à propos des mauvaises pratiques dans votre CSS, et encore d'autres points. Les linters peuvent pour la plupart être configurés pour être plus strictes ou plus coulants dans leur rapport d'erreur/avertissement.

+ +

Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement Dirty Markup (HTML, CSS, JavaScript), et CSS Lint (seulement CSS). Elles vous permettent de coller votre code dans une fenêtre, et mettront en évidence toutes les erreurs avec des croix, qui peuvent être survolées pour obtenir un message d'erreur décrivant le problème. Dirty Markup vous permet également de faire des fixs dans votre code en utilisant le bouton Clean.

+ +

+ +

Néanmoins, ce n'est pas très pratique de devoir copier et coller votre code dans une page web pour vérifier sa validité plusieurs fois. Ce dont vous avez vraiment besoin c'est d'un linter qui s'installera dans votre espace de travail standard avec le minimum de prise de tête.

+ + + +

La plupart des éditeurs de code ont leur plugins linter. Par exemple, l'éditeur de code Atom de Github possède un riche écosystème de plugins disponibles, avec beaucoup d'options de linting. Voici un exemple pour vous montrer comment un plugin marche généralement :

+ +
    +
  1. Installer Atom (si vous n'avez pas déjà une version à jour installée) — télécharger-le depuis la page Atom indiquée plus haut.
    2. +
  2. Aller dans la boîte de dialogue Préférences... d'Atom (par ex. en sélectionnant Atom > Préférences... sur Mac, ou Fichier > Préférences... sur Windows/Linux) et choisissez l'option Installer dans le menu gauche.
    3. +
  3. Dans le champs texte Rechercher des packages, taper "lint" et presser Entrer/Envoyer pour rechercher des packages liés au linting.
    4. +
  4. Vous devriez voir un package appelé lint dans le haut de la liste. Installez celui-ci en premier (en utilisant le bouton Installer), comme les autres linters lui font appel pour fonctionner. Ensuite, installer le plugin linter-csslint pour le linting CSS, et le plugin linter-tidy pour le linting HTML.
    5. +
  5. Une fois que les packages ont fini de s'installer, essayer de charger un fichier HTML et un fichier CSS : vous verrez plusieurs zones soulignées en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de ligne, et un panneau séparé en bas qui affiche les numéros de ligne, les messages d'erreur, et parfois qui vous suggère des valeur par défaut ou d'autres solutions.
    6. +
+ + + +

+ +

D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :

+ + + +

Les outils de développement des navigateurs

+ +

Les outils de développement inclus dans la plupart des navigateurs fournissent également des outils pour traquer les erreurs, en particulier pour le CSS.

+ +
+

Note : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.

+
+ +

As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:

+ +

+ +

Les outils de dev des autres navigateurs ont des fonctionnalités semblables.

+ +

Problèmes fréquents en navigateur croisé

+ +

Attaquons-nous maintenant à certains des problèmes HTML et CSS les plus courants en navigateur croisé. Les sujets principaux que nous allons aborder sont l'absence de support pour les fonctionnalités modernes, et les problèmes de mise en page.

+ +

Les vieux navigateurs ne supportant pas les fonctionnalités récentes

+ +

C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme Flexbox, ou HTML5 video/audio, ou encore plus récent, CSS Grids ou -webkit-background-clip: text.

+ +

Une fois que vous avez identifié une liste des potentielles technologies à problèmes que vous allez utiliser, c'est une bonne initiative des rechercher sur quels navigateurs elles sont supportées, et quelles techniques associées sont utiles. Voir {{anch("Finding help")}} plus bas.

+ +

Comportement naturel du HTML

+ +

Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.

+ +

Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer display: block; sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.

+ +
+

Note : Voir {{anch("IE conditional comments")}} pour une application efficace.

+
+ + + +

Des éléments HTML plus complexes comme <video>, <audio>, et <canvas> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.

+ +

Par exemple :

+ +
<video id="video" controls preload="metadata" poster="img/poster.jpg">
+  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
+  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
+  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
+  <!-- Flash fallback -->
+  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
+     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+     <param name="allowfullscreen" value="true" />
+     <param name="wmode" value="transparent" />
+     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
+  </object>
+  <!-- Offer download -->
+  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
+</video>
+ +

Cette exemple (issu de Creating a cross-browser video player) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.

+ +
+

Note : les librairies tierces comme Video.js et JW Player utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.

+
+ +

Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<input> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.

+ +

L'exemple suivant montre des inputs date et time :

+ +
<form>
+  <div>
+    <label for="date">Enter a date:</label>
+    <input id="date" type="date">
+  </div>
+  <div>
+    <label for="time">Enter a time:</label>
+    <input id="time" type="time">
+  </div>
+</form>
+ +
Résultat
+ +

Le résultat de ce code est le suivant :

+ + + + + + + +

{{ EmbedLiveSample('Résultat', '100%', 150) }}

+ +
+

Note : Vous pouvez également le voir exécuté en direct depuis forms-test.html sur GitHub (voir aussi le code source).

+
+ +

Si vous consultez l'exemple sur un navigateur qui supporte les technologies récentes comme Android Chrome ou iOS Safari, vous verrez le widget/fonctionnalité spécial en action quand vous essaierai de saisir des données. Sur des plateformes non compatibles comme Firefox ou Internet Explorer, les inputs vont juste recourir à un input texte normal, finalement l'utilisateur peut toujours entrer des informations.

+ +

Note : Bien entendu, cela n'est pas une solution viable pour les besoins de votre projet — la différence dans une présentation visuelle n'est pas désirée, de plus c'est compliqué de garantir que la donnée qui a été inscrite est dans le format que vous voulez qu'elle soit. Pour les formulaires en navigateur croisé, il est préférable de se référer aux simples éléments de formulaire, ou utiliser les éléments avancés de formulaire de manière sélective uniquement sur les navigateurs qui les supportent, ou utiliser une librairie qui fournit des widget décents en navigateur croisé, comme jQuery UI ou Bootstrap datepicker.

+ +

Comportement naturel du CSS

+ + +

Le CSS est sans doute meilleur en solution de recours que le HTML. Si un navigateur rencontre une déclaration ou une règle qu'il ne comprend pas, il la passe complètement sans l'appliquer ou provoquer une erreur. Cela peut être frustrant pour vous et vos utilisateurs si de telles erreurs se glissent à travers le code en production, mais au moins cela veut dire que l'ensemble du site ne va pas crasher à cause d'une erreur, et si utilisé intelligemment vous pouvez vous en servir à votre avantage.

+ +

Observons un exemple — une simple boîte stylée avec du CSS, qui a certains styles apportés par différentes caractéristiques CSS3 :

+ +

+ +
+

Note : Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme button-with-fallback.html (voir aussi le code source).

+
+ +

Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :

+ +
button {
+  ...
+
+  background-color: #ff0000;
+  background-color: rgba(255,0,0,1);
+  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
+              inset -1px -1px 3px rgba(0,0,0,0.4);
+}
+
+button:hover {
+  background-color: rgba(255,0,0,0.5);
+}
+
+button:active {
+  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
+              inset -1px -1px 3px rgba(255,255,255,0.4);
+}
+ +

Ici on fournit un {{cssxref("background-color")}} RGBA qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !

+ +

+ +

Pour résoudre ce problème, nous avons ajouté une deuxième déclaration background-color, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur background-color ; lorsqu'il sélectionne la deuxième déclaration background-color, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.

+ +
+

Note : Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs media queries, @font-face et @supports — s'ils ne sont pas supportés, le navigateur va juste les ignorer.

+
+ +

Les commentaires conditionnels d'IE

+ +

Les commentaires conditionnels d'IE sont une propriété modifiée de la syntaxe des commentaires HTML, qui peuvent être utilisés pour appliquer du code HTML de manière sélective à différentes versions d'IE. Cela s'est avéré être un mécanisme très efficace pour résoudre les bugs en navigateur croisé. La syntaxe ressemble à ça :

+ +
<!--[if lte IE 8]>
+  <script src="ie-fix.js"></script>
+  <link href="ie-fix.css" rel="stylesheet" type="text/css">
+<![endif]-->
+ +

Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. lte veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, ! pour NOT, et d'autre syntaxe logique.

+ +
+

Note : L'article Internet Explorer Conditional Comments de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.

+
+ +

Comme vous pouvez le voir, c'est particulièrement utile pour appliquer des fixes aux vieilles versions d'IE. Le cas d'usage que nous avons mentionné plus tôt (rendre les éléments sémantiques modernes stylables sur les vieilles versions d'IE) peut être atteint facilement en utilisant des commentaires conditionnels, par exemple vous pouvez mettre quelque chose comme ça dans votre feuille de style IE :

+ +
aside, main, article, section, nav, figure, figcaption {
+  display: block;
+}
+ +

Ce n'est cependant pas aussi simple — vous devez également créer une copie de chacun des éléments que vous voulez styler dans le DOM via Javascript, pour les rendre stylable ; c'est un peu bizarre, et nous ne vous ennuierons pas avec les détails ici. Par exemple :

+ +
var asideElem = document.createElement('aside');
+ ...
+ +

Cela paraît assez compliqué à gérer, mais heureusement il y a un {{glossary("polyfill")}} disponible qui fait les fixs nécessaires pour vous, et plus encore — voir HTML5Shiv pour tous les détails (voir manual installation pour les usages les plus simples).

+ +

Support de sélecteur

+ +

Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons sélecteurs pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.

+ +

Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :

+ +

+ +

Si pour cet exemple vous essayez d'utiliser ce sélecteur, vous vous rendrez compte qu'il ne sélectionnera pas l'élément input comme désiré :

+ +
form > #date
+ +

(L'input date du formulaire n'est pas directement dans le <form> ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).

+ +

Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme :nth-of-type, :not, ::selection, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie Selectivizr de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  jQuery ou MooTools.

+ +
    +
  1. Afin de tester cet exemple, faites une copie locale de selectivizr-example-start.html. Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec p:first-child, qui ne fonctionne pas sur les anciennes versions d'IE.
    2. +
  2. Maintenant télécharger MooTools et Selectivizr, et placez-les dans le même répertoire que votre fichier HTML.
    3. +
  3. Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante <style> : + 
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
+    <!--[if (gte IE 6)&(lte IE 8)]>
+      <script type="text/javascript" src="selectivizr-min.js"></script>
+    <![endif]-->
    +
    4. +
+ +

Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.

+ +

+ +

Gestion des préfixes CSS

+ +

Une autre source de problèmes arrive avec les préfixes CSS — ceux sont des mécanismes utilisés à la base pour permettre au navigateur d'implémenter leur propre version d'une fonctionnalité CSS (ou Javascript) tant que la technologie est en stade expérimentale, donc ils peuvent jouer avec et la finaliser sans entrer en conflit avec les implémentations des autres navigateurs, ou la dernière implémentation non-préfixée. Voici par exemple :

+ + + +

Voici quelques exemples :

+ +
-webkit-transform: rotate(90deg);
+
+background-image: -moz-linear-gradient(left,green,yellow);
+background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
+background-image: linear-gradient(to right,green,yellow);
+
+ +

La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe -webkit- — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).

+ +

Les trois dernières images montrent trois versions différentes de la fonction linear-gradient(), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :

+ +
    +
  1. La première a un préfixe -moz-, et montre une version plutôt ancienne de la syntaxe (Firefox)
    2. +
  2. La seconde a un préfixe -webkit-, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit)
    3. +
  3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans  CSS Image Values and Replaced Content Module Level 3 spec, qui définit cette fonctionnalité).
    4. +
+ +

Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version -webkit- d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées -webkit- de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention.

+ +

Si vous persistez a utiliser des fonctionnalités préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez vérifier quels navigateurs ont besoin de préfixes sur les pages de référence MDN, et des sites comme caniuse.com. Si vous doutez, vous pouvez aussi vérifier en faisant des tests directement sur les navigateurs.

+ +

Essayez cet exemple simple :

+ +
    +
  1. Ouvrez google.com, ou un autre site qui a un en-tête proéminent ou un niveau de bloc d'élément.
    2. +
  2. Clic droit sur l'élément en question et choisir Inspecter/Inspecter l'élément (ou qu'importe l'option de votre navigateur) — cela devrait ouvrir les outils de dev dans votre navigateur, avec l'élément mis en valeur dans l'inspecteur du DOM.
    3. +
  3. Chercher une fonctionnalité que vous pouvez utiliser pour sélectionner cet élément. Par exemple, au moment de la rédaction, le logo principal de Google a un ID hplogo.
    4. +
  4. Entreposer une référence à cet élément dans une variable, par exemple : + 
    var test = document.getElementById('hplogo');
    +
    5. +
  5. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété style de l'élément, par exemple essayez de taper ça dans votre console Javascript :
    6. +
  6. + 
    test.style.transform = 'rotate(90deg)'
+test.style.webkitTransform = 'rotate(90deg)'
    +
    7. +
+ +

Quand vous commencez à taper la transcription du nom de la propriété après le deuxième point (notez qu'en Javascript, les noms des propriétés CSS sont écrites en lower camel case, sans trait d'union), la console Javascript devrait commencer à saisir automatiquement les noms des propriétés qui existent dans le navigateur et qui correspondent au mieux avec ce que vous écrivez. C'est utile pour trouver quelles versions de la propriété est implémentée dans ce navigateur.

+ +

A l'heure où ces lignes sont écrites, Firefox et Chrome ont implémenté tous les deux les versions préfixées -webkit- et non préfixées de {{cssxref("transform")}} !

+ +

Une fois que vous avez trouvé quels préfixes vous avez besoin de supporter, vous devriez tous les inscrire dans votre CSS, par exemple :

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +

Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle des formes de la propriété ci-dessus pourront faire marcher la fonctionnalité. Il convient de placer la version non préfixée en dernier, parce qu'elle sera la version la plus récente, que vous voulez que les navigateurs utilisent si c'est possible. Si par exemple un navigateur implémente la version -webkit- et la version non préfixée, il va en premier temps appliquer la version -webkit-, puis la remplacer par la version non préfixée. Vous voulez que cela se produise dans ce sens, et non dans l'autre.

+ +

Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent :

+ +

La prefix-free JavaScript library peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.

+ +

Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme Autoprefixer et PostCSS. Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une version en ligne qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans Autoprefixer options ; pour plus de détails, voir aussi Browserslist queries, qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.

+ +
last 2 versions, ie > 9
+ + + +

Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir Autoprefixer usage. Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).

+ +

Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom :

+ +
    +
  1. Vous pouvez l'installer en allant dans Préférences > Installer, chercher Autoprefixer, puis cliquer sur installer.
    2. +
  2. Vous pouvez configurer une requête navigateur en appuyant sur le bouton Settings d'Autoprefixer et entrer la requête dans le champs texte de la section Setting de la page.
    3. +
  3. Dans votre code, vous pouvez sélectionner des sections de CSS auxquelles vous voulez ajouter des préfixes, ouvrez la palette de commande (Cmd/Ctrl + Shift + P), puis tapez Autoprefixer dedans et sélectionnez le résultat Autoprefixer qui auto complète.
    4. +
+ +

En tant qu'exemple, nous avons entré le code suivant :

+ +
body {
+  display: flex;
+}
+ +

Nous l'avons sélectionné et exécuté la commande Autoprefixer, et il l'a remplacé par ça :

+ +
body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Les problèmes de mise en page

+ +

Un autre problème qui peut survenir est la différence de mise en page entre les navigateurs. Historiquement c'était traité comme bien plus qu'un problème, mais ces derniers temps, avec les navigateurs modernes qui ont tendance à supporter le CSS plus systématiquement, les problèmes de mise en page ont plus tendance à être couramment associés avec :

+ + + +
+

Note : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le normalize.css, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.

+
+ +
+

Note : Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir Debug your CSS with outline visualizations pour plus de détails...

+
+ +

Support pour les nouvelles caractéristiques de disposition

+ +

La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les floats — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir Why Flexbox?)

+ +

Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme Flexbox et CSS Grids, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :

+ + + +

Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).

+ +

Par exemple, vous pourriez appliquer une disposition flexbox sur les navigateurs modernes, et aussi appliquer une disposition en float pour les plus vieux navigateurs qui ne supportent pas flexbox.

+ +
+

Note : Il y a une fonctionnalité assez récente en CSS appelé @supports, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.

+
+ +

Les problèmes de responsive design

+ +

Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les media queries, et assurez-vous qu'il est appliqué correctement en utilisant viewport. Vous pouvez trouver un bilan précis de telles pratiques dans The building blocks of responsive design.

+ +

La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples mobile first media queries, aux plus complexes responsive image techniques.

+ +

Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme css3-mediaqueries-js ou Respond.js.

+ +

Trouver de l'aide

+ +

Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne.

+ +

Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), stackoverflow.com et caniuse.com.

+ +

Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :

+ + + +

caniuse.com fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir http://caniuse.com/#search=video (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)

+ +

stackoverflow.com (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution HTML5 Video with full cross browser compatibility est remontée.

+ +

Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous

+ +

Résumé

+ +

Vous devriez maintenant être familier avec les problèmes principaux en navigateur croisé avec HTML et CSS que vous rencontrerez en développement web, et comment faire pour les résoudre.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/index.html deleted file mode 100644 index 4aa0ab6aaa..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Test sur plusieurs navigateurs -slug: Learn/Tools_and_testing/Cross_browser_testing -tags: - - Accessibility - - Automation - - Beginner - - CSS - - CodingScripting - - HTML - - JavaScript - - Landing - - Learn - - Module - - Testing - - Tools - - TopicStub - - cross browser -translation_of: Learn/Tools_and_testing/Cross_browser_testing ---- -
{{LearnSidebar}}
- -

Ce module se concentre sur le test de projets Web sur différents navigateurs. Nous cherchons à identifier votre public cible (par exemple, de quels utilisateurs, navigateurs et appareils avez-vous le plus besoin de vous soucier?), comment procéder aux tests, les principaux problèmes auxquels vous serez confronté avec différents types de code et comment les atténuer, quels outils sont les plus utiles pour vour aider à tester et résoudre les problèmes, et comment utiliser l'automatisation pour accélérer les tests.

- -

Prérequis

- -

Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript de base avant d'essayer d'utiliser les outils détaillés ici.

- -

Guides

- -
-
Introduction aux tests multi-navigateurs
-
Cet article débute le module en donnant un aperçu du sujet des tests multi-navigateurs, en répondant à des questions telles que "qu'est-ce que les tests multi-navigateurs?", "quels sont les types de problèmes les plus courants que vous rencontrerez?", et "quelles sont les principales approches pour tester, identifier et résoudre les problèmes?"
-
Stratégies de réalisation des tests
-
Ensuite, nous explorons la réalisation de tests, en cherchant à identifier un public cible (par exemple, quels navigateurs, appareils et autres segments devez-vous vous assurer qu'ils soient testés), des stratégies de test low fi (procurez-vous une gamme d'appareils et de machines virtuelles et faire des tests adhoc si nécessaire), des stratégies de haute technologie (automatisation, utilisation d'applications de test dédiées), et des tests avec des groupes d'utilisateurs.
-
Gérer les problèmes HTML et CSS courants
-
Nous allons maintenant examiner spécifiquement les problèmes courants entre navigateurs que vous rencontrerez dans le code HTML et CSS, et quels outils peuvent être utilisés pour éviter les problèmes ou résoudre les problèmes qui se produisent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation d'outils de développement de navigateur pour localiser les problèmes, utiliser des polyfills pour ajouter un support dans les navigateurs, résoudre les problèmes de design responsive, etc.
-
Gestion des problèmes JavaScript courants
-
Nous allons maintenant examiner les problèmes JavaScript courants entre navigateurs et comment les résoudre. Cela inclu des informations sur l'utilisation des outils de développement de navigateur pour localiser et résoudre les problèmes, l'utilisation de polyfills et de librairies pour contourner les problèmes, la mise en œuvre des fonctionnalités JavaScript modernes dans les navigateurs plus anciens, etc.
-
Gérer les problèmes d'accessibilité courants
-
Ensuite, nous tournons notre attention vers l'accessibilité, en fournissant des informations sur les problèmes courants, comment faire des tests simples, et comment utiliser les outils d'audit / d'automatisation pour trouver les problèmes d'accessibilité.
-
Implémentation de la détection des fonctionnalités
-
La détection de fonctionnalités implique de déterminer si un navigateur prend en charge un certain bloc de code et d'exécuter un code différent selon qu'il le fait (ou non), afin que le navigateur puisse toujours fournir une expérience de travail plutôt en panne / erreur dans certains navigateurs. Cet article explique comment écrire votre propre détection de fonctionnalités simple, comment utiliser une librairie pour accélérer la mise en œuvre et des fonctionnalités natives pour la détection de fonctionnalités telles que @supports.
-
Introduction aux tests automatisés
-
Exécuter manuellement des tests sur plusieurs navigateurs et appareils, plusieurs fois par jour, peut devenir fastidieux et prendre du temps. Pour gérer cela efficacement, vous devez vous familiariser avec les outils d'automatisation. Dans cet article, nous examinons ce qui est disponible, comment utiliser les exécuteurs de tâches et les bases de l'utilisation des applications d'automatisation de test de navigateur commerciales telles que Sauce Labs et Browser Stack.
-
Configuration de votre propre environnement d'automatisation de test
-
Dans cet article, nous allons vous apprendre à installer votre propre environnement d'automatisation et à exécuter vos propres tests à l'aide de Selenium/WebDriver et d'une librairie de test telle que selenium-webdriver pour Node. Nous verrons également comment intégrer votre environnement de test local avec des applications commerciales telles que celles décrites dans l'article précédent.
-
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/index.md new file mode 100644 index 0000000000..4aa0ab6aaa --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/index.md @@ -0,0 +1,48 @@ +--- +title: Test sur plusieurs navigateurs +slug: Learn/Tools_and_testing/Cross_browser_testing +tags: + - Accessibility + - Automation + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - Testing + - Tools + - TopicStub + - cross browser +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +
{{LearnSidebar}}
+ +

Ce module se concentre sur le test de projets Web sur différents navigateurs. Nous cherchons à identifier votre public cible (par exemple, de quels utilisateurs, navigateurs et appareils avez-vous le plus besoin de vous soucier?), comment procéder aux tests, les principaux problèmes auxquels vous serez confronté avec différents types de code et comment les atténuer, quels outils sont les plus utiles pour vour aider à tester et résoudre les problèmes, et comment utiliser l'automatisation pour accélérer les tests.

+ +

Prérequis

+ +

Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript de base avant d'essayer d'utiliser les outils détaillés ici.

+ +

Guides

+ +
+
Introduction aux tests multi-navigateurs
+
Cet article débute le module en donnant un aperçu du sujet des tests multi-navigateurs, en répondant à des questions telles que "qu'est-ce que les tests multi-navigateurs?", "quels sont les types de problèmes les plus courants que vous rencontrerez?", et "quelles sont les principales approches pour tester, identifier et résoudre les problèmes?"
+
Stratégies de réalisation des tests
+
Ensuite, nous explorons la réalisation de tests, en cherchant à identifier un public cible (par exemple, quels navigateurs, appareils et autres segments devez-vous vous assurer qu'ils soient testés), des stratégies de test low fi (procurez-vous une gamme d'appareils et de machines virtuelles et faire des tests adhoc si nécessaire), des stratégies de haute technologie (automatisation, utilisation d'applications de test dédiées), et des tests avec des groupes d'utilisateurs.
+
Gérer les problèmes HTML et CSS courants
+
Nous allons maintenant examiner spécifiquement les problèmes courants entre navigateurs que vous rencontrerez dans le code HTML et CSS, et quels outils peuvent être utilisés pour éviter les problèmes ou résoudre les problèmes qui se produisent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation d'outils de développement de navigateur pour localiser les problèmes, utiliser des polyfills pour ajouter un support dans les navigateurs, résoudre les problèmes de design responsive, etc.
+
Gestion des problèmes JavaScript courants
+
Nous allons maintenant examiner les problèmes JavaScript courants entre navigateurs et comment les résoudre. Cela inclu des informations sur l'utilisation des outils de développement de navigateur pour localiser et résoudre les problèmes, l'utilisation de polyfills et de librairies pour contourner les problèmes, la mise en œuvre des fonctionnalités JavaScript modernes dans les navigateurs plus anciens, etc.
+
Gérer les problèmes d'accessibilité courants
+
Ensuite, nous tournons notre attention vers l'accessibilité, en fournissant des informations sur les problèmes courants, comment faire des tests simples, et comment utiliser les outils d'audit / d'automatisation pour trouver les problèmes d'accessibilité.
+
Implémentation de la détection des fonctionnalités
+
La détection de fonctionnalités implique de déterminer si un navigateur prend en charge un certain bloc de code et d'exécuter un code différent selon qu'il le fait (ou non), afin que le navigateur puisse toujours fournir une expérience de travail plutôt en panne / erreur dans certains navigateurs. Cet article explique comment écrire votre propre détection de fonctionnalités simple, comment utiliser une librairie pour accélérer la mise en œuvre et des fonctionnalités natives pour la détection de fonctionnalités telles que @supports.
+
Introduction aux tests automatisés
+
Exécuter manuellement des tests sur plusieurs navigateurs et appareils, plusieurs fois par jour, peut devenir fastidieux et prendre du temps. Pour gérer cela efficacement, vous devez vous familiariser avec les outils d'automatisation. Dans cet article, nous examinons ce qui est disponible, comment utiliser les exécuteurs de tâches et les bases de l'utilisation des applications d'automatisation de test de navigateur commerciales telles que Sauce Labs et Browser Stack.
+
Configuration de votre propre environnement d'automatisation de test
+
Dans cet article, nous allons vous apprendre à installer votre propre environnement d'automatisation et à exécuter vos propres tests à l'aide de Selenium/WebDriver et d'une librairie de test telle que selenium-webdriver pour Node. Nous verrons également comment intégrer votre environnement de test local avec des applications commerciales telles que celles décrites dans l'article précédent.
+
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html deleted file mode 100644 index bfd78a3d43..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Introduction au test en navigateur croisé -slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction -tags: - - Apprentissage - - Débutant - - multi navigateur - - navigateur croisé - - test -translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"

- - - - - - - - - - - - -
Prérequis:Etre familier avec les bases des langage HTML, CSS, et JavaScript.
Objectif:Acquérir et comprendre des concepts de haut niveau impliqués dans les tests sur multi-navigateur
- -

Qu'est-ce que le test en navigateur croisé?

- -

Le test de navigateur croisé est une façon de s'assurer que les sites web et les applications que vous créez vont fonctionner sur un nombre acceptable de navigateurs web. En tant que développeur web, il en va de votre responsabilité de vous assurez que non seulement vos projets fonctionnent, mais qu'ils fonctionnent pour tout vos utilisateurs, qu'importe le nombre de navigateurs, d'appareil, ou d'outils d'assistances supplémentaires qu'ils utilisent. Vous devez penser à :

- - - -

Souvenez-vous que vous n'êtes pas votre utilisateur — uniquement parce que votre site fonctionne sur votre Macbook Pro ou votre Galaxy Nexus haut de gamme, cela ne veut pas dire qu'il fonctionnera pour tout vos utilisateurs — Il y a encore un paquet de tests à effectuer !

- -
-

Note : Make the web work for everyone fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.

-
- -

Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable  de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail.

- -

D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision  parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site.

- -

De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir Gotta test 'em all?), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.

- -
-

Note : Nous traiterons également du code préventif dans ce module.

-
- -

Pourquoi y'a-t-il des problèmes en navigateur croisé?

- -

Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateur croisé, et notez qu'ici nous parlons des bug qui se comportent différemment selon les navigateurs / supports / préférences de navigateurs. Avant même d'attaquer les problèmes en navigateurs croisés, commencez déjà par fixer encore et encore tous les bugs présents dans votre propre code (voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript des sujets précédents afin de vous rafraichir la mémoire si nécessaire).

- -

Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que :

- - - -

Et encore tant d'autres raisons.

- -

Dans de futurs articles, nous expliquerons les problèmes communs aux navigateurs croisés et examinerons les solution à ces problèmes.

- -

Environnement pour tester en navigateurs croisés

- -

Toutes ces histoires de test en navigateurs croisés peuvent paraître génératrices de chaleur et effrayantes, il ne faut pas — vous avez juste à vous organiser soigneusement pour cela, et vous assurer que vous faîtes suffisamment de tests dans le bon sens afin d'être sûr que vous n'allez pas faire face à des problèmes inattendus. Si vous travaillez sur un gros projet, vous devez le tester régulièrement, afin de vous assurez que les nouvelles fonctionnalités sont accessibles à votre public cible, et que l'addition de nouveau code ne cassent pas d'anciennes fonctionnalités qui marchaient auparavant.

- -

Si vous attendez la fin d'un projet pour démarrer les sessions de tests, chaque bug que vous découvrirez sera une énorme charge de travail et une perte de temps conséquente, plutôt que de le tester en continue, de découvrir les bugs et de les fixer progressivement.

- -

Le flux de travail pour tester et fixer les bugs sur un projet peut-être diviser en quatre phases ( c'est assez dur— certaines personnes peuvent agir un peu différemment ) :

- -

Plan initial > Développement > Test/découvertes > Fixes/itération

- -

Les étapes 2-4 vont tendre à se répéter autant de fois que nécessaire jusqu'à ce que l'implémentation soit aboutie. Nous aborderons les différentes parties du processus de test dans plus de détails dans des articles subséquents, pour l'instant, commençons par résumer ce qu'on peut faire dans chacune de ces étapes.

- -

Plan initial

- -

Durant la phase de plan initial, vous allez probablement avoir plusieurs réunions avec le propriétaire du site/client (qui peut être votre boss, ou quelqu'un d'une entreprise extérieure pour qui vous construisez un site web), durant lesquelles vous devez déterminer exactement ce que doit être le site web — quel contenu et quelles fonctionnalités il doit proposer, à quoi il doit ressembler, etc. A partir de ce point vous devez aussi savoir de combien de temps vous disposez pour développer ce site — quelle est leur date limite, et combien vont-ils vous payer pour votre travail ? Nous n'approfondirons pas les détails à ce propos ici, mais les problèmes multi-navigateurs peuvent avoir de sérieuses incidences sur la planification.

- -

Une fois que vous vous êtes fait une idée des fonctionnalités requises et de quelles technologies vous allez avoir besoin pour les construire, vous pouvez commencer à rechercher le public cible — quel navigateurs, supports, etc. ce public cible va-t-il utiliser pour aller sur ce site? Le client peut déjà avoir des données à ce propos provenant de recherches qu'il aurait faites auparavant, p.e. d'un autre site web qu'il possède, ou d'une ancienne version du site sur lequel vous travaillez actuellement. Si ça n'est pas le cas, vous serez en mesure de vous faire une idée en prenant en compte d'autres sources, comme les statistiques d'utilisation pour les concurrents ou bien dans quels pays le site sera délivré. Vous pouvez évidemment vous servir un peu de votre intuition.

- -

Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires  — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web.

- -

Maintenant que vous connaissez votre plate-forme de test cible, vous devriez revenir en arrière et revoir les fonctionnalités requises ainsi que les technologies que vous allez utiliser. Par exemple, si le client du site de e-commerce veut un tour WebGL 3D de chaque produit intégré dans la page produit, il devra accepter que cela ne sera juste pas possible sur les versions d'IE avant la 11ème. Vous devez vous entendre pour fournir une version du site sans cette fonctionnalité pour les utilisateurs des anciennes versions d'IE.

- -

Vous devriez mettre en place une liste des différents champs de problèmes potentiels.

- -
-

Note : Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter  caniuse.com, pour d'autres détails utiles.

-
- -

Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site.

- -

Développement

- -

Maintenant concernant le développement du site. Vous devez séparer les différentes parties du développement en modules, par exemple vous pouvez séparer les différentes zones du site — page d'accueil, pas produit, panier, tunnel de paiement etc. Vous devrez encore subdiviser ces dernières — implémenter le header et le footer commun, implémenter la vue détaillée de la page produit, implémenter la carte du panier persistent, etc.

- -

Il existe plusieurs stratégies générales concernant le développement multi-navigateurs, par exemple :

- - - -

Normalement votre développement devra inclure une combinaison des trois approches ci-dessus. La chose la plus importante est que vous testiez chacune des petites étapes avant de les commiter— n'attendez pas la fin avant de commencer à tester!

- -

Test/découverte

- -

Après chaque phase d'implémentation, vous allez avoir besoin de tester les nouvelles fonctionnalités. Pour commencer, vous devez vous assurer qu'il n'y a pas des problème généraux avec votre code qui empêcheraient votre fonctionnalité de fonctionner :

- -
    -
  1. Tester sur quelque navigateurs stables sur votre ordinateur, comme Firefox, Safari, Chrome, ou IE/Edge.
    2. -
  2. Faites quelque test brut, comme essayer de tester votre site exclusivement avec le clavier, ou utiliser votre site avec un lecteur d'écran afin de voir s'il est navigable.
    3. -
  3. Tester sur une plateforme mobile, comme Android ou iOS.
    4. -
- -

A cet instant, résolvez tous les problèmes que vous avez trouvé sur votre nouveau code.

- -

Ensuite, vous devriez essayer d'étendre votre liste de navigaturs de test à une liste complète des navigateurs du public cible et commencer à vous concentrer sur l'élimination des problèmes en navigateurs croisés (voir le prochaine article determining your target browsers pour plus d'informations). Par exemple:

- - - -

L'option la plus basique est de juste faire tous les tests que vous pouvez vous-même (demander à vos collègues si vous travaillez en équipe). Vous devez essayer de tester sur des supports physiques lorsque c'est possible.

- -

Si vous n'avez pas les moyens de tester tous les différents navigateurs, systèmes d'exploitation, et les combinaisons sur du matériel physique, vous pouvez aussi utiliser des émulateurs (émuler un support en utilisant un logiciel directement sur votre ordinateur de bureau) et des machines virtuelles (logiciel qui vous permet d'émuler une multitude de systèmes d'exploitation/ des combinaison de logiciels sur votre ordinateur de bureau). C'est un choix apprécié, particulièremenet dans certaines circonstances — par exemple, Windows ne vous autorise pas à avoir plusieurs versions de Windows installées simultanément sur la même machine, ici, utiliser plusieurs machines virtuelles est souvent l'unique solution.

- -

L'autre option est le groupe d'utilisateurs — créer un groupe avec des personnes extérieures à votre équipe de développement afin de tester votre site. Cela peut être un group d'amis ou de la famille, ou un groupe d'autres employés, une classe dans une université à proximité, ou une configuration de testeurs professionnel, où les gens sont payés pour tester votre site et vous fournir des résultats.

- -

Finallement, vous pouvez faire preuve d'astuce avec vos test en utilisant la vérification ou des outils d'automatisation; c'est un choix sensé, quand votre projet prend de l'ampleur, faire tous ces tests à la main peut commencer à devenir vraiment chronophage. Vous pouvez configurer votre propre système d'automatisation de test (Selenium est l'application la plus populaire) qui pourra par exemple charger votre site sur un nombre de différents navigateurs, et :

- - - -

Si vous le désirez, vous pouvez encore aller plus loin que ça. Il y a des outils professionnels disponibles comme Sauce Labs et Browser Stack qui font ce type de choses pour vous, sans que vous aillez à vous soucier de la configuration, si vous êtes prêt à investir de l'argent dans vos test. Il est également possible de configurer un environnement qui exécutera les tests de façon automatique pour vous, et vous permet ensuite de vérifier dans vos modifications effectués de votre code si le test continue de passer.

- -

Tester sur les navigateurs en avant-première (bêta)

- -

C'est souvent une bonne idée de tester sur les versions en avant-première des navigateurs ; voir les liens suivants :

- - - -

C'est surtout répandu lorsque vous utiliser des technologies très récentes sur votre site, et que vous voulez les tester par rapport aux anciennes implémentations, ou si vous rencontrez un bug dans la dernières version sortie d'un navigateur, et que vous voulez vérifier si les développeurs du navigateur on fixé le bug sur une version plus récente.

- -

Fixes/itération

- -

Une fois que vous avez découvert un bug, vous devez essayer de le réparer.

- -

La première chose à faire est de réduire l'origine du bug avec un maximum de précisions. Obtenez un maximum d'informations que vous pouvez de la personne qui a rapporté le bug — quelle plateforme(s), support(s), version(s) du navigateurs, etc. Essayer avec des configurations similaires (p.e. la même version de navigateur sur différents ordinateurs, ou plusieurs versions différentes du même navigateurs sur le même support) pour voir jusqu'à quelle échelle le bug persiste.

- -

Ce n'est pas forcément de votre faute — si un bug existe sur un navigateur, alors on peut espérer que le distributeur le fixera rapidement. Il est peut-être même déjà réparé — par exemple si un bug est présent sur la release 49 de Firefox, mais qu'il n'existe plus sur Firefox Nightly (version52), alors il a été fixé. S'il n'a pas été résolu, alors vous pouvez déposer un bug (voir {{anch("Reporting bugs")}}, plus bas).

- -

Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.

- -

Lorsque le fix a été créé, vous devrez repéter votre processus de test afin de vous assurer que votre réparation fonctionne bien, et n'a pas causé une faille autre part sur le site ou sur un autre navigateur.

- -

Rapporter un bug

- -

Juste pour redire ce qui a déjà été dit au-dessus, si vous découvrez des bugs sur des navigateurs, vous devez les reporter :

- - - -

Résumé

- -

Cet article devrez vous avoir donné un haut niveau de compréhension des concepts les plus importants que vous devez connaître à propos du test en navigateur croisé. Armé de ce savoir, vous êtes maintenant prêt à démarrer et à commencer à apprendre à propos des stratégies de test multi-navigateur.

- -

{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}

- -

Sur ce module

- - diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md new file mode 100644 index 0000000000..bfd78a3d43 --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md @@ -0,0 +1,207 @@ +--- +title: Introduction au test en navigateur croisé +slug: Learn/Tools_and_testing/Cross_browser_testing/Introduction +tags: + - Apprentissage + - Débutant + - multi navigateur + - navigateur croisé + - test +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"

+ + + + + + + + + + + + +
Prérequis:Etre familier avec les bases des langage HTML, CSS, et JavaScript.
Objectif:Acquérir et comprendre des concepts de haut niveau impliqués dans les tests sur multi-navigateur
+ +

Qu'est-ce que le test en navigateur croisé?

+ +

Le test de navigateur croisé est une façon de s'assurer que les sites web et les applications que vous créez vont fonctionner sur un nombre acceptable de navigateurs web. En tant que développeur web, il en va de votre responsabilité de vous assurez que non seulement vos projets fonctionnent, mais qu'ils fonctionnent pour tout vos utilisateurs, qu'importe le nombre de navigateurs, d'appareil, ou d'outils d'assistances supplémentaires qu'ils utilisent. Vous devez penser à :

+ + + +

Souvenez-vous que vous n'êtes pas votre utilisateur — uniquement parce que votre site fonctionne sur votre Macbook Pro ou votre Galaxy Nexus haut de gamme, cela ne veut pas dire qu'il fonctionnera pour tout vos utilisateurs — Il y a encore un paquet de tests à effectuer !

+ +
+

Note : Make the web work for everyone fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs.

+
+ +

Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable  de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail.

+ +

D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision  parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site.

+ +

De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir Gotta test 'em all?), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web.

+ +
+

Note : Nous traiterons également du code préventif dans ce module.

+
+ +

Pourquoi y'a-t-il des problèmes en navigateur croisé?

+ +

Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateur croisé, et notez qu'ici nous parlons des bug qui se comportent différemment selon les navigateurs / supports / préférences de navigateurs. Avant même d'attaquer les problèmes en navigateurs croisés, commencez déjà par fixer encore et encore tous les bugs présents dans votre propre code (voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript des sujets précédents afin de vous rafraichir la mémoire si nécessaire).

+ +

Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que :

+ + + +

Et encore tant d'autres raisons.

+ +

Dans de futurs articles, nous expliquerons les problèmes communs aux navigateurs croisés et examinerons les solution à ces problèmes.

+ +

Environnement pour tester en navigateurs croisés

+ +

Toutes ces histoires de test en navigateurs croisés peuvent paraître génératrices de chaleur et effrayantes, il ne faut pas — vous avez juste à vous organiser soigneusement pour cela, et vous assurer que vous faîtes suffisamment de tests dans le bon sens afin d'être sûr que vous n'allez pas faire face à des problèmes inattendus. Si vous travaillez sur un gros projet, vous devez le tester régulièrement, afin de vous assurez que les nouvelles fonctionnalités sont accessibles à votre public cible, et que l'addition de nouveau code ne cassent pas d'anciennes fonctionnalités qui marchaient auparavant.

+ +

Si vous attendez la fin d'un projet pour démarrer les sessions de tests, chaque bug que vous découvrirez sera une énorme charge de travail et une perte de temps conséquente, plutôt que de le tester en continue, de découvrir les bugs et de les fixer progressivement.

+ +

Le flux de travail pour tester et fixer les bugs sur un projet peut-être diviser en quatre phases ( c'est assez dur— certaines personnes peuvent agir un peu différemment ) :

+ +

Plan initial > Développement > Test/découvertes > Fixes/itération

+ +

Les étapes 2-4 vont tendre à se répéter autant de fois que nécessaire jusqu'à ce que l'implémentation soit aboutie. Nous aborderons les différentes parties du processus de test dans plus de détails dans des articles subséquents, pour l'instant, commençons par résumer ce qu'on peut faire dans chacune de ces étapes.

+ +

Plan initial

+ +

Durant la phase de plan initial, vous allez probablement avoir plusieurs réunions avec le propriétaire du site/client (qui peut être votre boss, ou quelqu'un d'une entreprise extérieure pour qui vous construisez un site web), durant lesquelles vous devez déterminer exactement ce que doit être le site web — quel contenu et quelles fonctionnalités il doit proposer, à quoi il doit ressembler, etc. A partir de ce point vous devez aussi savoir de combien de temps vous disposez pour développer ce site — quelle est leur date limite, et combien vont-ils vous payer pour votre travail ? Nous n'approfondirons pas les détails à ce propos ici, mais les problèmes multi-navigateurs peuvent avoir de sérieuses incidences sur la planification.

+ +

Une fois que vous vous êtes fait une idée des fonctionnalités requises et de quelles technologies vous allez avoir besoin pour les construire, vous pouvez commencer à rechercher le public cible — quel navigateurs, supports, etc. ce public cible va-t-il utiliser pour aller sur ce site? Le client peut déjà avoir des données à ce propos provenant de recherches qu'il aurait faites auparavant, p.e. d'un autre site web qu'il possède, ou d'une ancienne version du site sur lequel vous travaillez actuellement. Si ça n'est pas le cas, vous serez en mesure de vous faire une idée en prenant en compte d'autres sources, comme les statistiques d'utilisation pour les concurrents ou bien dans quels pays le site sera délivré. Vous pouvez évidemment vous servir un peu de votre intuition.

+ +

Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires  — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web.

+ +

Maintenant que vous connaissez votre plate-forme de test cible, vous devriez revenir en arrière et revoir les fonctionnalités requises ainsi que les technologies que vous allez utiliser. Par exemple, si le client du site de e-commerce veut un tour WebGL 3D de chaque produit intégré dans la page produit, il devra accepter que cela ne sera juste pas possible sur les versions d'IE avant la 11ème. Vous devez vous entendre pour fournir une version du site sans cette fonctionnalité pour les utilisateurs des anciennes versions d'IE.

+ +

Vous devriez mettre en place une liste des différents champs de problèmes potentiels.

+ +
+

Note : Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter  caniuse.com, pour d'autres détails utiles.

+
+ +

Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site.

+ +

Développement

+ +

Maintenant concernant le développement du site. Vous devez séparer les différentes parties du développement en modules, par exemple vous pouvez séparer les différentes zones du site — page d'accueil, pas produit, panier, tunnel de paiement etc. Vous devrez encore subdiviser ces dernières — implémenter le header et le footer commun, implémenter la vue détaillée de la page produit, implémenter la carte du panier persistent, etc.

+ +

Il existe plusieurs stratégies générales concernant le développement multi-navigateurs, par exemple :

+ + + +

Normalement votre développement devra inclure une combinaison des trois approches ci-dessus. La chose la plus importante est que vous testiez chacune des petites étapes avant de les commiter— n'attendez pas la fin avant de commencer à tester!

+ +

Test/découverte

+ +

Après chaque phase d'implémentation, vous allez avoir besoin de tester les nouvelles fonctionnalités. Pour commencer, vous devez vous assurer qu'il n'y a pas des problème généraux avec votre code qui empêcheraient votre fonctionnalité de fonctionner :

+ +
    +
  1. Tester sur quelque navigateurs stables sur votre ordinateur, comme Firefox, Safari, Chrome, ou IE/Edge.
    2. +
  2. Faites quelque test brut, comme essayer de tester votre site exclusivement avec le clavier, ou utiliser votre site avec un lecteur d'écran afin de voir s'il est navigable.
    3. +
  3. Tester sur une plateforme mobile, comme Android ou iOS.
    4. +
+ +

A cet instant, résolvez tous les problèmes que vous avez trouvé sur votre nouveau code.

+ +

Ensuite, vous devriez essayer d'étendre votre liste de navigaturs de test à une liste complète des navigateurs du public cible et commencer à vous concentrer sur l'élimination des problèmes en navigateurs croisés (voir le prochaine article determining your target browsers pour plus d'informations). Par exemple:

+ + + +

L'option la plus basique est de juste faire tous les tests que vous pouvez vous-même (demander à vos collègues si vous travaillez en équipe). Vous devez essayer de tester sur des supports physiques lorsque c'est possible.

+ +

Si vous n'avez pas les moyens de tester tous les différents navigateurs, systèmes d'exploitation, et les combinaisons sur du matériel physique, vous pouvez aussi utiliser des émulateurs (émuler un support en utilisant un logiciel directement sur votre ordinateur de bureau) et des machines virtuelles (logiciel qui vous permet d'émuler une multitude de systèmes d'exploitation/ des combinaison de logiciels sur votre ordinateur de bureau). C'est un choix apprécié, particulièremenet dans certaines circonstances — par exemple, Windows ne vous autorise pas à avoir plusieurs versions de Windows installées simultanément sur la même machine, ici, utiliser plusieurs machines virtuelles est souvent l'unique solution.

+ +

L'autre option est le groupe d'utilisateurs — créer un groupe avec des personnes extérieures à votre équipe de développement afin de tester votre site. Cela peut être un group d'amis ou de la famille, ou un groupe d'autres employés, une classe dans une université à proximité, ou une configuration de testeurs professionnel, où les gens sont payés pour tester votre site et vous fournir des résultats.

+ +

Finallement, vous pouvez faire preuve d'astuce avec vos test en utilisant la vérification ou des outils d'automatisation; c'est un choix sensé, quand votre projet prend de l'ampleur, faire tous ces tests à la main peut commencer à devenir vraiment chronophage. Vous pouvez configurer votre propre système d'automatisation de test (Selenium est l'application la plus populaire) qui pourra par exemple charger votre site sur un nombre de différents navigateurs, et :

+ + + +

Si vous le désirez, vous pouvez encore aller plus loin que ça. Il y a des outils professionnels disponibles comme Sauce Labs et Browser Stack qui font ce type de choses pour vous, sans que vous aillez à vous soucier de la configuration, si vous êtes prêt à investir de l'argent dans vos test. Il est également possible de configurer un environnement qui exécutera les tests de façon automatique pour vous, et vous permet ensuite de vérifier dans vos modifications effectués de votre code si le test continue de passer.

+ +

Tester sur les navigateurs en avant-première (bêta)

+ +

C'est souvent une bonne idée de tester sur les versions en avant-première des navigateurs ; voir les liens suivants :

+ + + +

C'est surtout répandu lorsque vous utiliser des technologies très récentes sur votre site, et que vous voulez les tester par rapport aux anciennes implémentations, ou si vous rencontrez un bug dans la dernières version sortie d'un navigateur, et que vous voulez vérifier si les développeurs du navigateur on fixé le bug sur une version plus récente.

+ +

Fixes/itération

+ +

Une fois que vous avez découvert un bug, vous devez essayer de le réparer.

+ +

La première chose à faire est de réduire l'origine du bug avec un maximum de précisions. Obtenez un maximum d'informations que vous pouvez de la personne qui a rapporté le bug — quelle plateforme(s), support(s), version(s) du navigateurs, etc. Essayer avec des configurations similaires (p.e. la même version de navigateur sur différents ordinateurs, ou plusieurs versions différentes du même navigateurs sur le même support) pour voir jusqu'à quelle échelle le bug persiste.

+ +

Ce n'est pas forcément de votre faute — si un bug existe sur un navigateur, alors on peut espérer que le distributeur le fixera rapidement. Il est peut-être même déjà réparé — par exemple si un bug est présent sur la release 49 de Firefox, mais qu'il n'existe plus sur Firefox Nightly (version52), alors il a été fixé. S'il n'a pas été résolu, alors vous pouvez déposer un bug (voir {{anch("Reporting bugs")}}, plus bas).

+ +

Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir Debugging HTML, Debugging CSS, et What went wrong? Troubleshooting JavaScript). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas.

+ +

Lorsque le fix a été créé, vous devrez repéter votre processus de test afin de vous assurer que votre réparation fonctionne bien, et n'a pas causé une faille autre part sur le site ou sur un autre navigateur.

+ +

Rapporter un bug

+ +

Juste pour redire ce qui a déjà été dit au-dessus, si vous découvrez des bugs sur des navigateurs, vous devez les reporter :

+ + + +

Résumé

+ +

Cet article devrez vous avoir donné un haut niveau de compréhension des concepts les plus importants que vous devez connaître à propos du test en navigateur croisé. Armé de ce savoir, vous êtes maintenant prêt à démarrer et à commencer à apprendre à propos des stratégies de test multi-navigateur.

+ +

{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ +

Sur ce module

+ + diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html deleted file mode 100644 index d49fe44c33..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.html +++ /dev/null @@ -1,519 +0,0 @@ ---- -title: Gérer les problèmes courants en JavaScript -slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript -tags: - - Apprentissage - - Débutant - - JavaScript - - Librairies - - détection de fonctionnalité - - linting - - navigateur croisé - - polyfills - - test -translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation  des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.

- - - - - - - - - - - - -
Prérequis : -

Connaissances de la base des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

-
Objectif : -

Être capable de diagnostiquer les problèmes courant de Javascript en navigateur croisé, et l'utilisation des outils et techniques appropriés pour les fixer.

-
- -

Les problèmes avec le Javascript

- -

Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs.

- -

De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans Lancement d'une requête HTTP) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir jQuery.ajax()). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.

- -

Les choses se sont bien améliorées depuis ; les navigateurs modernes font un bon travail en supportant "les fonctionnalités classiques de JavaScript", et les conditions pour utiliser ce genre de code ont diminué comme les prérequis pour supporter les plus vieux navigateurs ont diminué (gardez toutefois à l'esprit qu'elles n'ont pas tout entièrement disparues).

- -

De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :

- - - -

Nous aborderons tout ces problèmes et d'autres encore plus bas.

- -

Résoudre les problèmes généraux en JavaScript

- -

Comme nous le disions dans l'article précédent sur le HTML/CSS, vous devriez vous assurer que votre code fonctionne en général, avant de vous concentrer sur les problèmes en navigateur-croisé. Si vous n'êtes pas encore trop familier avec les bases de La résolution JavaScript, vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme :

- - - -
-

Note : Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make a des discussions intéressantes à propos de ces erreurs courantes et plus encore.

-
- -

Les linters

- -

Comme avec le HTML et le CSS, vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont JSHint et ESLint ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.

- -

En ligne

- -

La page d'accueil de JSHint fournit un linter en ligne, qui vous permet d'entrer votre code JavaScript sur la gauche et vous fournit un résultat sur la droite, incluant des indicateurs, des avertissements, et des erreurs.

- -

- -

Les plugins des éditeurs de code

- -

Ce n'est pas très pratique de devoir copier et coller votre code sur une page web pour vérifier sa validité à plusieur reprises. Ce dont vous avez vraiment besoin c'est un linter qui va s'adapter à votre espace de travail standard avec le minimum de prise de tête. Beaucoup d'éditeurs de code ont leur plugins linter, par exemple l'éditeur de code Atom de Github a un plugin JSHint disponible :

- -

Pour l'installer :

- -
    -
  1. Installez Atom (si vous n'avez pas encore une version à jour déjà installée) — téléchargez-le depuis la page Atom linkée plus haut.
    2. -
  2. Aller dans la boîte de dialogue Préférences... d'Atom (par ex. en choisissant Atom > Préférences... sur Windows/Linux) et choisissez l'option Installer dans le menu gauche.
    3. -
  3. Dans le champs text Rechercher packages, taper "jslint" et presser Entrée/Envoyer pour rechercher des packages en liaisons avec le linting.
    4. -
  4. Vous devriez voir un package appellé lint en haut de la liste. Installez-le en premier (en utilisant le bouton Installer), comme les autres sont dépendants de celui-ci pour fonctionner. Ensuite, installez le plugin linter-jshint.
    5. -
  5. Une fois que les packages ont terminé de s'installer, essayez de charger un fichier JavaScript : vous verrez tous les problèmes surlignés en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de lignes, et un panneau séparé en bas qui vous fournit les numéros de lignes, les messages d'erreur, et parfois des valeur suggérées ou d'autres solutions.
    6. -
- -

D'autres éditeurs répandus ont des packages similaires de linting disponibles. Par exemple, voir la section "Plugins for text editors and IDEs" de la page d'installation de JSHint.

- -

Autres usages

- -

Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de JSHint et ESLint.

- -

Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer NodeJS en premier). Par exemple, la ligne de commande suivante installe JSHint :

- -
npm install -g jshint
-
- -

Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour linter automatiquement votre JavaScript pendant le développement. (voir Using a task runner to automate testing tools dans un article ultérieur). Voir ESLint integrations pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. JSHint loader for Webpack.

- -
-

Note : ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.

-
- -

Les outils de développement des navigateurs

- -

Les outils de développement des navigateurs ont beaucoup de fonctionnalités utiles pour aider à déboguer JavaScript. Pour commencer, la console JavaScript reportera les erreurs dans votre code.

- -

Faîtes une copie locale de notre exemple broken-ajax.html (voir aussi le code source). Si vous regardez dans la console, vous verrez le résultat suivant :

- -

- -

Le message d'erreur affiche "TypeError: jsonObj is null", et le numéro de ligne signifiée et le 37. Si nous regardons le code source, la section de code concernée est celle-ci :

- -
function populateHeader(jsonObj) {
-  var myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  ...
- -

Le code casse aussitôt qu'on essaye d'accèder à jsonObj (ce qui comme vous pouvez vous y attendre, est supposé être un objet JSON). C'est supposé aller le chercher dans un fichier externe .json en utilisant l'appel XMLHttpRequest suivant :

- -
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
-var request = new XMLHttpRequest();
-request.open('GET', requestURL);
-request.send();
-
-var superHeroes = request.response;
-populateHeader(superHeroes);
-showHeroes(superHeroes);
- -

Mais cela échoue.

- -

L'API Console

- -

Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API Console qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est console.log(), qui affiche un message d'erreur personnalisé dans la console.

- -

Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) :

- -
console.log('Response value: ' + superHeroes);
- -

Rafraîchissez la page dans le navigateur, et vous obtiendrez un résultat dans la console comme celui-ci :

- -

- -

Le résultat de console.log() montre que l'objet superHeroes ne semble pas contenir quoi que ce soit, bien que vous remarquerez que l'erreur a maintenant changé en "TypeError: heroes is undefined". Cela montre que l'erreur est intermittente, mettant ainsi en évidence qu'il s'agit d'une erreur asynchrone. Corrigeons l'erreur actuelle et avançons — retirer la ligne console.log(), et mettez à jour ce bloc de code :

- -
var superHeroes = request.response;
-populateHeader(superHeroes);
-showHeroes(superHeroes);
- -

par le suivant :

- -
request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

Cela résout le problème asynchrone, en garantissant que les fonctions ne sont pas exécutées et passent l'objet superHeroes jusqu'à ce que la réponse ait fini de charger et soit disponible.

- -

En résumé, à chaque fois que quelque chose ne marche pas et qu'une valeur ne paraît pas être ce qu'elle est censée être à un moment dans votre code, vous pouvez utiliser console.log() pour l'afficher et voir ce qu'il se passe.

- -

Utiliser le débogueur JavaScript

- -

Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le débogueur JavaScript comme il est appellé dans Firefox.

- -
-

Note : Des outils similaires sont disponibles dans d'autres navigateurs ; le Sources tab dans Chrome, le Débogueur dans Safari (voir Safari Web Development Tools), etc.

-
- -

Dans Firefox, le Débogueur se présente comme suit :

- -

- - - -

La fonction principale de ces outils est la possibilité d'ajouter des points d'arrêt au code — ceux sont des points où l'exécution du code s'arrête, et à ce moment vous pouvez examiner l'environnement dans son état courant et voir ce qu'il se passe.

- -

Mettons-nous au travail. Pour commencer, nous savons que l'erreur est renvoyée à la ligne 51. Cliquez sur la ligne numéro 51 dans le panneau central pour y ajouter un point d'arrêt (vous verrez une flèche bleue apparaître au-dessus de celle-ci). Maintenant rafraichissez la page (Cmd/Ctrl + R) — la navigateur arrêtera l'exécution du code à la ligne 51. A ce moment, le panneau de droite va se mettre à jour pour montrer des informations très utiles.

- -

- - - -

Ici, nous pouvons obtenir des informations très utiles.

- -
    -
  1. Développez la portée showHeroes — vous pouvez voir depuis celle-ci que la variable heroes n'est pas définie, indiquant qu'accèder à la propriété members de jsonObj (première ligne de la fonction) ne marche pas.
    2. -
  2. Vous pouvez également voir que la variable jsonObj stock une chaîne de caractères, pas un objet JSON.
    3. -
  3. En examinant plus loin la pile d'exécutuion, cliquez sur request.onload dans la section Pile d'exécution. La vue va se mettre à jour pour afficher la fonction request.onload dans le panneau central, et sa portée dans la section Portées.
    4. -
  4. Maintenant si vous développez la portée de request.onload, vous verrez que la variable superHeroes est également une chaîne de caractères, pas un objet. C'est la solution — notre appel XMLHttpRequest retourne le JSON comme du texte, pas comme du JSON.
    5. -
- -
-

Note : Nous aimerions que vous essayez de résoudre ce problème par vous-même. Pour vous donner un indice, vous avez le choix entre tell the XMLHttpRequest object explicitly to return JSON format, ou conversion entre objet et texte après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple fixed-ajax.html.

-
- -
-

Note : L'onglet débogueur a tant d'autres fonctionnalités utiles que nous n'aborderons pas ici, par exemple les points d'arrêt conditionnels et les expressions espionnes. Pour bien plus d'informations, voyez la page du Débogueur.

-
- -

Les problèmes de performance

- -

Dès que vos applis vont devenir plus complexes vous allez commencer à utiliser plus de JavaScript, vous pouvez commencer à rencontrer des problèmes de performances, particulièrement lorsque vous visionnez vos applis sur des appareils plus lents. La performance est un gros sujet, et nous n'avons pas le temps de le couvrir en détail ici. Voici quelques conseils rapides :

- - - -
-

Note : Le Writing Fast, Memory-Efficient JavaScript de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.

-
- -

Les problèmes JavaScript en navigateur croisé

- -

Dans cette section, nous regarderons certains des problèmes JavaScript les plus courants en navigateur croisé. Nous la décomposerons en :

- - - -

Utiliser des fonctionnalités JavaScript/API modernes

- -

Dans l'article précédent nous décrivions quelques façons dont les erreurs HTML et CSS et les fonctionnalités non reconnues peuvent être gérées grâce à la nature du langage. JavaScript n'est toutefois pas autant permissif que le HTML et le CSS — si le moteur de JavaScript rencontre une faute ou une syntaxe inconnue, le plus souvent il renverra des erreurs.

- -

Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications (ECMAScript 6 / ECMAScript Next) qui ne marchent tout simplement pas sur les plus vieux navigateurs. Certaines d'entre elles sont des améliorations syntaxiques (essentiellement une façon plus simple, adéquate d'écrire ce que vous pouvez déjà écrire en utilisant des fonctionnalités existantes), et certaines offrent de nouvelles possibilités intéressantes.

- -

Par exemple :

- - - -

Il y a également beaucoup de nouvelles APIs qui apparaissent dans les navigateurs récents, qui ne fonctionnent pas sur les plus vieux navigateurs, par exemple :

- - - -

Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs concernant le support de fonctionnalité ; explorons les plus courantes.

- -
-

Note : Ces stratégies n'existent pas dans des endroits distincts — bien sûr, vous pouvez les combiner autant que nécessaire. Par exemple, vous pourriez utiliser une fonction de détection pour déterminer si une fonctionnalité est supportée ; si elle ne l'est pas, vous pouvez ensuite exécuter le code pour charger un polyfill ou une libraire pour gérer le manque de support.

-
- -

Fonctionnalité de détection

- -

L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'API Geolocalisation (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété geolocation disponible dans l'objet global Navigator.  Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :

- -
if("geolocation" in navigator) {
-  navigator.geolocation.getCurrentPosition(function(position) {
-    // show the location on a map, perhaps using the Google Maps API
-  });
-} else {
-  // Give the user a choice of static maps instead perhaps
-}
- -

Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de element.style.property (par ex. paragraph.style.transform !== undefined). Mais autant pour CSS que JavaScript, il est probablement préférable d'utiliser une librairie de fonction de détection établie plutôt que d'écrire la votre tout le temps. Modernizr est la norme standard pour les tests de fonction de détection.

- -

Enfin, ne confondez pas fonction de détection avec le détecteur navigateur (qui détecte quel navigateur en particulier accède au site) — c'est une terrible pratique qui devrait être découragée à tout prix. Voir {{anch("Using bad browser sniffing code")}}, plus tard, pour plus de détails.

- -
-

Note : Certaines fonctionnalités sont connues pour être indétectables — voir la liste des Undetectables de Modernizr.

-
- -
-

Note : La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.

-
- -

Les librairies

- -

Les librairies JavaScript sont essentiellement une partie externe d'unités de code que vous pouvez attacher à vos pages, afin de vous procurer une quantité de fonctionnalités toutes prêtes qui peuvent être utilisées immédiatement, constituant un gain de temps dans le processus. Beaucoup de librairies ont sûrement été créées parce que leurs développeurs écrivaient une liste de fonctions utiles courantes pour leur faire gagner du temps dans leur futurs projets, et ils décidèrent de les lâcher dans la nature parce que d'autres personnes pourraient aussi les trouver utiles.

- -

Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) :

- - - -

Lorsque vous choissisez une librairie pour l'utiliser, assurez-vous qu'elle fonctionne sur l'ensemble des navigateurs que vous voulez supporter, et tester vos implémentations minutieusement. Assurez-vous également que la librairie est répandue et bien supportée, et qu'elle ne va pas devenir obsolète la semaine prochaine. Parler à d'autres développeurs pour savoir ce qu'ils peuvent vous recommander, regarder l'activité et combien de contributeurs la librairie a sur Github (ou qu'importe où elle est stockée), etc.

- -
-

Note : JavaScripting.com vous donne une idée d'à peu près combien de librairies JavaScript sont disponibles, et peut être utile pour trouver une librairie dans un but précis.

-
- -

L'utilisation de librairie à un niveau basique consiste à télécharger les fichiers de la librairie (JavaScript, peut-être un peu de CSS ou d'autres dépendances) et à les attacher à votre page (par ex. via un élément {{htmlelement("script")}}, bien qu'il y ait normalement plein d'autres options d'utilisation pour de telles librairies, comme les installer comme des composants Bower, ou les inclure comme des dépendances avec le module de paquets Webpack. Vous devrez lire les pages d'installation individuelles des librairies pour plus d'information.

- -
-

Note : Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme Ember et Angular. Alors que les librairies sont souvent utilisées pour résoudre des problèmes individuels et ajoutées dans des sites existants, les frameworks ont tendances à être utilisés plus pour des solutions complètes pour développer des applications web complexes.

-
- -

Les Polyfills

- -

Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme es6-promise pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement.

- -

La liste des modernizr HTML5 Cross Browser Polyfills est utile pour trouver des polyfills pour différents objectifs. Une fois encore, renseignez-vous sur eux avant de les utiliser — assurez-vous qu'ils fonctionnent et qu'ils sont maintenus.

- -

Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fetch pour fournir du support pour une API Fetch dans de vieux navigateurs ; nous avons toutefois également besoin d'utiliser le polyfill es6-promise, comme Fetch utilise largement les promises, et les navigateurs qui ne les supportent pas seront toujours bloqués.

- -
    -
  1. Pour commencer, faîtes une copie locale de notre exemple fetch-polyfill.html et de notre belle image de fleurs dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.
    2. -
  2. Ensuite, sauvegarder les copies de Fetch polyfill et de es6-promises polyfill dans le même répertoire que le HTML.
    3. -
  3. Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch : - 
    <script src="es6-promise.js"></script>
-<script src="fetch.js"></script>
    -
    4. -
  4. Dans le {{htmlelement("script")}} original, ajoutez le code suivant :
    5. -
  5. - 
    var myImage = document.querySelector('.my-image');
-
-fetch('flowers.jpg').then(function(response) {
-  response.blob().then(function(myBlob) {
-    var objectURL = URL.createObjectURL(myBlob);
-    myImage.src = objectURL;
-  });
-});
    -
    6. -
  6. Maintenant si vous le chargez dans un navigateur qui ne supporte pas Fetch (Safari et IE sont des candidats de choix), vous devriez quand même voir l'image de la fleur apparaitre — cool !
    -
    7. -
- -
-

Note : Vous pouvez consulter notre version terminée sur fetch-polyfill-finished.html (voir aussi le code source).

-
- -
-

Note : Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.

-
- -

Une chose à laquelle vous devez penser est "pourquoi devrions-nous toujours charger le code polyfill, même si nous n'en avons pas besoin ?" C'est une bonne remarque — plus vos sites vont devenir complexes et plus vous aller commencer à utiliser de librairies, de polyfills, etc., vous pouvez commencer à charger beaucoup de code supplémentaire, qui peut commencer à affecter la performance, spécialement sur des appareils peu puissants. Il est donc normal de ne charger les fichiers que quand ils sont nécessaires.

- -

Faire cela nécessite un peu de code supplémentaire dans votre JavaScript. Vous avez besoin d'un test de détection de caractéristiques qui détecte si le navigateur supporte la fonctionnalité que vous essayez d'utiliser :

- -
if (browserSupportsAllFeatures()) {
-  main();
-} else {
-  loadScript('polyfills.js', main);
-}
-
-function main(err) {
-  // actual app code goes in here
-}
- -

En premier temps on exécute une condition qui vérifie si la fonction browserSupportAllFeatures() retourne true. Si oui, on exécute la fonction main(), qui contiendra tout le code de notre app. browserSupportAllFeatures() ressemble à ça :

- -
function browserSupportsAllFeatures() {
-  return window.Promise && window.fetch;
-}
- -

Ici on vérifie si l'objet Promise et la fonction fetch() existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne false, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute main() après que le chargement soit terminé. loadScript() ressemble à ça :

- -
function loadScript(src, done) {
-  var js = document.createElement('script');
-  js.src = src;
-  js.onload = function() {
-    done();
-  };
-  js.onerror = function() {
-    done(new Error('Failed to load script ' + src));
-  };
-  document.head.appendChild(js);
-}
-
- -

Cette fonction créé un nouvel élément <script>, puis applique son attribut src au chemin que nous avons spécifié en premier argument ('polyfills.js' dont nous parlions dans le code au-dessus). Une fois qu'il est chargé, nous exécutons la fonction que nous avons spécifié en deuxième argument (main()). Si une erreur se produit pendant le chargement du script, on continue d'appeler la fonction, mais avec une erreur personnalisée que nous pouvons retrouver pour faciliter le débug d'un problème s'il arrive.

- -

Notez que ce polyfills.js correspond aux deux polyfills que nous utilisons réunis dans un fichier. Nous l'avons fait manuellement, mais il y a des solutions intelligentes qui généreront automatiquement des paquets pour vous — voir Browserify (pour un tutoriel de départ voir Getting started with Browserify). C'est une bonne idée de paqueter les fichiers JS en un seul comme ça — cela réduit le nombre de requêtes HTTP ce qui améliore la performance de votre site.

- -

Vous pouvez voir le code en direct sur fetch-polyfill-only-when-needed.html (voir aussi le code source). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article Loading Polyfills Only When Needed pour le code original, et beaucoup d'explications utiles autour de ce large sujet.

- -
-

Note : Il y a certaines options externes à prendre en considération, par exemple Polyfill.io — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.

-
- -

Le transpiling Javascript

- -

Une autre option qui et devenue populaire pour les gens qui veulent utiliser des fonctionnalités Javascript modernes dès maintenant consiste à convertir le code qui utilise les fonctionnalités ECMAScript 6/ECMAScript 2015 en une version qui fonctionnera sur les vieux navigateurs.

- -
-

Note : Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).

-
- -

Pour l'exemple, nous parlions des fonctions fléchées (voir arrow-function.html en direct, et voir le code source) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs :

- -
() => { ... }
- -

Nous pouvons le transpiler en une traditionnelle et démodée fonction anonyme, donc il fonctionnera aussi sur les vieux navigateurs :

- -
function() { ... }
- -

L'outil recommandé pour transpiler du JavaScript est généralement Babel. Il fournit la capacité de transpilation pour des fonctionnalités de langages qui sont appropriées à la transpilation. Pour les fonctionnalités qui peuvent juste être facilement transpilées en un équivalent plus ancien, Babel offre aussi des polyfills pour apporter du support.

- -

La meilleure façon d'essayer Babel et d'utiliser la version en ligne, qui vous permet d'entrer votre code source sur la gauche, et une version transpilée sort sur la droite.

- -
-

Note : Il y a plein de façon d'utiliser Babel (exécuteurs de tâche, outil d'automatisation, etc.), comme vous le verrez sur la page d'installation.

-
- -

Utiliser une mauvaise détection de code de navigateur

- -

Tous les navigateurs ont un user-agent, qui identifie de quel navigateur il s'agit (version, nom, OS, etc.) Durant cette époque sombre où la plupart des gens utilisaient Netscape ou Internet Explorer, les développeurs avaient l'habitude d'utiliser les dénommés détecteur de code de navigateur pour détecter quel navigateur l'utilisateur utilisait et leur fournir le code approprié pour qu'il fonctionne sur ce navigateur.

- -

Le code utilisé ressemble à quelque chose comme ça (bien que ça soit un exemple simplifié) :

- -
var ua = navigator.userAgent;
-
-if(ua.indexOf('Firefox') !== -1) {
-  // run Firefox-specific code
-} else if(ua.indexOf('Chrome') !== -1) {
-  // run Chrome-specific code
-}
- -

L'idée était assez bonne — détecter quel navigateur affiche le site, et exécuter le code approprié pour s'assurer que le navigateur sera à même de bien utiliser votre site.

- -
-

Note : Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné.

-
- -

Cependant, le temps passant, les développeurs ont commencé à voir des graves problèmes avec cette approche. Pour commencer, le code était source d'erreur. Et si une nouvelle fonctionnalité ne marche pas sur disons, Firefox 10 et inférieur, on implémente du code pour détecter cela, puis Firefox 11 arrive — est-ce qu'il supportera cette fonctionnalité ? Firefox 11 ne sera sûrement pas supporté parce qu'il n'est pas Firefox 10. Vous aurez à changer tout votre code de détection régulièrement.

- -

Beaucoup de développeurs on implémenté de mauvais détecteur de code de navigateur et ne l'ont pas maintenu, et les navigateurs ont commencé à être bloqués en allant sur des sites web contenant des fonctionnalités qu'ils avaient déjà implémenté. C'est devenu une pratique commune que les navigateurs commencent à mentir à propos de quel navigateur ils étaient dans leur chaîne d'user-agent (ou déclarer qu'ils étaient tous les navigateurs), pour passer outre les détecteurs de code. Les navigateurs ont également implémenté des moyens pour permettre aux utilisateurs de changer quels chaîne d'user-agent le navigateur doit retourné lorsqu'il est interrogé par du JavaScript. Tout cela fait du détecteur de code bien plus qu'une source d'erreur, et d'inutilité.

- -
-

Note : Vous devriez lire History of the browser user-agent string de Aaron Andersen pour une présentation utile et amusante de cette situation.

-
- -

La leçon à retenir ici est — ne JAMAIS utiliser de détecteur de code. Le seul cas d'usage pour le détecteur de code de nos jours c'est si vous implémentez un fix pour un bug pour une version très particulière d'un navigateur en particulier. Même dans ce cas, la plupart des bugs sont fixés rapidement dans le cycle rapide des sorties des navigateurs. Cela n'arrive pas très souvent. {{anch("Feature detection")}} est presque toujours une meilleure option — si vous détectez si une fonctionnalité est supportée, vous n'aurez pas besoin de changer votre code quand de nouvelles versions de navigateur sortiront, et les tests sont bien plus fiables.

- -

Si vous rejoignez un projet existant où il y a déjà de la détection de navigateur, regardez si elle peut être remplacée avec quelque chose de plus pratique. La détection de navigateur est à l'origine de toutes sortes de bugs curieux, comme {{bug(1308462)}}.

- -

Gérer les préfixes JavaScript

- -

Dans l'article précédent, nous parlions quelque peu de la gestion des préfixes CSS. Alors, les nouvelles implémentations JavaScript utilisent parfois aussi des préfixes, bien que JavaScript utilise le camel case plutôt que l'hyphenation comme CSS. Par exemple, si un préfixe est utilisé sur un objet d'une toute belle API appelée Ojbect :

- - - -

Voici un exemple, issu de notre demo violent-theremin (voir le code source), qui utilise une combinaison de l'API Canvas et de l'API Web Audio pour créer un outil de dessin marrant (et bruyant) :

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
- -

Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées webkit (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont  préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée.

- -

Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur AudioContext modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.

- -

Ce modèle peut être appliqué pour toutes les fonctionnalités JavaScript préfixées. Les librairies/polyfills JavaScript utilise également ce type de code, pour faire abstraction au maximum des différences entre navigateurs pour le développeur.

- -

Une fois encore, les fonctions préfixées n'ont jamais été supposées être utilisées sur des sites web en production — elles sont sujettes au changement ou au retrait sans avertissement, et causent de problèmes en navigateur croisé. Si vous persistez à utiliser des fonctions préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez voir quels navigateurs nécessitent des préfixes pour les différents fonctionnalités JavaScript/API sur les pages de références MDN, et des site comme caniuse.com. Si vous n'êtes pas sûr, vous pouvez aussi vérifier en faisant quelques test directement dans des navigateurs.

- -

Par exemple, essayez d'aller dans la console de développeur de votre navigateur et commencez à taper

- -
window.AudioContext
- -

Si cette fonctionnalité est supportée par votre navigateur, elle s'autocomplètera.

- -

Trouver de l'aide

- -

Il y'a bien d'autres problèmes que vous allez rencontrer avec le JavaScript ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez la section Trouver de l'aide de l'article sur le HTML et CSS pour nos meilleurs conseils.

- -

Résumé

- -

Voilà c'est le JavaScript. Facile hein ? Peut-être pas aussi facile, mais cet article devrait au moins vous donner un départ, et quelques idées sur comment attaquer les problèmes liés au JavaScript que vous allez rencontrer.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md new file mode 100644 index 0000000000..d49fe44c33 --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md @@ -0,0 +1,519 @@ +--- +title: Gérer les problèmes courants en JavaScript +slug: Learn/Tools_and_testing/Cross_browser_testing/JavaScript +tags: + - Apprentissage + - Débutant + - JavaScript + - Librairies + - détection de fonctionnalité + - linting + - navigateur croisé + - polyfills + - test +translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation  des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.

+ + + + + + + + + + + + +
Prérequis : +

Connaissances de la base des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

+
Objectif : +

Être capable de diagnostiquer les problèmes courant de Javascript en navigateur croisé, et l'utilisation des outils et techniques appropriés pour les fixer.

+
+ +

Les problèmes avec le Javascript

+ +

Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs.

+ +

De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans Lancement d'une requête HTTP) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir jQuery.ajax()). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire.

+ +

Les choses se sont bien améliorées depuis ; les navigateurs modernes font un bon travail en supportant "les fonctionnalités classiques de JavaScript", et les conditions pour utiliser ce genre de code ont diminué comme les prérequis pour supporter les plus vieux navigateurs ont diminué (gardez toutefois à l'esprit qu'elles n'ont pas tout entièrement disparues).

+ +

De nos jours, la plupart des problèmes de JavaScript en navigateur croisé sont :

+ + + +

Nous aborderons tout ces problèmes et d'autres encore plus bas.

+ +

Résoudre les problèmes généraux en JavaScript

+ +

Comme nous le disions dans l'article précédent sur le HTML/CSS, vous devriez vous assurer que votre code fonctionne en général, avant de vous concentrer sur les problèmes en navigateur-croisé. Si vous n'êtes pas encore trop familier avec les bases de La résolution JavaScript, vous devriez étudier cet article avant de continuer. Il y a plusieurs problèmes courants en JavaScript avec lesquelles vous devez être attentif, comme :

+ + + +
+

Note : Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make a des discussions intéressantes à propos de ces erreurs courantes et plus encore.

+
+ +

Les linters

+ +

Comme avec le HTML et le CSS, vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont JSHint et ESLint ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas.

+ +

En ligne

+ +

La page d'accueil de JSHint fournit un linter en ligne, qui vous permet d'entrer votre code JavaScript sur la gauche et vous fournit un résultat sur la droite, incluant des indicateurs, des avertissements, et des erreurs.

+ +

+ +

Les plugins des éditeurs de code

+ +

Ce n'est pas très pratique de devoir copier et coller votre code sur une page web pour vérifier sa validité à plusieur reprises. Ce dont vous avez vraiment besoin c'est un linter qui va s'adapter à votre espace de travail standard avec le minimum de prise de tête. Beaucoup d'éditeurs de code ont leur plugins linter, par exemple l'éditeur de code Atom de Github a un plugin JSHint disponible :

+ +

Pour l'installer :

+ +
    +
  1. Installez Atom (si vous n'avez pas encore une version à jour déjà installée) — téléchargez-le depuis la page Atom linkée plus haut.
    2. +
  2. Aller dans la boîte de dialogue Préférences... d'Atom (par ex. en choisissant Atom > Préférences... sur Windows/Linux) et choisissez l'option Installer dans le menu gauche.
    3. +
  3. Dans le champs text Rechercher packages, taper "jslint" et presser Entrée/Envoyer pour rechercher des packages en liaisons avec le linting.
    4. +
  4. Vous devriez voir un package appellé lint en haut de la liste. Installez-le en premier (en utilisant le bouton Installer), comme les autres sont dépendants de celui-ci pour fonctionner. Ensuite, installez le plugin linter-jshint.
    5. +
  5. Une fois que les packages ont terminé de s'installer, essayez de charger un fichier JavaScript : vous verrez tous les problèmes surlignés en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de lignes, et un panneau séparé en bas qui vous fournit les numéros de lignes, les messages d'erreur, et parfois des valeur suggérées ou d'autres solutions.
    6. +
+ +

D'autres éditeurs répandus ont des packages similaires de linting disponibles. Par exemple, voir la section "Plugins for text editors and IDEs" de la page d'installation de JSHint.

+ +

Autres usages

+ +

Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de JSHint et ESLint.

+ +

Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer NodeJS en premier). Par exemple, la ligne de commande suivante installe JSHint :

+ +
npm install -g jshint
+
+ +

Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour linter automatiquement votre JavaScript pendant le développement. (voir Using a task runner to automate testing tools dans un article ultérieur). Voir ESLint integrations pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. JSHint loader for Webpack.

+ +
+

Note : ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant.

+
+ +

Les outils de développement des navigateurs

+ +

Les outils de développement des navigateurs ont beaucoup de fonctionnalités utiles pour aider à déboguer JavaScript. Pour commencer, la console JavaScript reportera les erreurs dans votre code.

+ +

Faîtes une copie locale de notre exemple broken-ajax.html (voir aussi le code source). Si vous regardez dans la console, vous verrez le résultat suivant :

+ +

+ +

Le message d'erreur affiche "TypeError: jsonObj is null", et le numéro de ligne signifiée et le 37. Si nous regardons le code source, la section de code concernée est celle-ci :

+ +
function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  ...
+ +

Le code casse aussitôt qu'on essaye d'accèder à jsonObj (ce qui comme vous pouvez vous y attendre, est supposé être un objet JSON). C'est supposé aller le chercher dans un fichier externe .json en utilisant l'appel XMLHttpRequest suivant :

+ +
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.send();
+
+var superHeroes = request.response;
+populateHeader(superHeroes);
+showHeroes(superHeroes);
+ +

Mais cela échoue.

+ +

L'API Console

+ +

Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API Console qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est console.log(), qui affiche un message d'erreur personnalisé dans la console.

+ +

Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) :

+ +
console.log('Response value: ' + superHeroes);
+ +

Rafraîchissez la page dans le navigateur, et vous obtiendrez un résultat dans la console comme celui-ci :

+ +

+ +

Le résultat de console.log() montre que l'objet superHeroes ne semble pas contenir quoi que ce soit, bien que vous remarquerez que l'erreur a maintenant changé en "TypeError: heroes is undefined". Cela montre que l'erreur est intermittente, mettant ainsi en évidence qu'il s'agit d'une erreur asynchrone. Corrigeons l'erreur actuelle et avançons — retirer la ligne console.log(), et mettez à jour ce bloc de code :

+ +
var superHeroes = request.response;
+populateHeader(superHeroes);
+showHeroes(superHeroes);
+ +

par le suivant :

+ +
request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

Cela résout le problème asynchrone, en garantissant que les fonctions ne sont pas exécutées et passent l'objet superHeroes jusqu'à ce que la réponse ait fini de charger et soit disponible.

+ +

En résumé, à chaque fois que quelque chose ne marche pas et qu'une valeur ne paraît pas être ce qu'elle est censée être à un moment dans votre code, vous pouvez utiliser console.log() pour l'afficher et voir ce qu'il se passe.

+ +

Utiliser le débogueur JavaScript

+ +

Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le débogueur JavaScript comme il est appellé dans Firefox.

+ +
+

Note : Des outils similaires sont disponibles dans d'autres navigateurs ; le Sources tab dans Chrome, le Débogueur dans Safari (voir Safari Web Development Tools), etc.

+
+ +

Dans Firefox, le Débogueur se présente comme suit :

+ +

+ + + +

La fonction principale de ces outils est la possibilité d'ajouter des points d'arrêt au code — ceux sont des points où l'exécution du code s'arrête, et à ce moment vous pouvez examiner l'environnement dans son état courant et voir ce qu'il se passe.

+ +

Mettons-nous au travail. Pour commencer, nous savons que l'erreur est renvoyée à la ligne 51. Cliquez sur la ligne numéro 51 dans le panneau central pour y ajouter un point d'arrêt (vous verrez une flèche bleue apparaître au-dessus de celle-ci). Maintenant rafraichissez la page (Cmd/Ctrl + R) — la navigateur arrêtera l'exécution du code à la ligne 51. A ce moment, le panneau de droite va se mettre à jour pour montrer des informations très utiles.

+ +

+ + + +

Ici, nous pouvons obtenir des informations très utiles.

+ +
    +
  1. Développez la portée showHeroes — vous pouvez voir depuis celle-ci que la variable heroes n'est pas définie, indiquant qu'accèder à la propriété members de jsonObj (première ligne de la fonction) ne marche pas.
    2. +
  2. Vous pouvez également voir que la variable jsonObj stock une chaîne de caractères, pas un objet JSON.
    3. +
  3. En examinant plus loin la pile d'exécutuion, cliquez sur request.onload dans la section Pile d'exécution. La vue va se mettre à jour pour afficher la fonction request.onload dans le panneau central, et sa portée dans la section Portées.
    4. +
  4. Maintenant si vous développez la portée de request.onload, vous verrez que la variable superHeroes est également une chaîne de caractères, pas un objet. C'est la solution — notre appel XMLHttpRequest retourne le JSON comme du texte, pas comme du JSON.
    5. +
+ +
+

Note : Nous aimerions que vous essayez de résoudre ce problème par vous-même. Pour vous donner un indice, vous avez le choix entre tell the XMLHttpRequest object explicitly to return JSON format, ou conversion entre objet et texte après l'arrivée de la réponse. Si vous restez bloqué, consultez notre exemple fixed-ajax.html.

+
+ +
+

Note : L'onglet débogueur a tant d'autres fonctionnalités utiles que nous n'aborderons pas ici, par exemple les points d'arrêt conditionnels et les expressions espionnes. Pour bien plus d'informations, voyez la page du Débogueur.

+
+ +

Les problèmes de performance

+ +

Dès que vos applis vont devenir plus complexes vous allez commencer à utiliser plus de JavaScript, vous pouvez commencer à rencontrer des problèmes de performances, particulièrement lorsque vous visionnez vos applis sur des appareils plus lents. La performance est un gros sujet, et nous n'avons pas le temps de le couvrir en détail ici. Voici quelques conseils rapides :

+ + + +
+

Note : Le Writing Fast, Memory-Efficient JavaScript de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript.

+
+ +

Les problèmes JavaScript en navigateur croisé

+ +

Dans cette section, nous regarderons certains des problèmes JavaScript les plus courants en navigateur croisé. Nous la décomposerons en :

+ + + +

Utiliser des fonctionnalités JavaScript/API modernes

+ +

Dans l'article précédent nous décrivions quelques façons dont les erreurs HTML et CSS et les fonctionnalités non reconnues peuvent être gérées grâce à la nature du langage. JavaScript n'est toutefois pas autant permissif que le HTML et le CSS — si le moteur de JavaScript rencontre une faute ou une syntaxe inconnue, le plus souvent il renverra des erreurs.

+ +

Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans les versions récentes des spécifications (ECMAScript 6 / ECMAScript Next) qui ne marchent tout simplement pas sur les plus vieux navigateurs. Certaines d'entre elles sont des améliorations syntaxiques (essentiellement une façon plus simple, adéquate d'écrire ce que vous pouvez déjà écrire en utilisant des fonctionnalités existantes), et certaines offrent de nouvelles possibilités intéressantes.

+ +

Par exemple :

+ + + +

Il y a également beaucoup de nouvelles APIs qui apparaissent dans les navigateurs récents, qui ne fonctionnent pas sur les plus vieux navigateurs, par exemple :

+ + + +

Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs concernant le support de fonctionnalité ; explorons les plus courantes.

+ +
+

Note : Ces stratégies n'existent pas dans des endroits distincts — bien sûr, vous pouvez les combiner autant que nécessaire. Par exemple, vous pourriez utiliser une fonction de détection pour déterminer si une fonctionnalité est supportée ; si elle ne l'est pas, vous pouvez ensuite exécuter le code pour charger un polyfill ou une libraire pour gérer le manque de support.

+
+ +

Fonctionnalité de détection

+ +

L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'API Geolocalisation (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété geolocation disponible dans l'objet global Navigator.  Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit :

+ +
if("geolocation" in navigator) {
+  navigator.geolocation.getCurrentPosition(function(position) {
+    // show the location on a map, perhaps using the Google Maps API
+  });
+} else {
+  // Give the user a choice of static maps instead perhaps
+}
+ +

Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, par exemple en testant l'existence de element.style.property (par ex. paragraph.style.transform !== undefined). Mais autant pour CSS que JavaScript, il est probablement préférable d'utiliser une librairie de fonction de détection établie plutôt que d'écrire la votre tout le temps. Modernizr est la norme standard pour les tests de fonction de détection.

+ +

Enfin, ne confondez pas fonction de détection avec le détecteur navigateur (qui détecte quel navigateur en particulier accède au site) — c'est une terrible pratique qui devrait être découragée à tout prix. Voir {{anch("Using bad browser sniffing code")}}, plus tard, pour plus de détails.

+ +
+

Note : Certaines fonctionnalités sont connues pour être indétectables — voir la liste des Undetectables de Modernizr.

+
+ +
+

Note : La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module.

+
+ +

Les librairies

+ +

Les librairies JavaScript sont essentiellement une partie externe d'unités de code que vous pouvez attacher à vos pages, afin de vous procurer une quantité de fonctionnalités toutes prêtes qui peuvent être utilisées immédiatement, constituant un gain de temps dans le processus. Beaucoup de librairies ont sûrement été créées parce que leurs développeurs écrivaient une liste de fonctions utiles courantes pour leur faire gagner du temps dans leur futurs projets, et ils décidèrent de les lâcher dans la nature parce que d'autres personnes pourraient aussi les trouver utiles.

+ +

Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) :

+ + + +

Lorsque vous choissisez une librairie pour l'utiliser, assurez-vous qu'elle fonctionne sur l'ensemble des navigateurs que vous voulez supporter, et tester vos implémentations minutieusement. Assurez-vous également que la librairie est répandue et bien supportée, et qu'elle ne va pas devenir obsolète la semaine prochaine. Parler à d'autres développeurs pour savoir ce qu'ils peuvent vous recommander, regarder l'activité et combien de contributeurs la librairie a sur Github (ou qu'importe où elle est stockée), etc.

+ +
+

Note : JavaScripting.com vous donne une idée d'à peu près combien de librairies JavaScript sont disponibles, et peut être utile pour trouver une librairie dans un but précis.

+
+ +

L'utilisation de librairie à un niveau basique consiste à télécharger les fichiers de la librairie (JavaScript, peut-être un peu de CSS ou d'autres dépendances) et à les attacher à votre page (par ex. via un élément {{htmlelement("script")}}, bien qu'il y ait normalement plein d'autres options d'utilisation pour de telles librairies, comme les installer comme des composants Bower, ou les inclure comme des dépendances avec le module de paquets Webpack. Vous devrez lire les pages d'installation individuelles des librairies pour plus d'information.

+ +
+

Note : Vous allez aussi tomber sur des frameworks JavaScript pendant votre voyage dans le Web, comme Ember et Angular. Alors que les librairies sont souvent utilisées pour résoudre des problèmes individuels et ajoutées dans des sites existants, les frameworks ont tendances à être utilisés plus pour des solutions complètes pour développer des applications web complexes.

+
+ +

Les Polyfills

+ +

Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme es6-promise pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement.

+ +

La liste des modernizr HTML5 Cross Browser Polyfills est utile pour trouver des polyfills pour différents objectifs. Une fois encore, renseignez-vous sur eux avant de les utiliser — assurez-vous qu'ils fonctionnent et qu'ils sont maintenus.

+ +

Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fetch pour fournir du support pour une API Fetch dans de vieux navigateurs ; nous avons toutefois également besoin d'utiliser le polyfill es6-promise, comme Fetch utilise largement les promises, et les navigateurs qui ne les supportent pas seront toujours bloqués.

+ +
    +
  1. Pour commencer, faîtes une copie locale de notre exemple fetch-polyfill.html et de notre belle image de fleurs dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page.
    2. +
  2. Ensuite, sauvegarder les copies de Fetch polyfill et de es6-promises polyfill dans le même répertoire que le HTML.
    3. +
  3. Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch : + 
    <script src="es6-promise.js"></script>
+<script src="fetch.js"></script>
    +
    4. +
  4. Dans le {{htmlelement("script")}} original, ajoutez le code suivant :
    5. +
  5. + 
    var myImage = document.querySelector('.my-image');
+
+fetch('flowers.jpg').then(function(response) {
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});
    +
    6. +
  6. Maintenant si vous le chargez dans un navigateur qui ne supporte pas Fetch (Safari et IE sont des candidats de choix), vous devriez quand même voir l'image de la fleur apparaitre — cool !
    +
    7. +
+ +
+

Note : Vous pouvez consulter notre version terminée sur fetch-polyfill-finished.html (voir aussi le code source).

+
+ +
+

Note : Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill.

+
+ +

Une chose à laquelle vous devez penser est "pourquoi devrions-nous toujours charger le code polyfill, même si nous n'en avons pas besoin ?" C'est une bonne remarque — plus vos sites vont devenir complexes et plus vous aller commencer à utiliser de librairies, de polyfills, etc., vous pouvez commencer à charger beaucoup de code supplémentaire, qui peut commencer à affecter la performance, spécialement sur des appareils peu puissants. Il est donc normal de ne charger les fichiers que quand ils sont nécessaires.

+ +

Faire cela nécessite un peu de code supplémentaire dans votre JavaScript. Vous avez besoin d'un test de détection de caractéristiques qui détecte si le navigateur supporte la fonctionnalité que vous essayez d'utiliser :

+ +
if (browserSupportsAllFeatures()) {
+  main();
+} else {
+  loadScript('polyfills.js', main);
+}
+
+function main(err) {
+  // actual app code goes in here
+}
+ +

En premier temps on exécute une condition qui vérifie si la fonction browserSupportAllFeatures() retourne true. Si oui, on exécute la fonction main(), qui contiendra tout le code de notre app. browserSupportAllFeatures() ressemble à ça :

+ +
function browserSupportsAllFeatures() {
+  return window.Promise && window.fetch;
+}
+ +

Ici on vérifie si l'objet Promise et la fonction fetch() existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne false, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute main() après que le chargement soit terminé. loadScript() ressemble à ça :

+ +
function loadScript(src, done) {
+  var js = document.createElement('script');
+  js.src = src;
+  js.onload = function() {
+    done();
+  };
+  js.onerror = function() {
+    done(new Error('Failed to load script ' + src));
+  };
+  document.head.appendChild(js);
+}
+
+ +

Cette fonction créé un nouvel élément <script>, puis applique son attribut src au chemin que nous avons spécifié en premier argument ('polyfills.js' dont nous parlions dans le code au-dessus). Une fois qu'il est chargé, nous exécutons la fonction que nous avons spécifié en deuxième argument (main()). Si une erreur se produit pendant le chargement du script, on continue d'appeler la fonction, mais avec une erreur personnalisée que nous pouvons retrouver pour faciliter le débug d'un problème s'il arrive.

+ +

Notez que ce polyfills.js correspond aux deux polyfills que nous utilisons réunis dans un fichier. Nous l'avons fait manuellement, mais il y a des solutions intelligentes qui généreront automatiquement des paquets pour vous — voir Browserify (pour un tutoriel de départ voir Getting started with Browserify). C'est une bonne idée de paqueter les fichiers JS en un seul comme ça — cela réduit le nombre de requêtes HTTP ce qui améliore la performance de votre site.

+ +

Vous pouvez voir le code en direct sur fetch-polyfill-only-when-needed.html (voir aussi le code source). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article Loading Polyfills Only When Needed pour le code original, et beaucoup d'explications utiles autour de ce large sujet.

+ +
+

Note : Il y a certaines options externes à prendre en considération, par exemple Polyfill.io — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code.

+
+ +

Le transpiling Javascript

+ +

Une autre option qui et devenue populaire pour les gens qui veulent utiliser des fonctionnalités Javascript modernes dès maintenant consiste à convertir le code qui utilise les fonctionnalités ECMAScript 6/ECMAScript 2015 en une version qui fonctionnera sur les vieux navigateurs.

+ +
+

Note : Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre).

+
+ +

Pour l'exemple, nous parlions des fonctions fléchées (voir arrow-function.html en direct, et voir le code source) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs :

+ +
() => { ... }
+ +

Nous pouvons le transpiler en une traditionnelle et démodée fonction anonyme, donc il fonctionnera aussi sur les vieux navigateurs :

+ +
function() { ... }
+ +

L'outil recommandé pour transpiler du JavaScript est généralement Babel. Il fournit la capacité de transpilation pour des fonctionnalités de langages qui sont appropriées à la transpilation. Pour les fonctionnalités qui peuvent juste être facilement transpilées en un équivalent plus ancien, Babel offre aussi des polyfills pour apporter du support.

+ +

La meilleure façon d'essayer Babel et d'utiliser la version en ligne, qui vous permet d'entrer votre code source sur la gauche, et une version transpilée sort sur la droite.

+ +
+

Note : Il y a plein de façon d'utiliser Babel (exécuteurs de tâche, outil d'automatisation, etc.), comme vous le verrez sur la page d'installation.

+
+ +

Utiliser une mauvaise détection de code de navigateur

+ +

Tous les navigateurs ont un user-agent, qui identifie de quel navigateur il s'agit (version, nom, OS, etc.) Durant cette époque sombre où la plupart des gens utilisaient Netscape ou Internet Explorer, les développeurs avaient l'habitude d'utiliser les dénommés détecteur de code de navigateur pour détecter quel navigateur l'utilisateur utilisait et leur fournir le code approprié pour qu'il fonctionne sur ce navigateur.

+ +

Le code utilisé ressemble à quelque chose comme ça (bien que ça soit un exemple simplifié) :

+ +
var ua = navigator.userAgent;
+
+if(ua.indexOf('Firefox') !== -1) {
+  // run Firefox-specific code
+} else if(ua.indexOf('Chrome') !== -1) {
+  // run Chrome-specific code
+}
+ +

L'idée était assez bonne — détecter quel navigateur affiche le site, et exécuter le code approprié pour s'assurer que le navigateur sera à même de bien utiliser votre site.

+ +
+

Note : Essayez maintenant d'ouvrir votre console JavaScript et d'exécuter navigator.userAgent pour voir ce qui est retourné.

+
+ +

Cependant, le temps passant, les développeurs ont commencé à voir des graves problèmes avec cette approche. Pour commencer, le code était source d'erreur. Et si une nouvelle fonctionnalité ne marche pas sur disons, Firefox 10 et inférieur, on implémente du code pour détecter cela, puis Firefox 11 arrive — est-ce qu'il supportera cette fonctionnalité ? Firefox 11 ne sera sûrement pas supporté parce qu'il n'est pas Firefox 10. Vous aurez à changer tout votre code de détection régulièrement.

+ +

Beaucoup de développeurs on implémenté de mauvais détecteur de code de navigateur et ne l'ont pas maintenu, et les navigateurs ont commencé à être bloqués en allant sur des sites web contenant des fonctionnalités qu'ils avaient déjà implémenté. C'est devenu une pratique commune que les navigateurs commencent à mentir à propos de quel navigateur ils étaient dans leur chaîne d'user-agent (ou déclarer qu'ils étaient tous les navigateurs), pour passer outre les détecteurs de code. Les navigateurs ont également implémenté des moyens pour permettre aux utilisateurs de changer quels chaîne d'user-agent le navigateur doit retourné lorsqu'il est interrogé par du JavaScript. Tout cela fait du détecteur de code bien plus qu'une source d'erreur, et d'inutilité.

+ +
+

Note : Vous devriez lire History of the browser user-agent string de Aaron Andersen pour une présentation utile et amusante de cette situation.

+
+ +

La leçon à retenir ici est — ne JAMAIS utiliser de détecteur de code. Le seul cas d'usage pour le détecteur de code de nos jours c'est si vous implémentez un fix pour un bug pour une version très particulière d'un navigateur en particulier. Même dans ce cas, la plupart des bugs sont fixés rapidement dans le cycle rapide des sorties des navigateurs. Cela n'arrive pas très souvent. {{anch("Feature detection")}} est presque toujours une meilleure option — si vous détectez si une fonctionnalité est supportée, vous n'aurez pas besoin de changer votre code quand de nouvelles versions de navigateur sortiront, et les tests sont bien plus fiables.

+ +

Si vous rejoignez un projet existant où il y a déjà de la détection de navigateur, regardez si elle peut être remplacée avec quelque chose de plus pratique. La détection de navigateur est à l'origine de toutes sortes de bugs curieux, comme {{bug(1308462)}}.

+ +

Gérer les préfixes JavaScript

+ +

Dans l'article précédent, nous parlions quelque peu de la gestion des préfixes CSS. Alors, les nouvelles implémentations JavaScript utilisent parfois aussi des préfixes, bien que JavaScript utilise le camel case plutôt que l'hyphenation comme CSS. Par exemple, si un préfixe est utilisé sur un objet d'une toute belle API appelée Ojbect :

+ + + +

Voici un exemple, issu de notre demo violent-theremin (voir le code source), qui utilise une combinaison de l'API Canvas et de l'API Web Audio pour créer un outil de dessin marrant (et bruyant) :

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+ +

Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées webkit (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont  préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée.

+ +

Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur AudioContext modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio.

+ +

Ce modèle peut être appliqué pour toutes les fonctionnalités JavaScript préfixées. Les librairies/polyfills JavaScript utilise également ce type de code, pour faire abstraction au maximum des différences entre navigateurs pour le développeur.

+ +

Une fois encore, les fonctions préfixées n'ont jamais été supposées être utilisées sur des sites web en production — elles sont sujettes au changement ou au retrait sans avertissement, et causent de problèmes en navigateur croisé. Si vous persistez à utiliser des fonctions préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez voir quels navigateurs nécessitent des préfixes pour les différents fonctionnalités JavaScript/API sur les pages de références MDN, et des site comme caniuse.com. Si vous n'êtes pas sûr, vous pouvez aussi vérifier en faisant quelques test directement dans des navigateurs.

+ +

Par exemple, essayez d'aller dans la console de développeur de votre navigateur et commencez à taper

+ +
window.AudioContext
+ +

Si cette fonctionnalité est supportée par votre navigateur, elle s'autocomplètera.

+ +

Trouver de l'aide

+ +

Il y'a bien d'autres problèmes que vous allez rencontrer avec le JavaScript ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez la section Trouver de l'aide de l'article sur le HTML et CSS pour nos meilleurs conseils.

+ +

Résumé

+ +

Voilà c'est le JavaScript. Facile hein ? Peut-être pas aussi facile, mais cet article devrait au moins vous donner un départ, et quelques idées sur comment attaquer les problèmes liés au JavaScript que vous allez rencontrer.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html deleted file mode 100644 index e739854c4d..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.html +++ /dev/null @@ -1,362 +0,0 @@ ---- -title: Stratégies pour mener à bien vos tests -slug: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies -translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"

- - - - - - - - - - - - -
Prérequis :Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
Objectif : -

Obtenir une compréhension des concepts de haut-niveau impliqués dans le test en navigateur croisé.

-
- -

Testez-les tous ?

- -

Lorsque vous faîtes du test en navigateur croisé, vous devez établir une liste de navigateurs que vous avez besoin de tester pour démarrer. Il n'y a aucun moyen que vous puissiez tester toutes les combinaisons de navigateurs et d'appareils que vos utilisateurs peuvent utiliser pour voir votre site — il y en a juste beaucoup trop, et de nouveaux apparaissent à longueur de temps.

- -

Vous devriez plutôt essayer de vous assurer que votre site fonctionne sur les appareils et les navigateurs cibles les plus importants, et coder de manière défensive afin de donner à votre site le support le plus large qu'il puisse atteindre.

- -

Par coder de manière défensive, nous voulons dire essayer de construire une solution de repli intelligente comme ça si une fonctionnalité ou un style ne marche pas sur un navigateur, le site sera capable de rétrograder à quelque chose de moins palpitant qui continuera de fournir une expérience utilisateur acceptable — le noyau de l'information est toujours accessible, par exemple, même si l'aspect n'est pas aussi beau.

- -

L'objectif est de mettre en place une liste des navigateurs/appareils sur laquelle vous pouvez vous appuyer lors de vos tests. Vous pouvez la faire aussi simple ou compliquée que vous le souhaitez — par exemple, une approche répandue est d'établir différents grades de niveau de support, quelque chose comme :

- -
    -
  1. Grade A : Navigateurs communs/modernes — Connu pour leur capacité. Tester complètement et fournir un support complet.
    2. -
  2. Grade B : Navigateurs plus vieux/ayant moins de capacité — connu pour leur incapacité. Tester, et fournir une expérience plus basique qui donne un accès total au principal de l'information et des services.
    3. -
  3. Grade C : Navigateurs rares/inconnus — ne pas tester, mais supposer qu'ils sont capables. Fournir le site complet, qui devrait marcher, au moins avec les solutions de replis disponibles grâce à notre code défensif.
    4. -
- -

Tout au long des sections à venir, nous allons mettre en place une liste de support dans ce format.

- -
-

Note : Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de Support de navigateur classé.

-
- -

Déductions logiques

- -

Vous pouvez les appeler "hypothèses" ou "intuitions". Ce n'est pas une approche précise, scientifique, mais en tant que personne qui a une expérience de l'industrie web vous aurez une particulièrement bonne idée du minimum de navigateurs que vous devriez tester. Cela peut former une bonne base pour votre liste de support.

- -

Par exemple, si vous habitez en Europe de l'Ouest ou en Amérique du Nord, vous devez savoir que la plupart des gens utilisent des ordinateurs de bureau/portable Windows et Mac, et que les navigateurs principaux sont Chrome, Firefox, Safari, IE, et Edge. Vous n'aurez sûrement besoin que de tester uniquement les dernières versions des trois premiers, étant donné que ces navigateurs reçoivent des mises à jour régulières. Pour Edge et IE vous n'aurez que besoin de tester les deux dernières versions ; ils doivent tous aller dans le niveau de grade A.

- -
-

Note : Vous ne pouvez avoir qu'une seule version d'IE ou d'Edge installée sur une machine à la fois, vous aurez donc probablement besoin d'utiliser une machine virtuelle, ou une autre stratégie pour faire les tests nécessaires. Voir {{anch("Virtual machines")}} plus tard.

-
- -

Beaucoup de personnes utilisent iOS et Android, vous aurez donc aussi besoin de tester les dernières versions d'iOS Safari, les deux dernières versions de l'ancien Android stock browser, et Chrome et Firefox pour iOS et Android. Idéalement, vous devriez tester sur un téléphone et une tablette de chaque système d'exploitation, afin de vous assurer que les designs responsives fonctionnent bien.

- -

Vous savez aussi peut-être qu'un certain nombre de personnes continue d'utiliser IE 9. C'est vieux et peu compétent, donc mettons-le dans le niveau de grade B.

- -

Ce qui nous donne pour l'instant la liste de support suivante :

- -
    -
  1. Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chacun), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) sur téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette.
    2. -
  2. Grade B : IE 9 pour Windows
    3. -
  3. Grade C : n/a
    4. -
- -

Si vous vivez autre part, ou travaillez sur un site qui va être livré autre part (par ex. dans un pays ou un endroit en particulier), alors vous aurez sûrement des navigateurs communs différents à tester.

- -
-

Note : "Le PDG de mon entreprise utilise un Blackberry, nous devons donc nous assurer que cela apparaîtra parfaitement sur ce support" peut aussi être un argument persuasif.

-
- -

Les statistiques de support navigateur

- -

Une mesure utile à laquelle vous pouvez faire appel pour déduire vos choix de test sur navigateur, c'est les statistiques de support navigateur. Il y a plusieurs sites qui fournissent de telles informations, par exemple :

- - - -

Ils sont tous les deux très orientés sur l'Amérique du Nord, et ne sont pas particulièrement précis, mais ils peuvent vous donner une idée des tendances générales.

- -

Par exemple, allons sur Netmarketshare. Vous pouvez voir qu'Opera est listé comme ayant une petit mais visible chiffre d'usage, donc nous devrions l'ajouter à notre liste de support en grade C.

- -

IE8 est classé comme étant significatif également, mais il est plus vieux et plus très efficace. Opera Mini est aussi remarquable, mais il n'est pas très compétent en termes d'exécution de Javascript complexe au démarrage, etc. (voir Opera Mini et JavaScript pour plus de détails). Nous devrions aussi les ajouter dans le niveau B.

- -

Utiliser l'analyse des données

- -

Une source de données plus précise, si vous pouvez l'obtenir, vient d'une appli d'analyse comme Google Analytics. C'est une application qui vous donnera des stats sur exactement quels navigateurs les gens utilisent pour naviguer sur votre site. Bien entendu, cela implique que vous avez déjà un site sur lequel l'utiliser, donc ça n'est pas super pour de tout nouveaux sites.

- -

Mais une analyse historique peut être utile pour trouver des statistiques de support afin d'exercer une influence sur une nouvelle version du site d'une entreprise, ou une nouvelle fonctionnalité que vous être en train d'ajouter sur un site existant. Si elles vous sont accessibles, elles sont bien plus précises que les statistiques globales des navigateurs comme celles mentionnées plus haut.

- -

Configurer Google analytics

- -
    -
  1. En premier lieu, vous avez besoin d'un compte Google. Utilisez ce compte afin de vous inscrire sur Google Analytics.
    2. -
  2. Choisissez l'option Google Analytics (web), et cliquez sur le bouton S'inscrire.
    3. -
  3. Entrez les détails sur votre site/appli dans la page d'inscription. C'est très intuitif à configurer ; le champ le plus important où il ne faut pas se tromper est l'URL du site web. Cela doit être l'URL racine de votre site/appli.
    4. -
  4. Une fois que vous avez terminé de tout remplir, appuyer sur le bouton Get Tracking ID, ensuite acceptez les modalités de services qui apparaissent.
    5. -
  5. La prochaine page vous fournit quelques extraits de code et d'autres instructions. Pour un site web basique, ce que vous avez besoin de faire, c'est de copier le bloc de code Website tracking et de le coller sur toutes les différentes pages que vous voulez suivre en utilisant Google Analytics sur votre site. Vous pouvez le placer en-dessous de la balise fermante </body>, ou n'importe où d'approprié qui le garderait de se mélanger avec le code de votre application.
    6. -
  6. Téléchargez vos modifications sur le serveur de développement, ou autre part où vous avez besoin de votre code.
    7. -
- -

C'est bon ! Votre site devrait maintenant être prêt à commencer à reporter l'analyse de données.

- -

Etudier l'analyse des données

- -

Vous devriez maintenant être capable de retourner sur la page d'accueil Analytics Web, et commencer à regarder les données que vous avez collecté à propos de votre site (bien entendu, vous devez laisser passer un peu de temps afin de permettre aux données de votre site d'être collectées.)

- -

Par défaut, vous devriez voir ce tableau de rapport, comme ceci :

- -

- -

Il y a une énorme quantité de donnée que vous pouvez regarder en utilisant Google Analytics — des rapports personnalisés dans différentes catégories, etc. — et nous n'avons pas le temps pour tous les aborder. Démarrer avec Analytics fournit une aide utile sur les rapports (et plus) pour les débutants.

- -

Vous devriez aussi vous intéresser aux différentes options du menu gauche, et voir quels types de données vous pouvez trouver. Par exemple, vous pouvez trouver quels navigateurs et quels systèmes d'exploitation vos utilisateurs utilisent en sélectionnant Audience > Technologie > Navigateur & OS du menu gauche.

- -
-

Note : Lorsque vous utilisez Google Analytics, vous devez pour prévenir des biais trompeurs, par ex. "Nous n'avons aucun utilisateur de Firefox Mobile" peut vous amener à ne pas vous soucier de supporter Firefox Mobile. Mais vous n'allez pas avoir un seul utilisateur de Firefox Mobile si le site ne fonctionnait pas dessus dès le départ.

-
- -

Autres cas

- -

Il y a d'autres cas que vous devriez aussi probablement prendre en compte. Vous devez assurément inclure l'accessibilité en tant que condition nécessaire de test de niveau A (nous couvrirons exactement qu'est-ce que vous devez tester dans notre article sur la Gestion des problèmes commun d'accessibilité).

- -

Vous pouvez avoir à prendre d'autres considérations supplémentaires. Si vous êtes en train de créer une sorte d'intranet pour fournir les chiffres d'affaires aux managers, et tous les managers ont reçu des téléphones Windows par exemple, vous devez faire du support IE pour mobile une priorité.

- -

Liste de support finale

- -

Donc, notre liste de support finale devrait finir par ressemble à ça :

- -
    -
  1. Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chaque), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) pour téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette. L'accessibilité qui passe les tests courants.
    2. -
  2. Grade B : IE 8 et 9 pour Windows, Opera Mini.
    3. -
  3. Grade C : Opera, d'autres bons navigateurs modernes.
    4. -
- -

Qu'est-ce que vous allez tester ?

- -

Lorsque vous ajouter une nouveauté à votre code de base qui nécessite d'être testée, avant de commencer vos tests, vous devez rédiger une liste des conditions des tests qui ont besoin de passer pour être admises. Ces conditions peuvent être visuelles ou fonctionnelles — combiner les deux afin de mettre en place une fonctionnalité web utilisable.

- -

Considérez l'exemple suivant (voir le code source, et aussi l'exemple exécuté en direct) :

- -

- -

Les critères de test pour cette fonctionnalité peuvent être rédigés comme ceci :

- -

Grade A et B :

- - - -

Grade A :

- - - -

Vous avez dû remarquer que le texte dans l'exemple ne fonctionne pas sur IE8 — selon notre liste de support c'est un problème, que vous devez résoudre, peut-être en utilisant une librairie de détection afin d'implémenter la fonctionnalité d'une autre manière si le navigateur ne supporte pas les transitions CSS (voir Implémenter une fonctionnalité de détection, plus tard dans le cours)

- -

Vous avez aussi dû remarquer que le bouton n'est pas utilisable en se servant du clavier — cela a aussi besoin d'être résolu. Peut-être que nous pouvons utiliser un peu de Javascript afin d'implémenter un contrôle clavier pour le basculement, ou utiliser une tout autre méthode ?

- -

Ces critères de test sont utiles, parce que :

- - - -

Mettre en place ensemble un labo de test

- -

Une option pour effectuer les tests sur navigateurs et de faire les tests par vous-mêmes. Pour faire cela, vous allez sûrement utiliser une combinaison d'appareils physiques actuels, et simuler des environnements (utiliser soit un émulateur ou une machine virtuelle).

- -

Les appareils physiques

- -

C'est généralement le mieux d'avoir de vrais supports pour exécuter le navigateur que vous voulez tester — cela fournit la plus grande précision en termes de comportement et sur l'ensemble de l'expérience utilisateur. Vous allez sûrement avoir besoin de quelque chose comme suit, pour un labo d'appareils de bas niveau :

- - - -

Les éléments suivants sont également une bonne option, si vous pouvez les obtenir :

- - - -

Votre machine de travail principale peut aussi être un support pour installer d'autre outils pour une objectif spécifique, comme des outils de vérification de l'accessibilité, des lecteurs d'écran, et des émulateurs/machines virtuelles.

- -

Certaines grandes entreprises ont des labos d'appareils qui stockent une sélection très large de différents appareils, permettant aux développeurs de traquer les bugs sur des combinaisons de navigateur/appareil très précises. Les plus petites entreprises et les indépendants n'ont généralement pas les moyens de s'offrir des labos aussi sophistiqués, ils ont donc tendance à avoir des labos plus petits, des émulateurs, des machines virtuelles et des applis de tests commerciales.

- -

Nous couvrirons chacune des autres options plus bas.

- -
-

Note : Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir Open Device Labs.

-
- -
-

Note : Nous devons aussi prendre en considération l'accessibilité — il y a plusieurs outils utiles que vous pouvez installer sur votre machine afin de faciliter les tests d'accessibilité, mais nous les couvrirons dans l'article Gestion des problèmes communs d'accessibilité, plus tard dans le cours.

-
- -

Les émulateurs

- -

Les émulateurs sont essentiellement des programmes qui s'exécutent à l'intérieur de votre ordinateur et simulent des appareils ou des conditions particulières d'appareil d'un certain type, ils vous permettent de faire certains tests plus aisément qu'en ayant à trouver une combinaison de matériels/logiciels à tester.

- -

Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le Mode Design Responsive de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans Safari > Préférences, et en cochant Show Develop menu, puis en choisissant Develop > Enter Responsive Design Mode. Chrome propose également quelque chose de similaire : Device mode (voir Simuler un Appareil Mobile avec le Device Mode).

- -

Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants :

- - - -

Vous pouvez facilement trouver des simulateurs pour les autres environnements d'appareil mobile, par exemple :

- - - -
-

Note : Beaucoup d'émulateurs requièrent actuellement l'utilisation d'une machine virtuelle (voir en-dessous) ; quand c'est le cas, les instructions sont souvent fournies, et/ou l'utilisation de la machine virtuelle est inclue dans l'installeur de l'émulateur.

-
- -

Les machines virtuelles

- -

Les machines virtuelles sont des applications qui s'exécutent sur le bureau de votre ordinateur et vous permettent d'exécuter les simulations de tous les systèmes d'exploitation, chacun compartimenté sur son propre disque dur virtuel (souvent représenté par un seul large fichier existant sur le disque dur de la machine hôte). Il y a plusieurs applis de machine virtuelle populaire, comme Parallels, VMWare, et Virtual Box; personnellement, nous préférons la dernière, parce qu'elle est gratuite.

- -
-

Note : Nous avons besoin de beaucoup d'espace disponible sur le disque dur pour exécuter les émulations de machine virtuelle ; chaque système d'exploitation que vous émulez peut prendre beaucoup de mémoire. Vous aurez tendance à choisir l'espace de disque dur que vous voulez pour chaque installation ; vous pouvez vous en sortir avec environ 10Go, mais certaines sources recommandent d'augmenter à 50Go ou plus, alors le système d'exploitation s'éxécutera de façon fiable. Une bonne option fournit par la plupart des applis de machine virtuelle est de créer des disques durs à allocations dynamiques qui grossissent et rétrécissent en fonction que les besoins surviennent.

-
- -

Pour utiliser Virtual Box, vous avez besoin de :

- -
    -
  1. Procurez-vous un disque d'installation ou une image (par ex. un ISO) du système d'exploitation que vous voulez émuler. Virtual Box est en mesure de vous les fournir ; la plupart, comme les OSs de Windows, sont des produits commerciaux qui ne peuvent être distribués gratuitement.
    2. -
  2. Téléchargez l'installeur approprié pour votre système d'exploitation et installez-le.
    3. -
  3. Ouvrez l'appli ; vous verrez une vue ressemblant à ceci :
    4. -
  4. Pour créer une nouvelle machine virtuelle, appuyer sur le bouton Nouveau dans le coin en haut à gauche.
    5. -
  5. Suivez les instructions et remplissez les boîtes de dialogues suivantes comme il se doit. Vous allez : -
      -
    1. Donner un nom à votre machine virtuelle
      2. -
    2. Choisir un système d'exploitation et une version que vous allez installer dessus
      3. -
    3. Préciser combien de RAM doit être allouée (nous vous recommandons quelque chose comme 2048Mo, ou 2Go)
      4. -
    4. Créer un disque dur virtuel (choisissez les options pas défaut à travers les trois boîtes de dialogues contenant Créer un disque dur virtuel maintenant, IDV (image disque virtuelle), Allocation dynamique)
      5. -
    5. Choisissez l'emplacement du fichier et la taille du disque dur virtuel (choisir un nom sensé et un emplacement facile à garder, et pour la dimension préciser quelque chose autour de 50Go, ou autant que vous pensez que c'est nécessaire)
      6. -
    -
    6. -
- -

Maintenant la nouvelle virtual box devrait apparaître dans le menu gauche de la fenêtre de l'interface principale de Virtual Box. A ce stade, vous pouvez double-cliquer dessus pour ouvrir la virtual box — cela commencera à démarrer la machine virtuelle, mais il n'y aura pas encore le système d'exploitation d'installé. A cet instant vous devez préciser à la boîte de dialogue l'image de votre programme d'installation, et les étapes s'exécuteront une par une dans la machine virtuelle, exactement comme si c'était un vrai ordinateur.

- -

- -
-

Attention : Vous devez vous assurez que vous avez l'image du système d'exploitation que vous voulez installer sur la machine virtuelle existante à ce stade, et l'installer complètement. Si vous annulé le processus à ce stade, cela peut rendre la machine virtuelle inutilisable, et vous amener à la supprimer et en créer une nouvelle. Ce n'est pas fatal, mais c'est ennuyant.

-
- -

Une fois que le processus est complété, vous devriez avoir une machine virtuelle exécutant un système d'exploitation à l'intérieur d'une fenêtre sur votre ordinateur hôte.

- -

- -

Vous devez vous occuper de l'installation de ce système d'exploitation virtuel exactement comme d'une installation réelle — par exemple, de même que vous devez installer les navigateurs que vous voulez tester, installez un programme d'antivirus pour vous protégez des virus.

- -

Avoir plusieurs machines virtuelles est très utile, particulièrement pour les test IE/Edge sur Windows — sur Windows, vous n'êtes pas autorisé à avoir de multiples versions du navigateur par défaut installé, donc vous pouvez vous construire une librairie de machines virtuelles afin de gérer les différents tests requis, par ex. :

- - - -
-

Note : Une autre bonne chose à propos des machines virtuelles, c'est que les images de disque virtuel sont clairement autonomes. Si vous travaillez en équipe, vous pouvez créer une image disque, puis la copier et vous la passer. Assurez-vous juste d'avoir les licences requises pour exécuter toutes les copies de Windows ou qu'importe ce que vous exécutez, si c'est un produit licencié.

-
- -

Automatisation et applis commerciales

- -

Comme précisé dans le chapitre précédent, vous pouvez vous retirer beaucoup de peine concernant les tests de navigateur en utilisant un système d'automatisation. Vous pouvez configurer votre propre système d'automatisation de test (Selenium est devenue l'appli de choix la plus répandue), ce qui nécessite une certaine configuration, mais peut être très satisfaisant lorsque votre travail arrive à terme.

- -

Il y a également des outils commercials disponibles comme Sauce Labs et Browser Stack qui font ce genre de choses pour vous, sans que vous ayez a vous souciez de la configuration, si vous êtes prêt à investir dans vos tests.

- -

Nous aborderons comment utiliser de tels outils plus tard dans ce module.

- -

Les tests utilisateurs

- -

Avant de poursuivre, nous finirons cet article en abordant les tests utilisateurs — cela peut être une bonne option si vous avez un groupe d'utilisateurs volontaires pour tester votre nouvelle fonctionnalité. Ne perdez pas de vue que cela peut être aussi peu ou beaucoup sophistiqué que vous le désirez — votre groupe d'utilisateurs peut être un groupe d'amis, un groupe de collègues, ou un groupe de volontaires bénévoles ou rémunérés, cela dépend si vous avez de l'argent à dépenser en test.

- -

La plupart du temps vous permettrez à vos utilisateurs de regarder la page ou la vue contenant la nouvelle fonctionnalité sur un serveur de développement, de cette manière vous n'exposez pas le site final ou les modifications en direct avant qu'il ne soit terminé. Vous devez leur recommander de suivre certaines étapes et de rapporter les résultats qu'ils ont obtenu. Il est important d'établir une liste d'étapes (parfois appelé script) vous aurez ainsi plus de résultats fiables se rapportant à ce que vous essayez de tester. Nous avons mentionné cela dans la section {{anch("What are you going to test")}} plus haut — c'est facile de transformer les critères de test détaillés ici en étapes à suivre. Par exemple, ce qui suit devrait fonctionner pour un utilisateur voyant :

- - - -

Lorsque vous exécutez les tests, cela peut aussi être une bonne idée de :

- - - -

Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en train de tester est aussi "pure" que possible. C-à-d qu'il n'y a rien d'installé qui pourrait affecter les résultats des tests.

- -
-

Note : Une autre option faiblement utile, si vous avez le matériel disponible est de tester vos sites sur des téléphones bas de gammes/d'autres appareils — plus vos sites vont s'agrandir et les fonctionnalités avoir plus d'effets, plus vous avez des chances que votre site subisse des ralentissements, il vous faut donc prendre la performance comme une nouvelle considération importante. Essayer de faire marcher vos fonctionnalités sur des appareils bas de gamme, cela rendra l'expérience bien meilleure sur des appareils haut de gamme.

-
- -
-

Note : Certains environnement de développement côté serveur fournissent des mécanismes très utiles pour sortir les modifications sur le site pour seulement un sous-ensemble d'utilisateurs, très utile pour sortir des fonctionnalités testées par un sous-ensemble d'utilisateurs sans avoir besoin de mettre en place un serveur de développement séparé. Un bon exemple est Django Waffle Flags.

-
- -

Résumé

- -

Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste.

- -

La prochaine fois nous tournerons notre attention sur les problèmes concrets de votre code que vos tests peuvent révéler, en commençant avec le HTML et le CSS.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md new file mode 100644 index 0000000000..e739854c4d --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md @@ -0,0 +1,362 @@ +--- +title: Stratégies pour mener à bien vos tests +slug: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"

+ + + + + + + + + + + + +
Prérequis :Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.
Objectif : +

Obtenir une compréhension des concepts de haut-niveau impliqués dans le test en navigateur croisé.

+
+ +

Testez-les tous ?

+ +

Lorsque vous faîtes du test en navigateur croisé, vous devez établir une liste de navigateurs que vous avez besoin de tester pour démarrer. Il n'y a aucun moyen que vous puissiez tester toutes les combinaisons de navigateurs et d'appareils que vos utilisateurs peuvent utiliser pour voir votre site — il y en a juste beaucoup trop, et de nouveaux apparaissent à longueur de temps.

+ +

Vous devriez plutôt essayer de vous assurer que votre site fonctionne sur les appareils et les navigateurs cibles les plus importants, et coder de manière défensive afin de donner à votre site le support le plus large qu'il puisse atteindre.

+ +

Par coder de manière défensive, nous voulons dire essayer de construire une solution de repli intelligente comme ça si une fonctionnalité ou un style ne marche pas sur un navigateur, le site sera capable de rétrograder à quelque chose de moins palpitant qui continuera de fournir une expérience utilisateur acceptable — le noyau de l'information est toujours accessible, par exemple, même si l'aspect n'est pas aussi beau.

+ +

L'objectif est de mettre en place une liste des navigateurs/appareils sur laquelle vous pouvez vous appuyer lors de vos tests. Vous pouvez la faire aussi simple ou compliquée que vous le souhaitez — par exemple, une approche répandue est d'établir différents grades de niveau de support, quelque chose comme :

+ +
    +
  1. Grade A : Navigateurs communs/modernes — Connu pour leur capacité. Tester complètement et fournir un support complet.
    2. +
  2. Grade B : Navigateurs plus vieux/ayant moins de capacité — connu pour leur incapacité. Tester, et fournir une expérience plus basique qui donne un accès total au principal de l'information et des services.
    3. +
  3. Grade C : Navigateurs rares/inconnus — ne pas tester, mais supposer qu'ils sont capables. Fournir le site complet, qui devrait marcher, au moins avec les solutions de replis disponibles grâce à notre code défensif.
    4. +
+ +

Tout au long des sections à venir, nous allons mettre en place une liste de support dans ce format.

+ +
+

Note : Yahoo est le premier à avoir rendu cette approche répandue, avec leur approche de Support de navigateur classé.

+
+ +

Déductions logiques

+ +

Vous pouvez les appeler "hypothèses" ou "intuitions". Ce n'est pas une approche précise, scientifique, mais en tant que personne qui a une expérience de l'industrie web vous aurez une particulièrement bonne idée du minimum de navigateurs que vous devriez tester. Cela peut former une bonne base pour votre liste de support.

+ +

Par exemple, si vous habitez en Europe de l'Ouest ou en Amérique du Nord, vous devez savoir que la plupart des gens utilisent des ordinateurs de bureau/portable Windows et Mac, et que les navigateurs principaux sont Chrome, Firefox, Safari, IE, et Edge. Vous n'aurez sûrement besoin que de tester uniquement les dernières versions des trois premiers, étant donné que ces navigateurs reçoivent des mises à jour régulières. Pour Edge et IE vous n'aurez que besoin de tester les deux dernières versions ; ils doivent tous aller dans le niveau de grade A.

+ +
+

Note : Vous ne pouvez avoir qu'une seule version d'IE ou d'Edge installée sur une machine à la fois, vous aurez donc probablement besoin d'utiliser une machine virtuelle, ou une autre stratégie pour faire les tests nécessaires. Voir {{anch("Virtual machines")}} plus tard.

+
+ +

Beaucoup de personnes utilisent iOS et Android, vous aurez donc aussi besoin de tester les dernières versions d'iOS Safari, les deux dernières versions de l'ancien Android stock browser, et Chrome et Firefox pour iOS et Android. Idéalement, vous devriez tester sur un téléphone et une tablette de chaque système d'exploitation, afin de vous assurer que les designs responsives fonctionnent bien.

+ +

Vous savez aussi peut-être qu'un certain nombre de personnes continue d'utiliser IE 9. C'est vieux et peu compétent, donc mettons-le dans le niveau de grade B.

+ +

Ce qui nous donne pour l'instant la liste de support suivante :

+ +
    +
  1. Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chacun), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) sur téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette.
    2. +
  2. Grade B : IE 9 pour Windows
    3. +
  3. Grade C : n/a
    4. +
+ +

Si vous vivez autre part, ou travaillez sur un site qui va être livré autre part (par ex. dans un pays ou un endroit en particulier), alors vous aurez sûrement des navigateurs communs différents à tester.

+ +
+

Note : "Le PDG de mon entreprise utilise un Blackberry, nous devons donc nous assurer que cela apparaîtra parfaitement sur ce support" peut aussi être un argument persuasif.

+
+ +

Les statistiques de support navigateur

+ +

Une mesure utile à laquelle vous pouvez faire appel pour déduire vos choix de test sur navigateur, c'est les statistiques de support navigateur. Il y a plusieurs sites qui fournissent de telles informations, par exemple :

+ + + +

Ils sont tous les deux très orientés sur l'Amérique du Nord, et ne sont pas particulièrement précis, mais ils peuvent vous donner une idée des tendances générales.

+ +

Par exemple, allons sur Netmarketshare. Vous pouvez voir qu'Opera est listé comme ayant une petit mais visible chiffre d'usage, donc nous devrions l'ajouter à notre liste de support en grade C.

+ +

IE8 est classé comme étant significatif également, mais il est plus vieux et plus très efficace. Opera Mini est aussi remarquable, mais il n'est pas très compétent en termes d'exécution de Javascript complexe au démarrage, etc. (voir Opera Mini et JavaScript pour plus de détails). Nous devrions aussi les ajouter dans le niveau B.

+ +

Utiliser l'analyse des données

+ +

Une source de données plus précise, si vous pouvez l'obtenir, vient d'une appli d'analyse comme Google Analytics. C'est une application qui vous donnera des stats sur exactement quels navigateurs les gens utilisent pour naviguer sur votre site. Bien entendu, cela implique que vous avez déjà un site sur lequel l'utiliser, donc ça n'est pas super pour de tout nouveaux sites.

+ +

Mais une analyse historique peut être utile pour trouver des statistiques de support afin d'exercer une influence sur une nouvelle version du site d'une entreprise, ou une nouvelle fonctionnalité que vous être en train d'ajouter sur un site existant. Si elles vous sont accessibles, elles sont bien plus précises que les statistiques globales des navigateurs comme celles mentionnées plus haut.

+ +

Configurer Google analytics

+ +
    +
  1. En premier lieu, vous avez besoin d'un compte Google. Utilisez ce compte afin de vous inscrire sur Google Analytics.
    2. +
  2. Choisissez l'option Google Analytics (web), et cliquez sur le bouton S'inscrire.
    3. +
  3. Entrez les détails sur votre site/appli dans la page d'inscription. C'est très intuitif à configurer ; le champ le plus important où il ne faut pas se tromper est l'URL du site web. Cela doit être l'URL racine de votre site/appli.
    4. +
  4. Une fois que vous avez terminé de tout remplir, appuyer sur le bouton Get Tracking ID, ensuite acceptez les modalités de services qui apparaissent.
    5. +
  5. La prochaine page vous fournit quelques extraits de code et d'autres instructions. Pour un site web basique, ce que vous avez besoin de faire, c'est de copier le bloc de code Website tracking et de le coller sur toutes les différentes pages que vous voulez suivre en utilisant Google Analytics sur votre site. Vous pouvez le placer en-dessous de la balise fermante </body>, ou n'importe où d'approprié qui le garderait de se mélanger avec le code de votre application.
    6. +
  6. Téléchargez vos modifications sur le serveur de développement, ou autre part où vous avez besoin de votre code.
    7. +
+ +

C'est bon ! Votre site devrait maintenant être prêt à commencer à reporter l'analyse de données.

+ +

Etudier l'analyse des données

+ +

Vous devriez maintenant être capable de retourner sur la page d'accueil Analytics Web, et commencer à regarder les données que vous avez collecté à propos de votre site (bien entendu, vous devez laisser passer un peu de temps afin de permettre aux données de votre site d'être collectées.)

+ +

Par défaut, vous devriez voir ce tableau de rapport, comme ceci :

+ +

+ +

Il y a une énorme quantité de donnée que vous pouvez regarder en utilisant Google Analytics — des rapports personnalisés dans différentes catégories, etc. — et nous n'avons pas le temps pour tous les aborder. Démarrer avec Analytics fournit une aide utile sur les rapports (et plus) pour les débutants.

+ +

Vous devriez aussi vous intéresser aux différentes options du menu gauche, et voir quels types de données vous pouvez trouver. Par exemple, vous pouvez trouver quels navigateurs et quels systèmes d'exploitation vos utilisateurs utilisent en sélectionnant Audience > Technologie > Navigateur & OS du menu gauche.

+ +
+

Note : Lorsque vous utilisez Google Analytics, vous devez pour prévenir des biais trompeurs, par ex. "Nous n'avons aucun utilisateur de Firefox Mobile" peut vous amener à ne pas vous soucier de supporter Firefox Mobile. Mais vous n'allez pas avoir un seul utilisateur de Firefox Mobile si le site ne fonctionnait pas dessus dès le départ.

+
+ +

Autres cas

+ +

Il y a d'autres cas que vous devriez aussi probablement prendre en compte. Vous devez assurément inclure l'accessibilité en tant que condition nécessaire de test de niveau A (nous couvrirons exactement qu'est-ce que vous devez tester dans notre article sur la Gestion des problèmes commun d'accessibilité).

+ +

Vous pouvez avoir à prendre d'autres considérations supplémentaires. Si vous êtes en train de créer une sorte d'intranet pour fournir les chiffres d'affaires aux managers, et tous les managers ont reçu des téléphones Windows par exemple, vous devez faire du support IE pour mobile une priorité.

+ +

Liste de support finale

+ +

Donc, notre liste de support finale devrait finir par ressemble à ça :

+ +
    +
  1. Grade A : Chrome et Firefox pour Windows/Mac, Safari pour Mac, Edge et IE pour Windows (les deux dernières versions de chaque), iOS Safari pour iPhone/iPad, Android stock browser (les deux dernières versions) pour téléphone/tablette, Chrome et Firefox pour Android (les deux dernières versions) sur téléphone/tablette. L'accessibilité qui passe les tests courants.
    2. +
  2. Grade B : IE 8 et 9 pour Windows, Opera Mini.
    3. +
  3. Grade C : Opera, d'autres bons navigateurs modernes.
    4. +
+ +

Qu'est-ce que vous allez tester ?

+ +

Lorsque vous ajouter une nouveauté à votre code de base qui nécessite d'être testée, avant de commencer vos tests, vous devez rédiger une liste des conditions des tests qui ont besoin de passer pour être admises. Ces conditions peuvent être visuelles ou fonctionnelles — combiner les deux afin de mettre en place une fonctionnalité web utilisable.

+ +

Considérez l'exemple suivant (voir le code source, et aussi l'exemple exécuté en direct) :

+ +

+ +

Les critères de test pour cette fonctionnalité peuvent être rédigés comme ceci :

+ +

Grade A et B :

+ + + +

Grade A :

+ + + +

Vous avez dû remarquer que le texte dans l'exemple ne fonctionne pas sur IE8 — selon notre liste de support c'est un problème, que vous devez résoudre, peut-être en utilisant une librairie de détection afin d'implémenter la fonctionnalité d'une autre manière si le navigateur ne supporte pas les transitions CSS (voir Implémenter une fonctionnalité de détection, plus tard dans le cours)

+ +

Vous avez aussi dû remarquer que le bouton n'est pas utilisable en se servant du clavier — cela a aussi besoin d'être résolu. Peut-être que nous pouvons utiliser un peu de Javascript afin d'implémenter un contrôle clavier pour le basculement, ou utiliser une tout autre méthode ?

+ +

Ces critères de test sont utiles, parce que :

+ + + +

Mettre en place ensemble un labo de test

+ +

Une option pour effectuer les tests sur navigateurs et de faire les tests par vous-mêmes. Pour faire cela, vous allez sûrement utiliser une combinaison d'appareils physiques actuels, et simuler des environnements (utiliser soit un émulateur ou une machine virtuelle).

+ +

Les appareils physiques

+ +

C'est généralement le mieux d'avoir de vrais supports pour exécuter le navigateur que vous voulez tester — cela fournit la plus grande précision en termes de comportement et sur l'ensemble de l'expérience utilisateur. Vous allez sûrement avoir besoin de quelque chose comme suit, pour un labo d'appareils de bas niveau :

+ + + +

Les éléments suivants sont également une bonne option, si vous pouvez les obtenir :

+ + + +

Votre machine de travail principale peut aussi être un support pour installer d'autre outils pour une objectif spécifique, comme des outils de vérification de l'accessibilité, des lecteurs d'écran, et des émulateurs/machines virtuelles.

+ +

Certaines grandes entreprises ont des labos d'appareils qui stockent une sélection très large de différents appareils, permettant aux développeurs de traquer les bugs sur des combinaisons de navigateur/appareil très précises. Les plus petites entreprises et les indépendants n'ont généralement pas les moyens de s'offrir des labos aussi sophistiqués, ils ont donc tendance à avoir des labos plus petits, des émulateurs, des machines virtuelles et des applis de tests commerciales.

+ +

Nous couvrirons chacune des autres options plus bas.

+ +
+

Note : Certains efforts ont été effectué afin de créer des labos d'appareils accessibles au public — voir Open Device Labs.

+
+ +
+

Note : Nous devons aussi prendre en considération l'accessibilité — il y a plusieurs outils utiles que vous pouvez installer sur votre machine afin de faciliter les tests d'accessibilité, mais nous les couvrirons dans l'article Gestion des problèmes communs d'accessibilité, plus tard dans le cours.

+
+ +

Les émulateurs

+ +

Les émulateurs sont essentiellement des programmes qui s'exécutent à l'intérieur de votre ordinateur et simulent des appareils ou des conditions particulières d'appareil d'un certain type, ils vous permettent de faire certains tests plus aisément qu'en ayant à trouver une combinaison de matériels/logiciels à tester.

+ +

Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le Mode Design Responsive de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans Safari > Préférences, et en cochant Show Develop menu, puis en choisissant Develop > Enter Responsive Design Mode. Chrome propose également quelque chose de similaire : Device mode (voir Simuler un Appareil Mobile avec le Device Mode).

+ +

Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants :

+ + + +

Vous pouvez facilement trouver des simulateurs pour les autres environnements d'appareil mobile, par exemple :

+ + + +
+

Note : Beaucoup d'émulateurs requièrent actuellement l'utilisation d'une machine virtuelle (voir en-dessous) ; quand c'est le cas, les instructions sont souvent fournies, et/ou l'utilisation de la machine virtuelle est inclue dans l'installeur de l'émulateur.

+
+ +

Les machines virtuelles

+ +

Les machines virtuelles sont des applications qui s'exécutent sur le bureau de votre ordinateur et vous permettent d'exécuter les simulations de tous les systèmes d'exploitation, chacun compartimenté sur son propre disque dur virtuel (souvent représenté par un seul large fichier existant sur le disque dur de la machine hôte). Il y a plusieurs applis de machine virtuelle populaire, comme Parallels, VMWare, et Virtual Box; personnellement, nous préférons la dernière, parce qu'elle est gratuite.

+ +
+

Note : Nous avons besoin de beaucoup d'espace disponible sur le disque dur pour exécuter les émulations de machine virtuelle ; chaque système d'exploitation que vous émulez peut prendre beaucoup de mémoire. Vous aurez tendance à choisir l'espace de disque dur que vous voulez pour chaque installation ; vous pouvez vous en sortir avec environ 10Go, mais certaines sources recommandent d'augmenter à 50Go ou plus, alors le système d'exploitation s'éxécutera de façon fiable. Une bonne option fournit par la plupart des applis de machine virtuelle est de créer des disques durs à allocations dynamiques qui grossissent et rétrécissent en fonction que les besoins surviennent.

+
+ +

Pour utiliser Virtual Box, vous avez besoin de :

+ +
    +
  1. Procurez-vous un disque d'installation ou une image (par ex. un ISO) du système d'exploitation que vous voulez émuler. Virtual Box est en mesure de vous les fournir ; la plupart, comme les OSs de Windows, sont des produits commerciaux qui ne peuvent être distribués gratuitement.
    2. +
  2. Téléchargez l'installeur approprié pour votre système d'exploitation et installez-le.
    3. +
  3. Ouvrez l'appli ; vous verrez une vue ressemblant à ceci :
    4. +
  4. Pour créer une nouvelle machine virtuelle, appuyer sur le bouton Nouveau dans le coin en haut à gauche.
    5. +
  5. Suivez les instructions et remplissez les boîtes de dialogues suivantes comme il se doit. Vous allez : +
      +
    1. Donner un nom à votre machine virtuelle
      2. +
    2. Choisir un système d'exploitation et une version que vous allez installer dessus
      3. +
    3. Préciser combien de RAM doit être allouée (nous vous recommandons quelque chose comme 2048Mo, ou 2Go)
      4. +
    4. Créer un disque dur virtuel (choisissez les options pas défaut à travers les trois boîtes de dialogues contenant Créer un disque dur virtuel maintenant, IDV (image disque virtuelle), Allocation dynamique)
      5. +
    5. Choisissez l'emplacement du fichier et la taille du disque dur virtuel (choisir un nom sensé et un emplacement facile à garder, et pour la dimension préciser quelque chose autour de 50Go, ou autant que vous pensez que c'est nécessaire)
      6. +
    +
    6. +
+ +

Maintenant la nouvelle virtual box devrait apparaître dans le menu gauche de la fenêtre de l'interface principale de Virtual Box. A ce stade, vous pouvez double-cliquer dessus pour ouvrir la virtual box — cela commencera à démarrer la machine virtuelle, mais il n'y aura pas encore le système d'exploitation d'installé. A cet instant vous devez préciser à la boîte de dialogue l'image de votre programme d'installation, et les étapes s'exécuteront une par une dans la machine virtuelle, exactement comme si c'était un vrai ordinateur.

+ +

+ +
+

Attention : Vous devez vous assurez que vous avez l'image du système d'exploitation que vous voulez installer sur la machine virtuelle existante à ce stade, et l'installer complètement. Si vous annulé le processus à ce stade, cela peut rendre la machine virtuelle inutilisable, et vous amener à la supprimer et en créer une nouvelle. Ce n'est pas fatal, mais c'est ennuyant.

+
+ +

Une fois que le processus est complété, vous devriez avoir une machine virtuelle exécutant un système d'exploitation à l'intérieur d'une fenêtre sur votre ordinateur hôte.

+ +

+ +

Vous devez vous occuper de l'installation de ce système d'exploitation virtuel exactement comme d'une installation réelle — par exemple, de même que vous devez installer les navigateurs que vous voulez tester, installez un programme d'antivirus pour vous protégez des virus.

+ +

Avoir plusieurs machines virtuelles est très utile, particulièrement pour les test IE/Edge sur Windows — sur Windows, vous n'êtes pas autorisé à avoir de multiples versions du navigateur par défaut installé, donc vous pouvez vous construire une librairie de machines virtuelles afin de gérer les différents tests requis, par ex. :

+ + + +
+

Note : Une autre bonne chose à propos des machines virtuelles, c'est que les images de disque virtuel sont clairement autonomes. Si vous travaillez en équipe, vous pouvez créer une image disque, puis la copier et vous la passer. Assurez-vous juste d'avoir les licences requises pour exécuter toutes les copies de Windows ou qu'importe ce que vous exécutez, si c'est un produit licencié.

+
+ +

Automatisation et applis commerciales

+ +

Comme précisé dans le chapitre précédent, vous pouvez vous retirer beaucoup de peine concernant les tests de navigateur en utilisant un système d'automatisation. Vous pouvez configurer votre propre système d'automatisation de test (Selenium est devenue l'appli de choix la plus répandue), ce qui nécessite une certaine configuration, mais peut être très satisfaisant lorsque votre travail arrive à terme.

+ +

Il y a également des outils commercials disponibles comme Sauce Labs et Browser Stack qui font ce genre de choses pour vous, sans que vous ayez a vous souciez de la configuration, si vous êtes prêt à investir dans vos tests.

+ +

Nous aborderons comment utiliser de tels outils plus tard dans ce module.

+ +

Les tests utilisateurs

+ +

Avant de poursuivre, nous finirons cet article en abordant les tests utilisateurs — cela peut être une bonne option si vous avez un groupe d'utilisateurs volontaires pour tester votre nouvelle fonctionnalité. Ne perdez pas de vue que cela peut être aussi peu ou beaucoup sophistiqué que vous le désirez — votre groupe d'utilisateurs peut être un groupe d'amis, un groupe de collègues, ou un groupe de volontaires bénévoles ou rémunérés, cela dépend si vous avez de l'argent à dépenser en test.

+ +

La plupart du temps vous permettrez à vos utilisateurs de regarder la page ou la vue contenant la nouvelle fonctionnalité sur un serveur de développement, de cette manière vous n'exposez pas le site final ou les modifications en direct avant qu'il ne soit terminé. Vous devez leur recommander de suivre certaines étapes et de rapporter les résultats qu'ils ont obtenu. Il est important d'établir une liste d'étapes (parfois appelé script) vous aurez ainsi plus de résultats fiables se rapportant à ce que vous essayez de tester. Nous avons mentionné cela dans la section {{anch("What are you going to test")}} plus haut — c'est facile de transformer les critères de test détaillés ici en étapes à suivre. Par exemple, ce qui suit devrait fonctionner pour un utilisateur voyant :

+ + + +

Lorsque vous exécutez les tests, cela peut aussi être une bonne idée de :

+ + + +

Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en train de tester est aussi "pure" que possible. C-à-d qu'il n'y a rien d'installé qui pourrait affecter les résultats des tests.

+ +
+

Note : Une autre option faiblement utile, si vous avez le matériel disponible est de tester vos sites sur des téléphones bas de gammes/d'autres appareils — plus vos sites vont s'agrandir et les fonctionnalités avoir plus d'effets, plus vous avez des chances que votre site subisse des ralentissements, il vous faut donc prendre la performance comme une nouvelle considération importante. Essayer de faire marcher vos fonctionnalités sur des appareils bas de gamme, cela rendra l'expérience bien meilleure sur des appareils haut de gamme.

+
+ +
+

Note : Certains environnement de développement côté serveur fournissent des mécanismes très utiles pour sortir les modifications sur le site pour seulement un sous-ensemble d'utilisateurs, très utile pour sortir des fonctionnalités testées par un sous-ensemble d'utilisateurs sans avoir besoin de mettre en place un serveur de développement séparé. Un bon exemple est Django Waffle Flags.

+
+ +

Résumé

+ +

Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste.

+ +

La prochaine fois nous tournerons notre attention sur les problèmes concrets de votre code que vos tests peuvent révéler, en commençant avec le HTML et le CSS.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Introduction","Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/tools_and_testing/github/index.html b/files/fr/learn/tools_and_testing/github/index.html deleted file mode 100644 index 07494d8d8a..0000000000 --- a/files/fr/learn/tools_and_testing/github/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Git and GitHub -slug: Learn/Tools_and_testing/GitHub -tags: - - Apprendre - - Beginner - - Débutant - - GitHub - - Learn - - Web - - git -translation_of: Learn/Tools_and_testing/GitHub -original_slug: Apprendre/Outils_et_tests/GitHub ---- -
{{LearnSidebar}}
- -

Tous les développeurs utiliseront une sorte de système de contrôle des versions (version control system ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est Git, ainsi que GitHub, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.

- -

Vue d'ensemble

- -

Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel :

- - - -

Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. Git est un exrmple d'un tel système, et GitHub est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.

- -
-

Note : Git est en fait un système de contrôle des versions distribué, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.

-
- -
-

Vous cherchez à devenir un développeur web front-end ?

- -

Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.

- -

Commencer

-
- -

Prérequis

- -

Pour utiliser Git et GitHub, vous avez besoin :

- - - -

En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts !

- -

Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du PATH du système.

- -
-

Note : GitHub n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que GitLab que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.

-
- -

Guides

- -

Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours  consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.

- -
-
Hello World (de GitHub)
-
C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de commits ainsi qu'à l'ouverture et à la fusion de pull requests.
-
Git Handbook (de GitHub)
-
Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore.
-
Forking Projects (de GitHub)
-
Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment.
-
About Pull Requests (de GitHub)
-
Un guide utile pour apprendre à gérer les pull requests, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération.
-
Mastering issues (de GitHub)
-
Les issues (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des issues.
-
- -
-

Note : Il existe beaucoup d'autres choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme Flight rules for Git et Dangit, git!

-
- -

Voir aussi

- - diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md new file mode 100644 index 0000000000..07494d8d8a --- /dev/null +++ b/files/fr/learn/tools_and_testing/github/index.md @@ -0,0 +1,95 @@ +--- +title: Git and GitHub +slug: Learn/Tools_and_testing/GitHub +tags: + - Apprendre + - Beginner + - Débutant + - GitHub + - Learn + - Web + - git +translation_of: Learn/Tools_and_testing/GitHub +original_slug: Apprendre/Outils_et_tests/GitHub +--- +
{{LearnSidebar}}
+ +

Tous les développeurs utiliseront une sorte de système de contrôle des versions (version control system ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est Git, ainsi que GitHub, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.

+ +

Vue d'ensemble

+ +

Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel :

+ + + +

Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. Git est un exrmple d'un tel système, et GitHub est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.

+ +
+

Note : Git est en fait un système de contrôle des versions distribué, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.

+
+ +
+

Vous cherchez à devenir un développeur web front-end ?

+ +

Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.

+ +

Commencer

+
+ +

Prérequis

+ +

Pour utiliser Git et GitHub, vous avez besoin :

+ + + +

En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts !

+ +

Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du PATH du système.

+ +
+

Note : GitHub n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que GitLab que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.

+
+ +

Guides

+ +

Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours  consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.

+ +
+
Hello World (de GitHub)
+
C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de commits ainsi qu'à l'ouverture et à la fusion de pull requests.
+
Git Handbook (de GitHub)
+
Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore.
+
Forking Projects (de GitHub)
+
Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment.
+
About Pull Requests (de GitHub)
+
Un guide utile pour apprendre à gérer les pull requests, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération.
+
Mastering issues (de GitHub)
+
Les issues (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des issues.
+
+ +
+

Note : Il existe beaucoup d'autres choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme Flight rules for Git et Dangit, git!

+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/tools_and_testing/index.html b/files/fr/learn/tools_and_testing/index.html deleted file mode 100644 index 4eaf03b5c7..0000000000 --- a/files/fr/learn/tools_and_testing/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Outils et tests -slug: Learn/Tools_and_testing -tags: - - Accessibilité - - Apprendre - - Automatisation - - CSS - - Déboguage - - Débutant - - HTML - - JavaScript - - Outils - - tests -translation_of: Learn/Tools_and_testing -original_slug: Apprendre/Outils_et_tests ---- -
{{LearnSidebar}}
- -

Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.

- -

L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.

- -

Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.

- -
-

Note : parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.

-
- -

Parcours d'apprentissage

- -

Vous devriez vraiment apprendre les langages de base HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.

- -

Vous avez d'abord besoin d'une base solide.

- -

Modules

- -
-
Outils de développement web
-
Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.
-
Test à travers différents navigateurs
-
Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.
-
diff --git a/files/fr/learn/tools_and_testing/index.md b/files/fr/learn/tools_and_testing/index.md new file mode 100644 index 0000000000..4eaf03b5c7 --- /dev/null +++ b/files/fr/learn/tools_and_testing/index.md @@ -0,0 +1,43 @@ +--- +title: Outils et tests +slug: Learn/Tools_and_testing +tags: + - Accessibilité + - Apprendre + - Automatisation + - CSS + - Déboguage + - Débutant + - HTML + - JavaScript + - Outils + - tests +translation_of: Learn/Tools_and_testing +original_slug: Apprendre/Outils_et_tests +--- +
{{LearnSidebar}}
+ +

Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.

+ +

L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.

+ +

Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.

+ +
+

Note : parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.

+
+ +

Parcours d'apprentissage

+ +

Vous devriez vraiment apprendre les langages de base HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.

+ +

Vous avez d'abord besoin d'une base solide.

+ +

Modules

+ +
+
Outils de développement web
+
Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.
+
Test à travers différents navigateurs
+
Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.
+
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html deleted file mode 100644 index ff9e62f0b8..0000000000 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html +++ /dev/null @@ -1,488 +0,0 @@ ---- -title: Cours express sur la ligne de commande -slug: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line -tags: - - CLI - - Côté client - - Débutant - - Outils - - Terminal - - ligne de commande - - npm -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line -original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
- -

Au cours de tout process de développement, vous allez très certainement être confronté à la nécessité d'exécuter des commandes dans un terminal (ce que l'on appelle "travailler en ligne de commande"). Cet article vous propose une introduction au terminal et vous dévoile les commandes essentielles dont vous aurez besoin, la façon de les chaîner, et comment ajouter vos propres outils d'interface en ligne de commande (CLI, command line interface).

- - - - - - - - - - - - -
Prérequis : -

Être familiarisé avec les bases des langages

- HTML, CSS, et JavaScript.
Objectif : -

Comprendre ce qu'est la ligne de commande, savoir quelles sont les commandes de base que vous devriez connaître, et comment installer de nouveaux outils de ligne de commande.

-
- -

Bienvenue sur le terminal

- -

Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).

- -

Il existe de nombreux outils pour travailler en ligne de commande ; certains sont pré-installés sur votre système, et une infinité d'autres sont disponibles sur des dépôts de "paquets" (packages). Ces dépôts sont un peu comme des magasins spécialisés (pour la plupart) dans les outils de ligne de commande et les logiciels. Nous allons voir un peu plus loin dans ce chapitre comment installer certains de ces outils, et nous en apprendrons plus sur les dépôts de paquets dans le prochain chapitre.

- -

L'une des critiques les plus fréquentes envers la ligne de commande, c'est que l'utilisateur courant n'en a pratiquement aucune expérience. Se retrouver devant un terminal pour la première fois peut être vraiment intimidant : un écran vide, un curseur qui clignote, et rien ou presque pour vous aider à en tirer quelque chose.

- -

Malgré cette apparence rebutante, le terminal est pourtant un outil puissant, et nous pouvons vous promettre qu'avec une petite formation et un peu de pratique, son utilisation vous deviendra bien plus facile ! C'est la raison pour laquelle nous vous proposons ce chapitre - pour vous aider à démarrer dans cet environnement apparemment inhospitalier.

- -

.

- -

Quelle est l'origine du terminal ?

- -

Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia Terminal (informatique).

- -

Depuis, le terminal est resté un élément constant de tout système d'exploitation - des ordinateurs de bureau aux serveurs du cloud (qui n'est pas vraiment un nuage) en passant par les micro-cartes comme la Raspberry PI Zero et même les téléphones mobiles. Il offre un accès direct au système de fichiers de l'ordinateur et à des fonctionnalités de bas niveau, ce qui le rend incroyablement apte à accomplir rapidement des tâches complexes, à condition de savoir ce que vous faites.

- -

Il est également utile pour automatiser certaines tâches, comme par exemple modifier les titres de centaines de fichiers instantanément - par exemple changer tous les "ch01-xxxx.png" en "ch02-xxxx.png", ce qui vous prendrait un temps considérable si vous deviez le faire à la main dans la fenêtre d'un gestionnaire de fichiers.

- -

En tous cas, le terminal ne va pas disparaître de si tôt.

- -

À quoi ressemble un terminal ?

- -

Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.

- -

Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.

- -

A vanilla windows cmd line window, and a windows powershell window

- -

Et ci-dessous, vous pouvez voir l'application de terminal pour macOS.

- -

A basic vanilla mac terminal

- -

Comment ouvrir un terminal ?

- -

Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.

- -

Linux/Unix

- -

Comme indiqué plus haut, les systèmes Linux/Unix disposent d'un terminal par défaut, présent dans vos Applications.

- -

macOS

- -

macOS a un système nommé Darwin qui réside sous l'interface graphique. Darwin est un système de type Unix, qui fournit le terminal, et l'accès aux outils de bas niveau. Darwin est dans l'ensemble assez proche d'Unix pour ne pas nous causer trop de problèmes lors de notre progression dans cet article.

- -

Ce terminal est disponible sur macOS dans Applications/Utilitaires/Terminal.

- -

Windows

- -

Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent.

- -

Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.

- -

On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (voir ici pour l'installer), et Gitbash (qui fait partie de la trousse à outils git for Windows).

- -

Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle.

- -

Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la Windows Subsystem for Linux Documentation .

- -

a screenshot of the windows subsystem for linux documentation

- -

Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.

- -

En passant, quelle est la différence entre ligne de commande et terminal ?

- -

En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.

- -

Est-ce qu'il faut se servir du terminal?

- -

Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que Visual Studio Code vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.

- -

Les commandes intégrées de base

- -

Assez parlé — voyons maintenant quelques commandes utilisables dans un terminal ! Voici, clés en main, un petit aperçu de tout ce que l'on peut faire en ligne de commande, avec la référence des outils pertinents dans chaque cas :

- - - -
-

Note : On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).

-
- -

Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !

- - - -

Lorsque vous vous mettez sur la ligne de commande, vous allez inévitablement devoir naviguer vers un répertoire spécifique pour y "faire quelque chose". Tous les systèmes d'exploitation (du moins avec un paramétrage par défaut) démarrent leur terminal dans votre répertoire d'utilisateur, et il y a des chances pour que vous souhaitiez vous rendre de là à un autre emplacement.

- -

La commande cd vous permet de changer de répertoire (Change Directory). Techniquement, cd n'est pas un programme mais une commande intégrée. Cela signifie que votre système d'exploitation la fournit de façon native, et aussi que vous ne pouvez pas l'effacer accidentellement - bonne nouvelle ! Cela dit, vous n'avez pas besoin de vous soucier de savoir si une commande est intégrée ou non, mais vous pouvez garder à l'esprit que les commandes intégrées sont présentes sur les systèmes basés sur Unix.

- -

Pour changer de répertoire, vous tapez cd dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) Desktop se trouve dans votre répertoire utilisateur, vous allez donc taper cd Desktop (voir les copies d'écran ci-dessous).

- -

results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop

- -

Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :

- -
cd Bureau
- -

Si vous voulez revenir au répertoire précédent, utilisez les deux points :

- -
cd ..
- -
-

Note : Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.

-
- -

Si le répertoire que vous visez est placé assez loin dans l'arborisation des fichiers, il vous faut connaître le chemin (on dit souvent path, qui est le terme anglais) pour vous y rendre. Cela devient en général plus facile à mesure que vous vous familiarisez avec la structure de votre système de fichiers, mais si vous n'êtes pas sûr vous pouvez le retrouver en combinant la commande ls avec des clicks dans votre Explorer ou autre gestionnaire graphique de fichiers, ce qui va vous permettre de voir où se trouve le répertoire (ou dossier) cherché par rapport à votre répertoire actuel (= répertoire courant).

- -

Par exemple, si vous vouliez aller dans un dossier nommé src, qui se trouve dans un dossier nommé projet, qui est lui-même sur le Bureau, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :

- -
cd Bureau
-cd projet
-cd src
- -

Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :

- -
cd Bureau/projet/src
- -

Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple /Utilisateurs/votre-nom/Bureau. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".

- -
-

Note : Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.

-
- -

Lister le contenu d'un répertoire

- -

ls (de l'anglais list) est la commande intégrée Unix qui va vous permettre de lister le contenu du répertoire dans lequel vous vous trouvez. Notez que cela ne fonctionnera pas avec l'invite de commande par défaut de Windows (cmd) — la commande équivalente est dir.

- -

Essayez de taper ceci dans votre terminal :

- -
ls
- -

Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.

- -

Présentation des options de commandes

- -

La plupart des commandes de terminal possèdent des options - ce sont des modificateurs que vous ajoutez à la fin d'une commande pour obtenir un comportement légèrement différent. Il s'agit en général d'un espace suivi d'un tiret puis d'une ou de plusieurs lettres.

- -

Voyez par exemple ce que vous obtenez en essayant ceci :

- -
ls -l
- -

Avec ls, l'option -l (tiret l, "dash ell" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande cd.

- -

Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande ls -l :

- -

A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command

- -
-

Note : Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).

-
- -
-

Note : Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !

-
- -

Maintenant que vous connaissez ces deux commandes fondamentales, allez un peu fouiller dans votre système de fichiers en naviguant à partir de votre répertoire.

- -

Créer, copier, déplacer, supprimer

- -

Il y existe un certain nombre d'autres commandes d'utilité basique dont vous allez probablement pas mal vous servir en travaillant sur un terminal. Elles sont assez simples, aussi nous n'allons pas les expliquer avec autant de détails que les deux précédentes.

- -

Jouez avec elles dans un répertoire que vous aurez créé quelque part de façon à ne pas effacer accidentellement quoi que ce soit d'important, en vous servant des exemples donnés pour vous guider :

- - - -
-

Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.

-
- -

Le terminal — une pratique à risque ?

- -

Nous y avons déjà fait allusion, et soyons clairs - travailler sur terminal demande de la prudence. Des commandes simples ne présentent pas trop de risques, mais dès que vous commencez à combiner des commandes plus complexes, il vous faut réfléchir soigneusement à ce qu'elle va exécuter, et essayer de la tester avant de la lancer effectivement dans le répertoire voulu.

- -

Supposons que vous ayez 1000 fichiers texte dans un répertoire, et que vous vouliez les parcourir en supprimant uniquement ceux dont le nom comprend une certaine chaîne de caractères. Si vous ne faites pas attention, vous risquez d'effacer quelque chose d'important et de perdre du coup une somme de travail. Une bonne habitude à prendre consiste à écrire votre ligne de commande dans un éditeur de texte, à la construire à votre idée, et ensuite à faire une copie de sauvegarde de votre répertoire avant d'essayer la commande sur celui-ci.

- -

Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site Glitch.com est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.

- -

a double screenshot showing the glitch.com home page, and the glitch terminal emulator

- -

Le site tldr.sh est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.

- -

Dans la section suivante, nous allons monter d'un cran (et même de plusieurs), et voir comment nous pouvons combiner plusieurs outils en ligne de commande pour révéler toute la puissance du terminal par rapport à l'interface graphique habituelle.

- -

Combiner des commandes grâce aux "pipes"

- -

L'usage du terminal prend toute sa valeur lorsque vous commencez à chaîner les commandes en utilisant le symbole | ("pipe" ou "tuyau" en français). Voyons comment on peut faire cela sur un exemple très rapide.

- -

Nous avons déjà vu ls, qui liste le contenu du répertoire courant :

- -
ls
- -

Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? ls n'est pas capable de faire cela à lui seul.

- -

Il existe un autre outil Unix nommé wc. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de monfichier.txt :

- -
wc -l monfichier.txt
- -

Mais wc est également capable de compter les lignes de tout ce qui lui est passé par un pipe. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande ls (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :

- -
ls | wc -l
- -

Comme ls affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.

- -

Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou STDOUT). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou STDIN).

- -

L'opérateur pipe peut connecter ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, ls enverrait normalement sa sortie sur STDOUT, mais au lieu de cela la sortie de ls est passée par un pipe à wc, qui la prend en entrée, compte ses lignes et imprime ce décompte sur STDOUT.

- -

Un exemple un peu plus complexe

- -

Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande curl (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur https://developer.mozilla.org/fr/docs/Web/API/fetch.

- -

En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

- -

Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :

- -
curl https://developer.mozilla.org/fr/docs/Web/API/fetch
- -

Nous devons dire explicitement à curl de suivre les redirections en utilisant l'option -L.

- -

Examinons également les en-têtes retournées par developer.mozilla.org en utilisant l'option -I de curl, et affichons toutes les redirections en passant la sortie de curl à grep grâce à un pipe (on va demander à grep de renvoyer toutes les lignes qui contiennent le mot "location").

- -

Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :

- -
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
- -

Votre sortie devrait ressembler à ceci (curl va d'abord afficher des compteurs et autres informations de téléchargement) :

- -
location: /fr/docs/Web/API/fetch
-location: /fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-location: /fr/docs/Web/API/GlobalFetch/fetch
-location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch
- -

Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer location: par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter awk à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).

- -

Essayez de lancer cette commande :

- -
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
- -

Votre sortie finale devrait ressembler à ceci :

- -
https://developer.mozilla.org/fr/docs/Web/API/fetch
-https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch
-https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch
- -

En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL /docs/Web/API/fetch.
- Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.

- -

Ajoutez des super-pouvoirs !

- -

À présent que nous avons jeté un œil à quelques-unes des commandes intégrées dont votre système est pré-équipé, voyons comment installer un outil tiers de CLI et nous en servir.

- -

La plus grande partie du vaste écosystème d'outils installables pour le développement web front-end se trouve sous npm, un service privé d'hébergement de packages qui fonctionne en étroite interaction avec Node.js. Celui-ci se développe peu à peu — vous pouvez vous attendre à davantage de fournisseurs de packages avec le temps.

- -

L'installation de Node.js installe en même temps l'outil de ligne de commande npm (ainsi que npx, un outil supplémentaire centré sur npm), qui est la porte d'entrée pour l'installation d'outils de ligne de commande additionnels. Node.js et npm fonctionnent de la même façon sur tous les systèmes : macOS, Windows, ainsi que Linux.

- -

Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.

- -

the node.js installer on windows, showing the option to include npm

- -

Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur Prettier. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif.

- -

Où installer nos outils de CLI ?

- -

Avant de nous lancer dans l'installation de Prettier, une question se pose — "où allons-nous l'installer ?"

- -

npm nous donne le choix entre une installation globale — ce qui nous permet d'y avoir accès de n'importe où — ou bien locale, dans le dossier du projet en cours.

- -

Il y a des pour et des contre pour les deux options — la liste ci-dessous est loin d'être exhaustive:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Pour l'installation globaleContre l'installation globale
Accessible partout dans votre terminalPeut ne pas être compatible avec votre codebase.
Installation en une foisLes autres développeurs de votre équipe n'auront pas accès à ces outils, par exemple si vous partagez votre codebase sur un outil comme git.
Moins d'espace disqueEn lien avec le point précédent, rend le code du projet plus difficile à répliquer (si vous installez vos outils en local, ils peuvent être configurés comme des dépendances et installés avec npm install).
Stabilité de la version
Donne l'impression d'être une commande unix comme les autres
- -

Bien que la liste des contre soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.

- -

Installation de Prettier

- -

Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.

- -

Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.

- -

Prettier offre les avantages suivants :

- - - -

Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :

- -
npm install --global prettier
- -

Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.

- -

En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :

- -
prettier
- -

La sortie devrait ressembler à ceci :

- -
Usage: prettier [options] [file/glob ...]
-
-By default, output is written to stdout.
-Stdin is read if it is piped to Prettier and no files are given.
-
-…
- -

Cela vaut toujours la peine d'au moins survoler les informations sur l'utilisation, même lorsqu'elles sont longues. Vous pourrez ainsi mieux comprendre à quoi l'outil est censé servir.

- -

Un peu de pratique

- -

Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.

- -

Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé prettier-test sur votre Bureau.

- -

Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom index.js.

- -
const myObj = {
-a:1,b:{c:2}}
-function printMe(obj){console.log(obj.b.c)}
-printMe(myObj)
- -

Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec cd et essayez de lancer cette commande :

- -
prettier --check index.js
- -

Vous devriez obtenir quelque chose comme

- -
Checking formatting...
-index.js
-Code style issues found in the above file(s). Forgot to run Prettier?
-
- -

Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option --write à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.

- -

Essayez maintenant de lancer cette version de la commande :

- -
prettier --write index.js
- -

La sortie ressemble maintenant à ceci

- -
Checking formatting...
-index.js
-Code style issues fixed in the above file(s).
- -

Mais le plus important, c'est que votre fichier JavaScript a été reformaté :

- -
const myObj = {
-  a: 1,
-  b: { c: 2 },
-};
-function printMe(obj) {
-  console.log(obj.b.c);
-}
-printMe(myObj);
- -

Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.

- -

Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :

- - - -

Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.

- -

Autres outils à essayer

- -

Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :

- - - -

L'auteur a aussi décrit certains de ses favoris accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.

- -

Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.

- -

Résumé

- -

Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md new file mode 100644 index 0000000000..ff9e62f0b8 --- /dev/null +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md @@ -0,0 +1,488 @@ +--- +title: Cours express sur la ligne de commande +slug: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line +tags: + - CLI + - Côté client + - Débutant + - Outils + - Terminal + - ligne de commande + - npm +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line +original_slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
+ +

Au cours de tout process de développement, vous allez très certainement être confronté à la nécessité d'exécuter des commandes dans un terminal (ce que l'on appelle "travailler en ligne de commande"). Cet article vous propose une introduction au terminal et vous dévoile les commandes essentielles dont vous aurez besoin, la façon de les chaîner, et comment ajouter vos propres outils d'interface en ligne de commande (CLI, command line interface).

+ + + + + + + + + + + + +
Prérequis : +

Être familiarisé avec les bases des langages

+ HTML, CSS, et JavaScript.
Objectif : +

Comprendre ce qu'est la ligne de commande, savoir quelles sont les commandes de base que vous devriez connaître, et comment installer de nouveaux outils de ligne de commande.

+
+ +

Bienvenue sur le terminal

+ +

Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).

+ +

Il existe de nombreux outils pour travailler en ligne de commande ; certains sont pré-installés sur votre système, et une infinité d'autres sont disponibles sur des dépôts de "paquets" (packages). Ces dépôts sont un peu comme des magasins spécialisés (pour la plupart) dans les outils de ligne de commande et les logiciels. Nous allons voir un peu plus loin dans ce chapitre comment installer certains de ces outils, et nous en apprendrons plus sur les dépôts de paquets dans le prochain chapitre.

+ +

L'une des critiques les plus fréquentes envers la ligne de commande, c'est que l'utilisateur courant n'en a pratiquement aucune expérience. Se retrouver devant un terminal pour la première fois peut être vraiment intimidant : un écran vide, un curseur qui clignote, et rien ou presque pour vous aider à en tirer quelque chose.

+ +

Malgré cette apparence rebutante, le terminal est pourtant un outil puissant, et nous pouvons vous promettre qu'avec une petite formation et un peu de pratique, son utilisation vous deviendra bien plus facile ! C'est la raison pour laquelle nous vous proposons ce chapitre - pour vous aider à démarrer dans cet environnement apparemment inhospitalier.

+ +

.

+ +

Quelle est l'origine du terminal ?

+ +

Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia Terminal (informatique).

+ +

Depuis, le terminal est resté un élément constant de tout système d'exploitation - des ordinateurs de bureau aux serveurs du cloud (qui n'est pas vraiment un nuage) en passant par les micro-cartes comme la Raspberry PI Zero et même les téléphones mobiles. Il offre un accès direct au système de fichiers de l'ordinateur et à des fonctionnalités de bas niveau, ce qui le rend incroyablement apte à accomplir rapidement des tâches complexes, à condition de savoir ce que vous faites.

+ +

Il est également utile pour automatiser certaines tâches, comme par exemple modifier les titres de centaines de fichiers instantanément - par exemple changer tous les "ch01-xxxx.png" en "ch02-xxxx.png", ce qui vous prendrait un temps considérable si vous deviez le faire à la main dans la fenêtre d'un gestionnaire de fichiers.

+ +

En tous cas, le terminal ne va pas disparaître de si tôt.

+ +

À quoi ressemble un terminal ?

+ +

Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.

+ +

Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d'options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.

+ +

A vanilla windows cmd line window, and a windows powershell window

+ +

Et ci-dessous, vous pouvez voir l'application de terminal pour macOS.

+ +

A basic vanilla mac terminal

+ +

Comment ouvrir un terminal ?

+ +

Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.

+ +

Linux/Unix

+ +

Comme indiqué plus haut, les systèmes Linux/Unix disposent d'un terminal par défaut, présent dans vos Applications.

+ +

macOS

+ +

macOS a un système nommé Darwin qui réside sous l'interface graphique. Darwin est un système de type Unix, qui fournit le terminal, et l'accès aux outils de bas niveau. Darwin est dans l'ensemble assez proche d'Unix pour ne pas nous causer trop de problèmes lors de notre progression dans cet article.

+ +

Ce terminal est disponible sur macOS dans Applications/Utilitaires/Terminal.

+ +

Windows

+ +

Comme pour d'autres outils de programmation, c'est un peu une tradition pour Windows de ne pas faciliter l'utilisation du terminal (ou ligne de commande) par rapport à d'autres systèmes d'exploitation. Mais les choses s'améliorent.

+ +

Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l'invite de commande »), mais celui-ci n'est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.

+ +

On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (voir ici pour l'installer), et Gitbash (qui fait partie de la trousse à outils git for Windows).

+ +

Quoi qu'il en soit, aujourd'hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d'exploitation Linux directement dans Windows 10, ce qui vous permet d'avoir un « vrai terminal », sans recourir à une machine virtuelle.

+ +

Vous pouvez l'installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la Windows Subsystem for Linux Documentation .

+ +

a screenshot of the windows subsystem for linux documentation

+ +

Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l'invite de commande par défaut (« cmd »), et faire tourner pas mal d'outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.

+ +

En passant, quelle est la différence entre ligne de commande et terminal ?

+ +

En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l'invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.

+ +

Est-ce qu'il faut se servir du terminal?

+ +

Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que Visual Studio Code vous allez avoir accès à une quantité d'extensions que vous pourrez utiliser pour vous aider dans l'édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.

+ +

Les commandes intégrées de base

+ +

Assez parlé — voyons maintenant quelques commandes utilisables dans un terminal ! Voici, clés en main, un petit aperçu de tout ce que l'on peut faire en ligne de commande, avec la référence des outils pertinents dans chaque cas :

+ + + +
+

Note : On trouve sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).

+
+ +

Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !

+ + + +

Lorsque vous vous mettez sur la ligne de commande, vous allez inévitablement devoir naviguer vers un répertoire spécifique pour y "faire quelque chose". Tous les systèmes d'exploitation (du moins avec un paramétrage par défaut) démarrent leur terminal dans votre répertoire d'utilisateur, et il y a des chances pour que vous souhaitiez vous rendre de là à un autre emplacement.

+ +

La commande cd vous permet de changer de répertoire (Change Directory). Techniquement, cd n'est pas un programme mais une commande intégrée. Cela signifie que votre système d'exploitation la fournit de façon native, et aussi que vous ne pouvez pas l'effacer accidentellement - bonne nouvelle ! Cela dit, vous n'avez pas besoin de vous soucier de savoir si une commande est intégrée ou non, mais vous pouvez garder à l'esprit que les commandes intégrées sont présentes sur les systèmes basés sur Unix.

+ +

Pour changer de répertoire, vous tapez cd dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) Desktop se trouve dans votre répertoire utilisateur, vous allez donc taper cd Desktop (voir les copies d'écran ci-dessous).

+ +

results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop

+ +

Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :

+ +
cd Bureau
+ +

Si vous voulez revenir au répertoire précédent, utilisez les deux points :

+ +
cd ..
+ +
+

Note : Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.

+
+ +

Si le répertoire que vous visez est placé assez loin dans l'arborisation des fichiers, il vous faut connaître le chemin (on dit souvent path, qui est le terme anglais) pour vous y rendre. Cela devient en général plus facile à mesure que vous vous familiarisez avec la structure de votre système de fichiers, mais si vous n'êtes pas sûr vous pouvez le retrouver en combinant la commande ls avec des clicks dans votre Explorer ou autre gestionnaire graphique de fichiers, ce qui va vous permettre de voir où se trouve le répertoire (ou dossier) cherché par rapport à votre répertoire actuel (= répertoire courant).

+ +

Par exemple, si vous vouliez aller dans un dossier nommé src, qui se trouve dans un dossier nommé projet, qui est lui-même sur le Bureau, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :

+ +
cd Bureau
+cd projet
+cd src
+ +

Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :

+ +
cd Bureau/projet/src
+ +

Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple /Utilisateurs/votre-nom/Bureau. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".

+ +
+

Note : Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.

+
+ +

Lister le contenu d'un répertoire

+ +

ls (de l'anglais list) est la commande intégrée Unix qui va vous permettre de lister le contenu du répertoire dans lequel vous vous trouvez. Notez que cela ne fonctionnera pas avec l'invite de commande par défaut de Windows (cmd) — la commande équivalente est dir.

+ +

Essayez de taper ceci dans votre terminal :

+ +
ls
+ +

Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.

+ +

Présentation des options de commandes

+ +

La plupart des commandes de terminal possèdent des options - ce sont des modificateurs que vous ajoutez à la fin d'une commande pour obtenir un comportement légèrement différent. Il s'agit en général d'un espace suivi d'un tiret puis d'une ou de plusieurs lettres.

+ +

Voyez par exemple ce que vous obtenez en essayant ceci :

+ +
ls -l
+ +

Avec ls, l'option -l (tiret l, "dash ell" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande cd.

+ +

Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande ls -l :

+ +

A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command

+ +
+

Note : Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).

+
+ +
+

Note : Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !

+
+ +

Maintenant que vous connaissez ces deux commandes fondamentales, allez un peu fouiller dans votre système de fichiers en naviguant à partir de votre répertoire.

+ +

Créer, copier, déplacer, supprimer

+ +

Il y existe un certain nombre d'autres commandes d'utilité basique dont vous allez probablement pas mal vous servir en travaillant sur un terminal. Elles sont assez simples, aussi nous n'allons pas les expliquer avec autant de détails que les deux précédentes.

+ +

Jouez avec elles dans un répertoire que vous aurez créé quelque part de façon à ne pas effacer accidentellement quoi que ce soit d'important, en vous servant des exemples donnés pour vous guider :

+ + + +
+

Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.

+
+ +

Le terminal — une pratique à risque ?

+ +

Nous y avons déjà fait allusion, et soyons clairs - travailler sur terminal demande de la prudence. Des commandes simples ne présentent pas trop de risques, mais dès que vous commencez à combiner des commandes plus complexes, il vous faut réfléchir soigneusement à ce qu'elle va exécuter, et essayer de la tester avant de la lancer effectivement dans le répertoire voulu.

+ +

Supposons que vous ayez 1000 fichiers texte dans un répertoire, et que vous vouliez les parcourir en supprimant uniquement ceux dont le nom comprend une certaine chaîne de caractères. Si vous ne faites pas attention, vous risquez d'effacer quelque chose d'important et de perdre du coup une somme de travail. Une bonne habitude à prendre consiste à écrire votre ligne de commande dans un éditeur de texte, à la construire à votre idée, et ensuite à faire une copie de sauvegarde de votre répertoire avant d'essayer la commande sur celui-ci.

+ +

Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site Glitch.com est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.

+ +

a double screenshot showing the glitch.com home page, and the glitch terminal emulator

+ +

Le site tldr.sh est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.

+ +

Dans la section suivante, nous allons monter d'un cran (et même de plusieurs), et voir comment nous pouvons combiner plusieurs outils en ligne de commande pour révéler toute la puissance du terminal par rapport à l'interface graphique habituelle.

+ +

Combiner des commandes grâce aux "pipes"

+ +

L'usage du terminal prend toute sa valeur lorsque vous commencez à chaîner les commandes en utilisant le symbole | ("pipe" ou "tuyau" en français). Voyons comment on peut faire cela sur un exemple très rapide.

+ +

Nous avons déjà vu ls, qui liste le contenu du répertoire courant :

+ +
ls
+ +

Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? ls n'est pas capable de faire cela à lui seul.

+ +

Il existe un autre outil Unix nommé wc. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de monfichier.txt :

+ +
wc -l monfichier.txt
+ +

Mais wc est également capable de compter les lignes de tout ce qui lui est passé par un pipe. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande ls (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :

+ +
ls | wc -l
+ +

Comme ls affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.

+ +

Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou STDOUT). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou STDIN).

+ +

L'opérateur pipe peut connecter ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, ls enverrait normalement sa sortie sur STDOUT, mais au lieu de cela la sortie de ls est passée par un pipe à wc, qui la prend en entrée, compte ses lignes et imprime ce décompte sur STDOUT.

+ +

Un exemple un peu plus complexe

+ +

Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande curl (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur https://developer.mozilla.org/fr/docs/Web/API/fetch.

+ +

En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

+ +

Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :

+ +
curl https://developer.mozilla.org/fr/docs/Web/API/fetch
+ +

Nous devons dire explicitement à curl de suivre les redirections en utilisant l'option -L.

+ +

Examinons également les en-têtes retournées par developer.mozilla.org en utilisant l'option -I de curl, et affichons toutes les redirections en passant la sortie de curl à grep grâce à un pipe (on va demander à grep de renvoyer toutes les lignes qui contiennent le mot "location").

+ +

Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :

+ +
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
+ +

Votre sortie devrait ressembler à ceci (curl va d'abord afficher des compteurs et autres informations de téléchargement) :

+ +
location: /fr/docs/Web/API/fetch
+location: /fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+location: /fr/docs/Web/API/GlobalFetch/fetch
+location: /fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+ +

Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer location: par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter awk à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).

+ +

Essayez de lancer cette commande :

+ +
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
+ +

Votre sortie finale devrait ressembler à ceci :

+ +
https://developer.mozilla.org/fr/docs/Web/API/fetch
+https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch
+https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+ +

En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL /docs/Web/API/fetch.
+ Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.

+ +

Ajoutez des super-pouvoirs !

+ +

À présent que nous avons jeté un œil à quelques-unes des commandes intégrées dont votre système est pré-équipé, voyons comment installer un outil tiers de CLI et nous en servir.

+ +

La plus grande partie du vaste écosystème d'outils installables pour le développement web front-end se trouve sous npm, un service privé d'hébergement de packages qui fonctionne en étroite interaction avec Node.js. Celui-ci se développe peu à peu — vous pouvez vous attendre à davantage de fournisseurs de packages avec le temps.

+ +

L'installation de Node.js installe en même temps l'outil de ligne de commande npm (ainsi que npx, un outil supplémentaire centré sur npm), qui est la porte d'entrée pour l'installation d'outils de ligne de commande additionnels. Node.js et npm fonctionnent de la même façon sur tous les systèmes : macOS, Windows, ainsi que Linux.

+ +

Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.

+ +

the node.js installer on windows, showing the option to include npm

+ +

Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur Prettier. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept "peu d'options" peut se révéler très attractif.

+ +

Où installer nos outils de CLI ?

+ +

Avant de nous lancer dans l'installation de Prettier, une question se pose — "où allons-nous l'installer ?"

+ +

npm nous donne le choix entre une installation globale — ce qui nous permet d'y avoir accès de n'importe où — ou bien locale, dans le dossier du projet en cours.

+ +

Il y a des pour et des contre pour les deux options — la liste ci-dessous est loin d'être exhaustive:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Pour l'installation globaleContre l'installation globale
Accessible partout dans votre terminalPeut ne pas être compatible avec votre codebase.
Installation en une foisLes autres développeurs de votre équipe n'auront pas accès à ces outils, par exemple si vous partagez votre codebase sur un outil comme git.
Moins d'espace disqueEn lien avec le point précédent, rend le code du projet plus difficile à répliquer (si vous installez vos outils en local, ils peuvent être configurés comme des dépendances et installés avec npm install).
Stabilité de la version
Donne l'impression d'être une commande unix comme les autres
+ +

Bien que la liste des contre soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.

+ +

Installation de Prettier

+ +

Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.

+ +

Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.

+ +

Prettier offre les avantages suivants :

+ + + +

Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :

+ +
npm install --global prettier
+ +

Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.

+ +

En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :

+ +
prettier
+ +

La sortie devrait ressembler à ceci :

+ +
Usage: prettier [options] [file/glob ...]
+
+By default, output is written to stdout.
+Stdin is read if it is piped to Prettier and no files are given.
+
+…
+ +

Cela vaut toujours la peine d'au moins survoler les informations sur l'utilisation, même lorsqu'elles sont longues. Vous pourrez ainsi mieux comprendre à quoi l'outil est censé servir.

+ +

Un peu de pratique

+ +

Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.

+ +

Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé prettier-test sur votre Bureau.

+ +

Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom index.js.

+ +
const myObj = {
+a:1,b:{c:2}}
+function printMe(obj){console.log(obj.b.c)}
+printMe(myObj)
+ +

Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec cd et essayez de lancer cette commande :

+ +
prettier --check index.js
+ +

Vous devriez obtenir quelque chose comme

+ +
Checking formatting...
+index.js
+Code style issues found in the above file(s). Forgot to run Prettier?
+
+ +

Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option --write à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.

+ +

Essayez maintenant de lancer cette version de la commande :

+ +
prettier --write index.js
+ +

La sortie ressemble maintenant à ceci

+ +
Checking formatting...
+index.js
+Code style issues fixed in the above file(s).
+ +

Mais le plus important, c'est que votre fichier JavaScript a été reformaté :

+ +
const myObj = {
+  a: 1,
+  b: { c: 2 },
+};
+function printMe(obj) {
+  console.log(obj.b.c);
+}
+printMe(myObj);
+ +

Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.

+ +

Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :

+ + + +

Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.

+ +

Autres outils à essayer

+ +

Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :

+ + + +

L'auteur a aussi décrit certains de ses favoris accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.

+ +

Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.

+ +

Résumé

+ +

Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html deleted file mode 100644 index e19a510d2f..0000000000 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Understanding client-side web development tools -slug: Learn/Tools_and_testing/Understanding_client-side_tools -tags: - - Beginner - - CSS - - Deployment - - HTML - - JavaScript - - Learn - - Tools - - TopicStub - - Transformation - - client-side - - linting -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools ---- -
{{LearnSidebar}}
- -

Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.

- -

Conditions prérequises

- -

Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils détaillés ici.

- -

Guides

- -
-
Vue d'ensemble de l'outillage côté client
-
Dans cet article, nous vous proposons un aperçu des outils Web modernes, des types d'outils disponibles et de l'endroit où vous les rencontrerez dans le cycle de vie du développement d'applications Web, et comment trouver de l'aide sur des outils individuels.
-
Cours intensif en ligne de commande
-
Dans votre processus de développement, vous devrez sans aucun doute exécuter une commande dans le terminal (ou sur la "ligne de commande" - ce sont en fait la même chose). Cet article fournit une introduction au terminal, les commandes essentielles que vous devrez y saisir, comment enchaîner des commandes et comment ajouter vos propres outils d'interface de ligne de commande (CLI).
-
Principes de base de la gestion des paquets
-
Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc.
-
Introduction d'une chaîne d'outils complète
-
Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.
-
Déployer notre application
-
Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus.
-
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md new file mode 100644 index 0000000000..e19a510d2f --- /dev/null +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md @@ -0,0 +1,39 @@ +--- +title: Understanding client-side web development tools +slug: Learn/Tools_and_testing/Understanding_client-side_tools +tags: + - Beginner + - CSS + - Deployment + - HTML + - JavaScript + - Learn + - Tools + - TopicStub + - Transformation + - client-side + - linting +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools +--- +
{{LearnSidebar}}
+ +

Les outils côté client peuvent être intimidants, mais cette série d'articles vise à illustrer le but de certains des types d'outils côté client les plus courants, à expliquer les outils que vous pouvez enchaîner, comment les installer à l'aide de gestionnaires de packages et les contrôler à l'aide de la ligne de commande. Nous terminons en fournissant un exemple complet de chaîne d'outils vous montrant comment devenir productif.

+ +

Conditions prérequises

+ +

Vous devez vraiment apprendre les bases des langages HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils détaillés ici.

+ +

Guides

+ +
+
Vue d'ensemble de l'outillage côté client
+
Dans cet article, nous vous proposons un aperçu des outils Web modernes, des types d'outils disponibles et de l'endroit où vous les rencontrerez dans le cycle de vie du développement d'applications Web, et comment trouver de l'aide sur des outils individuels.
+
Cours intensif en ligne de commande
+
Dans votre processus de développement, vous devrez sans aucun doute exécuter une commande dans le terminal (ou sur la "ligne de commande" - ce sont en fait la même chose). Cet article fournit une introduction au terminal, les commandes essentielles que vous devrez y saisir, comment enchaîner des commandes et comment ajouter vos propres outils d'interface de ligne de commande (CLI).
+
Principes de base de la gestion des paquets
+
Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc.
+
Introduction d'une chaîne d'outils complète
+
Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code.
+
Déployer notre application
+
Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus.
+
-- cgit v1.2.3-54-g00ecf